Question

我尝试使用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并不是全新的，但对我而言，我似乎还有很多需要学习的东西。 ;）

Answer 1

我遇到了与Universal Application相同的问题，只是设置ElementName是不够的。确保您的Interactivity和VisualStateManager标记处于相同的层次结构级别。这解决了我的问题。

Answer 2

太棒了，将EventTrigger中的TargetObject设置为{Binding ElementName=grid}修复它！

GoToStateAction拒绝改变状态

2 个答案: