18

I'd like to create a UserControl (in this case a square-Button with defined Backgroundcolors) which can host it's own content.

UserControl:

<UserControl x:Class="SGDB.UI.Controls.ModernButton"
         xmlns:local="clr-namespace:SGDB.UI.Controls"
         xmlns:converter="clr-namespace:SGDB.UI.Converter"
         x:Name="_modernButton">
<Button>
    <Button.Resources>
        <converter:EnumToColorConverter x:Key="ColorConverter"/>
    </Button.Resources>
    <Button.Template>
        <ControlTemplate>
            <Border Width="{Binding Size, ElementName=_modernButton}" Height="{Binding Size, ElementName=_modernButton}" BorderBrush="Black" BorderThickness="0.8,0.8,3,3">
                <Grid Background="{Binding BackgroundColor, ElementName=_modernButton, Converter={StaticResource ColorConverter}}">
                    <ContentPresenter/>
                </Grid>
            </Border>
        </ControlTemplate>
    </Button.Template>
</Button>

Now, as you may expect it, if I use this Control inside my MainView everthing works just fine until I define some Content.

Using:

<control:ModernButton Size="200" BackgroundColor="Light">
    TEST
</control:ModernButton>

In this case "TEST" will override the whole Content of the UserControl (the whole Button Template). I guess this happens because The Button inside the UserControl is defined as "Content" itself and it will get overridden when defining new Content.

So the final question is: Is it possible to achieve what I'm looking for? if yes: How? How could I "redirect" the Content I'm defining in my MainView into the self-defined ContentPresenter inside my Button Template instead of the UserControls's ContentPresenter?

If possible I don't want to create a new dp-propery which hosts my Content, e.g.:

<controls:MordernButton Size="200" BackgroundColor="Light">
    <controls:ModernButton.Content>
        I don't want this, if possible
    </controls:ModernButton.Content>
</controls:ModernButton>
3
  • You mean you don't want to create new dp for this? Apr 6, 2016 at 9:26
  • Correct - if possible, of course.
    – Th1sD0t
    Apr 6, 2016 at 9:30
  • @Chill-X See my answer below. Let me know if you face any issues. Apr 6, 2016 at 9:53

5 Answers 5

27

Use the ContentPropertyAttribute to instruct the xaml to set this property instead of the actual Content property.

[ContentProperty("InnerContent")]
public partial class ModernButton : UserControl
{
    public ModernButton()
    {
        InitializeComponent();
    }

    public static readonly DependencyProperty InnerContentProperty =
        DependencyProperty.Register("InnerContent", typeof(object), typeof(ModernButton));

    public object InnerContent
    {
        get { return (object)GetValue(InnerContentProperty); }
        set { SetValue(InnerContentProperty, value); }
    }
}

Then in your xaml, Bind the Content Presenter to use InnerContent property instead.

<ContentPresenter Content="{Binding InnerContent, ElementName=_modernButton}"/>

This way you can do the following without replacing the actual content.

<control:ModernButton Size="200" BackgroundColor="Light">
    TEST
</control:ModernButton>
5
  • 4
    Works, too. But I wanted to know how things work in XAML - I really don't like decorating Code with Attributes.
    – Th1sD0t
    Apr 6, 2016 at 10:24
  • 1
    Awesome tip! since it isn't a template override, you are allowed to define names and links with code behind easily Nov 30, 2016 at 23:56
  • 1
    Where does _modernButton come from?
    – Glaucus
    Dec 21, 2018 at 16:22
  • @Glaucus That's what OP named his UserControl as. Dec 27, 2018 at 15:19
  • 1
    After trying to make a custom titled frame, this really does seem to be the best solution. I did learn a lot of other stuff, though, which makes hosting various forms of content more dynamic. Thank you.
    – Krythic
    Aug 31, 2019 at 18:57
16

Here we go.

<UserControl x:Class="SGDB.UI.Controls.ModernButton"
     xmlns:local="clr-namespace:SGDB.UI.Controls"
     xmlns:converter="clr-namespace:SGDB.UI.Converter"
     x:Name="_modernButton">

    <UserControl.Template>
        <ControlTemplate TargetType="UserControl">
            <Button Content="{TemplateBinding Content}">
                 <Button.Resources>
                    <converter:EnumToColorConverter x:Key="ColorConverter"/>
                  </Button.Resources>
            <Button.Template >
                <ControlTemplate TargetType="Button">
                    <Border Width="{Binding Size,
                                    ElementName=_modernButton}"
                    Height="{Binding Size,
                                     ElementName=_modernButton}"
                    BorderBrush="Black"
                    BorderThickness="0.8,0.8,3,3">
                        <Grid Background="{Binding BackgroundColor, ElementName=_modernButton, Converter={StaticResource ColorConverter}}">
                            <ContentPresenter />
                        </Grid>
                    </Border>
                </ControlTemplate>
            </Button.Template>
            </Button>
        </ControlTemplate>
    </UserControl.Template>
