UWP xaml: How to display a button with an icon and text in it?

Question

How can I display an image / icon and text with a button?

<StackPanel Name="stackPanel" Orientation="Horizontal" Tapped="stackPanel_Tapped"> <Button x:Name="button" FontFamily="Segoe MDL2 Assets" Content="&#xE779;" Width="50" Height="50" Background="Transparent" /> <TextBlock Text="Grades" FontSize="18" VerticalAlignment="Center" /> </StackPanel> 

I can add a taplistener to the stack panel, but this does not make the stack panel a visual effect, like a real button.

I also tried:

 <Button FontFamily="Segoe MDL2 Assets" Width="50" Height="50" x:Name="button" Content="test"> <Image x:Name="button" Source="Assets/test.png" /> </Button> 

But I can’t install the content twice. I want both the text and the icon in the button, so when the user clicks on it, he will have a visual effect similar to a button. Is it possible? Or does anyone else have another way to achieve this?

Thanks for reading.

Answer 1

Since I could not find a direct duplicate (to which I could swear that this is the type of question that was asked before), I assume that I will put a legitimate answer.

The button template is ContentPresenter on ContentPresenter , which allows you to transfer any CLR object. However, the caveat is that only one can be transmitted. HOWEVER, if this object is a panel capable of containing children, then it will go all through the content.

So, in this case, if we did it like this:

 <Button> <Image/> <TextBlock/> </Button> 

Then he will fail and complain only about one object, resolved at a time.

Unless you provide a parent panel for storing these children, it respects all this as content and will provide the desired result as an example:

 <Button> <StackPanel> <Image/> <TextBlock/> </StackPanel> </Button> 

So, since the StackPanel is a CLR object that can accommodate children, you're good to go. Hope this helps, cheers!