CODEWITHSUNDEEP
wpfxaml
char m
char m

Reputation: 8336

How to change background color of WPF TextBlock ListBoxItem when mouse is over it?

The xaml below won't work because for ListBoxItem the BacckGround means the color under the TextBlock.

<ListBox.ItemContainerStyle>
    <Style TargetType="ListBoxItem">                     
        <Style.Triggers>
            <Trigger Property="IsMouseOver" Value="True">
                <Setter Property="Background" Value="{DynamicResource Theme.Button.Background.Hover}" />
            </Trigger>
        </Style.Triggers>
    </Style>
</ListBox.ItemContainerStyle>
<ListBox.ItemTemplate>
    <DataTemplate>
        <TextBlock Text="{Binding}" 
            Background="{DynamicResource Theme.Button.Background}"
            Foreground="{DynamicResource Theme.Button.Foreground}"
            Padding="{DynamicResource Theme.Button.Padding}"/>
    </DataTemplate>
</ListBox.ItemTemplate>

For request I add my actual code here (SelectButton can be found here https://gist.github.com/loraderon/580405):

    <cntrls:SelectButton x:Name="Insert_BtnStartPolyline" Grid.Row="3" ItemsSource="{Binding Path=InsertLineItemsSource}" Command="{ui:CommandHandler OpenVersion}" HorizontalAlignment="Left" MinWidth="100">
        <cntrls:SelectButton.ItemContainerStyle>
            <Style TargetType="ListBoxItem">
                <Setter Property="HorizontalContentAlignment" Value="Stretch"></Setter>
            </Style>
        </cntrls:SelectButton.ItemContainerStyle>
        <cntrls:SelectButton.Resources>
            <Style TargetType="TextBlock">
                <Style.Triggers>
                    <Trigger Property="IsMouseOver" Value="True">
                        <Setter Property="Background" Value="Chartreuse" />
                    </Trigger>
                </Style.Triggers>
            </Style>
        </cntrls:SelectButton.Resources>
        <cntrls:SelectButton.ItemTemplate>
            <DataTemplate>
                <TextBlock Text="{Binding}" 
                            Background="{DynamicResource Theme.Button.Background}"
                            Foreground="{DynamicResource Theme.Button.Foreground}"
                            Padding="{DynamicResource Theme.Button.Padding}"
                            HorizontalAlignment="Stretch"/>
            </DataTemplate>
        </cntrls:SelectButton.ItemTemplate>

    </cntrls:SelectButton>

Upvotes: 0

Views: 1372

Answers (1)

15ee8f99-57ff-4f92-890c-b56153
15ee8f99-57ff-4f92-890c-b56153

Reputation: 37060

Looks like the right answer is this. I don't understand why defining the TextBlock style in cntrls:SelectButton.Resources failed to work, but we don't need that anyway.

The key thing here is not setting the default Background in an attribute on TextBlock, but rather in a Setter in the Style. That's because, by design, the attribute thing overrides whatever the style does. This is actually a good thing (once you know about it!) because it lets you explicitly override styling on a specific instance of a control. 

<DataTemplate>
    <TextBlock 
        Text="{Binding}" 
        Foreground="{DynamicResource Theme.Button.Foreground}"
        Padding="{DynamicResource Theme.Button.Padding}"
        HorizontalAlignment="Stretch"
        >
        <TextBlock.Style>
            <Style TargetType="TextBlock">
                <Setter Property="Background" Value="{DynamicResource Theme.Button.Background}" />
                <Style.Triggers>
                    <Trigger Property="IsMouseOver" Value="True">
                        <Setter Property="Background" Value="Chartreuse" />
                    </Trigger>
                </Style.Triggers>
            </Style>
        </TextBlock.Style>
    </TextBlock>
</DataTemplate>

Upvotes: 2

Related Questions