Silverlight 将 VisualState 绑定到不同的目标

Question

我使用以下边框样式：

<!-- Border Style -->
<Style TargetType="Border">
    <Setter Property="Background">
        <Setter.Value>
            <LinearGradientBrush EndPoint="0.5, 1" StartPoint="0.5 ,0" MappingMode="RelativeToBoundingBox">
                <GradientStop Color="#00000000" Offset="0" />
                <GradientStop Color="#FFFFFEBB" Offset="0.116"/>
                <GradientStop Color="#FFFFFEBB" Offset="0.897"/>
                <GradientStop Color="#00000000" Offset="1" />
            </LinearGradientBrush>
        </Setter.Value>
    </Setter>
    <Setter Property="Opacity" Value="0"/>
    <Setter Property="OpacityMask">
        <Setter.Value>
            <LinearGradientBrush EndPoint="1.0 ,0.5" StartPoint="0.0 ,0.5" MappingMode="RelativeToBoundingBox">
                <GradientStop/>
                <GradientStop Color="#FF000000" Offset="0.1"/>
                <GradientStop Color="#FF000000" Offset="0.9"/>
                <GradientStop Color="#00000000" Offset="1"/>
            </LinearGradientBrush>
        </Setter.Value>
    </Setter>
    <Setter Property="RenderTransform">
        <Setter.Value>
            <CompositeTransform ScaleX="1.03" ScaleY="1.01"/>
        </Setter.Value>
    </Setter>
</Style>

我的应用程序中有三个边框。我想在鼠标光标进入边框时对边框的不透明度进行动画处理。为此，我使用 VisualState：

<VisualState x:Name="MouseOverState">
    <Storyboard>
        <DoubleAnimation To="1" Storyboard.TargetProperty="(UIElement.Opacity)" d:IsOptimized="True"/>
    </Storyboard>
</VisualState>

是否需要定义三个不同的 VisualState 并设置 Storyboard.TargetName 属性？或者有没有办法对许多对象使用相同的 VisualState？

附： 我知道 GoToStateAction 中有一个 TargetName 和 TargetObject 属性，但我无法让它工作：

<i:Interaction.Triggers>
    <i:EventTrigger EventName="MouseEnter">
        <ei:GoToStateAction StateName="MouseOverState" TargetName="border0"/>
    </i:EventTrigger>
    <i:EventTrigger EventName="MouseLeave">
        <ei:GoToStateAction StateName="DefaultState" TargetName="border0"/>
    </i:EventTrigger>
</i:Interaction.Triggers>

Answer 1

我倾向于创建一个派生自 ContentControl 的自定义控件。

在 theme\generic.xaml 中，

<Style TargetType="local:MyBorder">
    <Setter Property="Background">
        <Setter.Value>
            <LinearGradientBrush EndPoint="0.5, 1" StartPoint="0.5 ,0" MappingMode="RelativeToBoundingBox">
                <GradientStop Color="#00000000" Offset="0" />
                <GradientStop Color="#FFFFFEBB" Offset="0.116"/>
                <GradientStop Color="#FFFFFEBB" Offset="0.897"/>
                <GradientStop Color="#00000000" Offset="1" />
            </LinearGradientBrush>
        </Setter.Value>
    </Setter>
    <Setter Property="OpacityMask">
        <Setter.Value>
            <LinearGradientBrush EndPoint="1.0 ,0.5" StartPoint="0.0 ,0.5" MappingMode="RelativeToBoundingBox">
                <GradientStop/>
                <GradientStop Color="#FF000000" Offset="0.1"/>
                <GradientStop Color="#FF000000" Offset="0.9"/>
                <GradientStop Color="#00000000" Offset="1"/>
            </LinearGradientBrush>
        </Setter.Value>
    </Setter>
    <Setter Property="RenderTransform">
        <Setter.Value>
            <CompositeTransform ScaleX="1.03" ScaleY="1.01"/>
        </Setter.Value>
    </Setter>
  <Setter Property="Foreground" Value="#FF000000"/>
  <Setter Property="Template">
      <Setter.Value>
          <ControlTemplate TargetType="local:MyBorder">
            <Border Background="{TemplateBinding Background}"
                       BorderBrush="{TemplateBinding BorderBrush}"
                        BorderThickness="{TemplateBinding BorderThickness}"
                 Opacity="0"
             >
                <vsm:VisualStateManager.VisualStateGroups>
                      <vsm:VisualStateGroup x:Name="CommonStates">
                          <vsm:VisualState x:Name="Normal"/>
                          <vsm:VisualState x:Name="MouseOver">
                              <Storyboard>
                                  <DoubleAnimation To="1" Storyboard.TargetProperty="(UIElement.Opacity)" />
                              </Storyboard>
                          </vsm:VisualState>
                      </vsm:VisualStateGroup >
                </vsm:VisualStateManager>
              <ContentPresenter
                  Content="{TemplateBinding Content}"
                  ContentTemplate="{TemplateBinding ContentTemplate}"
                  Cursor="{TemplateBinding Cursor}"
                  Margin="{TemplateBinding Padding}"
                  HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                  VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
            </Border>
          </ControlTemplate>
      </Setter.Value>
  </Setter>
</Style>

您只需添加 MouseEnter MouseLeave 相应地设置控件的视觉状态。

现在，您只需将 local:MyBorder 放在需要这些边框之一的位置即可。