自定义列表框项目样式 [英] Custom List Box item style
本文介绍了自定义列表框项目样式的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我的风格如下:
<!-- ListBox ItemTemplate style. -->
<Style x:Key="ListBoxItemStyle" TargetType="ListBoxItem">
<Setter Property="Background" Value="Transparent"/>
<Setter Property="BorderThickness" Value="0"/>
<Setter Property="BorderBrush" Value="Transparent"/>
<Setter Property="Padding" Value="0"/>
<Setter Property="HorizontalContentAlignment" Value="Stretch"/>
<Setter Property="VerticalContentAlignment" Value="Center"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ListBoxItem">
<Grid x:Name="LayoutRoot" Background="{TemplateBinding Background}" HorizontalAlignment="{TemplateBinding HorizontalAlignment}" VerticalAlignment="{TemplateBinding VerticalAlignment}">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal"/>
<VisualState x:Name="MouseOver">
<Storyboard>
<DoubleAnimation Duration="0" To=".75" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="fillColor"/>
</Storyboard>
</VisualState>
<VisualState x:Name="MouseLeave">
<Storyboard>
<DoubleAnimation Duration="0" To="0.75" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="contentPresenter"/>
</Storyboard>
</VisualState>
<VisualState x:Name="Disabled">
<Storyboard>
<DoubleAnimation Duration="0" To=".55" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="contentPresenter"/>
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="SelectionStates">
<VisualState x:Name="Unselected"/>
<VisualState x:Name="Selected">
<Storyboard>
<DoubleAnimation Duration="0" To=".75" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="fillColor2"/>
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="FocusStates">
<VisualState x:Name="Focused">
<Storyboard>
<ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="Visibility" Storyboard.TargetName="FocusVisualElement">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<Visibility>Visible</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Unfocused"/>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<ContentControl x:Name="ContentContainer"
ContentTemplate="{TemplateBinding ContentTemplate}"
Content="{TemplateBinding Content}"
HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
Margin="{TemplateBinding Padding}"
VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"/>
<Rectangle x:Name="fillColor" Fill="#d2c2f9" IsHitTestVisible="False" RadiusY="1" RadiusX="1" Margin="0,3" Opacity="0"/>
<Rectangle x:Name="fillColor2" Fill="#d2c2f9" IsHitTestVisible="False" RadiusY="1" RadiusX="1" Margin="0,3" Opacity="0"/>
<Rectangle x:Name="FocusVisualElement" RadiusY="1" RadiusX="1" StrokeThickness="1" Visibility="Collapsed" Margin="0,3"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
这是这样设置到我的列表框中的:
This is set to my list box like this :
<ListBox Name="listBox"
HorizontalAlignment="Stretch"
ItemContainerStyle="{StaticResource ListBoxItemStyle}"
ItemTemplate="{StaticResource DefaultDataTemplate}"
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
</ListBox>
现在ItemTemplate="{StaticResource DefaultDataTemplate}"如下所示；
<DataTemplate x:Key="DefaultDataTemplate">
<Border x:Name="ListItemBorder"
Margin="0,2,0,0"
VerticalAlignment="Stretch"
HorizontalAlignment="Stretch"
Background="{Binding Converter={StaticResource AnswerCellBackgroundConvertor}}">
///ITems
</Border>
</DataTemplate>
如您所见，我已经将DataTemplate Background设置为默认值，所以我需要同时显示样式和转换器.
As you can see i have set DataTemplate Background as default well, so i need both the style and the converter to be present.
问题
当我单击列表框中的项目时，样式或边框位于顶部，如下图所示.如何将其设置为背景?
When i click on the item in the list box the style or the border is on top, like the image show below. how to set it as a background ?
此处的图片；
我该如何解决?
推荐答案
我没有退出来了解完整的问题，但是如果您不希望ListBoxItem的内容完全像ItemTemplate一样，请使用ContentPresenter替换ContentControl
I didn't quit understand the full problem , but if you wan't the Content of the ListBoxItem to be exactly like the ItemTemplate replace the ContentControl with a ContentPresenter .
<ControlTemplate>
<Grid>
<Rectangle x:Name="fillColor" Fill="#d2c2f9" IsHitTestVisible="False" RadiusY="1" RadiusX="1" Margin="0,3" Opacity="0"/>
<Rectangle x:Name="fillColor2" Fill="#d2c2f9" IsHitTestVisible="False" RadiusY="1" RadiusX="1" Margin="0,3" Opacity="0"/>
<Rectangle x:Name="FocusVisualElement" RadiusY="1" RadiusX="1" StrokeThickness="1" Visibility="Collapsed" Margin="0,3"/>
<ContentPresenter />
</Grid>
<Grid>
<Border BorderBrush="#d2c2f9" BorderThickness="1">
<ContentPresenter />
</Border>
<Rectangle x:Name="FocusVisualElement" RadiusY="1" RadiusX="1" StrokeThickness="1" Visibility="Collapsed" Margin="0,3"/>
</Grid>
删除itemtemplate，将带有setter的listboxitem的背景设置为与转换器绑定，然后在您的Template中，将网格的Backgorund绑定到其模板化父级的背景.
edit 2 : remove the itemtemplate set the background of the listboxitem with a Setter to binding with your converter , and in your Template your Grid's Backgorund is bound to it's templated parent's background.
<Style x:Key="ListBoxItemStyle" TargetType="ListBoxItem">
<!-- this -->
<Setter Property="Background" Value="{Binding Path=Content,Converter={StaticResource AnswerCellBackgroundConvertor}}"/>
<Setter Property="BorderThickness" Value="0"/>
<Setter Property="BorderBrush" Value="Transparent"/>
<Setter Property="Padding" Value="0"/>
<Setter Property="HorizontalContentAlignment" Value="Stretch"/>
<Setter Property="VerticalContentAlignment" Value="Center"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ListBoxItem">
<!-- and this Background-->
<Grid x:Name="LayoutRoot"
Background="{TemplateBinding Background}"
HorizontalAlignment="{TemplateBinding HorizontalAlignment}" VerticalAlignment="{TemplateBinding VerticalAlignment}">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal"/>
<VisualState x:Name="MouseOver">
<Storyboard>
<DoubleAnimation Duration="0" To=".75" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="fillColor"/>
</Storyboard>
</VisualState>
<VisualState x:Name="MouseLeave">
<Storyboard>
<DoubleAnimation Duration="0" To="0.75" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="contentPresenter"/>
</Storyboard>
</VisualState>
<VisualState x:Name="Disabled">
<Storyboard>
<DoubleAnimation Duration="0" To=".55" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="contentPresenter"/>
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="SelectionStates">
<VisualState x:Name="Unselected"/>
<VisualState x:Name="Selected">
<Storyboard>
<DoubleAnimation Duration="0" To=".75" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="fillColor2"/>
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="FocusStates">
<VisualState x:Name="Focused">
<Storyboard>
<ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="Visibility" Storyboard.TargetName="FocusVisualElement">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<Visibility>Visible</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Unfocused"/>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<ContnerPresenter />
<Rectangle x:Name="fillColor" Fill="#d2c2f9" IsHitTestVisible="False" RadiusY="1" RadiusX="1" Margin="0,3" Opacity="0"/>
<Rectangle x:Name="fillColor2" Fill="#d2c2f9" IsHitTestVisible="False" RadiusY="1" RadiusX="1" Margin="0,3" Opacity="0"/>
<Rectangle x:Name="FocusVisualElement" RadiusY="1" RadiusX="1" StrokeThickness="1" Visibility="Collapsed" Margin="0,3"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
这篇关于自定义列表框项目样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
