在 xaml 中设置按钮样式

本文关键字：按钮 样式 设置 xaml | 更新日期: 2023-09-27 18:36:55

我正在尝试为某些按钮制作样式，起初我为按钮制作了一种样式，但后来我需要在其中添加一个图标，所以我将图标放在样式中。

但是这不是要走的路，我无法在按钮中获取图标，而是从样式中获取图标。

样式代码：

<Style x:Name="stlBtnOpen" x:Key="stlBtnOpen" TargetType="Button">
      <Setter Property="Template">
          <Setter.Value>
              <ControlTemplate TargetType="Button">
                  <Border x:Name="borderBtnOpen" CornerRadius="10" BorderBrush="DarkGray" BorderThickness="1" Background="Transparent">
                      <Grid Background="{DynamicResource AccentColorBrush}" Margin="6">
                          <Grid.OpacityMask>
                              <VisualBrush Stretch="Fill" Visual="{DynamicResource appbar_folder}"/>
                          </Grid.OpacityMask>
                      </Grid>
                  </Border>
                  <ControlTemplate.Triggers>
                       //some events
                  </ControlTemplate.Triggers>
              </ControlTemplate>
          </Setter.Value>
      </Setter>
</Style>

元素中的代码：

<Button Grid.Column="2" x:Name="btnOpen" Click="btnOpen_Click">
      <Border x:Name="borderBtnOpen" CornerRadius="10" BorderBrush="DarkGray" BorderThickness="1" Background="Transparent">
           <Grid Background="{DynamicResource AccentColorBrush}" Margin="6">
                <Grid.OpacityMask>
                   <VisualBrush Stretch="Fill" Visual="{DynamicResource appbar_folder}"/>
                </Grid.OpacityMask>
           </Grid>
       </Border>
</Button>

在 xaml 中设置按钮样式

*您是否尝试将图像放在按钮内容的网格中：

<Button Grid.Column="2" x:Name="btnOpen" Click="btnOpen_Click">
      <Border x:Name="borderBtnOpen" CornerRadius="10" BorderBrush="DarkGray" BorderThickness="1" Background="Transparent">
           <Grid Background="{DynamicResource AccentColorBrush}" Margin="6">
                <Grid.ColumnDefinitions>
                  <ColumnDefinition Width="Auto"/>
                  <ColumnDefinition Width="*"/>
                </Grid.ColumnDefinitions>
                <Rectangle Grid.Column="0">
                    <Rectangle.Fill>
                        <VisualBrush Stretch="Fill" Visual="{DynamicResource appbar_folder}"/>
                    </Rectangle.Fill>
                </Rectangle>
                <Textblock Grid.Column="1"/>
           </Grid>
       </Border>
</Button>

从内存中得到它，但它应该离你需要的不太远（你也可以用一个stackpanel替换grid，以减少列定义中的样板）

啊，如果您想在

按钮中加入某些内容，请不要忘记在文本块中放入一些东西:)

编辑 ：好吧，这对我有用，但是使用画笔填充另一个对象固有的问题。

但首先这里是确切的工作标记

<Window x:Class="WpfApplication1.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow"
        Width="525"
        Height="350">
    <Grid>
        <Button x:Name="btnOpen"
                HorizontalAlignment="Center"
                VerticalAlignment="Center"
                Click="">
            <Border x:Name="borderBtnOpen"
                    Background="Transparent"
                    BorderBrush="DarkGray"
                    BorderThickness="1"
                    CornerRadius="10">
                <Grid Margin="6"
                      HorizontalAlignment="Stretch"
                      VerticalAlignment="Stretch"
                      Background="{DynamicResource AccentColorBrush}">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="*" />
                        <ColumnDefinition Width="Auto" />
                    </Grid.ColumnDefinitions>
                    <Rectangle Grid.Column="0" Width="20px">
                        <Rectangle.Fill>
                            <SolidColorBrush Color="Blue"/>
                        </Rectangle.Fill>
                    </Rectangle>
                    <TextBlock Grid.Column="1" Text="bonjour"/>
                </Grid>
            </Border>
        </Button>
    </Grid>
</Window>

这里有两个问题：

  • 边框不会将自身扩展到按钮大小（如果您强制的宽度大于按钮实际需要的宽度，则可以看到它）
  • 您必须手动定义矩形的大小（画笔仅填充而不定义其大小），否则，您将拥有一个大小为 0px 的矩形，这在屏幕上实际上
    • 不存在

对于边界问题，您可能想查看此问题的OP做了什么（链接在这里，因为相关文档也已墨迹）

编辑2

更改了上面的代码，以便在Border足够大时可以看到矩形（您仍然可以参考链接的问题了解边框问题）

相关文章：