按钮的 WPF 样式

Question

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

到目前为止我只有这个，

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

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

编辑：用我的样式代码。

我在 Custom_Styles.xaml（资源字典）中有以下样式代码，如何将其链接到按钮？

<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

对于边框发光效果，您可以为按钮添加a为 0 和所需颜色的投影效果Shadow Depth以及白色边框画笔。

\n\n

要在单独的文件中创建样式，您需要创建一个资源字典，如下所示：

\n\n

项目\xe2\x96\xba添加新项目... \xe2\x96\xba资源字典

\n\n

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

\n\n

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

\n\n

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

\n\n

现在，在标记内的 Styles.xaml 文件中ResourceDictionary，放置样式。我也在研究一种风格。一旦我完成它，我就会发布它。

\n\n

要链接样式，请使用：

\n\n

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

\n\n

由于按键是“按钮”，因此它可能不起作用。如果它没有将其更改为“ButtonStyle”之类的内容。

\n\n

投影效果做得相当不错。

\n\n

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

\n\n

\n\n

和 XAML 样式：

\n\n

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

\n\n

像这样使用：

\n\n

<Grid Background="#FF171717">\n    <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}"/>\n    <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}"/>\n    <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}"/>\n    <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}"/>\n    <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}"/>\n    <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}"/>\n</Grid>\n

\n