How do I add additional controls to the Content of ModernButton?

Question

I'm trying to put a StackPanel into a ModernButton. Here's the XAML:

<mui:ModernButton Margin="0,50"
              IconHeight="10"
              IconWidth="10"
              Background="#FF68217A"
              HorizontalAlignment="Center"
              Foreground="Black">
    <StackPanel>
        <TextBlock>George</TextBlock>
        <TextBlock>Washington</TextBlock>
    </StackPanel>

When I put this in place I get, "System.Windows.Controls.Stackpanel" displayed on the button. I don't understand why. The ModernButton is a child of the WPF Button class, and if replace mui:ModernButton, it works fine. (Of course you have to get rid of the IconHeight and IconWidth, but the point is that it works.)

So why don't my controls render properly inside of the ModernButton?

Man, this button is giving you all kinds of problems...lol. First the background and now this...j/k. Does it change anything if you use a textBox instead of a textblock? — ProgrammingDude, Dec 17 '15 at 21:36
Yes, it reliably changes if I use something like a blank, ol' WPF button. — Rod, Dec 18 '15 at 17:27

Kcvin · Answer 1 · 2015-12-18T17:56:06.413

The issue is that ModernButton is just a poorly templated control. I would submit a new issue to the MUI project. Anyways, the proof is here that the template won't get you very much besides displaying text. What you're going to want to do is edit the template of the ModernButton. Right click a ModernButton in XAML designer > Edit Template > Edit a Copy... > OK > Go to XAML view. In there you're going to want to do something like:

<Grid Grid.Column="1" >
    <!-- <TextBlock DataContext="{TemplateBinding Content}"
               Visibility="{Binding Converter={StaticResource NullOrEmptyStringToVisibilityConverter}, ConverterParameter=inverse}"
               Text="{Binding Converter={StaticResource ToLowerConverter}}"
               TextTrimming="CharacterEllipsis"
               Foreground="{TemplateBinding Foreground}"
               Margin="4,-1,0,0"
               VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/> -->
    <ContentPresenter Focusable="False"
                      HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                      Margin="{TemplateBinding Padding}"
                      RecognizesAccessKey="True"
                      SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"
                      VerticalAlignment="{TemplateBinding VerticalContentAlignment}" />
</Grid>

In short, you replace the TextBlock with a ContentPresenter and then you will be able to display whatever you want on your button.

That's what I tried at first, but that gave me the same behavior. :( — Rod, Dec 18 '15 at 17:28
@Rod check out the updated answer. Turns out ModernButton's template just sucks. — Kcvin, Dec 18 '15 at 17:56

How do I add additional controls to the Content of ModernButton?

1 Answers1