Add text to a button with an icon

Question

I have a button with the Feedback Hub icon (Segoe MDL2 Assets), and I wanted to add the text: "Feedback", after the icon, but since I already have the icon it is possible to add the text? Here is an example of my button:

<Button x:Name="feedbackButton" FontFamily="Segoe MDL2 Assets" Content="" Click="feedbackButton_Click"/>

I try: Content=" Feedback";, but the word "Feedback" dont appears!

posible duplicate of [this](https://stackoverflow.com/questions/41191758/uwp-xaml-how-to-display-a-button-with-icon-and-text-in-it) — D Ie, May 29 '17 at 10:23
This example does not solve my problem, because I want an icon (via textblock) + text in the button. I do not want a image + text in the button — Fernando Sousa, May 29 '17 at 11:32
Possible duplicate of [UWP xaml: How to display a button with icon and text in it?](https://stackoverflow.com/questions/41191758/uwp-xaml-how-to-display-a-button-with-icon-and-text-in-it) — Jay Zuo, May 31 '17 at 01:39

Justin XL · Accepted Answer · 2017-05-29T21:22:42.203

15

Try putting the icon text and text in separate Runs of a TextBlock like this -

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

Update

Isn't this what the OP wanted? Why the downvote??

edited May 29 '17 at 21:22

answered May 29 '17 at 10:27

Justin XL

38,763
7
88
133

1

Thank you very much! That's what I want! – Fernando Sousa May 30 '17 at 11:28
1

@JustinXL Excellent response. Worked even on my `WPF` app on Windows 10. Deserves an upvote. Thank you for sharing your knowledge. – nam Aug 06 '20 at 23:40

score 4 · Answer 2 · answered May 29 '17 at 15:34

You can place a StackPanel inside your Button and then add as many TextBlocks into your StackPanel as you need:

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

StackPanel is really necessary? – Fernando Sousa May 30 '17 at 11:28 — Fernando Sousa, May 30 '17 at 11:28

Brian Daniel Tiongco · Answer 3 · 2017-05-30T03:14:52.410

1

Button is a ContentControl. Its XAML content property is Content, which enables a syntax like this for XAML: A button's content. You can set any object as the button's content. If the content is a UIElement, it is rendered in the button. If the content is another type of object, its string representation is shown in the button. Here, a StackPanel that contains an image of an orange and text is set as the content of a button.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>

I change the code. I hope this is what you are looking for

edited May 30 '17 at 03:14

answered May 29 '17 at 10:26

Brian Daniel Tiongco

61
5

Thank you very much for the help! But this example does not solve my problem, because I want an icon (via textblock - Segoe MDL2 Assets) + text in the button. I do not want a image + text in the button – Fernando Sousa May 29 '17 at 11:33
StackPanel is really necessary? – Fernando Sousa May 30 '17 at 11:27
sorry for the late reply. StackPanel is not really necessary. Based on the information I gathered, "The StackPanel in WPF is a simple and useful layout panel. It stacks its child elements below or beside each other, dependening on its orientation. This is very useful to create any kinds of lists." – Brian Daniel Tiongco Jun 02 '17 at 03:11

score 1 · Answer 4 · answered May 29 '17 at 10:42

I would do something like this:

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);
    }
}

In particular I added a DependencyProperty to enable a specific binding for the icon code.

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>

In particular I added a StackPanel to contain the Content property with plain text and the IconContent property with the code of the icon.

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

Thank you very much! It's needed so much code just to put a button with an icon and text? — Fernando Sousa, May 29 '17 at 11:34

score 1 · Answer 5 · answered May 29 '17 at 10:47

1

You can use the inbuilt https://learn.microsoft.com/en-us/uwp/api/Windows.UI.Xaml.Controls.AppBarButton AppBarButton control or use its style.

answered May 29 '17 at 10:47

Chirag Shah

981
1
6
12

Thank you very much for the suggestion! That's not what I'm looking for, but it's a great alternative! – Fernando Sousa May 30 '17 at 11:29

Add text to a button with an icon

5 Answers5

Update