我如何设计按钮样式 [英] How do I style Buttons

问题描述

我的 UX 设计师给了我这些，我不知道从哪里开始设计我的 WPF 应用程序.任何帮助，将不胜感激.也许我可以为其他两个扩展一个例子.

My UX designer handed me these, and I don't know where to start on styling my WPF application. Any help would be appreciated. Perhaps an example for one that I can extend for the other two.

这些按钮在所有其他方面都是标准按钮，除了视觉显示.我认为我不需要实现自定义控件.

These would be standard buttons in all other respects except the visual display. I don't think I need to implement a custom control.

推荐答案

按钮样式 可能会对您有所帮助.它提供了一个 WPF 按钮模板的示例，您应该能够根据您的要求对其进行编辑.如果样式仅用于该表单，您可以将 Xaml 放在 Windows.Resources 中，或者您可以编辑 Application.xaml 文件并放置样式信息在 Application.Resources 部分中，如果它要用于整个应用程序.

The MSDN documentation on Button Styles will probably be of help to you. It gives an example of a WPF Button Template that you should be able to edit to your requirements. You can put the Xaml in Windows.Resources if the style is only going to be used on that Form, or you can edit the Application.xaml file and put the Style information in the Application.Resources Section if it it is to be used for the entire application.

修改上面的样式链接给你一个例子:

Modified above style link to give you an example:

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

这篇关于我如何设计按钮样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！