我正在尝试使用VisualStateManager在下面的用户控件的侧面显示一个标记矩形,但是我的DataTrigger / EventTrigger(都尝试了)似乎拒绝更改UserControl的状态。有任何想法吗?我目前正在使用Blend for VS 2013设计控件。
XAML:
<UserControl x:Class="Docular.Client.Windows.UI.SidebarElement"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008" mc:Ignorable="d"
xmlns:dms="clr-namespace:Docular.Client.Windows.UI"
xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity"
xmlns:ei="http://schemas.microsoft.com/expression/2010/interactions"
Width="110" Height="110"
DataContext="{Binding RelativeSource={RelativeSource Self}}"
x:Name="element"
Style="{DynamicResource SidebarElementStyle}">
<UserControl.Resources>
<Style x:Key="SidebarElementStyle" TargetType="{x:Type UserControl}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type UserControl}">
<Grid x:Name="grid">
<i:Interaction.Triggers>
<ei:DataTrigger Binding="{Binding IsMouseOver, Mode=OneWay, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type dms:SidebarElement}}}" Value="True">
<ei:GoToStateAction x:Name="MouseOverAction" StateName="MouseOver" TargetObject="{Binding Mode=OneWay, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type dms:SidebarElement}}}"/>
</ei:DataTrigger>
</i:Interaction.Triggers>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualStateGroup.Transitions>
<VisualTransition GeneratedDuration="0:0:0.25"/>
</VisualStateGroup.Transitions>
<VisualState x:Name="Normal"/>
<VisualState x:Name="MouseOver">
<Storyboard>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="Marker">
<EasingDoubleKeyFrame KeyTime="0" Value="0.75"/>
</DoubleAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(TextElement.Foreground)" Storyboard.TargetName="ContentLabel">
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource MediumLightBrush}"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Selected">
<Storyboard>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="Marker">
<EasingDoubleKeyFrame KeyTime="0" Value="1"/>
</DoubleAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(TextElement.Foreground)" Storyboard.TargetName="ContentLabel">
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource BrightLightBrush}"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Grid.RowDefinitions>
<RowDefinition Height="5*"/>
<RowDefinition Height="40*"/>
<RowDefinition Height="15*"/>
<RowDefinition Height="5*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="5*"/>
<ColumnDefinition Width="25*"/>
<ColumnDefinition Width="{Binding CenterColumnWidth, Mode=OneWay, RelativeSource={RelativeSource TemplatedParent}}"/>
<ColumnDefinition Width="25*"/>
<ColumnDefinition Width="5*"/>
</Grid.ColumnDefinitions>
<Rectangle x:Name="Marker"
Fill="{DynamicResource HighlightBrush}"
Grid.Row="1" Grid.RowSpan="2"
Opacity="0"/>
<ContentControl x:Name="IconDisplay"
Content="{Binding Path=Icon, ElementName=element}"
Grid.Column="2" Grid.Row="1"/>
<Label x:Name="ContentLabel" Content="{TemplateBinding Content}"
Style="{DynamicResource LabelStyleRegularDarkLight}"
Grid.Column="1" Grid.ColumnSpan="3" Grid.Row="2"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</UserControl.Resources>
代码隐藏:
public partial class SidebarElement : UserControl
{
public static DependencyProperty CenterColumnWidthProperty = DependencyProperty.Register("CenterColumnWidth", typeof(GridLength), typeof(SidebarElement), new PropertyMetadata(new GridLength(40, GridUnitType.Star)));
public static DependencyProperty IconProperty = DependencyProperty.Register("Icon", typeof(Path), typeof(SidebarElement));
[Bindable(true, BindingDirection.TwoWay)]
public GridLength CenterColumnWidth
{
get
{
return (GridLength)(this.GetValue(CenterColumnWidthProperty) ?? default(GridLength));
}
set
{
this.SetValue(CenterColumnWidthProperty, value);
}
}
[Bindable(true, BindingDirection.TwoWay)]
public Path Icon
{
get
{
return (Path)this.GetValue(IconProperty);
}
set
{
this.SetValue(IconProperty, value);
}
}
public SidebarElement()
{
InitializeComponent();
}
}
我不是XAML的新手,但对我来说,似乎还有很多事情需要学习。 ;)
最佳答案
我在通用应用程序中遇到了同样的问题,仅设置ElementName是不够的。确保您的交互性和VisualStateManager标记处于同一层次结构级别。这解决了我的问题。