利用Path路径设计的按钮图标(Silverlight)

 

实现简单的按钮图标,鼠标移上时显示框,本样式只专注于图案,文字要另外调整ContentPresenter的位置

<Style x:Key="refresh_Btn" TargetType="Button">
  <Setter Property="Padding" Value="3"/>
  <Setter Property="BorderThickness" Value="1"/>
  <Setter Property="BorderBrush" Value="#005FADDD" />
  <Setter Property="Background" Value="Transparent" />
  <Setter Property="Template">
      <Setter.Value>
    <ControlTemplate TargetType="Button">
        <Grid>
      <VisualStateManager.VisualStateGroups>
          <VisualStateGroup x:Name="CommonStates">
        <VisualState x:Name="Normal"/>
        <VisualState x:Name="MouseOver">
            <Storyboard>
          <ColorAnimation Duration="0:0:0.5" To="#FF5FADDD" 
	      Storyboard.TargetProperty="(Border.BorderBrush).(SolidColorBrush.Color)" 
	      Storyboard.TargetName="Background" />          
            </Storyboard>
        </VisualState>
        <VisualState x:Name="Pressed" />
        <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="Transparent" CornerRadius="0">
          <Grid Background="{TemplateBinding Background}" Margin="1">
             <Path x:Name="PathIcon" Data="...(省略)" Fill="#036EB8" HorizontalAlignment="Center" VerticalAlignment="Center">

             </Path>
          </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="{x:Null}" StrokeThickness="0"/>
        </Grid>
    </ControlTemplate>
      </Setter.Value>
  </Setter>
</Style>


 记录此方法,为日后项目中使用

---- 记录完毕 -----

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值