WPF ListBox Image Selected the saga continues

John Batdorf picture John Batdorf · Dec 23, 2008 · Viewed 8.5k times · Source

Ok in my ListBox scrolling images w/ text, etc. the saga continues. When I click one of the items, to select it, that runs a process to open a web browser and go to a specific URL. The problem I'm having now is that when the WPF app loses focus, and the web browser opens, the item clicked inside the listbox turns white. Here's the whole ListBox XAML. I have set the selected items to transparent, so does this have something to do with the WPF app losing focus?

Is there something I can add tom the code that runs the process to open the web browser to set focus back to the WPF app?

Thanks.

   <ListBox ItemsSource="{Binding Source={StaticResource WPFApparelCollection}}" Margin="61,-8,68,-18" ScrollViewer.VerticalScrollBarVisibility="Hidden" ScrollViewer.HorizontalScrollBarVisibility="Hidden" SelectionMode="Single" x:Name="list1" MouseLeave="List1_MouseLeave" MouseMove="List1_MouseMove" Style="{DynamicResource ListBoxStyle1}" Background="Transparent" BorderThickness="0">
        <ListBox.ItemContainerStyle>
            <Style TargetType="{x:Type ListBoxItem}">
                <Setter Property="Background" Value="Transparent" />
                <Setter Property="HorizontalContentAlignment" Value="{Binding Path=HorizontalContentAlignment, RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}" />
                <Setter Property="VerticalContentAlignment" Value="{Binding Path=VerticalContentAlignment, RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}" />
                <Setter Property="Padding" Value="20,10,20,10" />
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="{x:Type ListBoxItem}">
                            <Border x:Name="Bd" SnapsToDevicePixels="true" Background="Transparent" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Padding="{TemplateBinding Padding}">
                                <ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" />
                            </Border>
                            <ControlTemplate.Triggers>
                                <Trigger Property="IsSelected" Value="true">
                                    <Setter Property="Background" TargetName="Bd" Value="Transparent" />
                                    <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.HighlightTextBrushKey}}" />
                                </Trigger>
                                <MultiTrigger>
                                    <MultiTrigger.Conditions>
                                        <Condition Property="IsSelected" Value="true" />
                                        <Condition Property="Selector.IsSelectionActive" Value="false" />
                                    </MultiTrigger.Conditions>
                                    <Setter Property="Background" TargetName="Bd" Value="{DynamicResource {x:Static SystemColors.ControlBrushKey}}" />
                                    <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}" />
                                </MultiTrigger>
                                <Trigger Property="IsEnabled" Value="false">
                                    <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}" />
                                </Trigger>
                            </ControlTemplate.Triggers>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>
        </ListBox.ItemContainerStyle>
        <ListBox.ItemsPanel>
            <ItemsPanelTemplate>
                <VirtualizingStackPanel Orientation="Horizontal" IsItemsHost="True" />
            </ItemsPanelTemplate>
        </ListBox.ItemsPanel>
        <ListBox.ItemTemplate>
            <DataTemplate>
                <StackPanel Orientation="Vertical">
                    <Grid>
                        <Image Source="{Binding Image}" MouseLeave="Image_MouseLeave" MouseEnter="Image_MouseEnter" Cursor="Hand" Tag="{Binding Link}" MouseLeftButtonDown="Image_MouseLeftButtonDown"  VerticalAlignment="Top" HorizontalAlignment="Left"></Image>
                    </Grid>
                    <Label Content="{Binding Name}" Cursor="Hand" Tag="{Binding Link}" MouseLeftButtonDown="Label_MouseLeftButtonDown" VerticalAlignment="Bottom" Foreground="White" Style="{StaticResource Gotham-Medium}" FontSize="8pt" HorizontalAlignment="Center" />
                </StackPanel>
            </DataTemplate>
        </ListBox.ItemTemplate>
    </ListBox>

Answer

Matt Hamilton picture Matt Hamilton · Dec 23, 2008

One trick I've found when playing with selection colours in a ListBox is to work with the system brushes rather than fighting against them.

When a ListBox is focused and an item is selected, that item's background is SystemColors.HighlightBrush. When the ListBox loses focus, however, the selected item's background becomes SystemColors.ControlBrush.

Knowing this, you can override the system brushes for that ListBox so that the items within are painted with the colours you want.

<ListBox>
    <ListBox.Resources>
        <!-- override the system brushes so that selected items are transparent
             whether the ListBox has focus or not -->
        <SolidColorBrush
            x:Key="{x:Static SystemColors.HighlightBrushKey}" 
            Color="Transparent" />
        <SolidColorBrush
            x:Key="{x:Static SystemColors.ControlBrushKey}" 
            Color="Transparent" />
        <SolidColorBrush
            x:Key="{x:Static SystemColors.HighlightTextBrushKey}" 
            Color="Black" />
    </ListBox.Resources>
    <!-- ... your items here ... -->
</ListBox>