XAML 使用DataTrigger根据ItemSource中返回的值更改ListView的颜色

jtw3ybtb  于 2023-02-01  发布在  其他
关注(0)|答案(1)|浏览(165)

我有一个带有列表视图的XAML页面。我想做的是当第一列的值“NumType”等于“S”时,该行的背景颜色被设置为不同的颜色。
我一直在考虑使用DataTriggers,但我不确定这是否是正确的选择。
下面是我目前拥有的代码。

?xml version="1.0" encoding="UTF-8"?>
<Grid        xmlns="http://xamarin.com/schemas/2014/forms" 
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:MobileWarehouseXamarin.Controls"
             xmlns:ef="clr-namespace:MobileWarehouseXamarin.Effects"
             xmlns:d="http://xamarin.com/schemas/2014/forms/design"    
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             x:Class="MobileWarehouseXamarin.Controls.MW_AdjustmentsAwaiting_0"
             xmlns:vm="clr-namespace:MobileWarehouseXamarin.ViewModels;assembly=MobileWarehouseXamarin"
             x:Name="this"
             RowSpacing="0"
             ColumnSpacing="0"
             Padding="5,0,5,0">

    <Grid.RowDefinitions>
        <RowDefinition Height="30" />
        <RowDefinition Height="*" />
        <RowDefinition Height="35" />
    </Grid.RowDefinitions>

    <Grid Grid.Row="0">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="70"/>
            <ColumnDefinition Width="100"/>
            <ColumnDefinition Width="80"/>
            <ColumnDefinition Width="80"/>
            <!--<ColumnDefinition Width="300"/>-->
        </Grid.ColumnDefinitions>
        <Label Grid.Column="0" Text="Location" Style="{StaticResource KeyValueSmall_Key}" />
        <Label Grid.Column="1" Text="Barcode" Style="{StaticResource KeyValueSmall_Key}" />
        <Label Grid.Column="2" Text="User" Style="{StaticResource KeyValueSmall_Key}" />
        <Label Grid.Column="3" Text="Date" Style="{StaticResource KeyValueSmall_Key}" />
        <!--<TextBlock Grid.Column="4" Text="Reason" Style="{StaticResource TextBlockLabel}" />-->
    </Grid>

    <ListView Grid.Row="1" x:Name="gridViewAwaitingAdjustmentDetails"  ItemsSource="{Binding AwaitingAdjustment}" SelectedItem="{Binding SelectedAdjustment, Mode=TwoWay}" >
        <!--Style="{StaticResource ListViewItemHighlighted}">-->
        <ListView.ItemTemplate>
            <DataTemplate>
                <ViewCell>
                    <Grid>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="70"/>
                            <ColumnDefinition Width="100"/>
                            <ColumnDefinition Width="80"/>
                            <ColumnDefinition Width="80"/>
                            <!--<ColumnDefinition Width="300" />-->
                        </Grid.ColumnDefinitions>

                        <Label Grid.Row="0" Grid.Column="0" Text="{Binding NumType}" Style="{StaticResource KeyValueSmall_Value}" Margin="0,0,0,0" />
                        <Label Grid.Row="0" Grid.Column="0" Text="{Binding LocationCode}" Style="{StaticResource KeyValueSmall_Value}" Margin="0,0,0,0" />
                        <Label Grid.Row="0" Grid.Column="1" Grid.RowSpan="2" Text="{Binding Barcode}" Style="{StaticResource KeyValueSmall_Value}" Margin="0,0,0,0" />
                        <Label Grid.Row="0" Grid.Column="2" Text="{Binding UserName}" Style="{StaticResource KeyValueSmall_Value}" Margin="0,0,0,0" />
                        <Label Grid.Row="0" Grid.Column="3" Grid.RowSpan="2" Text="{Binding PickingAdjustementDate}" Style="{StaticResource KeyValueSmall_Value}" Margin="0,0,0,0" />

                    </Grid>
                </ViewCell>
            </DataTemplate>
        </ListView.ItemTemplate>
    </ListView>

