Content control contents sizing to fill in Silverlight 4

Question

I have a style for a ContentControl which I want to use in places where I currently have a Border. When I use this, the child controls will not stretch to fill and only take a small amount of space. I've tried applying HorizontalAlignment="Stretch" to everything, but it doesn't work. What's wrong?

<Style x:Key="GradientPanel" TargetType="ContentControl">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="ContentControl">
                <Grid HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}">
                    <Rectangle RadiusY="10" RadiusX="10" Stroke="Black" StrokeThickness="0">
                        <Rectangle.Effect>
                            <DropShadowEffect Opacity="0.56" ShadowDepth="1" BlurRadius="3" />
                        </Rectangle.Effect>
                        <Rectangle.Fill>
                            <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                                <GradientStop Color="#FFE1EAF3"/>
                                <GradientStop Color="White" Offset="1"/>
                                <GradientStop Color="#FFFAFBFD" Offset="1"/>
                            </LinearGradientBrush>
                        </Rectangle.Fill>
                    </Rectangle>
                    <ContentPresenter Margin="5" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"/>
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

...

Before (works fine):

<Border Style="{StaticResource SearchContainerBorder}" >
    <Grid Margin="5">
<Grid.RowDefinitions>
<RowDefinition />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<ToggleButton  Style="{StaticResource ToggleButtonExpanderStyle}" Grid.Row="0" Grid.Column="1" Height="25" Width ="25" HorizontalAlignment="Center" VerticalAlignment="Top" />
<ContentControl Grid.Row="0"  HorizontalContentAlignment="Stretch" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"/>
</Grid>
</Border>

After (replace Border with ContentControl):

<ContentControl Style="{StaticResource GradPanel}" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
    <Grid Margin="5">
<Grid.RowDefinitions>
<RowDefinition />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<ToggleButton  Style="{StaticResource ToggleButtonExpanderStyle}" Grid.Row="0" Grid.Column="1" Height="25" Width ="25" HorizontalAlignment="Center" VerticalAlignment="Top" />
<ContentControl Grid.Row="0"  HorizontalContentAlignment="Stretch" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"/>
</Grid>
</ContentControl>

Answer 1

You need to set the HorizontalContentAlignment="Stretch" and VerticalContentAlignment="Stretch" on your outer ContentControl. The default behaviour is not to stretch the contents.

e.g. the first line should be:

<ContentControl Style="{StaticResource GradPanel}" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" HorizontalContentAlignment="Stretch" VerticalContentAlignment="Stretch" >