CODEWITHSUNDEEP
wpflistboxstylesselecteditem
John Batdorf
John Batdorf

Reputation: 2542

WPF Xaml Custom Styling Selected Item Style in a ListBox

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>

Upvotes: 8

Views: 33426

Answers (2)

Asad Durrani
Asad Durrani

Reputation: 2237

I tried the above solution but it didnt worked as expected so I found another way to solve my problem which is to disable selection for listbox

this is what I did

<ListBox.ItemContainerStyle>
    <Style TargetType="{x:Type ListBoxItem}">
         <Setter Property="Focusable" Value="False"/>
     </Style>
</ListBox.ItemContainerStyle>

Upvotes: 2

Jobi Joy
Jobi Joy

Reputation: 50038

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>

Upvotes: 13

Related Questions