WPF Xaml Custom Styling Selected Item Style in a ListBox

John Batdorf picture John Batdorf · Dec 10, 2008 · Viewed 32.5k times · Source

I have a ListBox that scrolls images horizontally.

I have the following XAML I used blend to create it. It originally had a x:Key on the Style TaregetType line, MSDN said to remove it, as I was getting errors on that. Now I'm getting this error:

Error 3 Operation is not valid while ItemsSource is in use. Access and modify elements with ItemsControl.ItemsSource instead.

I don't understand how to apply all of this junk that way, I've tried several things, nothing is working.

My goal is to have the selected item's background be white, not blue. Seems like a lot of work for something so small!

Thanks.

    <ListBox ItemsSource="{Binding Source={StaticResource WPFApparelCollection}}"
        Grid.Row="1" Margin="2,26,2,104" ScrollViewer.VerticalScrollBarVisibility="Hidden"
             ScrollViewer.HorizontalScrollBarVisibility="Hidden" SelectionMode="Single" 
        x:Name="list1" MouseLeave="List1_MouseLeave" MouseMove="List1_MouseMove" Style="{DynamicResource ListBoxStyle1}"  >
        <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="2,0,0,0"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type ListBoxItem}">
                        <Border x:Name="Bd" SnapsToDevicePixels="true" Background="{TemplateBinding Background}" 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="Foreground" Value="{DynamicResource {x:Static SystemColors.HighlightTextBrushKey}}"/>
                                <Setter Property="Background" TargetName="Bd" Value="#FFFFFFFF"/>
                            </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.ItemsPanel>
            <ItemsPanelTemplate>
                <VirtualizingStackPanel 
           Orientation="Horizontal" 
           IsItemsHost="True" />
            </ItemsPanelTemplate>
        </ListBox.ItemsPanel>
        <ListBox.ItemTemplate>
            <DataTemplate>
                <Image Source="{Binding Image}" />
            </DataTemplate>
        </ListBox.ItemTemplate>
    </ListBox>

Answer

Jobi Joy picture Jobi Joy · Dec 11, 2008

Wrap the Style Tag with an ItemContainerStyle as below:

<ListBox ItemsSource="{Binding Source={StaticResource WPFApparelCollection}}"
         Grid.Row="1" Margin="2,26,2,104"
         ScrollViewer.VerticalScrollBarVisibility="Hidden"
         ScrollViewer.HorizontalScrollBarVisibility="Hidden" 
         SelectionMode="Single"
         x:Name="list1" MouseLeave="List1_MouseLeave" MouseMove="List1_MouseMove" 
         Style="{DynamicResource ListBoxStyle1}"  >

        <ListBox.ItemContainerStyle>
            <Style TargetType="{x:Type ListBoxItem}">
                <Setter Property="Background" Value="Transparent"/>
            </Style>
<!-- the rest of your code,  but close the ItemContainerStyle -->
        </ListBox.ItemContainerStyle> 
    </ListBox>