«Ровно» Windows 10 в стиле кнопок wpf - PullRequest
Новая
       42

«Ровно» Windows 10 в стиле кнопок wpf

0 голосов
/ 21 октября 2019

Я создаю приложение, кнопки которого должны выглядеть как Windows 10. Я имею в виду плоские, серые кнопки.

Я также хочу, чтобы анимация щелчка и прямоугольник фокусировки были похожи на Windows 10.

В настоящее время я написал это в Light.xaml словаре ресурсов: 

<Style TargetType="{x:Type Button}">
        <Setter Property="FocusVisualStyle">
            <Setter.Value>
                <Style>
                    <Setter Property="Control.Template">
                        <Setter.Value>
                            <ControlTemplate>
                                <Rectangle Margin="-3" SnapsToDevicePixels="True" Stroke="#000" StrokeThickness="2" />
                            </ControlTemplate>
                        </Setter.Value>
                    </Setter>
                </Style>
            </Setter.Value>
        </Setter>
        <Setter Property="Background" Value="#FFCCCCCC" />
        <Setter Property="BorderBrush" Value="#FF7a7a7a" />
        <Setter Property="Foreground" Value="#000" />
        <Setter Property="BorderThickness" Value="0" />
        <Setter Property="RenderTransformOrigin" Value="0.5, 0.5"/>
        <Setter Property="HorizontalContentAlignment" Value="Center" />
        <Setter Property="VerticalContentAlignment" Value="Center" />
        <Setter Property="RenderTransform">
            <Setter.Value>
                <ScaleTransform/>
            </Setter.Value>
        </Setter>
        <Setter Property="Padding" Value="1" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type Button}">
                    <Border x:Name="border" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" SnapsToDevicePixels="True">
                        <ContentPresenter x:Name="contentPresenter" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" ContentStringFormat="{TemplateBinding ContentStringFormat}" Focusable="False" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" />
                    </Border>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsMouseOver" Value="True">
                            <Setter Property="BorderThickness" TargetName="border" Value="2" />
                        </Trigger>

                        <Trigger Property="IsPressed" Value="True">
                            <Setter Property="BorderThickness" TargetName="border" Value="0"/>
                            <Setter Property="RenderTransform">
                                <Setter.Value>
                                    <ScaleTransform ScaleX="0.95" ScaleY="0.95"/>
                                </Setter.Value>
                            </Setter>
                            <Trigger.ExitActions>
                                <BeginStoryboard>
                                    <Storyboard>
                                        <DoubleAnimation
                                        Storyboard.TargetProperty="(RenderTransform).(ScaleTransform.ScaleX)"
                                        From="0.95" To="1.0" Duration="0:0:0.05" />
                                        <DoubleAnimation
                                        Storyboard.TargetProperty="(RenderTransform).(ScaleTransform.ScaleY)"
                                        From="0.95" To="1.0" Duration="0:0:0.05" />
                                    </Storyboard>
                                </BeginStoryboard>
                            </Trigger.ExitActions>
                        </Trigger>

                        <Trigger Property="IsEnabled" Value="False">
                            <Setter Property="Background" TargetName="border" Value="#FFF4F4F4" />
                            <Setter Property="Foreground" Value="#FF838383" />
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

Есть некоторые проблемы:

  1. Когда фокус находится на кнопке, и я нажимаю на неепрямоугольник фокуса остается и выглядит некрасиво. Я решил это с помощью Main_Window_PreviewMouseLeftButtonDown > System.Windows.Input.Keyboard.ClearFocus();, но если я делаю то же самое для Main_Window_PreviewKeyDown, когда я нажимаю пробел или ввод на кнопку, фокус очищается, но кнопка не нажимается. Любое решение?

  2. Триггер IsPressed не работает, когда я нажимаю кнопку ввода на кнопке (кнопка работает, но не показывает анимацию). В чем проблема? (Space работает хорошо)

Кроме того, законно ли применять стиль windows 10 для моего приложения? (Просили просто убедиться!)

...