使用图标为按钮添加文本

Question

使用图标为按钮添加文本

c#uwpuwp-xaml

6

我有一个带有反馈中心图标（Segoe MDL2 Assets）的按钮，我想在图标后面添加文本：“反馈”，但由于我已经有了图标，所以是否可能添加文本呢？

以下是我的按钮示例：

- Fernando Sousa

1

可能是这个问题的重复：链接。 - D Ie

2

这个例子不能解决我的问题，因为我想要在按钮中有一个图标（通过TextBlock）+文本。我不想要一个图像+文本在按钮中。 - Fernando Sousa

可能是UWP xaml：如何显示带有图标和文本的按钮？的重复问题。 - Jay Zuo

5个回答

4

你可以在你的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>

- A. Milto

StackPanel 是真的必须吗？ - Fernando Sousa

1

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

- Chirag Shah

非常感谢您的建议！虽然那不是我要找的，但这是一个很好的替代方案！ - Fernando Sousa

1

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

<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>

我修改了代码。希望这就是你想要的。

- Brian Daniel Tiongco

非常感谢您的帮助！但是这个例子并没有解决我的问题，因为我想要一个图标（通过文本块 - Segoe MDL2 Assets）+按钮中的文本。我不想要一个图像+按钮中的文本。 - Fernando Sousa

StackPanel真的必要吗？ - Fernando Sousa

抱歉回复晚了。StackPanel并不是必需的。根据我收集到的信息，“WPF中的StackPanel是一个简单而实用的布局面板。它将其子元素堆叠在彼此下方或旁边，取决于其方向。这非常有用，可以创建任何类型的列表。” - Brian Daniel Tiongco

1

我会这样做：

Define a custom control 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来启用图标代码的特定绑定。

Then, I would define the style for that control in 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 属性。

At the end, you can use it like this:

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

Remember to reference the custom control in your Window's references:
```
xmlns:customControls="clr-namespace:MyProjectNamespace.Controls"
```

- Francesco Bonizzi

非常感谢！仅仅为了放置一个带有图标和文本的按钮需要这么多代码吗？ - Fernando Sousa

我不确定，我没有找到一个少代码的解决方案 :-) - Francesco Bonizzi

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Justin XL · Accepted Answer

尝试将图标文本和文本分别放在TextBlock的不同Run中，像这样 -

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

更新

这不是原帖作者想要的吗？为什么会有负评？？