Question

这就是我希望我的UWP按钮看起来像使用“样式”块：

左上角点亮，右下角点亮这不是一个主观问题。我问的是如何制作每个人多年来一直使用的最通用的按钮样式，但UWP缺少这种样式，并且以最简单的方式实现，没有太多的XAML代码可以拖延。

当我将按钮并排放在UWP网格容器中时，按钮总是看起来很糟糕。你如何最小化按钮的样式，使它们看起来很好？见上图。我可以用零间距将它们放在一起，但按钮之间的定义看起来仍然很好。

我认为这一段时间看起来不错（见下文）。但过了一段时间，我决定，我更喜欢传统的3D按钮外观，左边框和右边框之间的边界重叠，边距= 1 ...而不是加倍到2像素......或者这可能是一些错觉我尚未找到的属性配置......

<Page ... Margin="1">
    <Page.Resources>
        <Style TargetType="Button">
            <Setter Property="BorderBrush" Value="Black"/>
            <Setter Property="BorderThickness"  Value="1"/>
            <Setter Property="Margin" Value="1"/>
        </Style>
    </Page.Resources>
    <StackPanel Orientation="Horizontal">
        <Button Content="Button1"/>
        <Button Content="B2"/>
        <Button Content="XYZ"/>
    </StackPanel>
</Page>

Answer 1

你非常接近，为了模仿你正在寻找的风格，你可以将BorderThickness属性调整为0,0,1,1：

    <Style TargetType="Button">
        <Setter Property="BorderBrush" Value="Black"/>
        <Setter Property="BorderThickness"  Value="0,0,1,1"/>
        <Setter Property="Margin" Value="1"/>
    </Style>

这给你看这个：

Answer 2

根据Michael Hawker的答案，我创建了一个带挡板的按钮。

public class BezelButton : Button
{
    public BezelButton()
    {
        Margin = new Thickness(1, 1, 0, 0);
        BorderThickness = new Thickness(0, 0, 2, 2);
        BorderBrush = new SolidColorBrush(Colors.DarkGray);
        Content = "Hello";
    }
}

public class HamburgerButton : BezelButton
{
    public HamburgerButton()
    {
        // Default Font Height of Button
        double H = (double)Button.FontSizeProperty.GetMetadata(typeof(double)).DefaultValue;

        double A = H / 5;

        GeometryCollection DataHamburger = new GeometryCollection
    {
        new RectangleGeometry {Rect = new Rect{X = 0, Y = 0*A,  Width = 20, Height = A/2 }},
        new RectangleGeometry {Rect = new Rect{X = 0, Y = 2*A,  Width = 20, Height = A/2 }},
        new RectangleGeometry {Rect = new Rect{X = 0, Y = 4*A,  Width = 20, Height = A/2 }},
    };

        Path PathHamburger = new Path
        {
            Fill    = new SolidColorBrush(Colors.DarkGray),
            Stroke  = new SolidColorBrush(Colors.DarkGray),
            StrokeThickness = 1.0,
            Height  = H,
            Margin = new Thickness(4.5), // <==??? HOW TO AUTOMATICALLY CALCULATE??
            Data = new GeometryGroup { Children = DataHamburger }
        };

        Content = PathHamburger;

    }

Answer 3

使用经典GUI 3D Bezel创建按钮的另一种方法是将内部按钮嵌套在彼此内部。

    <Border Padding= "2,2,0,0"
            BorderThickness= "0,0,2,2" 
            BorderBrush= "DarkGray"
           Background= "AntiqueWhite">
        <Border Background= "White" >
            <Button Content= "Hello" />
        </Border>
    </Border>

外边框创建左上角边框和右下角边框，其中左上角边框的颜色由边框组件的背景设置。内边框用于将此背景擦除回白色，因为UWP将背景渗透到顶部的按钮。

以上内容可以作为Button的样式模板的基础。

使用Grid覆盖同一单元格的替代实现：

<Grid>
    <Border BorderThickness="0,0,2,2"
            BorderBrush="DarkGray"/>
    <Border BorderThickness="2,2,0,0"
            BorderBrush="AntiqueWhite"/>
    <Button Content="Hello"/>
</Grid>

这也可以使用样式按钮模板来实现。

这是一个简单的3D挡板按钮样式模板，仍然需要一些工作才能使鼠标悬停和按钮单击状态工作：

<Page
    x:Class="GridNineExperiment.BlankPage2"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:GridNineExperiment"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <Page.Resources>
        <Style TargetType="Button">
            <Setter Property="Background" Value="{ThemeResource SystemControlBackgroundBaseLowBrush}" />
            <Setter Property="Foreground" Value="{ThemeResource SystemControlForegroundBaseHighBrush}"/>
            <Setter Property="BorderBrush" Value="{ThemeResource SystemControlForegroundTransparentBrush}" />
            <Setter Property="BorderThickness" Value="{ThemeResource ButtonBorderThemeThickness}" />
            <Setter Property="Padding" Value="8,4,8,4" />
            <Setter Property="HorizontalAlignment" Value="Left" />
            <Setter Property="VerticalAlignment" Value="Center" />
            <Setter Property="FontFamily" Value="{ThemeResource ContentControlThemeFontFamily}" />
            <Setter Property="FontWeight" Value="Normal" />
            <Setter Property="FontSize" Value="{ThemeResource ControlContentThemeFontSize}" />
            <Setter Property="UseSystemFocusVisuals" Value="True" />

            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="Button">
                        <Grid Background="{TemplateBinding Background}">
                            <Border BorderThickness="0,0,2,2"
                                  BorderBrush="DarkGray"/>
                            <Border BorderThickness="2,2,0,0"
                                  BorderBrush="AntiqueWhite"/>

                            <ContentPresenter x:Name="ContentPresenter"
                               Content="{TemplateBinding Content}"
                               ContentTransitions="{TemplateBinding ContentTransitions}"
                               ContentTemplate="{TemplateBinding ContentTemplate}"
                               Padding="{TemplateBinding Padding}"
                               HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
                               VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
                               AutomationProperties.AccessibilityView="Raw"/>

                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>

        </Style>

    </Page.Resources>

    <StackPanel>
        <StackPanel Orientation="Horizontal">
            <Button Content="Hello1"/>
            <Button Content="HiYa1"/>
            <Button Content="HiYa1"/>
            </StackPanel>    
        <Button Content="Hello2"/>
        <Button Content="Hello3"/>
        <Button Content="Hello4"/>
    </StackPanel>
</Page>

Answer 4

<!-- UWP 3D Button Template: This one has MouseOver, Click States-->
<!-- Add-Project=>Resource Dictionary=>FileName: Button1.Xaml" -->
<ResourceDictionary
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:GridNineExperiment">

    <Style TargetType="Button">
        <Setter Property="Background" 
          Value="{ThemeResource SystemControlBackgroundBaseLowBrush}" />
        <Setter Property="Foreground" 
          Value="{ThemeResource SystemControlForegroundBaseHighBrush}"/>
        <Setter Property="BorderBrush" 
          Value="{ThemeResource SystemControlForegroundTransparentBrush}" />
        <Setter Property="BorderThickness" 
          Value="{ThemeResource ButtonBorderThemeThickness}" />
        <Setter Property="Padding" Value="8,4,8,4" />
        <Setter Property="HorizontalAlignment" Value="Left" />
        <Setter Property="VerticalAlignment" Value="Center" />
        <Setter Property="FontFamily" 
          Value="{ThemeResource ContentControlThemeFontFamily}" />
        <Setter Property="FontWeight" Value="Normal" />
        <Setter Property="FontSize" 
          Value="{ThemeResource ControlContentThemeFontSize}" />
        <Setter Property="UseSystemFocusVisuals" Value="True" />

        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="Button">
                    <Grid x:Name="RootGrid" 
                        Background="{TemplateBinding Background}">

                        <VisualStateManager.VisualStateGroups>
                            <VisualStateGroup x:Name="CommonStates">

                                <VisualState x:Name="Normal">
                                </VisualState>

                                <VisualState x:Name="PointerOver">
                                   <Storyboard>
                                   <ObjectAnimationUsingKeyFrames
                                   Storyboard.TargetProperty="Foreground"
                                   Storyboard.TargetName="ContentPresenter">
                                   <DiscreteObjectKeyFrame 
                                      KeyTime="0" 
                                      Value="Red"/>
                                   </ObjectAnimationUsingKeyFrames>
                                   </Storyboard>
                                </VisualState>

                                <VisualState x:Name="Pressed">
                                   <Storyboard>
                                   <ObjectAnimationUsingKeyFrames
                                   Storyboard.TargetProperty="Background"
                                   Storyboard.TargetName="RootGrid">
                                   <DiscreteObjectKeyFrame 
                                     KeyTime="0" 
                                     Value="Aqua"/>
                                   </ObjectAnimationUsingKeyFrames>
                                   </Storyboard>
                                </VisualState>

                                <VisualState x:Name="Disabled">
                                  <Storyboard>
                                  <ObjectAnimationUsingKeyFrames
                                  Storyboard.TargetProperty="Foreground"
                                  Storyboard.TargetName="ContentPresenter">
                                  <DiscreteObjectKeyFrame 
                                    KeyTime="0" 
                                    Value="Grey"/>
                                  </ObjectAnimationUsingKeyFrames>
                                  </Storyboard>
                                </VisualState>

                            </VisualStateGroup>
                        </VisualStateManager.VisualStateGroups>

                        <Border BorderThickness="0,0,2,2"
                                  BorderBrush="DarkGray"/>
                        <Border BorderThickness="2,2,0,0"
                                  BorderBrush="AntiqueWhite"/>

                        <ContentPresenter x:Name="ContentPresenter"
Content="{TemplateBinding Content}"
ContentTransitions="{TemplateBinding ContentTransitions}"
ContentTemplate="{TemplateBinding ContentTemplate}"
Padding="{TemplateBinding Padding}"
HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
AutomationProperties.AccessibilityView="Raw"/>

                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>

    </Style>
</ResourceDictionary>

以下是如何使用它的示例：

<Page ...>

    <Page.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary Source="ms-appx:///Button1.Xaml"/>
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
    </Page.Resources>

    <StackPanel>
        <StackPanel.ChildrenTransitions>
            <TransitionCollection>
                <EntranceThemeTransition 
                    IsStaggeringEnabled="True"
                    FromHorizontalOffset="300"
                    FromVerticalOffset="300"/>
            </TransitionCollection>
        </StackPanel.ChildrenTransitions>

        <StackPanel Orientation="Horizontal">
            <Button Content="Hello1"/>
            <Button Content="Hello2"/>
            <Button Content="Hello3"/>
        </StackPanel>    
        <Button Content="Hello2"/>
        <Button Content="Hello3"/>
        <Button Content="Hello4"/>
        <Rectangle Width="200" Height="100"/>
    </StackPanel>
</Page>

带简约L形表圈的3D风格按钮？（又名。旧式BezelButton）

4 个答案:

带简约L形表圈的3D风格按钮？ （又名。旧式BezelButton）

4 个答案:

带简约L形表圈的3D风格按钮？（又名。旧式BezelButton）