关于wpf的自适应

案例代码：关于wpf的自适应-CSDN博客

1.案例申明

目前该案例是将自适应的代码放在自定义控件里面，将控件作为界面来使用，然后再将控件布置到界面，拉动界面的大小，可以实现布局的自动补偿。

2.自适应控件的xaml代码

<UserControl x:Class="WpfApp13.UserControl1"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             xmlns:local="clr-namespace:WpfApp13"
             mc:Ignorable="d" 
             d:DesignHeight="450" d:DesignWidth="800">
    <!-- 使用Grid作为根布局容器 -->
    <Grid>
        <!-- 定义行和列的比例，使用*表示按比例分配剩余空间 -->
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <!-- 自动高度，适应内容 -->
            <RowDefinition Height="*"/>
            <!-- 占据剩余空间 -->
            <RowDefinition Height="2*"/>
            <!-- 占据剩余空间的2倍 -->
            <RowDefinition Height="Auto"/>
            <!-- 自动高度，适应内容 -->
        </Grid.RowDefinitions>

        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*"/>
            <!-- 占据剩余空间 -->
            <ColumnDefinition Width="2*"/>
            <!-- 占据剩余空间的2倍 -->
            <ColumnDefinition Width="Auto"/>
            <!-- 自动宽度，适应内容 -->
        </Grid.ColumnDefinitions>

        <!-- 标题区域 -->
        <Label Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="3" 
               Content="自适应布局演示" 
               HorizontalAlignment="Center" 
               FontSize="20" FontWeight="Bold"
               Margin="10"/>

        <!-- 内容区域1 -->
        <Border Grid.Row="1" Grid.Column="0" 
                Background="LightBlue" 
                Margin="5" 
                CornerRadius="5">
            <TextBlock Text="区域1 (1x)" 
                      HorizontalAlignment="Center" 
                      VerticalAlignment="Center"
                      FontSize="16"/>
        </Border>

        <!-- 内容区域2 -->
        <Border Grid.Row="1" Grid.Column="1" 
                Background="LightGreen" 
                Margin="5" 
                CornerRadius="5">
            <TextBlock Text="区域2 (2x宽度)" 
                      HorizontalAlignment="Center" 
                      VerticalAlignment="Center"
                      FontSize="16"/>
        </Border>

        <!-- 内容区域3 -->
        <Border Grid.Row="1" Grid.Column="2" 
                Background="LightSalmon" 
                Margin="5" 
                CornerRadius="5">
            <TextBlock Text="固定宽度" 
                      HorizontalAlignment="Center" 
                      VerticalAlignment="Center"
                      FontSize="16"/>
        </Border>

        <!-- 跨多列的内容区域 -->
        <Border Grid.Row="2" Grid.Column="0" Grid.ColumnSpan="3" 
                Background="LightGoldenrodYellow" 
                Margin="5" 
                CornerRadius="5">
            <TextBlock Text="跨三列区域 (高度是上面的2倍)" 
                      HorizontalAlignment="Center" 
                      VerticalAlignment="Center"
                      FontSize="16"/>
        </Border>

        <!-- 底部按钮区域 -->
        <StackPanel Grid.Row="3" Grid.Column="0" Grid.ColumnSpan="3" 
                    Orientation="Horizontal" 
                    HorizontalAlignment="Center"
                    Margin="10">
            <local:UserControl2>111111111</local:UserControl2>
            <Button Content="确定" Width="100" Margin="5" Padding="10,5"/>
            <Button Content="取消" Width="100" Margin="5" Padding="10,5"/>
        

        </StackPanel>
    </Grid>
</UserControl>

3.grid应用于window界面

该模式，可以实现布局的自动调整，但是无法实现字体和空间的同等缩放。

<Window
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="clr-namespace:WpfApp13" x:Class="WpfApp13.MainWindow"
        Title="自适应布局演示" Height="450" Width="800" MinWidth="400" MinHeight="300">

    <!-- 使用Grid作为根布局容器 -->
    <Grid>
        <!--<Viewbox Stretch="Uniform">
            <local:UserControl1 HorizontalAlignment="Stretch" VerticalAlignment="Stretch" />
        </Viewbox>-->
        <local:UserControl1 HorizontalAlignment="Stretch" VerticalAlignment="Stretch" />
    </Grid>

</Window>

4.grid应用于window界面的效果

5.补充viewbox，除了可以自动布局适应，还能自动实现字体的缩放

在window的xmal补充viewbox

<Window
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="clr-namespace:WpfApp13" x:Class="WpfApp13.MainWindow"
        Title="自适应布局演示" Height="450" Width="800" MinWidth="400" MinHeight="300">

    <!-- 使用Grid作为根布局容器 -->
    <Grid>
        <Viewbox Stretch="Uniform">
            <local:UserControl1 HorizontalAlignment="Stretch" VerticalAlignment="Stretch" />
        </Viewbox>
    </Grid>

</Window>

6.补充viewbox后的效果