Xamarin.ios MenuItemXamarin.Forms MenuItem

샘플 다운로드 샘플 다운로드Download Sample Download the sample

Xamarin.ios MenuItem 클래스는 ListView 항목 컨텍스트 메뉴 및 셸 응용 프로그램 플라이 아웃 메뉴와 같은 메뉴에 대 한 메뉴 항목을 정의 합니다.The Xamarin.Forms MenuItem class defines menu items for menus such as ListView item context menus and Shell application flyout menus.

다음 스크린샷에는 iOS 및 Android의 ListView 상황에 맞는 메뉴에 MenuItem 개체가 나와 있습니다.The following screenshots show MenuItem objects in a ListView context menu on iOS and Android:

"IOS 및 Android에서 Menuitem""MenuItems on iOS and Android"

@No__t_0 클래스는 다음 속성을 정의 합니다.The MenuItem class defines the following properties:

  • Command 는 핑거 탭 또는 클릭과 같은 사용자 동작을 viewmodel에 정의 된 명령에 바인딩할 수 있는 ICommand입니다.Command is an ICommand that allows binding user actions, such as finger taps or clicks, to commands defined on a viewmodel.
  • CommandParameterCommand에 전달 되어야 하는 매개 변수를 지정 하는 object입니다.CommandParameter is an object that specifies the parameter that should be passed to the Command.
  • IconImageSource 는 표시 아이콘을 정의 하는 ImageSource 값입니다.IconImageSource is an ImageSource value that defines the display icon.
  • IsDestructiveMenuItem 연결 된 UI 요소를 목록에서 제거할지 여부를 나타내는 bool 값입니다.IsDestructive is a bool value that indicates whether the MenuItem removes its associated UI element from the list.
  • IsEnabled 은이 개체가 사용자 입력에 응답 하는지 여부를 결정 하는 bool 값입니다.IsEnabled is a bool value that determines whether this object responds to user input.
  • Text 은 표시 텍스트를 지정 하는 string 값입니다.Text is a string value that specifies the display text.

이러한 속성은 BindableProperty 개체에 의해 지원 되므로 MenuItem 인스턴스가 데이터 바인딩의 대상이 될 수 있습니다.These properties are backed by BindableProperty objects so the MenuItem instance can be the target of data bindings.

MenuItem 만들기Create a MenuItem

MenuItem 개체는 ListView 개체의 항목에 대 한 상황에 맞는 메뉴 내에서 사용할 수 있습니다.MenuItem objects can be used within a context menu on a ListView object's items. 가장 일반적인 패턴은 ListViews ItemTemplate에 대 한 DataTemplate 개체로 사용 되는 ViewCell 인스턴스 내에 MenuItem 개체를 만드는 것입니다.The most common pattern is to create MenuItem objects within a ViewCell instance, which is used as the DataTemplate object for the ListViews ItemTemplate. @No__t_0 개체가 채워지면 DataTemplate를 사용 하 여 각 항목을 만들고, 항목에 대해 상황에 맞는 메뉴가 활성화 될 때 MenuItem 선택 항목을 노출 합니다.When the ListView object is populated it will create each item using the DataTemplate, exposing the MenuItem choices when the context menu is activated for an item.

다음 예제에서는 ListView 개체의 컨텍스트 내에서 MenuItem 인스턴스화를 보여 줍니다.The following example shows MenuItem instantiation within the context of a ListView object:

<ListView>
    <ListView.ItemTemplate>
        <DataTemplate>
            <ViewCell>
                <ViewCell.ContextActions>
                    <MenuItem Text="Context Menu Option" />
                </ViewCell.ContextActions>
                <Label Text="{Binding .}" />
            </ViewCell>
        </DataTemplate>
    </ListView.ItemTemplate>
</ListView>

@No__t_0 코드에서 만들 수도 있습니다.A MenuItem can also be created in code:

// A function returns a ViewCell instance that
// is used as the template for each list item
DataTemplate dataTemplate = new DataTemplate(() =>
{
    // A Label displays the list item text
    Label label = new Label();
    label.SetBinding(Label.TextProperty, ".");

    // A ViewCell serves as the DataTemplate
    ViewCell viewCell = new ViewCell
    {
        View = label
    };

    // Add a MenuItem instance to the ContextActions
    MenuItem menuItem = new MenuItem
    {
        Text = "Context Menu Option"
    };
    viewCell.ContextActions.Add(menuItem);

    // The function returns the custom ViewCell
    // to the DataTemplate constructor
    return viewCell;
});

// Finally, the dataTemplate is provided to
// the ListView object
ListView listView = new ListView
{
    ...
    ItemTemplate = dataTemplate
};

이벤트를 사용 하 여 MenuItem 동작 정의Define MenuItem behavior with events

MenuItem 클래스는 Clicked 이벤트를 노출합니다.The MenuItem class exposes a Clicked event. 이벤트 처리기를이 이벤트에 연결 하 여 XAML의 MenuItem 인스턴스에서 탭 하거나 클릭에 반응할 수 있습니다.An event handler can be attached to this event to react to taps or clicks on the MenuItem instance in XAML:

<MenuItem ...
          Clicked="OnItemClicked" />

이벤트 처리기를 코드에 연결할 수도 있습니다.An event handler can also be attached in code:

MenuItem item = new MenuItem { ... }
item.Clicked += OnItemClicked;

이전 예제에서는 OnItemClicked 이벤트 처리기를 참조 했습니다.Previous examples referenced an OnItemClicked event handler. 다음 코드에서는 구현 예를 보여 줍니다.The following code shows an example implementation:

void OnItemClicked(object sender, EventArgs e)
{
    // The sender is the menuItem
    MenuItem menuItem = sender as MenuItem;

    // Access the list item through the BindingContext
    var contextItem = menuItem.BindingContext;

    // Do something with the contextItem here
}

