Silverlight Привязать VisualState к различным целям - PullRequest
Новая
       14

Silverlight Привязать VisualState к различным целям

1 голос
/ 08 мая 2011

Я использую следующий стиль рамки: 

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

Нужно ли определять три разных VisualStates и устанавливать свойство 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>

1 Ответ

1 голос
/ 09 мая 2011

Я был бы склонен создать собственный элемент управления, основанный на 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 туда, где вам нужна одна из этих границ.

...