在Silverlight 4 ListBox上的鼠标悬停和选择时更改文本前景色 [英] Changing text foreground color on mouseover and selection with Silverlight 4 ListBox
问题描述
我正在尝试通过Silverlight ListBox完成以下方案:
I'm trying to accomplish the following scenario with a Silverlight ListBox:
- 普通项目的前景色为黑色，白色为背景
- 选定的项目具有白色的前景色和深蓝色的背景色
- 鼠标悬停时，背景变成橙色，前景文本颜色为黑色
我让每个部分都单独工作，但不能让它们一起工作.我首先重新模板化ListBoxItem，将ContentPresenter包装在ContentControl中，然后使用可视状态更改选定状态和鼠标悬停状态的前景和背景.但是，所选状态和鼠标悬停状态可以同时应用，这会在您将鼠标悬停在所选项目上然后移出鼠标时引起问题.建议避免在处于不同状态组的状态中更改单个属性.因此，我在第一个内容控件周围包装了另一个ContentControl，并尝试在一种视觉状态下更改父ContentControl的前景，并在另一种视觉状态下更改子ContentControl的前景.但是看来ContentControl不会从其父项继承前台属性，因此这似乎不起作用(即使我重新设计ContentControl来删除显式的前台属性设置器).
I have each of those pieces working individually but can't get them all working together. I started by retemplating the ListBoxItem, wrapping the ContentPresenter in a ContentControl and using Visual States to change the foreground and backgrounds for selected and mouseover states. But the selected and mouseover states can both apply simultaneously, which causes problems when you mouseover a selected item and then mouse out. The recommendation is to avoid changing a single property in states that are in different state groups. So I wrapped another ContentControl around the first content control, and tried changing the the parent ContentControl's foreground in one visual state and the child ContentControl's foreground in the other visual state. But it looks like ContentControl's don't inherit the foreground property from their parent, so that doesn't seem to work (even if I retemplate the ContentControl to remove the explicit foreground property setter).
所以我有点卡住了-不知道下一步该怎么做.这是我最近的迭代中的XAML
So I'm a bit stuck - don't know what to try next. Here's the XAML from my most recent iteration
<Style x:Key="SimpleListBoxItem" TargetType="ListBoxItem">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ListBoxItem">
<Grid>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal">
<Storyboard>
<ColorAnimation Duration="0" To="Yellow" Storyboard.TargetName="ContentControlChild"
Storyboard.TargetProperty="(Control.Foreground).(SolidColorBrush.Color)" />
</Storyboard>
</VisualState>
<VisualState x:Name="MouseOver">
<Storyboard>
<DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="Mouse_Over" />
<ColorAnimation Duration="0" To="{StaticResource G360-MainBlack}" Storyboard.TargetName="ContentControlChild"
Storyboard.TargetProperty="(Control.Foreground).(SolidColorBrush.Color)" />
</Storyboard>
</VisualState>
<VisualState x:Name="Disabled"/>
</VisualStateGroup>
<VisualStateGroup x:Name="FocusStates">
<VisualState x:Name="Unfocused"/>
<VisualState x:Name="Focused">
<Storyboard>
<DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="Selected1" />
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="SelectionStates">
<VisualState x:Name="Unselected">
<Storyboard>
<DoubleAnimation Duration="0" To="0" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="Selected1" />
</Storyboard>
</VisualState>
<VisualState x:Name="Selected">
<Storyboard>
<DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="Selected1" />
<ColorAnimation Duration="0" To="White" Storyboard.TargetName="ContentControlParent"
Storyboard.TargetProperty="(Control.Foreground).(SolidColorBrush.Color)" />
</Storyboard>
</VisualState>
<VisualState x:Name="SelectedUnfocused">
<Storyboard>
<DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="Selected1" />
<ColorAnimation Duration="0" To="White" Storyboard.TargetName="ContentControlParent"
Storyboard.TargetProperty="(Control.Foreground).(SolidColorBrush.Color)" />
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Rectangle x:Name="Selected1" Opacity="0" Fill="{StaticResource G360-ListSelected}" />
<Rectangle x:Name="Mouse_Over" RadiusX="2" RadiusY="2" Stroke="{StaticResource ListBorderSelected}" Opacity="0" Margin="2" Fill="{StaticResource -ListMouseOver}" />
<ContentControl x:Name="ContentControlParent">
<ContentControl x:Name="ContentControlChild">
<ContentControl.Style>
<Style TargetType="ContentControl">
<Setter Property="HorizontalContentAlignment" Value="Left"/>
<Setter Property="VerticalContentAlignment" Value="Top"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ContentControl">
<ContentPresenter
Content="{TemplateBinding Content}"
ContentTemplate="{TemplateBinding ContentTemplate}"
Cursor="{TemplateBinding Cursor}"
Margin="{TemplateBinding Padding}"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ContentControl.Style>
<ContentPresenter x:Name="ContextText" Content="{TemplateBinding Content}" VerticalAlignment="Center" Margin="8,5,4,5"/>
</ContentControl>
</ContentControl>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
推荐答案
ContentPresenters继承父项而不是ContentControl的样式属性(字体，前景等).
ContentPresenters inherit the style attributes (font, foreground, etc...) from the parent, not ContentControl.
我同意Rob的观点，即拥有两个ContentControls是使您对动画具有最大控制权的解决方案.这也允许在状态之间进行一些淡入/淡出过渡，而仅用一个元素就很难实现.
I agree with Rob that having two ContentControls is the solution that gives you the most control over the animations. This also allows to do some fade-in/fade-out transitions between the states, something that is difficult to achieve with just one element.
[edit]您不想为ListBoxItem模板化.而是使用ItemContainerStyle.这是最轻松地实现您想要的目标的最佳方法.
[edit] You don't want to template the ListBoxItem. Instead, work with the ItemContainerStyle. This is the best way to achieve what you want with the least headaches.
干杯， 洛朗(Laurent)
Cheers, Laurent
这篇关于在Silverlight 4 ListBox上的鼠标悬停和选择时更改文本前景色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
