How to group controls inside Grid for reuse in XAML?

Question

In my application I have some controls that logically belongs together and is reused many places in different windows. The controls are always placed inside a grid.

Instead of copying the controls (and the code behind) each time I want to use them, I would like to define and maintain them in a single xaml file as a single UserControl.

I have this now:

<Grid>
    <Grid.ColumnDefinitions>
        [ColumnDefinitions...]
    </Grid.ColumnDefinitions>

    <Grid.RowDefinitions>
        [RowDefinitions...]
    </Grid.RowDefinitions>

    <StackPanel Grid.Column="0" Grid.Row="0">
        <TextBlock Text="Caption" />
        <Border Padding="2" x:Name="myBorder">
            <TextBox TabIndex="1" x:Name="myTxt"/>
        </Border>
    </StackPanel>
    <ListBox x:Name="myList" Grid.Column="0" Grid.Row="0" Grid.RowSpan="2" Margin="5,50,5,0" Height="100" VerticalAlignment="Top" Visibility="Collapsed" />

    [More controls..]
</Grid>

But I want to reuse this part:

    <StackPanel Grid.Column="0" Grid.Row="0">
        <TextBlock Text="Caption" />
        <Border Padding="2" x:Name="myBorder">
            <TextBox TabIndex="1" x:Name="myTxt"/>
        </Border>
    </StackPanel>
    <ListBox x:Name="myList" Grid.Column="0" Grid.Row="0" Grid.RowSpan="2" Margin="5,50,5,0" Height="100" VerticalAlignment="Top" Visibility="Collapsed" />

as a single control - but how do I define the Grid.Column when using the control (somehow supplying it as a parameter)? - and how do I set the Grid.RowSpan value (eventhough the code is moved to a new xaml file, and not defined inside a grid)?

Any comments?

Answer 1

Make them into a separate usercontrol, then include that in your project.

If you're using Blend, it's really easy, just select all the controls, right click and Make into Usercontrol.

Answer 2

You could also make it into a resource. Define it in a ResourceDictionary and include the dictionary the places you want to use it. There is one catch - the resource dictionary returns the same instance everytime - so you have to add the attribute x:Shared="false".

But the wpf way is to figure out how you can do it with a DataTemplate :)