C#基础：WPF中常见控件的布局基础

一、用ViewBox实现放缩控件不变

二、布局代码

<Window x:Class="WpfApp1.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="316" Width="778">

    <Viewbox Stretch="Fill">
        <Grid>
            <!-- 左侧栏和右侧栏比例 -->
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="4*"/>
                <ColumnDefinition Width="293*"/>
            </Grid.ColumnDefinitions>

            <!-- 左侧栏 0表示第一个列，又均分5行，1：1：1：1：1-->
            <Grid Grid.Column="0" >
                <Grid.RowDefinitions>
                    <RowDefinition Height="1*"/>
                    <RowDefinition Height="1*"/>
                    <RowDefinition Height="1*"/>
                    <RowDefinition Height="1*"/>
                    <RowDefinition Height="1*"/>
                </Grid.RowDefinitions>
                <Label Grid.Row="0" HorizontalAlignment="Center" VerticalAlignment="Center">Label</Label>
                <Button Grid.Row="1" Margin="3">Button 1</Button>
                <Button Grid.Row="2" Margin="3">Button 2</Button>
                <Button Grid.Row="3" Margin="3">Button 3</Button>
                <Button Grid.Row="4" Margin="3">Button 4</Button>
            </Grid>

            <!-- 右侧栏 1表示第二个列，又分为上下两行，1：1-->
            <Grid Grid.Column="1">
                <Grid.RowDefinitions>
                    <RowDefinition Height="1*"/>
                    <RowDefinition Height="1*"/>
                </Grid.RowDefinitions>

                <!-- 右上部分 又分为两行，3：5，不过右上部分允许跨两行，也就是越过蓝线-->
                <Grid Grid.Row="0" HorizontalAlignment="Center" VerticalAlignment="Top" Width="388" Height="50" Grid.RowSpan="2">
                    <Grid.RowDefinitions>
                        <RowDefinition Height="3*"/>
                        <RowDefinition Height="5*"/>
                    </Grid.RowDefinitions>

                    <!-- 第一行：两个搜索框 StackPanel表控件区块-->
                    <StackPanel Grid.Row="0" Orientation="Horizontal" Margin="0,0,0,24" Grid.RowSpan="2">
                        <Label Height="27">标签1</Label>
                        <TextBox Margin="5" VerticalAlignment="Center" HorizontalAlignment="Stretch" Width="Auto" Text="Search 1"/>
                        <Label Height="25">标签2</Label>
                        <TextBox Margin="5" VerticalAlignment="Center" HorizontalAlignment="Stretch" Width="Auto" Text="Search 2"/>
                    </StackPanel>

                    <!-- 第二行：选择框、复选框、按钮 -->
                    <StackPanel Grid.Row="1" Orientation="Horizontal" Margin="2,7,2,0">
                        <Label Height="25">标签3</Label>

                        <!-- 选择框 -->
                        <ComboBox Margin="5" VerticalAlignment="Center" Width="59">
                            <ComboBoxItem Content="Option 1"/>
                            <ComboBoxItem Content="Option 2"/>
                            <ComboBoxItem Content="Option 3"/>
                        </ComboBox>

                        <Label Height="26">标签4</Label>

                        <!-- 复选框 -->
                        <CheckBox Margin="3" VerticalAlignment="Center" Content="Checkbox" FontSize="10" HorizontalContentAlignment="Left" VerticalContentAlignment="Center"/>

                        <!-- 按钮 左上右下 字体大小-->
                        <Button Margin="30 5 5 5" VerticalAlignment="Center" Content="Search" FontSize="10"/>
                    </StackPanel>
                </Grid>


                <!-- 右下部分 1表示右边栏布局的第2行-->
                <DataGrid Grid.Row="1" Margin="5,20,5,0" Height="70" VerticalAlignment="Top">
                    <!-- 数据绑定和样式设置 -->
                </DataGrid>
            </Grid>
        </Grid>
    </Viewbox>
</Window>

三、布局设计思路