简体   繁体   中英

Xamarin, XAML. Help bind color in ListView

How to bind a Label color in a ListView ? I can't set the color in any way, it shows standard gray. You can set a certain color (for example, red), but I need it to change dynamically, from the user's desire.

<ListView
      Style="{StaticResource ListViewStyle}"
      ItemsSource="{Binding Stats}"
      SelectedItem="{Binding CurrentStatParam}"
      HasUnevenRows="true">
    <ListView.ItemTemplate>
        <DataTemplate>
            <ViewCell>
                <Grid>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="*"></ColumnDefinition>
                        <ColumnDefinition Width="*"></ColumnDefinition>
                    </Grid.ColumnDefinitions>
                    <Grid Column="0">
                    <Label Text="{Binding Name}" **TextColor="{Binding TextColor}"**/>
                    </Grid>
                    <Grid Column="1">
                    <Label Text="{Binding Value}" **TextColor="{Binding TextColor}"**/>
                    </Grid>
                </Grid>
            </ViewCell>
        </DataTemplate>
    </ListView.ItemTemplate>
</ListView>
public Color TextColor
{
    get => _textColor;
    set
    {
        _textColor = value;
        OnPropertyChanged(nameof(TextColor));
    }
}
<ContentPage.Content>
    <Grid>
        <StackLayout HorizontalOptions="Center" VerticalOptions="Center">
            <Label Text="Back Color" Margin="0,0,0,10" />
            <colorPicker:ColorPickerEntry Color="{Binding BackColor}" />
            <Label Text="Line color" Margin="0,0,0,10" />
            <colorPicker:ColorPickerEntry Color="{Binding LineColor}" />
            <Label Text="Text Color" Margin="0,0,0,10" />
            <colorPicker:ColorPickerEntry Color="{Binding TextColor}" />
        </StackLayout>
        <!--<Button Text="Назад" Command="{Binding BackCmd}"></Button>-->
    </Grid>
</ContentPage.Content>

Do you want to change the color like following gif?

在此处输入图片说明

If so, firstly, please achieve INotifyPropertyChanged interface. Here is my Model.

  public class MyModel: INotifyPropertyChanged
    {
        string name;
        public string Name
        {
            set
            {
                if (name != value)
                {
                    name = value;
                    OnPropertyChanged("Name");

                }
            }
            get
            {
                return name;
            }
        }

       
        string _value;
        public string Value
        {
            set
            {
                if (_value != value)
                {
                    _value = value;
                    OnPropertyChanged("Value");

                }
            }
            get
            {
                return _value;
            }
        }


        private Color _textColor=Color.Green;

        public Color TextColor
        {
            get { return _textColor; }
            set
            {
                _textColor = value;

                OnPropertyChanged("TextColor");

            }
        }

       
        public event PropertyChangedEventHandler PropertyChanged;

        protected virtual void OnPropertyChanged(string propertyName)
        {
            PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
        }
    }
}

When we change the Color of the Text, I set it by Button's Command in the ViewModel.

   public class MyViewModel
    {
        public ObservableCollection<MyModel> Stats { get; set; }

        public ICommand ColorChangeCommand { protected set; get; }
        public MyViewModel()
        {
            Stats = new ObservableCollection<MyModel>();
            Stats.Add(new MyModel() { Name="test1",  Value="1" });
            Stats.Add(new MyModel() { Name = "test2", Value = "2" });
            Stats.Add(new MyModel() { Name = "test3", Value = "3" });
            ColorChangeCommand = new Command<MyModel>(async (key) =>
            {
                     key.TextColor = Color.Red;

            });

        }
    }

Here is my editted Listview.

 <ListView
             
              ItemsSource="{Binding Stats}"
             x:Name="mylistview"
              HasUnevenRows="true">
            <ListView.ItemTemplate>
                <DataTemplate>
                    <ViewCell>
                        <Grid>
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="*"></ColumnDefinition>
                                <ColumnDefinition Width="*"></ColumnDefinition>
                                <ColumnDefinition Width="*"></ColumnDefinition>
                            </Grid.ColumnDefinitions>
                            <Grid Column="0">
                                <Label Text="{Binding Name}" TextColor="{Binding TextColor}"/>
                            </Grid>
                            <Grid Column="1">
                                <Label Text="{Binding Value}" TextColor="{Binding TextColor}"/>
                            </Grid>
                            <Grid Column="2">
                                <Button Text="change" Command="{Binding BindingContext.ColorChangeCommand, Source={x:Reference Name=mylistview} }"  CommandParameter="{Binding .}"></Button>
                            </Grid>
                           
                        </Grid>
                    </ViewCell>
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>

Here is my layout background code.

  public partial class MainPage : ContentPage
    {
        public MainPage()
        {
            InitializeComponent();

            this.BindingContext = new MyViewModel();
        }
    }

The problem is in your ItemsSource. There is no property named "TextColor" here. You can use following code to escape from this situation:

<Label Text="{Binding Name}" TextColor="{Binding Source={x:Reference This}, Path=BindingContext.TextColor}"/>

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM