silverlight中的自定义按钮

问题描述:

如何在silverlight中创建像这样的按钮。我需要表达融合吗?silverlight中的自定义按钮

由于我需要在我的应用程序中的许多地方使用修改的按钮,我应该把它作为用户控件吗?

enter image description here

+2

你只是看看你还是已经有渐变颜色的细节? Blend会帮助很多,如果你只是看看...然而它完全可以在一个样式中使用xaml(尽管可能很耗时)。您需要同时查看xaml和设计器,直到您看到您希望的渐变色。然后,您可以创建自己的继承版本的按钮,或者只使用单个按钮或所有按钮上的样式。 – 2011-05-28 13:10:47

您不需要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> 
+0

模板ButtonStyle1应放在App.xaml中。我应该如何从我的xaml页面引用它。我试图按照某些网站提供的指导方针进行操作,但没有奏效。 – devnull 2011-06-02 11:21:46

+2

最简单的方法是在App.xaml内创建一个''标记和一个''标记并粘贴到那里,但是你也可以创建一个单独的XAML作为你的'ResourceDictionary'并且导入到'App.xaml'使用'' – dain 2011-06-02 11:26:56

+0

我想添加鼠标在您的模板上的效果。我应该用Expression Blend中的这段代码创建一个新的XAML,以便鼠标悬停,禁用等事件可见。 – devnull 2011-06-04 03:14:51

你可以不用手工混合,但相信我,用混合会给你更多的权力,你会得到的时间部分更惊人的结果,如果你决定你需要自己做这一切。

我肯定会推荐掺和物,它造型的控制和创建模板时节省很多时间。

但是,如果你不具有按钮完全相同一样的图像设置,还有,你可以使用(如JetPack),从中你可以借模板和相对修正颜色的几个主题很容易在XAML中。