将文本添加到带有图标的按钮

Question

我有一个带有反馈中心图标（Segoe MDL2 资产）的按钮，我想在图标之后添加文本：“反馈”，但由于我已经有了图标，是否可以添加文本？ 这是我的按钮示例：

<Button x:Name="feedbackButton" FontFamily="Segoe MDL2 Assets" Content="&#xE939;" Click="feedbackButton_Click"/>

我试试：Content=" Feedback";，但没有出现“反馈”一词！

Answer 1

尝试将图标文本和文本放在单独的 Runs 和 TextBlock 中，就像这样 -

<Button>
    <TextBlock>
        <Run Text="&#xE939;"
             FontFamily="Segoe MDL2 Assets" />
        <Run Text="Feedback" />
    </TextBlock>
</Button>

更新

这不是 OP 想要的吗？为什么投反对票？？

Answer 2

您可以在 Button 中放置一个 StackPanel，然后将尽可能多的 TextBlocks 添加到您的 StackPanel 中需要：

   <Button x:Name="feedbackButton" Click="feedbackButton_Click">
        <StackPanel Orientation="Horizontal">
            <TextBlock Text="&#xE939;" FontFamily="Segoe MDL2 Assets" VerticalAlignment="Center"/>
            <TextBlock Text="Feedback" VerticalAlignment="Center" Margin="8,0,0,0"/>
        </StackPanel>
    </Button>

Answer 3

我会这样做：

• 定义自定义控件ButtonWithIcon:

  public class ButtonWithIcon : Button
  {
      public static readonly DependencyProperty IconContentProperty =
          DependencyProperty.Register("IconContent", typeof(string), typeof(ButtonWithIcon), new PropertyMetadata(default(Icon)));
  
      public string IconContent
      {
          get => (string)GetValue(IconContentProperty);
          set => SetValue(IconContentProperty, value);
      }
  }
  

我特别添加了DependencyProperty 来启用图标代码的特定绑定。

• 然后，我将在App.xaml 中定义该控件的样式：

  <Style x:Key="buttonWithIconStyle" TargetType="customControls:ButtonWithIcon">
      <Setter Property="FocusVisualStyle" Value="{x:Null}" />
      <Setter Property="Background" Value="Transparent" />
      <Setter Property="BorderBrush" Value="#cccccc" />
      <Setter Property="BorderThickness" Value="0" />
      <Setter Property="FontFamily" Value="Segoe UI" />
      <Setter Property="Foreground" Value="#333333" />
      <Setter Property="HorizontalContentAlignment" Value="Center" />
      <Setter Property="VerticalContentAlignment" Value="Center" />
      <Setter Property="Padding" Value="16,3,16,3" />
      <Setter Property="Template">
  
          <Setter.Value>
              <ControlTemplate TargetType="{x:Type customControls:ButtonWithIcon}">
                  <Border
                      Name="Chrome"
                      Background="{TemplateBinding Background}"
                      BorderBrush="{TemplateBinding BorderBrush}"
                      BorderThickness="{TemplateBinding BorderThickness}"
                      SnapsToDevicePixels="true">
  
                      <StackPanel
                          Margin="8,0"
                          HorizontalAlignment="Center"
                          VerticalAlignment="Center"
                          Orientation="Vertical">
  
                          <TextBlock
                              x:Name="Icon"
                              Foreground="White"
                              HorizontalAlignment="Center"
                              FontFamily="Segoe UI Symbol"
                              Text="{Binding IconContent, RelativeSource={RelativeSource TemplatedParent}}"/>
                          <TextBlock
                              x:Name="Text"
                              Text="{TemplateBinding Content}"
                              FontFamily="Segoe UI Light"
                              FontSize="10"
                              HorizontalAlignment="Center"
                              Foreground="White" />
  
                      </StackPanel>
  
                  </Border>
  
                  <ControlTemplate.Triggers>
                      <Trigger Property="IsEnabled" Value="false">
                          <Setter Property="Foreground" Value="White" />
                      </Trigger>
                      <Trigger Property="IsMouseOver" Value="True">
                          <Setter Property="Background" Value="#000000" />
                          <Setter Property="BorderBrush" Value="#cccccc" />
                          <Setter Property="Foreground" Value="White" />
                      </Trigger>
                      <Trigger Property="IsPressed" Value="True">
                          <Setter Property="Background" Value="#999999" />
                          <Setter Property="BorderBrush" Value="{StaticResource MainColor}" />
                          <Setter Property="Foreground" Value="White" />
                      </Trigger>
                      <Trigger Property="IsFocused" Value="true">
                          <Setter TargetName="Chrome" Property="BorderBrush" Value="{StaticResource MainColor}" />
                      </Trigger>
                  </ControlTemplate.Triggers>
              </ControlTemplate>
          </Setter.Value>
      </Setter>
  </Style>
  

特别是我添加了一个StackPanel 以包含带有纯文本的Content 属性和带有图标代码的IconContent 属性。

• 最后，你可以这样使用它：

  <customControls:ButtonWithIcon
      Style="{StaticResource "buttonWithIconStyle"}"
      IconContent="&#xE14C;"
      Content="Some text" />
  

• 记得在你的窗口引用中引用自定义控件：

  xmlns:customControls="clr-namespace:MyProjectNamespace.Controls"
  

Answer 4

您可以使用内置的https://docs.microsoft.com/en-us/uwp/api/Windows.UI.Xaml.Controls.AppBarButton AppBarButton 控件或使用它的样式。

Answer 5

Button 是一个 ContentControl。它的 XAML 内容属性是 Content，它为 XAML 启用了这样的语法：按钮的内容。您可以将任何对象设置为按钮的内容。如果内容是 UIElement，则在按钮中呈现。如果内容是另一种类型的对象，则其字符串表示形式将显示在按钮中。 这里，一个包含橙色图像和文本的 StackPanel 被设置为按钮的内容。3

<Button>
   <StackPanel>
      <TextBlock Grid.Column="0" FontFamily="Segoe MDL2 Assets" 
            Text="&#xE939;" VerticalAlignment="Center"/>
      <TextBlock Grid.Column="1" Text="Feedback" Margin="10,0,0,0" 
            VerticalAlignment="Center" />
   </StackPanel>
</Button>

我更改了代码。我希望这就是你要找的东西