Button按钮样式风格模板

圆形效果：

初始状态：

鼠标悬停效果：

样式代码：

        <Style TargetType="Button">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="Button">
                        <Grid>
                            <Ellipse Width="100" Height="100" Name="ellipse1">
                                <Ellipse.Fill>
                                    <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
                                        <GradientStop Offset="0" Color="blue"/>
                                        <GradientStop Offset="1" Color="LightBlue"/>
                                    </LinearGradientBrush>
                                </Ellipse.Fill>
                            </Ellipse>
                            <Ellipse Width="80" Height="80">
                                <Ellipse.Fill>
                                    <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
                                        <GradientStop Offset="0" Color="White"/>
                                        <GradientStop Offset="1" Color="Transparent"/>
                                    </LinearGradientBrush>
                                </Ellipse.Fill>
                            </Ellipse>
                            <ContentPresenter VerticalAlignment="Center" HorizontalAlignment="Center"/>
                        </Grid>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsMouseOver" Value="true">
                                <Setter TargetName="ellipse1" Property="Fill" Value="Red"/>
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

应用：
（当然你也可以定义一个样式key值，然后引用该样式）

    <StackPanel>
        <Button>你点一下试试</Button>
    </StackPanel>

椭圆效果：

初始状态：

鼠标悬停效果：

样式代码：

     <ControlTemplate x:Key="ButtonTemplate" TargetType="Button">
            <Grid>
                <Ellipse x:Name="ButtonEllipse" Height="100" Width="150">
                    <Ellipse.Fill>
                        <LinearGradientBrush StartPoint = "0,0.2" EndPoint = "0.2,1.4">
                            <GradientStop Offset="0" Color="Red"></GradientStop>
                            <GradientStop Offset = "1" Color = "Orange" />
                        </LinearGradientBrush>
                    </Ellipse.Fill>
                </Ellipse>
                <ContentControl Content="{TemplateBinding Content}" 
                                HorizontalAlignment = "Center" VerticalAlignment = "Center"/>
            </Grid>
            <ControlTemplate.Triggers>
                <Trigger Property = "IsMouseOver" Value = "True">
                    <Setter TargetName="ButtonEllipse" Property="Fill">
                        <Setter.Value>
                            <LinearGradientBrush StartPoint = "0,0.2" EndPoint = "0.2,1.4">
                                <GradientStop Offset = "0" Color = "YellowGreen" />
                                <GradientStop Offset = "1" Color = "Gold" />
                            </LinearGradientBrush>
                        </Setter.Value>
                    </Setter>
                </Trigger>
                <Trigger Property="IsPressed" Value="true">
                    <Setter Property="RenderTransform">
                        <Setter.Value>
                            <ScaleTransform ScaleX = "0.8" ScaleY = "0.8" 
                        CenterX = "0" CenterY = "0"  />
                        </Setter.Value>
                    </Setter>
                    <Setter Property = "RenderTransformOrigin" Value = "0.5,0.5" />
                </Trigger>
            </ControlTemplate.Triggers>
        </ControlTemplate>

引用：

    <StackPanel>
        <Button Content = "你点一下试试"
         Template = "{StaticResource ButtonTemplate}" 
         Width = "150" Margin = "50" />
    </StackPanel>

矩形圆角效果：

样式代码：

        <ControlTemplate x:Key="CZButton" TargetType="{x:Type Button}">
            <Border Name="Border" 
            Background="blue"
            BorderThickness="2" 
            CornerRadius="5">
                <TextBlock Name="Txt"
                   Text="{TemplateBinding Content}"
                   TextAlignment="Center"
                   VerticalAlignment="Center"
                   HorizontalAlignment="Center"
                   FontSize="13"/>
            </Border>
            <ControlTemplate.Triggers>
                <Trigger Property="IsMouseOver" Value="True">
                    <Setter TargetName="Border" Property="Background" Value="#0140A2" />
                    <Setter TargetName="Txt" Property="Foreground" Value="White" />
                    <Setter  Property="Cursor" Value="Hand"/>
                </Trigger>
                <Trigger Property="IsEnabled" Value="false">
                    <Setter TargetName="Txt" Property="Foreground" Value="whitesmoke" />
                    <Setter  Property="Cursor" Value="IBeam"/>
                </Trigger>
            </ControlTemplate.Triggers>
        </ControlTemplate>

引用：

    <WrapPanel>
        <Button Template="{StaticResource CZButton}">你点一下试试</Button>
        <Button Template="{StaticResource CZButton}">你点一下试试</Button>
    </WrapPanel>

矩形圆角透明效果：

样式代码：

        <ControlTemplate x:Key="RoundButton" TargetType="Button">
            <Border Name="Border" CornerRadius="20" Background="Transparent" BorderBrush="#18C0F0" BorderThickness="1" Height="40">
                <TextBlock Name="Txt" Margin="3"
                   Text="{TemplateBinding Content}"
                   HorizontalAlignment="Center" VerticalAlignment="Center"
                   Foreground="#18C0F0"
                   FontSize="16"></TextBlock>
            </Border>
            <ControlTemplate.Triggers>
                <Trigger Property="IsMouseOver" Value="True">
                    <Setter TargetName="Txt" Property="Foreground" Value="White"/>
                    <Setter TargetName="Border" Property="Background" Value="#18C0F0"/>
                    <Setter TargetName="Border" Property="BorderBrush" Value="Transparent"/>
                    <Setter Property="Cursor" Value="Hand"/>
                </Trigger>
            </ControlTemplate.Triggers>
        </ControlTemplate>

引用：

    <StackPanel HorizontalAlignment="Center" VerticalAlignment="Center">
        <Button Template="{StaticResource RoundButton}">你点一下试试</Button>
    </StackPanel>