WPF 自定义Button样式(完)

转载

wx6156f59b48086 2021-11-30 18:04:33

文章标签 ico github 点击效果微信静态资源 文章分类 代码人生

前面两篇零零散散做了几个按钮样式，突然一想，总不能一直做按钮

吧。。。哈哈

今天就把按钮的文章给完结了。当然，本篇还是做按钮的效果~

比之前新加了两个按钮，效果如下。

WPF 自定义Button样式(完)_github

二行的三个按钮绑定了同一个command（懒的写了哈反正只是测试点击效果。。）

效果说完了，下面当然是要上代码啦

主页面引用：

<Button Style="{StaticResource IconGrowButton}" 
Height="50"
Command="{Binding BusyCommand}"
Content="Busy?"/>
<Button Style="{StaticResource IconGrowImageButton}" 
Height="50"
Command="{Binding BusyCommand}">
<Image Source="/Images/head.jpg"/>
</Button>

第一个按钮样式


<Style x:Key="IconGrowButton" TargetType="{x:Type Button}">
        <Setter Property="Background" Value="Transparent"/>
        <Setter Property="Foreground" Value="White"/>
        <Setter Property="BorderThickness" Value="0"/>
        <Setter Property="FontSize" Value="{StaticResource FontSizeLarge}"/>
        <Setter Property="FontFamily" Value="{StaticResource FontAwesome}"/>
        <Setter Property="Padding" Value="5"/>
        <Setter Property="Margin" Value="0"/>
        <Setter Property="Width" Value="{Binding ActualHeight,RelativeSource={RelativeSource Self}}"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type ButtonBase}">
                    <Border x:Name="border"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
Background="{TemplateBinding Background}" 
SnapsToDevicePixels="True">
                        <!--add a render scale transform-->
                        <Border.RenderTransform>
                            <ScaleTransform/>
                        </Border.RenderTransform>
                        <Border.RenderTransformOrigin>
                            <Point X="0.5" Y="0.5"/>
                        </Border.RenderTransformOrigin>
                        <Grid>
                            <Viewbox>
                                <TextBlock Text="{TemplateBinding Content}" 
Focusable="False" 
FontFamily="{TemplateBinding FontFamily}"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" 
Margin="{TemplateBinding Padding}" 
FontSize="{TemplateBinding FontSize}"
SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" 
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                            </Viewbox>

                        </Grid>
                    </Border>
                    <ControlTemplate.Triggers>
                        <EventTrigger RoutedEvent="MouseEnter">
                            <BeginStoryboard>
                                <Storyboard>
                                    <DoubleAnimation To="1.3" Duration="0:0:0.15" Storyboard.TargetName="border" Storyboard.TargetProperty="(RenderTransform).(ScaleTransform.ScaleX)"/>
                                    <DoubleAnimation To="1.3" Duration="0:0:0.15" Storyboard.TargetName="border" Storyboard.TargetProperty="(RenderTransform).(ScaleTransform.ScaleY)"/>
                                </Storyboard>
                            </BeginStoryboard>
                        </EventTrigger>
                        <EventTrigger RoutedEvent="MouseLeave">
                            <BeginStoryboard>
                                <Storyboard>
                                    <DoubleAnimation To="1" Duration="0:0:0.15" Storyboard.TargetName="border" Storyboard.TargetProperty="(RenderTransform).(ScaleTransform.ScaleX)"/>
                                    <DoubleAnimation To="1" Duration="0:0:0.15" Storyboard.TargetName="border" Storyboard.TargetProperty="(RenderTransform).(ScaleTransform.ScaleY)"/>
                                </Storyboard>
                            </BeginStoryboard>
                        </EventTrigger>
                        <Trigger Property="IsEnabled" Value="False">
                            <Setter Property="Background" TargetName="border" Value="blue"/>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
</Style>

第二个按钮样式：

<Style x:Key="IconGrowImageButton" TargetType="{x:Type Button}">
        <Setter Property="Background" Value="{x:Null}"/>
        <Setter Property="Foreground" Value="White"/>
        <Setter Property="BorderThickness" Value="0"/>
        <Setter Property="FontSize" Value="{StaticResource FontSizeLarge}"/>
        <Setter Property="FontFamily" Value="{StaticResource FontAwesome}"/>
        <Setter Property="Padding" Value="5"/>
        <Setter Property="Margin" Value="0"/>
        <Setter Property="Width" Value="{Binding ActualHeight,RelativeSource={RelativeSource Self}}"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type ButtonBase}">
                    <Border x:Name="border"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
Background="{TemplateBinding Background}" 
CornerRadius="25"
SnapsToDevicePixels="True">
                        <Border.Clip>
                            <EllipseGeometry Center="25,25" RadiusX="20" RadiusY="20"></EllipseGeometry>
                        </Border.Clip>
                        <Border.RenderTransform>
                            <ScaleTransform/>
                        </Border.RenderTransform>
                        <Border.RenderTransformOrigin>
                            <Point X="0.5" Y="0.5"/>
                        </Border.RenderTransformOrigin>
                        <Grid>
                            <Viewbox >
                                <ContentPresenter VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
Margin="{TemplateBinding Padding}" 
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" 
Focusable="False"
SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" />
                            </Viewbox>
                        </Grid>
                    </Border>
                    <ControlTemplate.Triggers>
                        <EventTrigger RoutedEvent="MouseEnter">
                            <BeginStoryboard>
                                <Storyboard>
                                    <DoubleAnimation To="1.3" Duration="0:0:0.15" Storyboard.TargetName="border" Storyboard.TargetProperty="(RenderTransform).(ScaleTransform.ScaleX)"/>
                                    <DoubleAnimation To="1.3" Duration="0:0:0.15" Storyboard.TargetName="border" Storyboard.TargetProperty="(RenderTransform).(ScaleTransform.ScaleY)"/>
                                </Storyboard>
                            </BeginStoryboard>
                        </EventTrigger>
                        <EventTrigger RoutedEvent="MouseLeave">
                            <BeginStoryboard>
                                <Storyboard>
                                    <DoubleAnimation To="1" Duration="0:0:0.15" Storyboard.TargetName="border" Storyboard.TargetProperty="(RenderTransform).(ScaleTransform.ScaleX)"/>
                                    <DoubleAnimation To="1" Duration="0:0:0.15" Storyboard.TargetName="border" Storyboard.TargetProperty="(RenderTransform).(ScaleTransform.ScaleY)"/>
                                </Storyboard>
                            </BeginStoryboard>
                        </EventTrigger>
                        <Trigger Property="IsEnabled" Value="False">
                            <Setter Property="Background" TargetName="border" Value="Gray"/>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
</Style>