Dockpanel-the most regular layout Control

Dockpanel-the most regular layout Control

Such a dockpanel:

    <DockPanel LastChildFill="True">        <TextBlock  Text="1.Dock.Top" DockPanel.Dock="Top" Background="Bisque" Margin="0" Height="50"  VerticalAlignment="Top"/>        <TextBlock  Text="2.Dock.Bottom" DockPanel.Dock="Bottom" Background="GreenYellow"   Margin="0" Height="20" VerticalAlignment="Bottom"/>        <TextBlock  Text="3.Dock.Left" DockPanel.Dock="Left" Background="Tan"  Width="100"  />        <Grid DockPanel.Dock="Right" x:Name="gridRight"  Width="200">            <TextBlock  Text="4.Dock.Right" Background="Honeydew"    HorizontalAlignment="Stretch"/>        </Grid>        <TextBlock  Text="last" Background="Aquamarine" />    </DockPanel>

 

Each element]
This edge is very good. The guy in the middle can take advantage of the blessing of the parent element lastchildfill = "true" and exclusively occupy the remaining area.

Observe the rules because of two points:

1. The element is docked to only one side, and the last element fills the blank area.
2. Strictly follow the first-in-first-out principle, especially the [controversial regions]

Use the first point to indent the space on the edge so that the middle area occupies a large amount of space.

        <Grid DockPanel.Dock="Right" x:Name="gridRight"  Width="200">            <TextBlock  Text="4.Dock.Right" Background="Honeydew"    HorizontalAlignment="Stretch"/>            <ToggleButton Content="->" Height="23" HorizontalAlignment="Left" Margin="0,50,0,0"  Name="btnRight" VerticalAlignment="Top" Width="23"  >                <ToggleButton.Triggers>                    <EventTrigger   RoutedEvent="ToggleButton.Checked">                        <StopStoryboard BeginStoryboardName="collapsed" />                        <BeginStoryboard x:Name="expand"   HandoffBehavior="SnapshotAndReplace">                            <Storyboard  >                                <DoubleAnimation      Duration="00:00:0.10 "  Storyboard.TargetName="gridRight" Storyboard.TargetProperty="Width" To="50" />                                <ObjectAnimationUsingKeyFrames      Storyboard.TargetProperty="Content"   >                                    <DiscreteObjectKeyFrame Value="->"  KeyTime="00:00:0.10" />                                </ObjectAnimationUsingKeyFrames>                            </Storyboard>                        </BeginStoryboard>                    </EventTrigger>                    <EventTrigger RoutedEvent="ToggleButton.Unchecked">                        <StopStoryboard BeginStoryboardName="expand" />                        <BeginStoryboard x:Name="collapsed"   HandoffBehavior="SnapshotAndReplace">                            <Storyboard  >                                <DoubleAnimation       Duration="00:00:0.10 "    Storyboard.TargetName="gridRight" Storyboard.TargetProperty="Width" To="200" />                                <ObjectAnimationUsingKeyFrames      Storyboard.TargetProperty="Content"   >                                    <DiscreteObjectKeyFrame Value="<-"  KeyTime="00:00:0.10" />                                </ObjectAnimationUsingKeyFrames>                            </Storyboard>                        </BeginStoryboard>                    </EventTrigger>                </ToggleButton.Triggers>            </ToggleButton>        </Grid>

The second point can be used to change the layout as needed.

For example
There is a cross area. If you want to divide this area to the left, place the element on the left before the element on the lower side, as shown below:

<TextBlock  Text="3.Dock.Left" DockPanel.Dock="Left" Background="Tan"  Width="100"  /><TextBlock  Text="2.Dock.Bottom" DockPanel.Dock="Bottom" Background="GreenYellow"   Margin="0" Height="20" VerticalAlignment="Bottom"/>