我正在尝试使用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标记处于同一层次结构级别。这解决了我的问题。

10-08 03:59