在 Silverlight 中使用光栅图像作为按钮

Question

我有 Photoshop 提供的不同按钮状态的按钮。

看起来像这样 该

<Button x:Name="ResultsBtn" Click="ResultsBtn_Click" FontSize="27" BorderThickness="0"  Padding="-10"  Margin="-10">
    <Grid>
        <Image Source="..But_01_Idle.png"  Width="496"/>
        <TextBlock Text="Results" Margin="174,21,172,23" Width="90" Height="40" Foreground="White" />
    </Grid>
</Button>

按钮看起来只适合一种状态。

我想使用表达式混合来记录状态并更改图像后面的背景（在本例中为外发光）或更改状态更改时的源。

我注意到混合似乎只记录位置和变换，而不记录属性的变化。

我应该在代码中执行此操作，还是以特定格式发送 Photoshop 文件，以便可以通过混合自动转换它

Answer 1

好吧，我实际上对 Blend 感到非常惊讶：它似乎不允许您对源属性进行动画处理。然而，Silverlight 允许这样做，所以我认为 WP7 也会允许它；这看起来像是 Blend 4 中的一个错误。但是，我仍然不建议使用基于图像的方法，因为当显着放大或缩小时，图像会变形并且看起来很糟糕/像素化。更好的方法是编辑按钮的控件模板并修改它以匹配您的参考图稿。您甚至可以使用文件 ->导入 Adob​​e Photoshop 文件...将基本图稿拖入 Blend。然后只需将其拖入控制模板即可。

如果您执意要使用图像（这会增加 XAP 的大小并实际上导致加载 UserControl 的加载时间变慢），您可以在 Blend 中按如下方式进行操作：

1. 创建一个新项目并向根视觉对象添加一个 Button元素。
2. 创建一个名为 Images 的新项目文件夹，并向其中添加两个图像。 （我使用了 Sample Pictures 文件夹中的 Koala.jpg 和 Penguins.jpg。）
3. 右键单击按钮并选择编辑模板 ->编辑副本...
4. 默认模板将包含一个网格，其中包含名为背景的边框。背景边框内部是一个网格，其中包含一个矩形和另一个边框。删除这两个最里面的元素。
5. 现在添加一个图像作为背景边框网格的子项。
6. 现在切换到 XAML 编辑器并修改控件模板的视觉状态组以匹配以下代码。 （查找两个“已添加”注释块。）
7. 运行项目。将鼠标悬停在上面您会看到企鹅。单击并按住鼠标左键，您会看到一只考拉。

<Setter Property="Template">
  <Setter.Value>
    <ControlTemplate TargetType="Button">
      <Grid>
        <VisualStateManager.VisualStateGroups>
          <VisualStateGroup x:Name="CommonStates">
            <VisualState x:Name="Normal"/>
            <VisualState x:Name="MouseOver">

             <!-- Added --> 
             <Storyboard>
               <ObjectAnimationUsingKeyFrames Storyboard.TargetName="TheImage" Storyboard.TargetProperty="Source">
                 <DiscreteObjectKeyFrame KeyTime="0:0:0" Value="/Images/Penguins.jpg"/> 
               </ObjectAnimationUsingKeyFrames>
             </Storyboard>
             <!-- End of Added -->

             </VisualState>
             <VisualState x:Name="Pressed">
               <Storyboard>
                 <ColorAnimation Duration="0" To="#FF6DBDD1" Storyboard.TargetProperty="(Border.Background).**(SolidColorBrush.Color)" Storyboard.TargetName="Background"/>

                 <!-- Added -->
                 <ObjectAnimationUsingKeyFrames Storyboard.TargetName="TheImage" Storyboard.TargetProperty="Source">
                   <DiscreteObjectKeyFrame KeyTime="0:0:0" Value="/Images/Koala.jpg"/>  
                 </ObjectAnimationUsingKeyFrames>**
                 <!-- End of Added -->

               </Storyboard>
             </VisualState>
             <VisualState x:Name="Disabled">
               <Storyboard>
                 <DoubleAnimation Duration="0" To=".55" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="DisabledVisualElement"/>
                </Storyboard>
              </VisualState>
            </VisualStateGroup>
            <VisualStateGroup x:Name="FocusStates">
              <VisualState x:Name="Focused">
                <Storyboard>
                  <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="FocusVisualElement"/>
                </Storyboard>
              </VisualState>
              <VisualState x:Name="Unfocused"/>
            </VisualStateGroup>
          </VisualStateManager.VisualStateGroups>
        <Border x:Name="Background" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="White" CornerRadius="3">
          <Grid Background="{TemplateBinding Background}" Margin="1">
            <Image x:Name="TheImage" Source=""/>
          </Grid>
        </Border>
        <ContentPresenter x:Name="contentPresenter" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
        <Rectangle x:Name="DisabledVisualElement" Fill="#FFFFFFFF" IsHitTestVisible="false" Opacity="0" RadiusY="3" RadiusX="3"/>
        <Rectangle x:Name="FocusVisualElement" IsHitTestVisible="false" Margin="1" Opacity="0" RadiusY="2" RadiusX="2" Stroke="#FF6DBDD1" StrokeThickness="1"/>
      </Grid>
    </ControlTemplate>
  </Setter.Value>
</Setter>

Answer 2

视觉状态是用动画构建的，因此您只能更改可以动画化的内容（并期望典型结果）。我从未尝试过，但我的直觉告诉我图像源无法进行动画处理，因此 VSM 可能不是管理该问题的可行方法。

然而，不透明度可以设置动画，因此您可以将两个图像都放在 ytour 按钮中，并通过状态控制它们的不透明度。只是一个想法。

Answer 3

您必须创建一个 ControlTemplate：

按钮代码：

<Button Template={DynamicResource ButtonTemplate}/>

在您的资源字典中：

<ControlTemplate x:Key="ButtonTemplate" {x:Type Button}>
    <Grid Padding="-10"  Margin="-10">
        <Image x:Name="IdleState" Source="..But_01_Idle.png"  Width="496"/>
        <Image x:Name="MouseOverState" Source="..But_01_MouseOver.png" Width="496"/>
        <Image x:Name="PressedState..." etc/>
        <TextBlock Text="Results" Margin="174,21,172,23" Width="90" Height="40" Foreground="White" FontSize="27"/>
    </Grid>
</ControlTemplate>

然后，在 Blend 中编辑模板，您将找到 Mike 所说的状态。使用“属性”面板隐藏/显示您想要设置样式的每个状态的图像，您应该完成了。