Question

I am new to styles and need help to create a style for a ListBoxItem that will give the item a transparent background then have the Font turn Gold when hovered over. It should not change the color when clicked and return to normal when the mouse moves off. It must still pass the selected object to the PreviewMouseRightButtonDown event for the ListBox

I currently use a default dictionary from REUXABLES THEMES, but it is way to much coloring for this portion of the display on the application.

Thanks,

    <DataTemplate x:Key="ItemsTemplate">
        <StackPanel Orientation="Vertical"
              Margin="0,5,0,5"
              Width="{Binding 
              Path=ActualWidth,
              RelativeSource={RelativeSource 
              Mode=FindAncestor, 
              AncestorType={x:Type ScrollContentPresenter}}}" MaxWidth="{Binding RelativeSource={RelativeSource FindAncestor, 
              AncestorType={x:Type ScrollViewer}}, Path=ViewportWidth}" >
            <TextBlock VerticalAlignment="Top" TextWrapping="Wrap" FontSize="14" Text="{Binding Path=CID}" />
                 <StackPanel Orientation="Horizontal" Margin="0,5,0,0" >
                    <TextBlock>
                        <Label Foreground="{DynamicResource DisabledForegroundBrush}" >Posted by</Label>
                        <Label Foreground="{DynamicResource DisabledForegroundBrush}" VerticalContentAlignment="Top" Content="{Binding Path=ACID}" />
                    </TextBlock>
                    <TextBlock>
                         <Label Foreground="{DynamicResource DisabledForegroundBrush}" Margin="3,0,0,0">at</Label>
                        <Label Foreground="{DynamicResource DisabledForegroundBrush}" Margin="3,0,3,0" VerticalContentAlignment="Top" Content="{Binding Path=Type}" />
                    </TextBlock>
                    <TextBlock>
                        <Label Foreground="{DynamicResource DisabledForegroundBrush}">(</Label>
                        <Label Foreground="{DynamicResource DisabledForegroundBrush}" VerticalContentAlignment="Top" Content="{Binding Path=Route}" />
                        <Label Foreground="{DynamicResource DisabledForegroundBrush}">)</Label>
                    </TextBlock>
                </StackPanel>

            </StackPanel>
    </DataTemplate>

    <Style x:Key="ItemsListBox" TargetType="{x:Type ListBoxItem}">
        <Setter Property="SnapsToDevicePixels" Value="true"/>
        <Setter Property="Background" Value="{DynamicResource Transparent}"/>
        <Setter Property="BorderBrush" Value="{DynamicResource Transparent}"/>
        <Setter Property="BorderBrush" Value="{DynamicResource Transparent}"/>
        <Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto"/>
    </Style>

<ListBox x:Name="ListViewFlightPlans" Grid.Column="0" ItemTemplate="{DynamicResource ItemsTemplate}" 
                         MaxWidth="800" ScrollViewer.HorizontalScrollBarVisibility="Disabled" BorderBrush="Black" BorderThickness="2,0,0,1">

            </ListBox>

Dave

Was it helpful?

Solution

Unfortunately changing BorderBrush for the ListBoxItem won't have your desired effect, since the Border with the selection highlight is internal to the ControlTemplate of the ListBoxItem.

Instead, you can add a new Brush resource with the key of SystemColors.HighlightBrushKey, this is the key that the ListBoxItem uses for setting the selection highlight color.

The inactive selection brush uses the key of SystemColors.ControlBrushKey, so if you override both of these with a transparent Brush you're guaranteed not to have any selection color. You can read more about it in this article.

Here's an example with everything but your DataTemplate:

<Grid xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:sys="clr-namespace:System;assembly=mscorlib" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <Grid.Resources>
        <x:Array x:Key="data" Type="{x:Type sys:String}">
            <sys:String>a </sys:String>
            <sys:String>bb</sys:String>
            <sys:String>ccc</sys:String>
            <sys:String>dddd</sys:String>
        </x:Array>
    </Grid.Resources>
    <ListBox ItemsSource="{StaticResource data}">
        <ListBox.Resources>
            <Style TargetType="{x:Type ListBoxItem}">
                <Style.Resources>
                    <SolidColorBrush x:Key="{x:Static SystemColors.HighlightBrushKey}" Color="Transparent"/>
                    <SolidColorBrush x:Key="{x:Static SystemColors.ControlBrushKey}" Color="Transparent"/>
                </Style.Resources>
                <Style.Triggers>
                    <Trigger Property="IsSelected" Value="True">
                        <Setter Property="Foreground" Value="Black"/>
                    </Trigger>
                    <Trigger Property="IsMouseOver" Value="True">
                        <Setter Property="Foreground" Value="Gold"/>
                    </Trigger>
                </Style.Triggers>
            </Style>
        </ListBox.Resources>
    </ListBox>
</Grid>
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top