Xamarin.Forms MenuItem

  • Makale
  • Okumak için 4 dakika

Örnek indir Örneği indirin

Xamarin.FormsMenuItem Sınıfı, ListView öğe bağlam menüleri ve kabuk uygulaması açılır menüleri gibi menüler için menü öğelerini tanımlar.

Aşağıdaki ekran görüntüleri, MenuItemListView IOS ve Android 'deki bir bağlam menüsündeki nesneleri gösterir:

Android 'de iOS ve Android 'de MenuItems"

MenuItemSınıfı aşağıdaki özellikleri tanımlar:

Bu özellikler nesneler tarafından desteklenir BindableProperty , böylece MenuItem örnek veri bağlamalarının hedefi olabilir.

MenuItem oluşturma

MenuItem nesneler, bir nesnenin öğelerinde bir bağlam menüsü içinde kullanılabilir ListView . En yaygın model, MenuItem bir örnek içinde nesneler oluşturmaktır ViewCell , DataTemplate Örneğin, s için nesnesi olarak kullanılır ListViewItemTemplate . ListViewNesne doldurulduğunda, DataTemplateMenuItem bir öğe için bağlam menüsü etkinleştirildiğinde seçimleri ortaya çıkaran öğesini kullanarak her öğe oluşturulur.

Aşağıdaki örnek, MenuItem bir nesnenin bağlamı içinde örnek oluşturmayı gösterir ListView :

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

MenuItemKod içinde de oluşturulabilir:

// 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
};

Olaylarla MenuItem davranışını tanımlama

MenuItemSınıfı bir olay gösterir Clicked . XAML 'deki örneğe dokunma veya tıklama sağlamak için bu olaya bir olay işleyicisi iliştirilebilir MenuItem :

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

Kod içinde de bir olay işleyicisi eklenebilir:

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

Önceki örneklere bir OnItemClicked olay işleyicisine başvuruldu. Aşağıdaki kodda örnek bir uygulama gösterilmektedir:

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 ile MenuItem davranışını tanımlama

MenuItemSınıfı BindableProperty nesneler ve arabirim aracılığıyla Model-View-ViewModel (MVVM) modelini destekler ICommand . Aşağıdaki XAML, MenuItem bir ViewModel üzerinde tanımlanan komutlara bağlı örnekleri göstermektedir:

<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>

Önceki örnekte, iki nesne, MenuItemCommand ve CommandParameter özellikleri ViewModel üzerindeki komutlara bağlı olarak tanımlanmıştır. ViewModel XAML 'de başvurulan komutları içerir:

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}";
    });
}

Örnek uygulama, DataService nesnelerin doldurulmasına yönelik öğelerin bir listesini almak için kullanılan bir sınıfı içerir ListView . Bir ViewModel, sınıfından öğelerle oluşturulur DataService ve BindingContext arka plan kod içinde olarak ayarlanır:

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

Uyarı

MenuItem nesneler yalnızca Android üzerinde simgeler görüntüler. Diğer platformlarda, yalnızca özelliği tarafından belirtilen metin Text görüntülenir.

Simgeler, özelliği kullanılarak belirtilir IconImageSource . Bir simge belirtilirse, özelliği tarafından belirtilen metin Text görüntülenmez. Aşağıdaki ekran görüntüsünde, MenuItem Android üzerinde bir simge olan gösterilmektedir:

görüntüsü

İçindeki görüntüleri kullanma hakkında daha fazla bilgi için Xamarin.Forms bkz Images in Xamarin.Forms ..

Çalışma zamanında MenuItem 'ı etkinleştirme veya devre dışı bırakma

Çalışma zamanında devre dışı bırakmayı devre dışı bırakmak için MenuItem , Command özelliğini bir ICommand uygulamaya bağlayın ve bir canExecute temsilcinin uygun şekilde etkinleştirmesini ve devre dışı bırakabilmesini sağlayın ICommand .

Önemli

Özelliğini IsEnabledCommand etkinleştirmek veya devre dışı bırakmak için özelliğini kullanırken özelliği başka bir özelliğe bağlamayın MenuItem .

Aşağıdaki örnek, bir MenuItem özelliğinin bir Command adlandırılmış öğesine bağlandığı bir özelliği gösterir ICommandMyCommand :

<MenuItem Text="My menu item"
          Command="{Binding MyCommand}" />

ICommandUygulama canExecutebool , etkinleştirmek ve devre dışı bırakmak için bir özelliğin değerini döndüren bir temsilci gerektirir MenuItem :

public class MyViewModel : INotifyPropertyChanged
{
    bool isMenuItemEnabled = false;
    public bool IsMenuItemEnabled
    {
        get { return isMenuItemEnabled; }
        set
        {
            isMenuItemEnabled = value;
            MyCommand.ChangeCanExecute();
        }
    }

    public Command MyCommand { get; private set; }

    public MyViewModel()
    {
        MyCommand = new Command(() =>
        {
            // Execute logic here
        },
        () => IsMenuItemEnabled);
    }
}

Bu örnekte, MenuItem özelliği ayarlanana kadar devre dışı bırakılır IsMenuItemEnabled . Bu gerçekleştiğinde yöntemi çağırılır ve bu da Command.ChangeCanExecutecanExecute temsilcinin MyCommand yeniden değerlendirilmesini sağlar.

Platformlar arası bağlam menüsü davranışı

Bağlam menülerine her platformda erişilir ve farklı şekilde görüntülenir.

Android 'de, bağlam menüsü bir liste öğesinde uzun basma ile etkinleştirilir. Bağlam menüsü başlık ve gezinti çubuğu alanının yerini alır ve MenuItem Seçenekler yatay düğmeler olarak görüntülenir.

görüntüsü

İOS 'ta, bağlam menüsü bir liste öğesine çekerek etkinleştirilir. Bağlam menüsü liste öğesinde görüntülenir ve MenuItems yatay düğmeler olarak görüntülenir.

görüntüsü

UWP 'de, bağlam menüsü bir liste öğesine sağ tıklanarak etkinleştirilir. Bağlam menüsü, imlecin yakınında dikey bir liste olarak görüntülenir.