Question

I guess this is a quite simple (read: very simple) question, but I have been using quite some time to figure it out.

I have a class, PresentationItem, which is derived from ContentControl. I am working in Expression Blend, which gives a problem with the height and width of the PresentationItem.

When I insert a PresentationItem, it automatically sizes too full grid (800×600). Then, when I insert for instance a textblock, the textblock sizes to something small. I think this is the normal and expected behaviour.

What I want, is the presentationitem and Content child (for instance, a textblock) has the same size. It is annoying to work with 2 different sizes when I have several of these. So either the content inside the presentationitem should be stretched, or the presentationitem should resize to fit its children.

(Also, using something else than a ContentControl is not an option).

Right now I have the following style:

 <Style TargetType="local:JSLDPresentationItem">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="local:JSLDPresentationItem">
                <Border Background="{TemplateBinding Background}"
                        BorderBrush="{TemplateBinding BorderBrush}"
                        BorderThickness="{TemplateBinding BorderThickness}">
                    <VisualStateManager.VisualStateGroups>
                        <VisualStateGroup x:Name="PresentationStates">
                            <VisualStateGroup.Transitions>
                                <VisualTransition GeneratedDuration="0:0:0.3"/>
                            </VisualStateGroup.Transitions>
                            <VisualState x:Name="FocusedPresenting">
                                <Storyboard>
                                    <DoubleAnimation  Duration="0" To="1.2" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.ScaleX)" Storyboard.TargetName="LocalLayoutPanel" />
                                    <DoubleAnimation Duration="0" To="1.2" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.ScaleY)" Storyboard.TargetName="LocalLayoutPanel" />
                                </Storyboard>
                            </VisualState>
                            <VisualState x:Name="AfterPresenting">
                                <Storyboard>
                                    <DoubleAnimation Duration="0" To="0" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="LocalLayoutPanel" />
                                </Storyboard>
                            </VisualState>
                            <VisualState x:Name="BeforePresenting">
                                <Storyboard>
                                    <DoubleAnimation Duration="0" To="0" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="LocalLayoutPanel" />
                                </Storyboard>
                            </VisualState>
                            <VisualState x:Name="UnfocusedPresenting"/>
                        </VisualStateGroup>
                    </VisualStateManager.VisualStateGroups>

                    <Grid x:Name="LocalLayoutPanel" Margin="0,0,0,0" VerticalAlignment="Top"   >

                        <Grid.RenderTransform>
                            <CompositeTransform/>
                        </Grid.RenderTransform>
                        <ContentPresenter x:Name="contentPresenter" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" />
                    </Grid>
                </Border>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

What to change and where? I guess it is some “*” or “auto” at the right place!

Answer 1

Try setting the HorizontalContentAlignment and VerticalContentAlignment of your derived control to Stretch.