1

我正在使用以下边框样式：

<!-- 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？

PS：我知道 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>
4

1 回答 1

1

我倾向于创建一个从ContentControl.

在主题\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这些边界之一放在您需要的地方。

于 2011-05-08T21:13:10.560 回答