CODEWITHSUNDEEP
c#uwpuwp-xaml
Fernando Sousa
Fernando Sousa

Reputation: 241

Add text to a button with an icon

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="&#xE939;" Click="feedbackButton_Click"/>

I try: Content="&#xE939; Feedback";, but the word "Feedback" dont appears!

Upvotes: 6

Views: 4052

Answers (5)

Brian Daniel Tiongco
Brian Daniel Tiongco

Reputation: 61

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

Upvotes: 1

Justin XL
Justin XL

Reputation: 39006

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

enter image description here

Upvotes: 15

A. Milto
A. Milto

Reputation: 2383

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>

Upvotes: 5

Chirag Shah
Chirag Shah

Reputation: 981

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

Upvotes: 1

Francesco Bonizzi
Francesco Bonizzi

Reputation: 5302

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"

Upvotes: 1

Related Questions