[英]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>
這樣設置到我的列表框中:
<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
設置為默認值,因此我需要同時顯示樣式和轉換器。
問題
當我單擊列表框中的項目時,樣式或邊框位於頂部,如下圖所示。 如何設置為背景?
圖片在這里;
我怎樣才能解決這個問題 ?
我並沒有退出來理解整個問題,但是如果你不想把ListBoxItem的內容像ItemTemplate一樣的話,用ContentPresenter替換ContentControl。
<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>
編輯2:刪除itemtemplate,將帶有setter的listboxitem的背景設置為與轉換器綁定,然后在您的Template中,將網格的Backgorund綁定到其模板化父級的背景。
<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>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.