CODEWITHSUNDEEP
wpfbackgroundtriggers
zzMzz
zzMzz

Reputation: 467

WPF set ListBoxItem background in trigger

I'm doing a slight modification to code I found on a related stackoverflow post. I made minor changes to a ListBoxItem's background on IsMouseOver and IsSelected using a trigger. In my version I want to use a gradient for the background:

  <Style x:Key="ListboxItemStyle" TargetType="{x:Type ListBoxItem}">
        <Setter Property="Margin" Value="1,2,1,1"/>
        <Setter Property="HorizontalAlignment" Value="Stretch" />
        <Setter Property="Background" Value="White" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type ListBoxItem}">
                    <Grid>
                        <Border Background="{TemplateBinding Background}" />
                        <Border Background="LightGray" Margin="0,0">
                            <Grid>
                                <Grid.RowDefinitions>
                                    <RowDefinition />
                                    <RowDefinition />
                                </Grid.RowDefinitions>
                                <!--<Border Margin="2,1,2,0" Grid.Row="0" Background="#57FFFFFF" />-->
                                <Border Margin="2,1,2,0" Grid.Row="0">
                                   <Border.Background >
                                        <LinearGradientBrush StartPoint=".5,0" EndPoint="0.5,1" >
                                            <GradientStop Color="White" Offset="0" />
                                            <GradientStop Color="LightGray" Offset="1" />
                                        </LinearGradientBrush>
                                    </Border.Background>
                                </Border>
                            </Grid>
                        </Border>
                        <ContentPresenter Margin="0,5" />
                    </Grid>
                    <ControlTemplate.Triggers>
                        <MultiTrigger>
                            <MultiTrigger.Conditions>
                                <Condition Property="IsMouseOver" Value="True" />
                                <Condition Property="IsSelected" Value="False"/>
                            </MultiTrigger.Conditions>
                            <!--<Setter Property="Background" Value="#CCCBAF00" />
                            <Setter Property="Opacity" Value="0.8" />-->
                           <Setter Property="Background">
                                <Setter.Value>
                                    <LinearGradientBrush StartPoint=".5,0" EndPoint="0.5,1" Opacity="0.8">
                                        <GradientStop Color="#CCC9BA5C" Offset="0" />
                                        <GradientStop Color="#CCCBAF00" Offset="1" />
                                    </LinearGradientBrush>
                                </Setter.Value>
                           </Setter>
                        </MultiTrigger>
                        <Trigger Property="IsSelected" Value="True">
                            <!--<Setter Property="Background" Value="#CCCB6400" />
                            <Setter Property="Opacity" Value="0.8" />-->
                            <Setter Property="Background">
                                <Setter.Value>
                                    <LinearGradientBrush StartPoint=".5,0" EndPoint="0.5,1" Opacity="0.8">
                                        <GradientStop Color="#CCCD8B4C" Offset="0" />
                                        <GradientStop Color="#CCCB6400" Offset="1" />
                                    </LinearGradientBrush>
                                </Setter.Value>
                            </Setter>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
    <Style x:Key="ListBoxStyle" TargetType="{x:Type ListBox}">
        <Setter Property="ItemContainerStyle" Value="{DynamicResource ListboxItemStyle}" />
        <Setter Property="Margin" Value="3,3,2,1" />
    </Style>

But it doesn't work with this modification. Thanks!

Upvotes: 1

Views: 724

Answers (2)

Viv
Viv

Reputation: 17380

Just switch 

<Border Background="LightGray" Margin="0,0">

to something like

<Border Background="LightGray" Margin="0,0" Opacity="0.5">

to make the ^^ Border see-through

Upvotes: 2

Nishant
Nishant

Reputation: 453

I can see that you have one Border control overlapping another. The first Border (whose Background is bound to template) will never be visible. So, when you change the ListBoxItem's background in trigger, you don't see it because it is hidden below another border. You can either have just one border control or set the visibility to second border control to hidden in your triggers.

Upvotes: 1

Related Questions