Stretch usercontrol to width of ContentControl

Question

Hello, I am begginer in Silverlight. I have a contentcontrol in my SL Page and I need to set a different usercontrol as a content of it. I want to have usercontrol width stretched to whole width of contentcontrol. Here is my sample.

This is code of mainpage XAML, where is the contentcontrol

<UserControl x:Class="Rizeni_dodavatelu.MainPage"
    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"
    d:DesignHeight="576" d:DesignWidth="716" xmlns:toolkit="http://schemas.microsoft.com/winfx/2006/xaml/presentation/toolkit" xmlns:sdk="http://schemas.microsoft.com/winfx/2006/xaml/presentation/sdk"  >

    <Grid x:Name="LayoutRoot" Background="White" Height="574">
        <Grid.RowDefinitions>
            <RowDefinition Height="39"/>
            <RowDefinition Height="535*" />
        </Grid.RowDefinitions>
        <Rectangle Name="rectangle1" Stroke="Black" Fill="#460000D8" />
        <ContentControl Grid.Row="1" Name="contentControl" />
    </Grid>
</UserControl>

This is one of desired usercontrol to be stretched in contentcontrol (I am setting this as a content of contentcontrol)

<UserControl x:Class="Rizeni_dodavatelu.Login"
           xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
           xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
           xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
                 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
           xmlns:controls="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls"
           xmlns:navigation="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Navigation"   
           xmlns:sdk="http://schemas.microsoft.com/winfx/2006/xaml/presentation/sdk" BorderThickness="0"
           mc:Ignorable="d" >
    <Grid>
        <Grid x:Name="LayoutRoot" Height="200" Width="250" VerticalAlignment="Center" HorizontalAlignment="Center" Background="WhiteSmoke">
            <Grid.RowDefinitions>
                <RowDefinition Height="106*" />
                <RowDefinition Height="Auto" />
            </Grid.RowDefinitions>

            <Button x:Name="CancelButton" Content="Cancel" Click="CancelButton_Click" Width="75" Height="23" HorizontalAlignment="Right" Grid.Row="1" VerticalAlignment="Top" Margin="0,0,12,0" />
            <Button x:Name="OKButton" Content="OK" Click="OKButton_Click" Width="75" Height="23" HorizontalAlignment="Right" Margin="0,0,93,12" Grid.Row="1" VerticalAlignment="Center" />
            <TextBox Height="23" HorizontalAlignment="Left" Margin="92,48,0,93" Name="tbRef" VerticalAlignment="Center" Width="120" AcceptsReturn="False" TabIndex="10" Text="00" />
            <sdk:Label Height="23" HorizontalAlignment="Left" Margin="25,48,0,94" Name="label1" VerticalAlignment="Center" Width="61" Content="Referent" />
            <PasswordBox Height="23" HorizontalAlignment="Left" Margin="92,78,0,65" Name="tbHeslo" VerticalAlignment="Center" Width="120" TabIndex="20" Password="1" />
            <sdk:Label Content="Heslo" Height="23" HorizontalAlignment="Left" Margin="25,77,0,65" Name="label2" VerticalAlignment="Center" Width="61"  />
            <sdk:Label Content="Databáze" Height="23" HorizontalAlignment="Left" Margin="25,106,0,37" Name="label3" VerticalAlignment="Center" Width="61" />
            <TextBox AcceptsReturn="False" Height="23" HorizontalAlignment="Left" Margin="92,106,0,37" Name="tbDatabaze" TabIndex="30" VerticalAlignment="Center" Width="120" Text="D2" />
            <sdk:Label Content="Datum" Height="18" HorizontalAlignment="Left" Margin="92,134,0,13" Name="lbTime" VerticalAlignment="Center" Width="120" FontSize="9" />
            <sdk:Label Content="Přihlášení do systému" FontSize="16" FontWeight="Bold" Height="40" HorizontalAlignment="Center" Margin="6,0,6,125" Name="label4" Width="238" />
        </Grid>
        <Grid.Background>
            <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                <GradientStop Color="#942B5B93" Offset="0.402" />
                <GradientStop Color="White" Offset="1" />
                <GradientStop Color="#99205375" Offset="0.582" />
                <GradientStop Color="#006084AE" Offset="0" />
            </LinearGradientBrush>
        </Grid.Background>
    </Grid>
</UserControl>

Thank you for any help.

Answer 1

Hi,

Set HorizontalContentAlignment and VerticalContentAlignment to Stretch:

<ContentControl Grid.Row="1" Name="contentControl"
                        HorizontalContentAlignment="Stretch"
                        VerticalContentAlignment="Stretch" />

Answer 2

Thank you, this solves my problem.

Answer 3

<ContentControl 
                HorizontalAlignment="Stretch" 
                VerticalAlignment="Stretch" 
                HorizontalContentAlignment="Stretch" 
                VerticalContentAlignment="Stretch"/>

Answer 4

I apply above setting, there is no use please help me

<UserControl x:Class="WpfApplication4.LeftControl"
             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"
             mc:Ignorable="d"
             d:DesignHeight="228" d:DesignWidth="223"
             Name="leftControl"
             >
    <Grid>
        <Button Content="Left"  HorizontalAlignment="Left" Margin="79,110,0,0" Name="button1" VerticalAlignment="Top"  />
    </Grid>
</UserControl>

 

<Window x:Class="WpfApplication4.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="60" />
            <RowDefinition Height="*"  />
            <RowDefinition Height="42" />
        </Grid.RowDefinitions>

        <Border Grid.Row="0" Background="#FFAAA9A9" BorderBrush="White" BorderThickness="3" CornerRadius="10">
            <Button Content="Button" Height="23" HorizontalAlignment="Left" Margin="52,19,0,0" Name="button1" VerticalAlignment="Top" Width="75" Click="button1_Click" />
        </Border>
       
        <Border Grid.Row="1" Background="#FFAAA9A9" BorderBrush="White" BorderThickness="3" CornerRadius="10" Name="MainArea" >
            <Grid >
                <Grid.ColumnDefinitions>
                    <ColumnDefinition />
                    <ColumnDefinition />
                </Grid.ColumnDefinitions>

HorizontalAlignment="Stretch"  Width="Auto">-->
                      <ContentControl   Grid.Column="0" Content="{Binding Path=LeftElement}"  Margin="2,2,2,2"
                                  HorizontalAlignment="Stretch" 
                VerticalAlignment="Stretch" 
                HorizontalContentAlignment="Stretch" 
                VerticalContentAlignment="Stretch"
                                  >
                </ContentControl >

                <GridSplitter Grid.Column="1" Width="5" HorizontalAlignment="Left" ShowsPreview="True" Name="gridSplitter"
                              DragCompleted="OnDragCompleted" />

                <!--<Border Grid.Column="2" Background="#FFAAA9A9" BorderBrush="White" BorderThickness="3" HorizontalAlignment="Stretch"  Width="Auto">-->
                <!--<Viewbox Margin="0" Stretch="Fill" Grid.Column="1">-->
                <ContentControl   Grid.Column="1" Content="{Binding Path=RightElement}"
                                   HorizontalAlignment="Stretch" 
                VerticalAlignment="Stretch" 
                HorizontalContentAlignment="Stretch" 
                VerticalContentAlignment="Stretch"
                                   >
                </ContentControl >

            </Grid>
        </Border>

        <Border Grid.Row="2" Background="#FFAAA9A9" BorderBrush="White" BorderThickness="3" CornerRadius="10" >
        </Border>
       
       
    </Grid>
</Window>