Create WPF UserControl with XAML so that I can nest children controls inside

Question

I am trying to create a "titled block" UserControl in WPF/XAML, with the following behaviour:

The control itself is a Border containing a DockPanel. The DockPanel contains a top-aligned "title" TextBlock, and the rest of this DockPanel should be the "children widget area".

The control declaration is like this:

<Border x:Name="LayoutRoot" Background="#4C000000" CornerRadius="10" Padding="10"> <DockPanel> <TextBlock Text="Some Title" DockPanel.Dock="Top" /> </DockPanel> </Border>

And the intended usage is like this:

<Grid x:Name="LayoutRoot" Background="White"> <local:Bloco Height="100" Width="100" Title="Other Title"> <local:Bloco Title="Yet other title" /> </local:Bloco> </Grid>

To render something like this:

enter image description here

The actual current rendering is invalid, though. The problems are:

I don't know (and didn't found it via searching) how to make the control have a "children container" where I could add children via direct nesting in the XAML;
I don't know how to bind a different title for each instance of the user control, be it via XAML attributes or bindings (preferrable), be it via code behind. Writing the code as above creates invalid xaml code, which is unsurprising since the "Title" attribute does not exist yet.

Thanks for reading!

chameleon · Accepted Answer · 2013-01-14 11:48:25Z

You may create control that inherits from ContentControl and add template for it
If you want get access to your custom properties in xaml as attributes you need register it as DependencyProperty (see enter link description here)

rhe1980 · Accepted Answer · 2013-01-14 14:27:51Z

Generic usercontrol:

XAML:

<UserControl x:Class="WpfControlLibrary.GenericUserControl" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:local="clr-namespace:WpfControlLibrary" mc:Ignorable="d" d:DesignHeight="300" d:DesignWidth="300" x:Name="Control"> <UserControl.Resources> <Style TargetType="{x:Type local:GenericUserControl}"> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="{x:Type local:GenericUserControl}"> <Grid Background="{Binding Background, ElementName=Control}"> <Grid.RowDefinitions> <RowDefinition Height="5"></RowDefinition> <RowDefinition Height="20"></RowDefinition> <RowDefinition Height="*"></RowDefinition> <RowDefinition Height="5"></RowDefinition> </Grid.RowDefinitions> <Grid.ColumnDefinitions> <ColumnDefinition Width="5"/> <ColumnDefinition Width="*"/> <ColumnDefinition Width="5"/> </Grid.ColumnDefinitions> <TextBlock Grid.Column="1" Grid.Row="1" Text="{Binding Title, ElementName=Control}"/> <ContentPresenter Grid.Column="1" Grid.Row="2"/> </Grid> </ControlTemplate> </Setter.Value> </Setter> </Style> </UserControl.Resources>

Code behind:

namespace WpfControlLibrary { public partial class GenericUserControl { public string Title { get { return (string)GetValue(TitleProperty); } set { SetValue(TitleProperty, value); } } public static readonly DependencyProperty TitleProperty = DependencyProperty.Register("Title", typeof(string), typeof(GenericUserControl), new PropertyMetadata(string.Empty)); public GenericUserControl() { InitializeComponent(); } } }

And than use the user control like this:

 <wpfControlLibrary:GenericUserControl Title="Other Title" Background="LightGray"> <wpfControlLibrary:GenericUserControl Title="Yet Another Title" Background="Gray"/> </wpfControlLibrary:GenericUserControl>

That came pretty close. Title is working fine, but ContentControl has two issues: 1) The nested content (usually other widgets) don't appear as selectable children in the document outline, either in VisualStudio and ExpressionBlend. 2) The XAML syntax got a bit more verbose than what I expected (the <GenericUserControl.ContentControl> element, specifically). Could you suggest a fix? Thanks for now!
@ heltonbiker: please check edited version. now its visible in document outline correctly. better?
Got it! I've been away from XAML for some time, and that looks like the Right Way of doing it. Thank you for your time and interest!

Collectives™ on Stack Overflow

Create WPF UserControl with XAML so that I can nest children controls inside

2 Answers 2

Comments

3 Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

3 Comments

Related