how to make controls resize in wpf, equivelant of anchor/dock properties

Question

I've read so many solutions this problem. every one of them fails to solve my problem. no matter what container I put the control into or what properties I set on the control/container it will not budge. I have a scroll viewer with a control within. I want it to resize with the window when the user resizes it at runtime. all I need is anchor=top, bottom, left, right. I don't understand why this is so elusive in WPF and why container objects and all kinds of property assignments need to be involved to accomplish what a single property can in Forms. but every solution to this problem still results in my control staying at exactly its design time size as the window is resized at runtime. what's the simple way to get a grip on dynamic control sizing in wpf?

Answer 1

This has caused me grief as well and AlexK helped me see the light. The trick is NOT to set the Height and Width.... Set these to AUTO and use the MARGIN to set the size. Set the HORIZONTALALIGNMENT and VERTICALALIGNMENT to STRETCH and then the anchor functionality works.

Answer 2

The control needs to stretch, that's all there should be to it:

<MyControl HorizontalAlignment="Stretch" VerticalAlignment="Stretch"/>

Stretch replaces setting achors to both respective sides.

For help on panels see this overview. Also see the documentation of the layout system.

Most controls automatically stretch, if you have a DataGrid it should stretch too, try this sample in Kaxaml, it contains a DataGrid and a TextBlock which shows its size:

<Window xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition />
            <RowDefinition Height="Auto"/>
        </Grid.RowDefinitions>
        <DataGrid Name="grid">
            <DataGrid.Columns>
                <DataGridTextColumn Binding="{Binding Name}" Header="Name"/>
                <DataGridTextColumn Binding="{Binding Tag}" Header="Occupation"/>
            </DataGrid.Columns>
            <FrameworkElement Name="Skeet" Tag="Programmer"/>
            <FrameworkElement Name="Gravell" Tag="Programmer"/>
            <FrameworkElement Name="Steve" Tag="Coffee Getter"/>
        </DataGrid>
        <TextBlock Grid.Row="1">
            <TextBlock.Text>
                <MultiBinding StringFormat="{}{0}, {1}">
                    <Binding ElementName="grid" Path="ActualWidth"/>
                    <Binding ElementName="grid" Path="ActualHeight"/>
                </MultiBinding>
            </TextBlock.Text>
        </TextBlock>
    </Grid>
</Window>

If you size the window down the DataGrid's ScrollBars should appear.

Answer 3

I assume the control that does not resize is your custom control.

• Use DockPanel as a container.
• Remove explicit Width and Height properties from your control.

If you work in VS2008, then this causes inconvenience, because you control would collapse to the minimal size when viewed in the designer.

Expressions Blend and starting from VS2010 both respect designer namespace, so you can specify design time only control size.

For that add the following to your control:

<UserControl ...
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
    mc:Ignorable="d"
    d:DesignWidth="WWW" d:DesignHeight="HHH">
    ....
</UserControl>

d:DesignWidth and d:DesignHeight specify the design time width and height.

Answer 4

This question is old but, since I found my here I thought I would throw out my solution. The code below is for a tab control with two tabs and each tab contains a control to fill the tab. I removed the explicitly set width and height, and set the horizontal and vertical alignments to auto on all the controls I wanted to resize. The tab control stretches wit the main window. The controls in the tabs stretch to fill the tabs. The information came from the answers here. I just put up a complete example.

Hope this is useful to someone.

        <TabControl HorizontalAlignment="Stretch" 
                Margin="91,0,0,0" Name="tabControl1"
                VerticalAlignment="Stretch" >
        <TabItem Header="DataGrid" Name="tabItem1">
            <Grid>
                <DataGrid AutoGenerateColumns="False" 
                          HorizontalAlignment="Stretch" 
                          Name="dgFTPLog"
                          VerticalAlignment="Stretch" 
                          Margin="6,6,0,0" />
            </Grid>
        </TabItem>
        <TabItem Header="Log" Name="tabItem2">
            <Grid>
                <TextBox 
                         HorizontalAlignment="Stretch" 
                         Margin="6,6,0,0" Name="txtLog"
                         VerticalAlignment="Stretch"
                         VerticalScrollBarVisibility="Auto" 
                         HorizontalScrollBarVisibility="Auto" 
                         TextChanged="txtLog_TextChanged" />
            </Grid>
        </TabItem>
    </TabControl>

Answer 5

I've came across this issues as well. and Attempted at binding to parent controls ActualHeight and ActualWidth properties except this only works if you do it via code behind not by XAML.

i.e XAML

<MyParentControl x:name="parentControl" SizeChanged="parentControl_SizeChanged">
     <ChildControl x:name=childControl" />
</MyParentControl>

in the .cs code behind

private void parentControl_SizeChanged(object sender, SizeChangedEventArgs e)
    {
        childControl.Height = parentControl.ActualHeight;
        childControl.Width = parentControl.ActualWidth;
    }