Подтвердить что ты не робот

Как стилизовать кнопки

Button Regular/Disabled

Button Hover

Мой дизайнер UX передал мне это, и я не знаю, с чего начать стилизовать приложение WPF. Любая помощь будет оценена по достоинству. Возможно, пример для одного, который я могу продлить для двух других.

Это будут стандартные кнопки во всех других отношениях, кроме визуального отображения. Я не думаю, что мне нужно реализовать пользовательский элемент управления.

4b9b3361

ОТВЕТЫ

Ответ 1

Документация MSDN по Стилям кнопок, вероятно, поможет вам. Он дает пример шаблона кнопок WPF, который вы должны иметь возможность редактировать в соответствии с вашими требованиями. Вы можете поместить Xaml в Windows.Resources, если стиль будет использоваться только в этой форме или вы можете отредактировать файл Application.xaml и поместить информацию о стиле в раздел Application.Resources, если он должен использоваться для всего приложения.

Изменена ссылка стиля стиля, чтобы дать вам пример:

<Application x:Class="Application"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
StartupUri="MainWindow.xaml">
    <Application.Resources>
        <!--Control colors.-->
        <Color x:Key="ControlNormalColor">#FFC0C0CE</Color>
        <Color x:Key="ControlMouseOverColor">#FFAFA3B9</Color>
        <Color x:Key="DisabledControlColor">#FFF2F2F2</Color>
        <Color x:Key="DisabledForegroundColor">#FFBFBFBF</Color>
        <Color x:Key="ControlPressedColor">#FF211AA9</Color>

        <!-- FocusVisual -->

        <Style x:Key="ButtonFocusVisual">
            <Setter Property="Control.Template">
                <Setter.Value>
                    <ControlTemplate>
                        <Border>
                            <Rectangle Margin="2" StrokeThickness="1" Stroke="#60000000" StrokeDashArray="1 2" />
                        </Border>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

        <!-- Button -->
        <Style TargetType="Button">
            <Setter Property="SnapsToDevicePixels" Value="true" />
            <Setter Property="OverridesDefaultStyle" Value="true" />
            <Setter Property="FocusVisualStyle" Value="{StaticResource ButtonFocusVisual}" />
            <Setter Property="MinHeight" Value="29px" />
            <Setter Property="MinWidth"  Value="103px" />
            <Setter Property="Foreground" Value="#FFFFFFFF" />
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="Button">
                        <Border TextBlock.Foreground="{TemplateBinding Foreground}" x:Name="Border">
                            <Border.Background>
                                <SolidColorBrush  Color="{DynamicResource ControlNormalColor}" />
                            </Border.Background>
                            <VisualStateManager.VisualStateGroups>
                                <VisualStateGroup x:Name="CommonStates">
                                    <VisualStateGroup.Transitions>
                                        <VisualTransition GeneratedDuration="0:0:0.5" />
                                        <VisualTransition GeneratedDuration="0" To="Pressed" />
                                    </VisualStateGroup.Transitions>
                                    <VisualState x:Name="Normal" />
                                    <VisualState x:Name="MouseOver">
                                        <Storyboard>
                                            <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Panel.Background).(SolidColorBrush.Color)"
                                                Storyboard.TargetName="Border">
                                                <EasingColorKeyFrame KeyTime="0" Value="{StaticResource ControlMouseOverColor}" />
                                            </ColorAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="Pressed">
                                        <Storyboard>
                                            <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Panel.Background).(SolidColorBrush.Color)"
                                                Storyboard.TargetName="Border">
                                                <EasingColorKeyFrame KeyTime="0" Value="{StaticResource ControlPressedColor}" />
                                            </ColorAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="Disabled">
                                        <Storyboard>
                                            <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Panel.Background).(SolidColorBrush.Color)"
                                                Storyboard.TargetName="Border">
                                                <EasingColorKeyFrame KeyTime="0" Value="{StaticResource DisabledControlColor}" />
                                            </ColorAnimationUsingKeyFrames>
                                            <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(TextBlock.Foreground).(SolidColorBrush.Color)"
                                                Storyboard.TargetName="Border">
                                                <EasingColorKeyFrame KeyTime="0" Value="{StaticResource DisabledForegroundColor}" />
                                            </ColorAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                </VisualStateGroup>
                            </VisualStateManager.VisualStateGroups>
                            <ContentPresenter Margin="2"
                            HorizontalAlignment="Center"
                            VerticalAlignment="Center"
                            RecognizesAccessKey="True" />
                        </Border>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

    </Application.Resources>
</Application>