WPF 界面布局必知基础

WPF 界面布局必知基础

<Window x:Class="WpfApp1728.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:WpfApp1728"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">

    <!--<DockPanel>
        <Button Content="top Button" DockPanel.Dock="Top" Height="135" Width="370" ></Button>
    </DockPanel>-->
    <Grid ShowGridLines="True">
        <Grid.RowDefinitions>
            <!--行定义 3行4列的定义 -->
            <RowDefinition/>
            <RowDefinition/>
            <RowDefinition/>
            
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <!--列定义-->
            <ColumnDefinition/>
            <ColumnDefinition/>
            <ColumnDefinition/>
            <ColumnDefinition/>
        </Grid.ColumnDefinitions>
        <Button Content="Left Top Button" />
       <!--1 指定行 Grid.Row="2" 2 指定列 Grid.Column="3" 控制按钮的位置。把附加属性用好，就基本够用了。-->
        <Button Content="Right Bottom Top Button" Grid.Row="2" Grid.Column="3" />
    </Grid>
</Window>

<Window x:Class="WpfApp1728.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:WpfApp1728"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">

    <!--<DockPanel>
        <Button Content="top Button" DockPanel.Dock="Top" Height="135" Width="370" ></Button>
    </DockPanel>-->
    <Grid ShowGridLines="True">
        <Grid.RowDefinitions>
            <!--行定义 3行4列的定义 -->
            <RowDefinition/>
            <RowDefinition/>
            <RowDefinition/>
            
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <!--列定义-->
            <ColumnDefinition/>
            <ColumnDefinition/>
            <ColumnDefinition/>
            <ColumnDefinition/>
        </Grid.ColumnDefinitions>
        <Button Content="Left Top Button" />
       <!--1 指定行 Grid.Row="2" 2 指定列 Grid.Column="3" 控制按钮的位置。把附加属性用好，就基本够用了。-->
        <Button Content="Right Bottom Top Button" Grid.Row="2" Grid.Column="3" />
        <!--跨列设计属性 Grid.ColumnSpan--> 
        <Button Content="ColumnSpan Button" Grid.Row="1" Grid.Column="2" Grid.ColumnSpan="2" />
        <!--跨行属性 Grid.RowSpan-->
        <Button Content="RowSpan Button" Grid.Row="0" Grid.Column="1" Grid.RowSpan="3"/>
        
    </Grid>
</Window>

效果

  

 最小宽度设置，最小压缩设置也叫做。

  <Button Content="Left Top Button" MinWidth="80" />

最小宽度 

<!--列定义-->
            <ColumnDefinition MinWidth="100" Width="*"/>

效果

 自适应（到跟文字内容同样的高度） auto代码以及效果

   <!--行定义 3行4列的定义 -->
            <RowDefinition Height="auto"/>
            <RowDefinition Height="auto"/>

   

 内外边距

 <Button Content="Right Bottom Top Button" Grid.Row="2" Margin="10,10,10,10" Grid.Column="3" />

外边距效果