MVVM를 사용 하 여 MenuItem 동작 정의Define MenuItem behavior with MVVM

@No__t_0 클래스는 BindableProperty 개체 및 ICommand 인터페이스를 통해 MVVM (모델-뷰-ViewModel) 패턴을 지원 합니다.The MenuItem class supports the Model-View-ViewModel (MVVM) pattern through BindableProperty objects and the ICommand interface. 다음 XAML은 viewmodel에 정의 된 명령에 바인딩되는 MenuItem 인스턴스를 보여 줍니다.The following XAML shows MenuItem instances bound to commands defined on a viewmodel:

<ContentPage.BindingContext>
    <viewmodels:ListPageViewModel />
</ContentPage.BindingContext>

<StackLayout>
    <Label Text="{Binding Message}" ... />
    <ListView ItemsSource="{Binding Items}">
        <ListView.ItemTemplate>
            <DataTemplate>
                <ViewCell>
                    <ViewCell.ContextActions>
                        <MenuItem Text="Edit"
                                    IconImageSource="icon.png"
                                    Command="{Binding Source={x:Reference contentPage}, Path=BindingContext.EditCommand}"
                                    CommandParameter="{Binding .}"/>
                        <MenuItem Text="Delete"
                                    Command="{Binding Source={x:Reference contentPage}, Path=BindingContext.DeleteCommand}"
                                    CommandParameter="{Binding .}"/>
                    </ViewCell.ContextActions>
                    <Label Text="{Binding .}" />
                </ViewCell>
            </DataTemplate>
        </ListView.ItemTemplate>
    </ListView>
</StackLayout>

앞의 예제에서 두 개의 MenuItem 개체는 해당 Command 및 viewmodel의 명령에 바인딩된 CommandParameter 속성으로 정의 됩니다.In the previous example, two MenuItem objects are defined with their Command and CommandParameter properties bound to commands on the viewmodel. Viewmodel에는 XAML에서 참조 되는 명령이 포함 되어 있습니다.The viewmodel contains the commands referenced in the XAML:

public class ListPageViewModel : INotifyPropertyChanged
{
    ...

    public ICommand EditCommand => new Command<string>((string item) =>
    {
        Message = $"Edit command was called on: {item}";
    });

    public ICommand DeleteCommand => new Command<string>((string item) =>
    {
        Message = $"Delete command was called on: {item}";
    });
}

예제 응용 프로그램에는 ListView 개체를 채우기 위해 항목 목록을 가져오는 데 사용 되는 DataService 클래스가 포함 되어 있습니다.The sample application includes a DataService class used to get a list of items for populating the ListView objects. Viewmodel은 DataService 클래스의 항목과 함께 인스턴스화하고 코드 숨김으로 BindingContext로 설정 됩니다.A viewmodel is instantiated, with items from the DataService class, and set as the BindingContext in the code-behind:

public MenuItemXamlMvvmPage()
{
    InitializeComponent();
    BindingContext = new ListPageViewModel(DataService.GetListItems());
}

경고

MenuItem 개체는 Android 에서만 아이콘을 표시 합니다.MenuItem objects only display icons on Android. 다른 플랫폼에서는 Text 속성으로 지정 된 텍스트만 표시 됩니다.On other platforms, only the text specified by the Text property will be displayed.

아이콘은 IconImageSource 속성을 사용 하 여 지정 됩니다.Icons are specified using the IconImageSource property. 아이콘을 지정 하면 Text 속성으로 지정 된 텍스트가 표시 되지 않습니다.If an icon is specified, the text specified by the Text property will not be displayed. 다음 스크린샷은 Android에서 아이콘이 있는 MenuItem를 보여 줍니다.The following screenshot shows a MenuItem with an icon on Android:

"Android의 MenuItem 아이콘 스크린샷""Screenshot of MenuItem icon on Android"

Xamarin.ios에서 이미지를 사용 하는 방법에 대 한 자세한 내용은 xamarin.ios의 이미지를 참조 하세요.For more information on using images in Xamarin.Forms, see Images in Xamarin.Forms.

플랫폼 간 상황에 맞는 메뉴 동작Cross-platform context menu behavior

상황에 맞는 메뉴는 각 플랫폼 마다 다르게 액세스 되 고 표시 됩니다.Context menus are accessed and displayed differently on each platform.

Android에서 상황에 맞는 메뉴는 목록 항목을 길게 누르면 활성화 됩니다.On Android, the context menu is activated by long-press on a list item. 상황에 맞는 메뉴는 제목 및 탐색 모음 영역을 대체 하 고 MenuItem 옵션은 가로 단추로 표시 됩니다.The context menu replaces the title and navigation bar area and MenuItem options are displayed as horizontal buttons.

"Android의 상황에 맞는 메뉴 스크린샷""Screenshot of context menu on Android"

IOS에서 상황에 맞는 메뉴는 목록 항목을 살짝 밀어 활성화 됩니다.On iOS, the context menu is activated by swiping on a list item. 상황에 맞는 메뉴가 목록 항목에 표시 되 고 MenuItems 가로 단추로 표시 됩니다.The context menu is displayed on the list item and MenuItems are displayed as horizontal buttons.

"IOS의 상황에 맞는 메뉴 스크린샷""Screenshot of context menu on iOS"

UWP에서는 목록 항목을 마우스 오른쪽 단추로 클릭 하 여 상황에 맞는 메뉴를 활성화 합니다.On UWP, the context menu is activated by right-clicking on a list item. 상황에 맞는 메뉴는 커서 근처에 세로 목록으로 표시 됩니다.The context menu is displayed near the cursor as a vertical list.

"UWP의 상황에 맞는 메뉴 스크린샷""Screenshot of context menu on UWP"