列表框中的 WPF Xaml 自定义样式选定项样式

WPF Xaml Custom Styling Selected Item Style in a ListBox

提问by John Batdorf

I have a ListBoxthat scrolls images horizontally.

我有一个ListBox水平滚动图像。

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

我有以下 XAML 我使用混合来创建它。它最初在线上有 ax:Key Style TaregetType，MSDN 说要删除它，因为我遇到了错误。现在我收到此错误：

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

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>

回答by Jobi Joy

Wrap the Style Tag with an ItemContainerStyle as below:

用 ItemContainerStyle 包裹 Style 标签，如下所示：

<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>

回答by Asad Durrani

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>