WPF学习之路（十一）布局

2022-10-31 08:36:46

布局

Canvas

基本面板，传统布局方式，支持与设备无关的坐标定位元素

<Border BorderThickness="" BorderBrush="Black" Margin="">

        <Canvas>

            <Button Canvas.Left="" Canvas.Top="" Content="Left=20,Top=50" />

            <Button Canvas.Right="" Canvas.Bottom="" Content="Right=20,Bottom=50" />

        </Canvas>

    </Border>

效率高，适合矢量绘图

StackPanel

用于顺序垂直或水平排列子元素

<Grid>

    <Grid.RowDefinitions>

        <RowDefinition />

        <RowDefinition />

    </Grid.RowDefinitions>

    <Grid.ColumnDefinitions>

        <ColumnDefinition />

        <ColumnDefinition />

    </Grid.ColumnDefinitions>

    <Border Grid.Row="" Grid.Column="" BorderThickness="" BorderBrush="Black" Margin="">

        <StackPanel>

            <Button Content="" />

            <Button Content="" />

            <Button Content="" />

            <Button Content="" />

        </StackPanel>

    </Border>

    <Border Grid.Row="" Grid.Column="" BorderThickness="" BorderBrush="Black" Margin="">

        <StackPanel Orientation="Horizontal">

            <Button Content="" />

            <Button Content="" />

            <Button Content="" />

            <Button Content="" />

        </StackPanel>

    </Border>

    <Border Grid.Row="" Grid.Column="" BorderThickness="" BorderBrush="Black" Margin="">

        <StackPanel FlowDirection="RightToLeft">

            <Button Content="" />

            <Button Content="" />

            <Button Content="" />

            <Button Content="" />

        </StackPanel>

    </Border>

    <Border Grid.Row="" Grid.Column="" BorderThickness="" BorderBrush="Black" Margin="">

        <StackPanel Orientation="Horizontal" FlowDirection="RightToLeft">

            <Button Content="" />

            <Button Content="" />

            <Button Content="" />

            <Button Content="" />

        </StackPanel>

    </Border>

</Grid>

WrapPanel

与StackPanel类似，当没有空间放置子元素时会自动放到下一行或下一列

<Border BorderThickness="" BorderBrush="Black" Margin="">

    <WrapPanel ItemHeight="">

        <Button Content="" MinWidth="" />

        <Button Content="" MinWidth="" />

        <Button Content="" MinWidth="" />

        <Button Content="" MinWidth="" />

    </WrapPanel>

</Border>

布局会随着窗口大小的改变一起改变

DockPanel

将元素放到面板的某一个边上，拉伸元素填满高度或者宽度，可以设置是否填充剩余空间

<Grid>

    <Grid.RowDefinitions>

        <RowDefinition />

        <RowDefinition />

    </Grid.RowDefinitions>

    <DockPanel Grid.Row="" Margin="">

        <Button DockPanel.Dock="Left" Content="" />

        <Button DockPanel.Dock="Top" Content="" />

        <Button DockPanel.Dock="Right" Content="" />

        <Button DockPanel.Dock="Bottom" Content="" />

        <Button DockPanel.Dock="Left" Content="" />

        <Button DockPanel.Dock="Top" Content="" />

        <Button DockPanel.Dock="Right" Content="" />

        <Button DockPanel.Dock="Bottom" Content="" />

    </DockPanel>

    <DockPanel Grid.Row="" Margin="" LastChildFill="False">

        <Button DockPanel.Dock="Left" Content="" />

        <Button DockPanel.Dock="Top" Content="" />

        <Button DockPanel.Dock="Right" Content="" />

        <Button DockPanel.Dock="Bottom" Content="" />

        <Button DockPanel.Dock="Left" Content="" />

        <Button DockPanel.Dock="Top" Content="" />

        <Button DockPanel.Dock="Right" Content="" />

        <Button DockPanel.Dock="Bottom" Content="" />

    </DockPanel>

</Grid>

Grid

最常用且功能强大的布局（之前的实例中已经有过使用），允许在一个列表中放置子元素

