UserControl inside ContentControl with nested width/height

Question

I'm developing Windows Store App with using Caliburn Micro.

In one of the pages I have ContentControl, which display UserControl. In UserControl I have GridView.

My question is: How to set UserControl.Width same as ContentControl.Width?
Note: whet set UserControl.Width=Auto - width the same as GridView.Width

in page.xaml

<ContentControl x:Name="ActiveItem" />

in usercontrol.xaml

<UserControl
x:Class="Test.Views.GroupView"
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:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d" Width="Auto" Height="Auto">

    <Grid Margin="0,20">
        <GridView x:Name="Groups" Margin="0" />
    </Grid>
</UserControl>

---

UPDATE

Adding

  VerticalAlignment="Stretch"
  HorizontalAlignment="Stretch"

To UserControl doesn't solve the problem.

Answer 1

Figured this out after a lot of trial and error:

<ContentControl Name="MyContent" HorizontalContentAlignment="Stretch" VerticalContentAlignment="Stretch">

The key is to use the Horizontal/Vertical*Content*Alignment property (not the Horizontal/VerticalAlignment properties).

Answer 2

Here is what you should do when problem like your's appears.

1. Try to set ContentControl's Background property to some disturbing color. For example Purple or Pink. And also set Background property on your UserControl for example Green. It will allow you to see where exactly is your ContentControl and where is UserControl. If you can't see any Green you can tell that content of UserControl is stretched to fill whole UserControl.

2. Try to set UserControl's VerticalAlignment and HorizontalAlignment properties to Stretch. FrameworkElement.HorizontalAlignment, VerticalAlignment

   Note: In order to let these work. You can't explicitly set Width and Height on your UserControl.

3. Try to set ContentControl's VerticalContentAlignment and HorizontalContentAlignment to Stretch. Control.HorizontalContentAlignment, VerticalContentAlignment . These stretches the child element to fill the allocated layout space of the parent element.

4. If you still see some Purple or Pink then something's wrong again :) you can check Margin/Padding MSDN

If it's still messed up. Then I don't know how else can I help you. Last possible solution would be binding. And I am not sure if it works.

<UserControl
Width="{Binding RelativeSource=
        {RelativeSource FindAncestor,
        AncestorType={x:Type ContentControl}},
        Path=ActualWidth}"
Height="{Binding RelativeSource=
        {RelativeSource FindAncestor,
          AncestorType={x:Type ContentControl}},
          Path=ActualHeight}">
...
</UserControl>

I hope something helps. I believe you that it could be really annoying problem.

Answer 3

Especially for @AlexeiMalashkevich
I solve it with using binding like this:

In root Page you have:

 <ContentControl x:Name="ActiveItem"/>

Then add the child page:

<Page
    Height="{Binding ActualHeight, ElementName=ActiveItem}"
    Width="{Binding ActualWidth, ElementName=ActiveItem}"
    ......
/>

And that's all.

Answer 4

You should be able to bind UserControl's width to the ContentControl's ActualWidth.

<local:MyUserControl1 Height="50" Width="{Binding ElementName=contentControl, Path=ActualWidth}"/>

Here is some sample code:

<Page
    x:Class="stofUserControlWidth.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:stofUserControlWidth"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="2*"/>
            <ColumnDefinition Width="*"/>
        </Grid.ColumnDefinitions>
        <Border Background="Cyan"/>
        <ContentControl Grid.Column="1" x:Name="contentControl">
            <local:MyUserControl1 Height="50" Width="{Binding ElementName=contentControl, Path=ActualWidth}"/>
        </ContentControl>
    </Grid>
</Page>

Here is MyUserControl1.xaml code:

<UserControl
    x:Class="stofUserControlWidth.MyUserControl1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:stofUserControlWidth"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    d:DesignHeight="300"
    d:DesignWidth="400">

    <Grid Background="Magenta">        
    </Grid>
</UserControl>

Hope this helps!

Answer 5

For me this is working:

<UserControl
                 ...
                    Height="{Binding ActualHeight,
                    RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type ContentControl}}}">

...

</UserControl>

You have to make sure that your ContentControl has the desired size.

For example my ContentControl look like this: It is always fill the whole size of the window. And the size of the UserControl in the ContentControl dinamically changes as well.

<Grid>
    <ContentControl HorizontalContentAlignment="Stretch" VerticalContentAlignment="Stretch" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" DataContext="{Binding StartViewModel}" Name="ContentArea" />
</Grid>