按钮的 WPF 样式

Question

我已经很长时间（将近 4 年）没有使用 WPF 了。但是现在开始再次使用它进行一些使用，你可以看到我最常问的问题之一是在 WPF 中。我提到的原因是因为我确实对 WPF 及其工作原理有一些了解。我的最新项目涉及使用 BLEND 实现非常好的 UI。所以这里我有一个 Photoshop 布局，我正在尝试获得这个布局设计，

到目前为止我只有这个，

如果有人能指出我以下几点，我将不胜感激。

如何获得边框发光效果和曲线，以及如何将它们分组到单独文件中的特定样式并将其 link 到按钮。感谢您的时间和回答

编辑：使用我的样式代码。

我在 Custom_Styles.xaml（资源字典）中有以下样式代码我如何 link 它到按钮？

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                    xmlns:local="clr-namespace:Keyboard_actual">

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

</ResourceDictionary>

Answer 1

对于边框发光效果，您可以添加一个 Drop Shadow Effect，其中 Shadow Depth 为 0，所需的颜色和按钮的白色边框刷。

要在单独的文件中创建样式，您需要像这样创建资源字典：

项目 ► 添加新项目... ► 资源字典

然后命名您的文件。在这个例子中，我将其命名为 Styles.xaml.

现在打开你的 App.xaml 并将其放在 Application 标签中：

<Application.Resources>
    <ResourceDictionary>
        <ResourceDictionary.MergedDictionaries>
            <ResourceDictionary Source="Styles.xaml"/>
        </ResourceDictionary.MergedDictionaries>
        <!--Put all previous resources in the App.xaml here-->
    </ResourceDictionary>
</Application.Resources>

现在在 Styles.xaml 文件的 ResourceDictionary 标签内，放置样式。我也在研究一种风格。一旦我完成它，我将 post 它。

要link样式，使用：

<Button Style="{StaticResource Button}" .../>

它可能无法工作，因为密钥是 "Button"。如果它没有将其更改为 "ButtonStyle".

投影效果做得相当不错。

这是一个例子（放大 200%）：

和XAML风格：

<Style x:Key="ButtonStyle" TargetType="Button">
    <Setter Property="BorderBrush">
        <Setter.Value>
            <SolidColorBrush Color="#FF00C3BA"/>
        </Setter.Value>
    </Setter>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="Button">
                <Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="0.8" CornerRadius="3">
                    <Border.Effect>
                        <DropShadowEffect Color="#FF72FFE5" ShadowDepth="0"/>
                    </Border.Effect>
                    <TextBlock Foreground="{TemplateBinding BorderBrush}" Text="{TemplateBinding Content}" HorizontalAlignment="Center" VerticalAlignment="Center"/>
                </Border>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

这样使用：

<Grid Background="#FF171717">
    <Button Content="Q" HorizontalAlignment="Left" Height="47" Margin="103,59,0,0" VerticalAlignment="Top" Width="50" FontSize="20" FontFamily="Segoe UI Light" Style="{StaticResource ButtonStyle}"/>
    <Button Content="Y" HorizontalAlignment="Left" Height="47" Margin="378,59,0,0" VerticalAlignment="Top" Width="50" FontSize="20" FontFamily="Segoe UI Light" Style="{StaticResource ButtonStyle}"/>
    <Button Content="T" HorizontalAlignment="Left" Height="47" Margin="323,59,0,0" VerticalAlignment="Top" Width="50" FontSize="20" FontFamily="Segoe UI Light" Style="{StaticResource ButtonStyle}"/>
    <Button Content="R" HorizontalAlignment="Left" Height="47" Margin="268,59,0,0" VerticalAlignment="Top" Width="50" FontSize="20" FontFamily="Segoe UI Light" Style="{StaticResource ButtonStyle}"/>
    <Button Content="E" HorizontalAlignment="Left" Height="47" Margin="213,59,0,0" VerticalAlignment="Top" Width="50" FontSize="20" FontFamily="Segoe UI Light" Style="{StaticResource ButtonStyle}"/>
    <Button Content="W" HorizontalAlignment="Left" Height="47" Margin="158,59,0,0" VerticalAlignment="Top" Width="50" FontSize="20" FontFamily="Segoe UI Light" Style="{StaticResource ButtonStyle}"/>
</Grid>

按钮的 WPF 样式

WPF style for buttons

c#

wpf

wpf-controls