Как сделать простую кнопку на основе изображения с визуальными состояниями в Silverlight 3? - PullRequest
Новая
       18

Как сделать простую кнопку на основе изображения с визуальными состояниями в Silverlight 3?

4 голосов
/ 23 февраля 2010

В моей предыдущей компании мы создавали наши RIA с использованием Flex с графическими ресурсами, созданными во Flash. Во Flash вы можете просто выложить свою графику для разных состояний, то есть отключить опрокидывание.

Сейчас я работаю над проектом Silverlight 3. Мне дали кучу изображений, которые должны служить графикой для кнопок, которые имеют опрокидывание, нажатие и нормальное состояние. Я не могу понять, как просто создавать кнопки с разными изображениями для разных визуальных состояний в Visual Studio 2008 или Expression Blend 3.

Вот где я сейчас нахожусь. Моя кнопка определяется в XAML следующим образом: 

<Button Style="{StaticResource MyButton}"/>

Стиль MyButton выглядит следующим образом: 

<Style x:Key="MyButton" TargetType="Button">
  <Setter Property="Template">
    <Setter.Value>
      <ControlTemplate TargetType="Button">
        <Image Source="/Assets/Graphics/mybtn_up.png" Width="54" Height="24">
          <VisualStateManager.VisualStateGroups>
            <VisualStateGroup x:Name="FocusStates">
              <VisualState x:Name="Focused"/>
              <VisualState x:Name="Unfocused"/>
            </VisualStateGroup>
            <VisualStateGroup x:Name="CommonStates">
              <VisualState x:Name="Normal"/>
              <VisualState x:Name="MouseOver"/>
              <VisualState x:Name="Pressed"/>
              <VisualState x:Name="Disabled"/>
            </VisualStateGroup>
          </VisualStateManager.VisualStateGroups>
        </Image>
      </ControlTemplate>
    </Setter.Value>
  </Setter>
</Style>

Я не могу понять, как назначить другой шаблон для разных состояний или как изменить источник изображения в зависимости от того, в каком состоянии я нахожусь. Как мне это сделать? Кроме того, если вам известна какая-либо хорошая документация, описывающая работу стилей в Silverlight, это было бы замечательно. Все результаты поиска, которые я могу придумать, бесполезны.

Edit:

Я нашел способ изменить изображение с помощью раскадровок, например: 

<Style x:Key="MyButton" TargetType="Button">
  <Setter Property="Template">
    <Setter.Value>
      <ControlTemplate TargetType="Button">
        <Image Source="/Assets/Graphics/mybtn_up.png" 
               Width="54" Height="24" x:Name="Image">
          <VisualStateManager.VisualStateGroups>
            <VisualStateGroup x:Name="FocusStates">
              <VisualState x:Name="Focused"/>
              <VisualState x:Name="Unfocused"/>
            </VisualStateGroup>
            <VisualStateGroup x:Name="CommonStates">
              <VisualState x:Name="Normal"/>
              <VisualState x:Name="MouseOver">
                <Storyboard Storyboard.TargetName="Image" 
                            Storyboard.TargetProperty="Source">
                  <ObjectAnimationUsingKeyFrames>
                    <DiscreteObjectKeyFrame KeyTime="0" Value="/Assets/Graphics/mybtn_over.png"/>
                  </ObjectAnimationUsingKeyFrames>
                </Storyboard>
              </VisualState>
              <VisualState x:Name="Pressed">
                <Storyboard Storyboard.TargetName="Image" 
                            Storyboard.TargetProperty="Source">
                  <ObjectAnimationUsingKeyFrames>
                    <DiscreteObjectKeyFrame KeyTime="0" Value="/Assets/Graphics/mybtn_active.png"/>
                  </ObjectAnimationUsingKeyFrames>
                </Storyboard>
              </VisualState>
              <VisualState x:Name="Disabled"/>
            </VisualStateGroup>
          </VisualStateManager.VisualStateGroups>
        </Image>
      </ControlTemplate>
    </Setter.Value>
  </Setter>
</Style>

Однако мне кажется, что это странный способ сделать что-то. Есть ли более стандартный способ сделать это?

1 Ответ

3 голосов
/ 27 марта 2010

Я думаю, что я сделал - это способ сделать это, учитывая, что никто не вмешался. Просто нужно будет принять это как ответ.

...