标签 标签 标签

  • 一句话的事儿：

效果介绍

  • 设计好的按钮可以被多次使用；

  • 每一个按钮的显示内容又不同；

    逻辑介绍

  • 将设计好的按钮样式存放到Grid.Resource中；

  • 设置模板属性；
  • 调用模板，其中模板按钮中的Text采用重写的方式，即Text={TemplateBlind Button.Content}

    源代码

    按钮样式

    1.       <Grid.Resources>
    2.           <Style x:Key="beautifulBtn" TargetType="Button">
    3.               <Setter Property="Width" Value="150"/>
    4.               <Setter Property="Height" Value="50"/>
    5.               <Setter Property="Template">
    6.                   <Setter.Value>
    7.                       <ControlTemplate>
    8.                           <Grid RenderTransformOrigin="0.5,0.5">
    9.                               <Grid.RenderTransform>
    10.                                   <RotateTransform Angle="0" x:Name="gridRotate"/>
    11.                               </Grid.RenderTransform>
    12.                               <Grid.Triggers>
    13.                                   <EventTrigger RoutedEvent="FrameworkElement.Loaded">
    14.                                       <BeginStoryboard>
    15.                                           <Storyboard>
    16.                                               <DoubleAnimation Storyboard.TargetName="gridRotate" Storyboard.TargetProperty="Angle" To="360" Duration="0:0:2"/>
    17.                                           </Storyboard>
    18.                                       </BeginStoryboard>
    19.                                   </EventTrigger>
    20.                               </Grid.Triggers>
    21.                               <TextBlock x:Name="txtBlock" Text="{TemplateBinding Button.Content}" TextAlignment="Center" VerticalAlignment="Center" FontSize="25" Foreground="Blue"/>
    22.                               <!--<Rectangle x:Name="rec" Width="100" Height="50" Fill="Violet" RadiusX="25" RadiusY="25" Opacity="0.5"></Rectangle>-->
    23.                               <Rectangle x:Name="rec" Width="100" Height="50" RadiusX="25" RadiusY="25" Opacity="0.5">
    24.                                   <!--将填充部分单独写，为了后面单独调用做准备-->
    25.                                   <Rectangle.Fill>
    26.                                       <!--采用刷子来填充-->
    27.                                       <SolidColorBrush x:Name="recBrush" Color="Blue"/>
    28.                                   </Rectangle.Fill>
    29.                                   <Rectangle.Triggers>
    30.                                       <EventTrigger RoutedEvent="UIElement.MouseEnter">
    31.                                           <BeginStoryboard>
    32.                                               <Storyboard>
    33.                                                   <DoubleAnimation Storyboard.TargetName="txtBlock" Storyboard.TargetProperty="FontSize" To="30" Duration="0:0:0.5"/>
    34.                                                   <ColorAnimation Storyboard.TargetName="recBrush" Storyboard.TargetProperty="Color" To="Gray" Duration="0:0:1"/>
    35.                                               </Storyboard>
    36.                                           </BeginStoryboard>
    37.                                       </EventTrigger>
    38.                                       <EventTrigger RoutedEvent="UIElement.MouseLeave">
    39.                                           <BeginStoryboard>
    40.                                               <Storyboard>
    41.                                                   <DoubleAnimation Storyboard.TargetName="txtBlock" Storyboard.TargetProperty="FontSize" To="25" Duration="0:0:0.5"/>
    42.                                                   <DoubleAnimation Storyboard.TargetName="txtBlock" Storyboard.TargetProperty="FontSize" To="25" Duration="0:0:0.5"/>
    43.                                                   <ColorAnimation Storyboard.TargetName="recBrush" Storyboard.TargetProperty="Color" To="Blue" Duration="0:0:1"/>
    44.                                               </Storyboard>
    45.                                           </BeginStoryboard>
    46.                                       </EventTrigger>
    47.                                   </Rectangle.Triggers>
    48.                               </Rectangle>
    49.                           </Grid>
    50.                       </ControlTemplate>
    51.                   </Setter.Value>
    52.               </Setter>
    53.           </Style>
    54.       </Grid.Resources>

    调用按钮

    1.       <Button Style="{StaticResource beautifulBtn}" Content="A按钮" Margin="321,184.5,0,0" VerticalAlignment="Top" HorizontalAlignment="Left"/>
    2.       <Button Style="{StaticResource beautifulBtn}" Content="B按钮" Margin="321,255,0,0" HorizontalAlignment="Left" VerticalAlignment="Top"/>
    3.       <Button Style="{StaticResource beautifulBtn}" Content="C按钮" Margin="321,115,0,0" VerticalAlignment="Top" HorizontalAlignment="Left"/>
    4.       <Button Style="{StaticResource beautifulBtn}" Content="D按钮" Margin="471,184.5,0,0" VerticalAlignment="Top" HorizontalAlignment="Left"/>
    5.       <Button Style="{StaticResource beautifulBtn}" Content="E按钮" Margin="171,184.5,0,0" VerticalAlignment="Top" HorizontalAlignment="Left"/>
  • 本文作者：GeekPower - Felix Sun
  • 版权声明： 本博客所有文章除特别声明外，均采用 MIT 许可协议。转载请注明出处！