Litmas
Litmas

Reputation: 86

Binding Color to ListBoxItem Object Color Value

I have a List Box filled with class objects defined as Assigned Tasks. The ItemTemplate correctly binds and displays the appropriate information when populated, but I am trying to set the background of the each item based on the color of the category assigned. The background is correctly binding when I do give the gradient brush a specific color, but when I bind it to the color of the task object it does not display. In debugging I have confirmed that the color of my task object is correctly being set. How can I bind the gradient stop color to the color of each individual object in the list?

 <ListBox Name="lboxAssignedTasks" SelectionMode="Single" VerticalAlignment="Top" SelectionChanged="lboxAssignedTasks_SelectionChanged" 
                     HorizontalAlignment="Stretch" Margin="5,10,20,0" >
                <ListBox.ItemTemplate>                        
                    <DataTemplate>                            
                        <Grid >                                
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Name="colTaskName" MinWidth="200"/>
                                <ColumnDefinition Name="colDateDue" MinWidth="75" />
                                <ColumnDefinition Name="colStatus" MinWidth="75"/>
                            </Grid.ColumnDefinitions>
                            <TextBlock Grid.Column="0" Text="{Binding Path=TaskName}" MinHeight="30" VerticalAlignment="Center" HorizontalAlignment="Left" Margin="5,5,0,0"/>
                            <TextBlock Grid.Column="1" Text="{Binding Path=DateDue}" MinHeight="30" VerticalAlignment="Center" HorizontalAlignment="Left" Margin="5,5,0,0"/>
                            <TextBlock Grid.Column="2" Text="{Binding Path=Status}" MinHeight="30" VerticalAlignment="Center" HorizontalAlignment="Left" Margin="0,5,0,0"/>
                        </Grid>                            
                    </DataTemplate>                        
                </ListBox.ItemTemplate>                   
                <ListBox.Resources>
                    <Style TargetType="{x:Type ListBoxItem}">
                        <Setter Property="Background" Value="{DynamicResource BackGroundGradBrush}" />
                        <Style.Resources>
                            <LinearGradientBrush StartPoint="1,0" EndPoint="1,1" x:Key="BackGroundGradBrush">
                                <GradientStop Color="White" Offset="0.2" />
                                <GradientStop Color="White" Offset="0.85" />
                                <GradientStop Color="{Binding Path=CatColor}" Offset="0.95" />
                            </LinearGradientBrush>
                            <SolidColorBrush x:Key="{x:Static SystemColors.HighlightBrushKey}" Color="LightBlue" />
                        </Style.Resources>
                    </Style>
                </ListBox.Resources>
            </ListBox>

The class object definition:

public class AssignedTask : UnAssignedTask
{
    public int TaskId { get; set; }
    public string Status { get; set; }
    public string AssignedUser { get; set; }
    public string AssignedBy { get; set; }
    public string DateAssigned { get; set; }
    public string DateDue { get; set; }
    public string UserNotes { get; set; }
    public bool IsCompleted { get; set; }
    public Category Cat { get; set; }
    public Color CatColor { get; set; }
}

Upvotes: 0

Views: 44

Answers (2)

Litmas
Litmas

Reputation: 86

I moved the template to and changed the to a to handle the Highlight trigger that was being overwritten by setting the grid back ground. The linear gradient brush was moved from resources and instead applied as the . This exposed the CatColor property for each AssignedTask object in the listbox.

<ListBox Name="lboxAssignedTasks" SelectionMode="Single" VerticalAlignment="Top" SelectionChanged="lboxAssignedTasks_SelectionChanged" 
                     HorizontalAlignment="Stretch" Margin="5,10,20,0">                 
                <ListBox.ItemContainerStyle>
                    <Style TargetType="{x:Type ListBoxItem}">
                        <Setter Property="HorizontalContentAlignment" Value="Stretch" />                            
                        <Setter Property="Template">
                            <Setter.Value>
                                <ControlTemplate TargetType="{x:Type ListBoxItem}">
                                    <Grid Name="lbItemGrid">
                                        <Grid.Background>
                                            <LinearGradientBrush StartPoint="1,0" EndPoint="1,1">
                                                <GradientStop Color="White" Offset="0.2" />
                                                <GradientStop Color="White" Offset="0.85" />
                                                <GradientStop Color="{Binding Path=CatColor}" Offset="0.95" />
                                            </LinearGradientBrush>
                                        </Grid.Background>
                                        <Grid.ColumnDefinitions>
                                            <ColumnDefinition Name="colTaskName" MinWidth="200"/>
                                            <ColumnDefinition Name="colDateDue" MinWidth="75" />
                                            <ColumnDefinition Name="colStatus" MinWidth="75"/>
                                        </Grid.ColumnDefinitions>
                                        <TextBlock Grid.Column="0" Text="{Binding Path=TaskName}" MinHeight="30" VerticalAlignment="Center" HorizontalAlignment="Left" Margin="15,5,0,0"/>
                                        <TextBlock Grid.Column="1" Text="{Binding Path=DateDue}" MinHeight="30" VerticalAlignment="Center" HorizontalAlignment="Left" Margin="5,5,0,0"/>
                                        <TextBlock Grid.Column="2" Text="{Binding Path=Status}" MinHeight="30" VerticalAlignment="Center" HorizontalAlignment="Left" Margin="0,5,0,0"/>
                                    </Grid>
                                    <ControlTemplate.Triggers>
                                        <Trigger Property="IsSelected" Value="True">
                                            <Setter Property="Background" TargetName="lbItemGrid" Value="Lightblue" />
                                        </Trigger>

                                    </ControlTemplate.Triggers>
                                </ControlTemplate>

                            </Setter.Value>
                        </Setter>
                    </Style>
                </ListBox.ItemContainerStyle>                    
            </ListBox>

Upvotes: 0

ekblom
ekblom

Reputation: 26

I cant see what type CatColor is, but make sure the CatColor is of type System.Windows.Media.Color in AssignedTask.

And also, you might want to use ItemContainerStyle as stated here: ListBoxItem style in <ListBox.Resources> or in <ListBox.ItemContainerStyle>?

Upvotes: 1

Related Questions