Search code examples
xamarinnavigationmaster-detail

How to change Label Text color of masterPageitem after selection


I'm new to Xamarin framework and want to create an app using Master-Detail Page I did simple Master-Detail Navigation page demo from xamarin websit master-detail-page xamarin webise

only difference is I used ViewCell inside DataTemplate.In ViewCell I have Label instead of Image. after clicking on MasterPageItems navigation is working fine but now I want to change the label Text color also .

      <ListView x:Name="listView" VerticalOptions="FillAndExpand" SeparatorVisibility="None" RowHeight="50" >
    <ListView.ItemTemplate>
      <DataTemplate>
        <ViewCell>
          <Label Text="{Binding Title}" TextColor="#1ca7ec" FontSize="18"></Label>
        </ViewCell>
      </DataTemplate>
    </ListView.ItemTemplate>
  </ListView>

void OnItemSelected(object sender, SelectedItemChangedEventArgs e)
    {
        var item = e.SelectedItem as MasterPageItem; 
        if (item != null)
        {                
            Detail = new NavigationPage((Page)Activator.CreateInstance(typeof(ContactsPage)));
            masterPage.ListView.SelectedItem = null;
            IsPresented = false;
        }
    }

Solution

  • I think you can do in this way:

    1- in your model you should have a "TextColor" property and a "Selected" property

    public bool Selected { get; set; }
    
    // I think you should not return "Color" type (for strong MVVM) but, for example, a value that you can convert in XAML with a IValueConverter...
    public Color TextColor
    {
        get
        {
            if (Selected)
                return Color.Black;
            else
                return Color.Green;
        }
    }
    

    2- In your XAML you should have something like

    <ListView SelectedItem="{Binding SelectedItem}" ItemsSource="{Binding List}">
        <ListView.ItemTemplate>
          <DataTemplate>
            <ViewCell>
              <Label Text="{Binding Name}" TextColor="{Binding TextColor}" FontSize="18"></Label>
            </ViewCell>
          </DataTemplate>
        </ListView.ItemTemplate>
    </ListView>
    

    3- and in your ViewModel something like

    MyModel _selectedItem { get; set; }
    public ObservableCollection<MyModel> List { get; set; } = new ObservableCollection<MyModel>();
    
    public MyModel SelectedItem
    {
        get { return _selectedItem; }
        set
        {
            if (_selectedItem != null)
                _selectedItem.Selected = false;
    
            _selectedItem = value;
    
            if (_selectedItem != null)
                _selectedItem.Selected = true;
        }
    }
    

    When your item in the list is selected , SelectedItem property change and Selected property in your model became True or False, changing the TextColor property (I use PropertyChanged.Fody for INPC).

    Hope this help You can find the repo on GitHub

    Instead of use a TextColor Property in your Model, I think you can also use only Selected property and an IValueConverter that convert Selected property to a color