</UserControl>
4
  • At first it seemed very good - but when passing some Content ("TEST" or <TextBlock Text="Test"/>) nothing shows up - the Control stays empty (except it's own color)
    – Th1sD0t
    Apr 6, 2016 at 10:02
  • That's it - could you explain why the Button's TargetType had such an big impact on the ContentPresenter ? And if you are on it, maybe you could explain why the Button's Templatebinding stops WPF from clearing the whole Content when passing some Content into a Control? Thanks in advance :)
    – Th1sD0t
    Apr 6, 2016 at 10:14
  • 1
    That will be a big topic to cover. May be this answers your first question. Apr 6, 2016 at 11:12
  • 2
    To answer you second question. Its not Button's template binding that helps us to stop clearing the whole content. Its Usercontrol's template binding did its job. Apr 6, 2016 at 11:16
7

Let's assume that youre UserControl is:

<UserControl x:Class="QuickAndDirtyAttempt.Decorator" ....
      <UserControl.Template>
        <ControlTemplate TargetType="{x:Type local:Decorator}">
          <StackPanel Orientation="Vertical">
            <Label>Foo</Label>
            <ContentPresenter/>
            <Label>Bar</Label>
          </StackPanel>
        </ControlTemplate>
      </UserControl.Template>
</UserControl>

Note the TargetType property on the template: without it the project will happily compile, but the ContentPresenter will not work. And then:

<Window ... >
    <StackPanel Orientation="Vertical">
        <local:Decorator>
            <Label Background="Wheat">User supplied content here</Label>
        </local:Decorator>
    </StackPanel>
</Window> 

I strongly recommend you to read this before implementing anything

1
  • I read this but over read the part that says: "Without the TargetType the Project will happily compile but the ContentPresenter won't work". You deserve my upvote because the CodeProject explains why one should not use my solution :)
    – Th1sD0t
    Apr 6, 2016 at 10:20
3

Simple; Just circumvent and replace the UserControl's Template.

  <UserControl.Template>
        <ControlTemplate TargetType="{x:Type UserControl}">
            <Button Content="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Content}">
                <Button.Resources>
                   <converter:EnumToColorConverter x:Key="ColorConverter"/>
                </Button.Resources>
                <Button.Template>
                    <ControlTemplate TargetType="{x:Type Button}">
                        <Border Width="{Binding Size,
                                        ElementName=_modernButton}"
                        Height="{Binding Size,
                                         ElementName=_modernButton}"
                        BorderBrush="Black"
                        BorderThickness="0.8,0.8,3,3">
                            <Grid Background="{Binding BackgroundColor, ElementName=_modernButton, Converter={StaticResource ColorConverter}}">
                                <ContentPresenter />
                            </Grid>
                        </Border>
                    </ControlTemplate>
                </Button.Template>
            </Button>
        </ControlTemplate>
    </UserControl.Template>

All a user control is (at least it terms of XAML and its template), is a Border with a ContentPresenter inside it. The ContentPresenter being the only important part, really.

So all you do is gut out its Template and feed the Content property the UserControl has into something a little different; in this case, your button.

This is the difference between making a usercontrol out of other controls, and shoving some controls into a user control. Making the usercontrol out of other controls gives you much more power.

2
  • 1
    Think this could work also if the second ControlTemplate's Type would be "Button".
    – Th1sD0t
    Apr 6, 2016 at 10:15
  • Oh yes, how did I miss that? - Edited it in.
    – Logan
    Apr 7, 2016 at 8:48
0

My example for dialog box

<UserControl
x:Class="CyberpunkModManager.Controls.DialogBox"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:local="clr-namespace:CyberpunkModManager.Controls"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
d:DesignHeight="450"
d:DesignWidth="800"
Foreground="{StaticResource ThemeForeground}"
mc:Ignorable="d">
<UserControl.Template>
    <ControlTemplate TargetType="UserControl">
        <Grid Background="{StaticResource ThemeTransparentColor}">
            <Border
                MinWidth="400"
                Padding="12"
                HorizontalAlignment="Center"
                VerticalAlignment="Center"
                Background="{StaticResource ThemeElement}"
                CornerRadius="4">
                <ContentPresenter />
            </Border>
        </Grid>
    </ControlTemplate>
</UserControl.Template>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.