</Grid>

如有任何想法或建议,我们将不胜感激
我已经考虑过使用DataTrigger,但不知道如何去做,或者我最好看看模板选择器?

yhuiod9q

yhuiod9q1#

有几种方法可以实现这一点。
一个简单的方法是向ListView的项添加一个字段,并将其绑定到该项的BackgroundColor,例如:

public Color BgColor { get; set; } = Color.Yellow;

我创建了一个简单的demo并实现了这个功能,可以参考下面的代码:

    • 项目. cs**
public class Item: INotifyPropertyChanged 
    {
        public Color BgColor { get; set; } = Color.Yellow;

        private string _numType;
        public string NumType
        {
            get => _numType;
            set
            {
                SetProperty(ref _numType, value);

                setBgColor();// set BgColor
            }
        }

        private void setBgColor()
        {
            if (NumType != null && NumType.Equals("S")) {
                BgColor = Color.Green;
            }
        }

        public string LocationCode { get; set; }

        public string Barcode { get; set; }
        public string UserName { get; set; }

        public string PickingAdjustementDate { get; set; }

        bool SetProperty<T>(ref T storage, T value, [CallerMemberName] string propertyName = null)
        {
            if (Object.Equals(storage, value))
                return false;

            storage = value;
            OnPropertyChanged(propertyName);
            return true;
        }

        protected void OnPropertyChanged([CallerMemberName] string propertyName = null)
        {
            PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
        }

        public event PropertyChangedEventHandler PropertyChanged;
    }
    • 我的视图模型. cs**
public class MyViewModel 
    {
        public ObservableCollection<Item> Items { get; set; }

        public MyViewModel() { 
         Items = new ObservableCollection<Item>();

            Items.Add( new Item { NumType = "S" , LocationCode = "0001"});
            Items.Add(new Item { NumType = "M", LocationCode = "0002" });
            Items.Add(new Item { NumType = "L", LocationCode = "0003" });

        }
    }
    • 主页. xaml**
<?xml version="1.0" encoding="utf-8" ?> 
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" 
             xmlns:xamlistviewapp131="clr-namespace:XamListViewApp131"
             x:Class="XamListViewApp131.MainPage">

    <ContentPage.BindingContext>
        <xamlistviewapp131:MyViewModel></xamlistviewapp131:MyViewModel>
    </ContentPage.BindingContext>

    <StackLayout>
        <ListView Grid.Row="1" x:Name="gridViewAwaitingAdjustmentDetails"  ItemsSource="{Binding Items}"  >
            <!--Style="{StaticResource ListViewItemHighlighted}">-->
            <ListView.ItemTemplate>
                <DataTemplate>
                    <ViewCell>
                        <Grid BackgroundColor="{Binding BgColor}">
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="70"/>
                                <ColumnDefinition Width="100"/>
                                <ColumnDefinition Width="80"/>
                                <ColumnDefinition Width="80"/>
                                <!--<ColumnDefinition Width="300" />-->
                            </Grid.ColumnDefinitions>

                            <Label Grid.Row="0" Grid.Column="0" Text="{Binding NumType}" Margin="0,0,0,0" />
                            <Label Grid.Row="0" Grid.Column="0" Text="{Binding LocationCode}"  Margin="0,0,0,0" />
                            <Label Grid.Row="0" Grid.Column="1" Grid.RowSpan="2" Text="{Binding Barcode}"  Margin="0,0,0,0" />
                            <Label Grid.Row="0" Grid.Column="2" Text="{Binding UserName}"  Margin="0,0,0,0" />
                            <Label Grid.Row="0" Grid.Column="3" Grid.RowSpan="2" Text="{Binding PickingAdjustementDate}"  Margin="0,0,0,0" />

                        </Grid>
                    </ViewCell>
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>
    </StackLayout>

</ContentPage>

相关问题