silverlight中的自定义按钮

时间:2011-05-28 07:39:19

标签: silverlight xaml expression-blend

如何在silverlight中创建这样的按钮。我是否需要表达式混合。

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

enter image description here

3 个答案:

答案 0 :(得分:11)

您不需要UserControl,只需将自定义Button模板作为样式资源,然后您可以通过在任何Button实例上设置样式来重复使用。< / p>

虽然没有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>

答案 1 :(得分:2)

你可以在没有手工混合的情况下做到这一点,但相信我,使用Blend会给你更多的力量,如果你决定自己做所有这些,你会得到更多惊人的结果

答案 2 :(得分:2)

我肯定会推荐Blend,因为它可以在样式控件和创建模板时节省大量时间。

但是,如果您没有将按钮设置为与图像完全相同,那么您可以使用几个主题(例如JetPack)借用模板并在XAML中相对容易地修改颜色。