当前位置：首页 > news >正文

关于wpf的自适应

news 2025/7/13 6:04:30

案例代码：关于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界面

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

<Windowxmlns="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

<Windowxmlns="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>