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>

私のアプリケーションには3つの境界線があります。マウスカーソルが境界線に入ったときの境界線の不透明度をアニメーション化したいと思います。これを行うために、私はVisualStateを使用しています。

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

3つの異なる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。

themes\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これで、これらの境界線の1つが必要な場所に簡単にドロップできます。

于 2011-05-08T21:13:10.560 に答える