常用属性 Column\Row\ColumnSpan\RowSpan

尺寸：绝对尺寸、自动尺寸、比例尺寸

<Grid Margin="">

    <Grid.RowDefinitions>

        <RowDefinition />

        <RowDefinition />

        <RowDefinition />

        <RowDefinition />

    </Grid.RowDefinitions>

    <Grid Grid.Row="" Margin="">

        <Grid.ColumnDefinitions>

            <ColumnDefinition Width="" />

            <ColumnDefinition Width="*" />

        </Grid.ColumnDefinitions>

        <Button Grid.Column="" Content="Width=100" />

        <Button Grid.Column="" Content="Width=*" />

    </Grid>

    <Grid Grid.Row="" Margin="">

        <Grid.ColumnDefinitions>

            <ColumnDefinition Width="" />

            <ColumnDefinition Width="*" />

            <ColumnDefinition Width="*" />

            <ColumnDefinition Width="*" />

        </Grid.ColumnDefinitions>

        <Button Grid.Column="" Content="Width=100" />

        <Button Grid.Column="" Content="Width=*" />

        <Button Grid.Column="" Content="Width=*" />

        <Button Grid.Column="" Content="Width=*" />

    </Grid>

    <Grid Grid.Row="" Margin="">

        <Grid.ColumnDefinitions>

            <ColumnDefinition Width="" />

            <ColumnDefinition Width="*" />

            <ColumnDefinition Width="2*" />

            <ColumnDefinition Width="*" />

        </Grid.ColumnDefinitions>

        <Button Grid.Column="" Content="Width=100" />

        <Button Grid.Column="" Content="Width=*" />

        <Button Grid.Column="" Content="Width=2*" />

        <Button Grid.Column="" Content="Width=*" />

    </Grid>

    <Grid Grid.Row="" Margin="">

        <Grid.ColumnDefinitions>

            <ColumnDefinition Width="" />

            <ColumnDefinition Width="*" />

            <ColumnDefinition Width="2*" />

            <ColumnDefinition Width="3*" />

        </Grid.ColumnDefinitions>

        <Button Grid.Column="" Content="Width=100" />

        <Button Grid.Column="" Content="Width=*" />

        <Button Grid.Column="" Content="Width=2*" />

        <Button Grid.Column="" Content="Width=3*" />

    </Grid>

</Grid>

IsSharedSizeScope

通过对SharedSizeGroup命名，相同名字的Grid的高度或者宽度可以设置为相同

<Grid Margin="" Grid.IsSharedSizeScope="True">

                <Grid Grid.Row="" Margin="">

                    <Grid.ColumnDefinitions>

                        <ColumnDefinition Width="" SharedSizeGroup="a"/>

                        <ColumnDefinition Width="*" SharedSizeGroup="a"/>

                    </Grid.ColumnDefinitions>

                  　...

                </Grid>

                <Grid Grid.Row="" Margin="">

                    <Grid.ColumnDefinitions>

                        <ColumnDefinition Width="" />

                        <ColumnDefinition Width="*" />

                        <ColumnDefinition Width="2*" SharedSizeGroup="a"/>

                        <ColumnDefinition Width="*" />

                    </Grid.ColumnDefinitions>

　　　　　　　　　　　　...

GridSplitter

可以通过鼠标键盘改变尺寸

<Grid Margin="" Grid.IsSharedSizeScope="True">

    <Grid.RowDefinitions>

　　　　...

    </Grid.RowDefinitions>

    <GridSplitter Grid.Row="" HorizontalAlignment="Stretch" VerticalAlignment="Top" ShowsPreview="True" ResizeDirection="Rows" Height="3" Background="Black" />

    <Grid Grid.Row="" Margin="">

        <Grid.ColumnDefinitions>

          ...

        </Grid.ColumnDefinitions>

        <GridSplitter Grid.Column="" HorizontalAlignment="Left" VerticalAlignment="Stretch" ShowsPreview="True" Width="" Background="Black" />

        ...

    </Grid>

</Grid>

To be continue...

码农公寓

相关文章