wpf - WPF 中的 Google 样式按钮

Question

我正在尝试为我的应用程序制作自定义按钮，但进展并不顺利。

我有以下 XAML 仅用于测试目的:

<Style x:Key="DefBtn" TargetType="{x:Type Button}">
            <Setter Property="FocusVisualStyle" Value="{StaticResource ButtonFocusVisual}"/>
            <Setter Property="Background" Value="{StaticResource ButtonNormalBackground}"/>
            <Setter Property="BorderBrush" Value="{StaticResource ButtonNormalBorder}"/>
            <Setter Property="BorderThickness" Value="1"/>
            <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>
            <Setter Property="HorizontalContentAlignment" Value="Center"/>
            <Setter Property="VerticalContentAlignment" Value="Center"/>
            <Setter Property="Padding" Value="1"/>
            <Setter Property="Template">
                    <Setter.Value>
        <ControlTemplate TargetType="Button">
            <Border Name="border" 
                BorderThickness="1"
                Padding="4,2" 
                BorderBrush="DarkGray" 
                CornerRadius="3" 
                Background="{TemplateBinding Background}">
                <Grid >
                <ContentPresenter HorizontalAlignment="Center" 
                            VerticalAlignment="Center" Name="content"/>
                </Grid>
            </Border>

                        <ControlTemplate.Triggers>
                            <Trigger Property="IsMouseOver" Value="True">
                    <Setter TargetName="border" Property="BorderBrush" Value="Yellow" />
                    <Setter Property="Foreground" Value="#FF4788c8" />
                </Trigger>
                            <Trigger Property="IsEnabled" Value="false">
                                <Setter Property="Foreground" Value="#ADADAD"/>
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

-

<Button x:Name="btnCancelTimer" Content="{Binding [LangResources.timerDetail4], FallbackValue=Cancel Timer, Mode=OneWay, Source={StaticResource localisation}}" Margin="231,0,231,32.04" VerticalAlignment="Bottom" IsCancel="True" FontSize="13.333" Click="BtnCancelTimerClick" Cursor="Hand" Foreground="#FF666666" Background="White" FontFamily="Arial" FontWeight="Bold" Width="115" Height="24" Style="{DynamicResource DefBtn}" />

我正在尝试实现与此完全相同的按钮样式，还包括按钮上的鼠标悬停和按下样式。

任何人都可以帮助/指导我如何实现这一目标吗？

谢谢

Answer 1

尝试使用这种风格

<Style x:Key="DefBtn" TargetType="{x:Type Button}">
    <Setter Property="Background" Value="#FFF5F5F5"/>
    <Setter Property="BorderBrush" Value="#FFDCDCDC"/>
    <Setter Property="BorderThickness" Value="1"/>
    <Setter Property="Foreground" Value="#FF666666"/>
    <Setter Property="FontWeight" Value="Bold"/>
    <Setter Property="FontSize" Value="11"/>
    <Setter Property="FontFamily" Value="Arial"/>
    <Setter Property="HorizontalContentAlignment" Value="Center"/>
    <Setter Property="VerticalContentAlignment" Value="Center"/>
    <Setter Property="Padding" Value="8,7"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="Button">
                <Border Name="border" 
                        BorderThickness="{TemplateBinding BorderThickness}"
                        Padding="{TemplateBinding Padding}" 
                        BorderBrush="{TemplateBinding BorderBrush}" 
                        CornerRadius="1" 
                        Background="{TemplateBinding Background}">
                    <ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" 
                                      VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                </Border>
                <ControlTemplate.Triggers>
                    <!--TODO: Set the right colors-->
                    <Trigger Property="IsMouseOver" Value="True">
                        <Setter TargetName="border" Property="BorderBrush" Value="Yellow" />
                        <Setter Property="Foreground" Value="#FF4788c8" />
                    </Trigger>
                    <Trigger Property="IsPressed" Value="True">
                        <!--Some setters here-->
                    </Trigger>
                    <Trigger Property="IsEnabled" Value="false">
                        <Setter Property="Foreground" Value="#ADADAD"/>
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

我对字体不太感兴趣，但 Arial 似乎非常接近。 KaXaml 显示这种风格如下:

此外，您还需要检查 MouseOver、Pressed 和 Disabled (IsEnabled=false) 触发器\状态的 setter 。