银光中的自定义按钮

Question

我该如何在Silverlight中创建像这样的按钮？我需要使用Expression Blend吗？

由于我需要在应用程序的许多地方使用修改后的按钮，所以我应该将其作为用户控件吗？

- softwarematter

---

你只是有外观吗？还是已经有渐变色细节了？如果你只是凭眼睛看，Blend将会帮助很多...但是仅使用样式中的xaml也完全可行（尽管可能很耗时间）。你需要同时查看xaml和设计器，直到渐变色看起来符合你的要求。然后，你可以创建自己的继承版本的按钮，或者只在单个按钮或所有按钮上使用该样式。 - Jason Haley

Answer 1

您不需要使用UserControl，只需要一个自定义的Button模板作为样式资源，然后您可以通过在任何Button实例上设置样式来重用它。

虽然没有 Blend 也是可以做到的，但我强烈建议您至少尝试一下它的试用版，因为它是一个非常好用的面向设计/视觉开发的IDE！

编辑：这里是一个起点作为小礼物 :)

<Style x:Key="ButtonStyle1" TargetType="Button">
    <Setter Property="Foreground" Value="#FFFFFFFF"/>
    <Setter Property="Padding" Value="3"/>
    <Setter Property="BorderThickness" Value="1"/>
    <Setter Property="BorderBrush" Value="#FF000000"/>
    <Setter Property="Template">
         <Setter.Value>
              <ControlTemplate TargetType="Button">
                    <Grid>
                          <VisualStateManager.VisualStateGroups>
                                <VisualStateGroup x:Name="CommonStates">
                                      <VisualState x:Name="Normal"/>
                                      <VisualState x:Name="MouseOver"/>
                                      <VisualState x:Name="Pressed"/>
                                      <VisualState x:Name="Disabled">
                                           <Storyboard>
                                                <DoubleAnimation Duration="0" To="0.4" 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}">
                                  <Border.Background>
                                      <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                                          <GradientStop Color="#FF707070" Offset="0"/>
                                          <GradientStop Color="#FF666666" Offset="0.49"/>
                                          <GradientStop Color="#FF5e5e5e" Offset="0.51"/>
                                          <GradientStop Color="#FF535353" Offset="1"/>
                                      </LinearGradientBrush>
                                  </Border.Background>
                          </Border>
                          <ContentPresenter x:Name="contentPresenter" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}">
                                <ContentPresenter.Effect>
                                      <DropShadowEffect BlurRadius="3" ShadowDepth="2" Opacity="0.5"/>
                                </ContentPresenter.Effect>
                          </ContentPresenter>
                          <Rectangle x:Name="DisabledVisualElement" Fill="#FFFFFFFF" IsHitTestVisible="false" Opacity="0"/>
                          <Rectangle x:Name="FocusVisualElement" IsHitTestVisible="false" Margin="1" Opacity="0" Stroke="#FF6DBDD1" StrokeThickness="1"/>
                    </Grid>
              </ControlTemplate>
         </Setter.Value>
    </Setter>
</Style>

- dain

---

应该将模板ButtonStyle1放置在App.xaml中吗？我应该如何从我的xaml页面引用它？我尝试按照一些网站给出的指南操作，但没有成功。 - softwarematter

最简单的方法是在 App.xaml 中创建一个 <Application.Resources> 标签和一个 <ResourceDictionary> 标签，并将其粘贴到那里，但您也可以创建一个单独的 XAML 作为您的 ResourceDictionary，并使用 <ResourceDictionary.MergedDictionaries> 导入到您的 App.xaml 中。 - dain

我正在尝试在您的模板上添加鼠标悬停效果。我应该在Expression Blend中创建一个新的XAML文件，并将此代码放入其中，以便可以看到诸如鼠标悬停、禁用等事件。 - softwarematter

在我的例子中，为了保持简单，MouseOver和Pressed状态没有被实现，所以你可以使用Blend中的状态记录功能（在编辑模板时点击任何状态，然后更改的属性将被保存为动画而不会影响基本状态）来改变Background的颜色，或者如果你想做一些更高级的事情，只需添加更多的元素，比如Rectangles，看看Focus或Disabled状态是如何工作的！ - dain

Answer 2

你可以手工完成它，但相信我，使用Blend将会给你更多的功能，并且你会在短时间内得到更令人惊叹的结果，如果你决定自己完成所有工作，所需的时间会更长。

- Dyppl

Answer 3

我绝对会推荐使用Blend，因为它可以在样式控件和创建模板时节省大量时间。

然而，如果你不一定要求按钮与图像完全相同，那么有几个主题可以使用（比如JetPack），你可以从中借用模板，并在XAML中相对轻松地修改颜色。

- Town