自定义选定的ListboxItem
本文关键字：ListboxItem 自定义 | 更新日期: 2023-09-27 17:49:20
我有一个ListBox(实际上，我有一个Telerik的RadJumpList，但我认为它是从ListBox继承的)自定义ItemContainerStyle。每个项目包含一个矩形(贴图)和2个字符串。到目前为止，它在默认情况下工作正常:当我选择一个项目时，字符串的颜色是改变的，矩形具有const color。
<DataTemplate x:Key="DataTemplate1">
<Grid Margin="0,0,12,12">
<Rectangle
x:Name="SlotTile"
Width="99" Height="99" Fill="Gray"/>
<StackPanel Grid.Row="0">
<TextBlock
FontWeight="Black"
FontSize="{StaticResource PhoneFontSizeSmall}"
Text="{Binding Title, Converter={StaticResource ToUpperConverter}}" />
<TextBlock
FontFamily="{StaticResource PhoneFontFamilySemiBold}"
FontSize="{StaticResource PhoneFontSizeSmall}"
Text="{Binding Information}" />
</StackPanel>
</Grid>
</DataTemplate>
我现在要做的是自定义选中的项目:tile的颜色应该改变，而字符串的颜色应该是相同的。
我试图设置自定义样式，使用VisualStateManager，但我不知道如何获得矩形和字符串的颜色。
<Style x:Name="MySlotStyle" TargetType="ListBoxItem">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ListBoxItem">
<Grid
Background="{TemplateBinding Background}">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="SelectionStates">
<VisualState x:Name="Selected">
<Storyboard>
<ColorAnimation
Storyboard.TargetName=""
Storyboard.TargetProperty=""
/>
</Storyboard>
</VisualState>
<VisualState x:Name="Unelected">
<Storyboard>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
所以，问题是如何设置DataTemplate的属性从Style。
编辑:上传样本:http://1drv.ms/1cJrjZ4
EDIT2:我从复选框:http://pastebin.com/2JV7d5We中提取(并修改了一点)一个样式它们描述了ControlTemplate内部的控件。
所以，我打算摆脱DataTemplate和移动到Style.Template.ControlTemplate的一切。现在，当我试图创建一个模板绑定到一个新的属性(矩形的颜色)，它说"成员填充是不可识别的"。
<Style x:Name="TestStyle" TargetType="ListBoxItem">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ListBoxItem">
<Grid Margin="0,0,12,12">
<VisualStateManager.VisualStateGroups>
****
<VisualStateGroup x:Name="SelectionStates">
<VisualState x:Name="Unselected"/>
<VisualState x:Name="Selected">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="SlotTile" Storyboard.TargetProperty="Fill">
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneAccentBrush}"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="Description" Storyboard.TargetProperty="TextForeground">
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource BlackBrush}"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Rectangle
x:Name="SlotTile"
Width="99" Height="99"
Fill="{TemplateBinding Fill}"/>
<TextBlock
x:Name="Description"
Foreground="{TepmlateBinding TextForeground}"
Text="{Binding Title}" />
****
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
您应该编辑ItemContainerStyle样式的副本，并将您的网格作为容器放入其中。然后，您可以编辑VisualState.Selected故事板，并将目标设置为Rectangle，将TargetProperty设置为Fill。
ItemContainerStyle的XAML代码:
<Style x:Key="ItemContainerCustomStyle" 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="Left"/>
<Setter Property="VerticalContentAlignment" Value="Top"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ListBoxItem">
<Border x:Name="LayoutRoot" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" HorizontalAlignment="{TemplateBinding HorizontalAlignment}" VerticalAlignment="{TemplateBinding VerticalAlignment}">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal"/>
<VisualState x:Name="MouseOver"/>
<VisualState x:Name="Disabled">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="LayoutRoot">
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource TransparentBrush}"/>
</ObjectAnimationUsingKeyFrames>
<DoubleAnimation Duration="0" To=".5" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="ContentContainer"/>
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="SelectionStates">
<VisualState x:Name="Unselected"/>
<VisualState x:Name="Selected">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Fill" Storyboard.TargetName="SlotTile">
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneAccentBrush}"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Grid Margin="0,0,12,12">
<Rectangle
x:Name="SlotTile"
Width="99" Height="99" />
<ContentControl x:Name="ContentContainer" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" Foreground="{TemplateBinding Foreground}" HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"/>
</Grid>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
编辑:您甚至可以通过使用默认样式中的Border容器元素来简化它。因此，您可以删除Grid和Rectangle元素。
<Style x:Key="ItemContainerCustomStyle" 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="Left"/>
<Setter Property="VerticalContentAlignment" Value="Top"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ListBoxItem">
<Border Width="99" Height="99" x:Name="LayoutRoot" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" HorizontalAlignment="{TemplateBinding HorizontalAlignment}" VerticalAlignment="{TemplateBinding VerticalAlignment}">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal"/>
<VisualState x:Name="MouseOver"/>
<VisualState x:Name="Disabled">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="LayoutRoot">
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource TransparentBrush}"/>
</ObjectAnimationUsingKeyFrames>
<DoubleAnimation Duration="0" To=".5" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="ContentContainer"/>
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="SelectionStates">
<VisualState x:Name="Unselected"/>
<VisualState x:Name="Selected">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="LayoutRoot">
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneAccentBrush}"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<ContentControl x:Name="ContentContainer" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" Foreground="{TemplateBinding Foreground}" HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"/>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
不能按名称设置这些属性吗?
<ColorAnimation
Storyboard.TargetName="SlotTile"
Storyboard.TargetProperty="Fill"
...
/>
如何自定义WP7列表框选中项| Part1
如何自定义WP7列表框选定项| Part2