Xamarin ListView所选项目的外观

Question

I am creating side menu using MasterDetailPage and the list of menu items is implemented using ListView . I want to make custom appearance for selected item:

• Background color
• Label's text color
• ImageSource for icon

How can I do this?

Answer 1

I create field IsActive in my list view item and use DataTrigger binded to this field and set all properties what I need.

In XAML

I set color of selected item to the StackLayout , so I just hide original selected color of ListView (orange in my case on Android)

<ListView.ItemTemplate>

                <DataTemplate>
                    <ViewCell>
                        <StackLayout Orientation="Horizontal"
                                     Padding="16, 0, 16, 0"
                                     HeightRequest="48">

                            <StackLayout.Triggers>
                                <DataTrigger TargetType="StackLayout"
                                                 Binding="{Binding IsActive}"
                                                 Value="True">
                                    <Setter Property="BackgroundColor" Value="{StaticResource menu-background-active}"/>
                                </DataTrigger>
                            </StackLayout.Triggers>

                            <Image Source="{Binding IconSource}"
                                   VerticalOptions="Center"
                                   WidthRequest="20"/>
                            <Label Text="{Binding Title}" TextColor="Black"
                                   VerticalOptions="Center"
                                   Margin="36,0,0,0">
                                <Label.Triggers>
                                    <DataTrigger TargetType="Label"
                                                 Binding="{Binding IsActive}"
                                                 Value="True">
                                        <Setter Property="TextColor" Value="{StaticResource menu-text-active}"/>
                                    </DataTrigger>
                                </Label.Triggers>
                            </Label>
                        </StackLayout>
                    </ViewCell>
                </DataTemplate>

   </ListView.ItemTemplate>

ItemsSource item

Note that this class should implement INotifyPropertyChanged

public class MasterPageItem : INotifyPropertyChanged
{
    private string _title;
    private string _iconSource;
    private bool _isActive;


    public string Title
    {
        get { return _title; }
        set
        {
            _title = value;
            OnPropertyChanged(nameof(Title));
        }
    }

    /// <summary>
    /// Set or return icon file
    /// If IsActive == true
    /// will add suffix "_active" to return value,
    /// 
    /// Note:
    /// Icons file should be the pair"
    ///  - icon_name.png
    ///  - icon_name_active.png
    /// 
    /// </summary>
    public string IconSource
    {
        get
        {
            if (!IsActive)
                return _iconSource;

            return Path.GetFileNameWithoutExtension(_iconSource) + "_active" + Path.GetExtension(_iconSource);
        }
        set
        {
            _iconSource = value;
            OnPropertyChanged(nameof(IconSource));
        }
    }

    /// <summary>
    /// Is menu item is selected
    /// </summary>
    public bool IsActive
    {
        get { return _isActive; }
        set
        {
            _isActive = value;
            OnPropertyChanged());
        }
    }

    public Type TargetType { get; set; }

    // Important for data-binding

    public event PropertyChangedEventHandler PropertyChanged;
    public void OnPropertyChanged(string prop = "")
    {
        if (PropertyChanged != null)
            PropertyChanged(this, new PropertyChangedEventArgs(prop));
    }
}

Then in the master page code behind I use ItemSelected event to change the IsActive property

private void ListView_ItemSelected(object sender, SelectedItemChangedEventArgs e)
    {
        var item = e.SelectedItem as MasterPageItem;
        var items = listView.ItemsSource as IList<MasterPageItem>;

        //Select current item and deselect others
        for(int i = 0; i<items.Count; i++)
            items[i].IsActive = items[i] == item;

        if (item != null)
        {
            ItemSelected?.Invoke(this, item.TargetType);
            _activePage = item.TargetType;
        }
    }