Кнопки Google Style в WPF

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).