Home > Mobile >  How can a color be assigned to a CollectionView based on a true/false object value?
How can a color be assigned to a CollectionView based on a true/false object value?

Time:11-10

I've got a list of customers which I'm binding to a CollectionView in .Net Maui. If a value of a boolean in the bound objects is set to false, I want to set the background color of the frame to red. Otherwise, I just want to keep it "normal" / default.

        <CollectionView Grid.Row="5" Grid.ColumnSpan="2" ItemsSource="{Binding Items}" SelectionMode="None">
            <CollectionView.ItemTemplate>
                <DataTemplate x:DataType="dm:CustomerReturn">
                    <SwipeView>
                        <SwipeView.RightItems>
                            <SwipeItem Text="Delete" BackgroundColor="Red"/>
                        </SwipeView.RightItems>
                        <Frame BackgroundColor="{Binding ???}">
                        ...

The ObservableConnection (items) of objects:

    public class CustomerReturn
    {
        public int Id { get; set; } 
        public DateTime Created { get; }
        public DateTime Updated { get; }
        public string? CustomerName { get; set; }
        public string? CustomerPhone { get; set; }
        public string? CustomerEmail { get; set; }
        public string? CustomerGuid { get; set; }
        public bool isValid { get; set; }
    }

Items is populated with the customerReturn collection.

CodePudding user response:

Set a DataTrigger

<DataTrigger  Binding="{Binding IsValid}" Value="true">
    <Setter Property="BackGround" Value="#FFFFFF"/>
</DataTrigger>

For a ListView, I use the following :

<Style TargetType="ListViewItem">
    <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
    <Style.Triggers>
        <DataTrigger Binding="{Binding Path=Color}" Value="White">
            <Setter Property="Background" Value="#FFFFFF" />
        </DataTrigger>
        <DataTrigger Binding="{Binding Path=Color}" Value="Gold">
            <Setter Property="Background" Value="#40FFD700" />
        </DataTrigger>
        <DataTrigger Binding="{Binding Path=Color}" Value="Chartreuse">
            <Setter Property="Background" Value="#407FFF00" />
        </DataTrigger>
    </Style.Triggers>
</Style>

This may be the same thing for CollectionView

CodePudding user response:

I'm going to accept Siegfried.V's answer because he put me on the right path. But I thought I'd post my code here for future postarity. First this link from MS has more detail on dataTriggers (which I had no idea existed until now)

https://learn.microsoft.com/en-us/dotnet/maui/fundamentals/triggers?view=net-maui-6.0#data-triggers

DataTriggers are really cool!

This is my Frame definition:

   <Frame>
       <Frame.Triggers>
          <DataTrigger TargetType="Frame"
                       Binding="{Binding Source={x:Reference isValid},Path=IsChecked}"
                                             Value="false">
          <Setter Property="BackgroundColor" Value="Red"/>
          </DataTrigger>
       </Frame.Triggers>

I create a checkbox in the XAML which is bound to the data field:

<CheckBox IsChecked="{Binding IsValid}" x:Name="isValid"/>

This works awesomely! The background is red if the "isValid" checkbox.IsChecked is false.

  • Related