UI Responsive 的 VisualStateManager 在 UWP 中不工作
VisualStateManager for UI Responsive is not working in UWP
在我的 uwp 桌面应用程序中。我为页眉创建了一个用户控件。对于响应式 UI 我正在使用 VisualStateManager 但是当我调整 page.i 大小时它不起作用 我想在调整 page.this 代码大小时继续将右侧控件向左移动情况。
我想在调整 window 大小时减小中间空白 space 的大小。
提前致谢:)
<UserControl
x:Class="UWPUIResponsive.UC_Header"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:extensions="using:Microsoft.Toolkit.Uwp.UI.Extensions"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:forms="using:Xamarin.Forms"
mc:Ignorable="d"
d:DesignWidth="400" Height="50" BorderBrush="Silver" BorderThickness="0 0 1 1" >
<Grid >
<VisualStateManager.VisualStateGroups>
<VisualStateGroup>
<VisualState>
<VisualState.StateTriggers>
<AdaptiveTrigger MinWindowWidth = "720" />
</VisualState.StateTriggers>
<VisualState.Setters>
<!--<Setter Target = "Parent.Orientation" Value = "Horizontal" />-->
<Setter Target = "CThree.Width" Value = "Auto" />
<Setter Target = "CFour.Width" Value = "Auto" />
<Setter Target = "CTen.Width" Value = "Auto" />
<Setter Target = "CThree.Width" Value = "Auto" />
<Setter Target = "CEight.Width" Value = "Auto" />
<Setter Target = "CSix.Width" Value = "Auto" />
</VisualState.Setters>
</VisualState>
<VisualState>
<VisualState.StateTriggers>
<AdaptiveTrigger MinWindowWidth = "1250" />
</VisualState.StateTriggers>
<VisualState.Setters>
<!--<Setter Target = "Parent.Orientation" Value = "Horizontal" />-->
<Setter Target = "Cone.Width" Value = "10*" />
<Setter Target = "CTwo.Width" Value = "60*" />
<Setter Target = "CThree.Width" Value = "250*" />
<Setter Target = "CFour.Width" Value = "16*" />
<Setter Target = "CFive.Width" Value = "*" />
<Setter Target = "CSix.Width" Value = "23*" />
<Setter Target = "CSeven.Width" Value = "" />
<Setter Target = "CEight.Width" Value = "8*" />
<Setter Target = "CNine.Width" Value = "" />
<Setter Target = "CTen.Width" Value = "4*" />
<Setter Target = "CEleven.Width" Value = "25*" />
</VisualState.Setters>
</VisualState>
<VisualState>
<VisualState.StateTriggers>
<!--VisualState to be triggered when window
width is >=720 effective pixels.-->
<AdaptiveTrigger MinWindowWidth = "500" />
</VisualState.StateTriggers>
<VisualState.Setters>
<!--<Setter Target = "Parent.Orientation" Value = "Horizontal" />-->
<Setter Target = "Cone.Width" Value = "Auto" />
<Setter Target = "CTwo.Width" Value = "Auto" />
<Setter Target = "CThree.Width" Value = "Auto" />
<Setter Target = "CFour.Width" Value = "Auto" />
<Setter Target = "CFive.Width" Value = "Auto" />
<Setter Target = "CSix.Width" Value = "Auto" />
<Setter Target = "CSeven.Width" Value = "" />
<Setter Target = "CEight.Width" Value = "Auto" />
<Setter Target = "CNine.Width" Value = "" />
<Setter Target = "CTen.Width" Value = "Auto" />
<Setter Target = "CEleven.Width" Value = "Auto" />
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Grid Name="Parent" BorderBrush="Silver" BorderThickness="0 0 1 1" >
<Grid.RowDefinitions>
<RowDefinition Height="5*"/>
<RowDefinition Height="5*"/>
<RowDefinition Height="5*"/>
<RowDefinition Height="5*"/>
<RowDefinition Height="7*"/>
<RowDefinition Height="3*"/>
<RowDefinition Height="15*"/>
<RowDefinition Height="4*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition x:Name="Cone" Width="10*"/>
<ColumnDefinition x:Name="CTwo" Width="60*"/>
<ColumnDefinition x:Name="CThree" Width="250*"/>
<ColumnDefinition x:Name="CFour" Width="16*"/>
<ColumnDefinition x:Name="CFive" Width="*"/>
<ColumnDefinition x:Name="CSix" Width="23*"/>
<ColumnDefinition x:Name="CSeven"/>
<ColumnDefinition x:Name="CEight" Width="8*"/>
<ColumnDefinition x:Name="CNine"/>
<ColumnDefinition x:Name="CTen" Width="4*"/>
<ColumnDefinition x:Name="CEleven" Width="25*"/>
</Grid.ColumnDefinitions>
<Image Source="Application_Images\circle.png" Stretch="Uniform" Grid.RowSpan="6" Grid.Column="1" Margin="0,0,9,0" HorizontalAlignment="Stretch" Grid.Row="1" VerticalAlignment="Stretch"/>
<Image Source="Application_Images\circle.png" Stretch="Fill" RenderTransformOrigin="-0.057,0.714" Grid.Column="7" Grid.Row="2" Grid.RowSpan="4" Margin="0,3,0,2" Grid.ColumnSpan="2" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" />
<TextBlock FontSize="14" Text="" TextWrapping="Wrap" Name="TBUserName" Foreground="#27aae1" TextAlignment="right" Grid.Column="5" Margin="3,3,0,0" Grid.RowSpan="3" Grid.Row="2" FontWeight="Bold" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" />
<TextBlock FontSize="13" Text=" Admin" TextWrapping="Wrap" Name="TBRole" Foreground="#414042" TextAlignment="right" Grid.Column="5" Margin="3,1,0,8" RenderTransformOrigin="0.5,0.5" Grid.Row="4" Grid.RowSpan="3" HorizontalAlignment="Stretch" >
<TextBlock.RenderTransform>
<CompositeTransform ScaleY="1"/>
</TextBlock.RenderTransform>
</TextBlock>
<Button Background="Transparent" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Grid.Column="9" Margin="0,0,3,6" RenderTransformOrigin="0.5,0.5" Grid.Row="4" Width="6" Height="5">
<Button.RenderTransform>
<CompositeTransform ScaleX="1" ScaleY="1"/>
</Button.RenderTransform>
<Button.Template>
<ControlTemplate>
<Image Stretch="Fill" Source="Application_Images\circle.png"/>
</ControlTemplate>
</Button.Template>
<!--<Image Source="dropdown.png" Margin="9,8,0,4" />-->
<Button.Flyout>
<MenuFlyout x:Name="settings">
<MenuFlyoutItem Text = "Profile" />
<MenuFlyoutItem Text = "Sign Out" />
</MenuFlyout>
</Button.Flyout>
</Button>
<Image ToolTipService.ToolTip="Dashboard" Source="Application_Images\circle.png" Stretch="Uniform" Grid.Column="3" Grid.Row="3" Grid.RowSpan="3" Margin="1,0,0,0" VerticalAlignment="Stretch"/>
<StackPanel Background="#E1E1E1" Grid.Column="4" HorizontalAlignment="Center" Margin="0,1,0,13" Width="1" Grid.RowSpan="5" Grid.Row="2" />
</Grid>
</Grid>
</UserControl>
复杂的网格布局可能会造成混淆。我根据应用程序的实际显示简化了您的布局，并拉近了徽标和帐户之间的距离。
<Grid>
<!-- <VisualStateManager.VisualStateGroups>
<VisualStateGroup>
<VisualState>
<VisualState.StateTriggers>
<AdaptiveTrigger MinWindowWidth="500" />
</VisualState.StateTriggers>
<VisualState.Setters>
<Setter Target="TitleColumn.Width" Value="Auto"/>
<Setter Target="HolderColumn1.Width" Value="Auto"/>
<Setter Target="HolderColumn2.Width" Value="Auto"/>
</VisualState.Setters>
</VisualState>
<VisualState>
<VisualState.StateTriggers>
<AdaptiveTrigger MinWindowWidth="750" />
</VisualState.StateTriggers>
<VisualState.Setters>
<Setter Target="TitleColumn.Width" Value="20*"/>
<Setter Target="HolderColumn1.Width" Value="*"/>
<Setter Target="HolderColumn2.Width" Value="*"/>
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>-->
<Grid x:Name="p" BorderBrush="Silver" BorderThickness="0,0,1,1">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" x:Name="HolderColumn1"/>
<ColumnDefinition Width="20*" x:Name="TitleColumn"/>
<ColumnDefinition Width="Auto" x:Name="AccountColumn"/>
<ColumnDefinition Width="*" x:Name="HolderColumn2"/>
</Grid.ColumnDefinitions>
<StackPanel Orientation="Horizontal" Grid.Column="1">
<Image Source="Application_Images\circle.png" Stretch="Uniform" Margin="0,0,9,0" HorizontalAlignment="Left" VerticalAlignment="Center"/>
<Image ToolTipService.ToolTip="Dashboard" VerticalAlignment="Center" Source="Application_Images\circle.png" Stretch="Uniform" HorizontalAlignment="Left" Margin="5,0,0,0"/>
</StackPanel>
<StackPanel Grid.Column="2" BorderBrush="Silver" VerticalAlignment="Center" BorderThickness="1,0,0,0" Margin="15,0,0,0" Padding="15,0,0,0">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<StackPanel VerticalAlignment="Center">
<TextBlock FontSize="14" Text="" TextWrapping="Wrap" Name="TBUserName" Foreground="#27aae1" TextAlignment="right" FontWeight="Bold" />
<TextBlock FontSize="13" Text="Admin" TextWrapping="Wrap" Name="TBRole" Foreground="#414042" TextAlignment="right" >
<TextBlock.RenderTransform>
<CompositeTransform ScaleY="1"/>
</TextBlock.RenderTransform>
</TextBlock>
</StackPanel>
<Image Source="Application_Images\circle.png" Height="30" Stretch="Uniform" RenderTransformOrigin="-0.057,0.714" Grid.Column="1" Margin="10,3,10,2" VerticalAlignment="Center" />
<Button Background="Transparent" Grid.Column="2" Margin="0,0,3,6" Height="5" RenderTransformOrigin="0.5,0.5" >
<Button.RenderTransform>
<CompositeTransform ScaleX="1" ScaleY="1"/>
</Button.RenderTransform>
<Button.Template>
<ControlTemplate>
<Image Stretch="Fill" Source="Application_Images\circle.png"/>
</ControlTemplate>
</Button.Template>
<Button.Flyout>
<MenuFlyout x:Name="settings">
<MenuFlyoutItem Text = "Profile" />
<MenuFlyoutItem Text = "Sign Out" />
</MenuFlyout>
</Button.Flyout>
</Button>
</Grid>
</StackPanel>
</Grid>
</Grid>
显示内容如下：
更新
在Gridrow/column定义中，*表示space左边。但是，如果定义有很多*，就说明这space是按比例分配的。如：
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="2*"/>
</Grid.ColumnDefinitions>
表示第二列是第一列宽度的两倍。
而Auto表示宽度或高度随着内容的变化而变化
我给的layout中，TitleColumn和HolderColumn的比例是20:1，相当于一个动态的Padding，这是不起作用的。也可以换成Grid的Padding。
此时AccountColumn的宽度由内容决定，剩下的space全部被TitleColumn占用。随着 window 宽度的变化，控件之间的距离也会按比例变化。这就是 self-adaptation.
的原因
此致。
在我的 uwp 桌面应用程序中。我为页眉创建了一个用户控件。对于响应式 UI 我正在使用 VisualStateManager 但是当我调整 page.i 大小时它不起作用 我想在调整 page.this 代码大小时继续将右侧控件向左移动情况。
我想在调整 window 大小时减小中间空白 space 的大小。 提前致谢:)
<UserControl
x:Class="UWPUIResponsive.UC_Header"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:extensions="using:Microsoft.Toolkit.Uwp.UI.Extensions"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:forms="using:Xamarin.Forms"
mc:Ignorable="d"
d:DesignWidth="400" Height="50" BorderBrush="Silver" BorderThickness="0 0 1 1" >
<Grid >
<VisualStateManager.VisualStateGroups>
<VisualStateGroup>
<VisualState>
<VisualState.StateTriggers>
<AdaptiveTrigger MinWindowWidth = "720" />
</VisualState.StateTriggers>
<VisualState.Setters>
<!--<Setter Target = "Parent.Orientation" Value = "Horizontal" />-->
<Setter Target = "CThree.Width" Value = "Auto" />
<Setter Target = "CFour.Width" Value = "Auto" />
<Setter Target = "CTen.Width" Value = "Auto" />
<Setter Target = "CThree.Width" Value = "Auto" />
<Setter Target = "CEight.Width" Value = "Auto" />
<Setter Target = "CSix.Width" Value = "Auto" />
</VisualState.Setters>
</VisualState>
<VisualState>
<VisualState.StateTriggers>
<AdaptiveTrigger MinWindowWidth = "1250" />
</VisualState.StateTriggers>
<VisualState.Setters>
<!--<Setter Target = "Parent.Orientation" Value = "Horizontal" />-->
<Setter Target = "Cone.Width" Value = "10*" />
<Setter Target = "CTwo.Width" Value = "60*" />
<Setter Target = "CThree.Width" Value = "250*" />
<Setter Target = "CFour.Width" Value = "16*" />
<Setter Target = "CFive.Width" Value = "*" />
<Setter Target = "CSix.Width" Value = "23*" />
<Setter Target = "CSeven.Width" Value = "" />
<Setter Target = "CEight.Width" Value = "8*" />
<Setter Target = "CNine.Width" Value = "" />
<Setter Target = "CTen.Width" Value = "4*" />
<Setter Target = "CEleven.Width" Value = "25*" />
</VisualState.Setters>
</VisualState>
<VisualState>
<VisualState.StateTriggers>
<!--VisualState to be triggered when window
width is >=720 effective pixels.-->
<AdaptiveTrigger MinWindowWidth = "500" />
</VisualState.StateTriggers>
<VisualState.Setters>
<!--<Setter Target = "Parent.Orientation" Value = "Horizontal" />-->
<Setter Target = "Cone.Width" Value = "Auto" />
<Setter Target = "CTwo.Width" Value = "Auto" />
<Setter Target = "CThree.Width" Value = "Auto" />
<Setter Target = "CFour.Width" Value = "Auto" />
<Setter Target = "CFive.Width" Value = "Auto" />
<Setter Target = "CSix.Width" Value = "Auto" />
<Setter Target = "CSeven.Width" Value = "" />
<Setter Target = "CEight.Width" Value = "Auto" />
<Setter Target = "CNine.Width" Value = "" />
<Setter Target = "CTen.Width" Value = "Auto" />
<Setter Target = "CEleven.Width" Value = "Auto" />
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Grid Name="Parent" BorderBrush="Silver" BorderThickness="0 0 1 1" >
<Grid.RowDefinitions>
<RowDefinition Height="5*"/>
<RowDefinition Height="5*"/>
<RowDefinition Height="5*"/>
<RowDefinition Height="5*"/>
<RowDefinition Height="7*"/>
<RowDefinition Height="3*"/>
<RowDefinition Height="15*"/>
<RowDefinition Height="4*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition x:Name="Cone" Width="10*"/>
<ColumnDefinition x:Name="CTwo" Width="60*"/>
<ColumnDefinition x:Name="CThree" Width="250*"/>
<ColumnDefinition x:Name="CFour" Width="16*"/>
<ColumnDefinition x:Name="CFive" Width="*"/>
<ColumnDefinition x:Name="CSix" Width="23*"/>
<ColumnDefinition x:Name="CSeven"/>
<ColumnDefinition x:Name="CEight" Width="8*"/>
<ColumnDefinition x:Name="CNine"/>
<ColumnDefinition x:Name="CTen" Width="4*"/>
<ColumnDefinition x:Name="CEleven" Width="25*"/>
</Grid.ColumnDefinitions>
<Image Source="Application_Images\circle.png" Stretch="Uniform" Grid.RowSpan="6" Grid.Column="1" Margin="0,0,9,0" HorizontalAlignment="Stretch" Grid.Row="1" VerticalAlignment="Stretch"/>
<Image Source="Application_Images\circle.png" Stretch="Fill" RenderTransformOrigin="-0.057,0.714" Grid.Column="7" Grid.Row="2" Grid.RowSpan="4" Margin="0,3,0,2" Grid.ColumnSpan="2" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" />
<TextBlock FontSize="14" Text="" TextWrapping="Wrap" Name="TBUserName" Foreground="#27aae1" TextAlignment="right" Grid.Column="5" Margin="3,3,0,0" Grid.RowSpan="3" Grid.Row="2" FontWeight="Bold" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" />
<TextBlock FontSize="13" Text=" Admin" TextWrapping="Wrap" Name="TBRole" Foreground="#414042" TextAlignment="right" Grid.Column="5" Margin="3,1,0,8" RenderTransformOrigin="0.5,0.5" Grid.Row="4" Grid.RowSpan="3" HorizontalAlignment="Stretch" >
<TextBlock.RenderTransform>
<CompositeTransform ScaleY="1"/>
</TextBlock.RenderTransform>
</TextBlock>
<Button Background="Transparent" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Grid.Column="9" Margin="0,0,3,6" RenderTransformOrigin="0.5,0.5" Grid.Row="4" Width="6" Height="5">
<Button.RenderTransform>
<CompositeTransform ScaleX="1" ScaleY="1"/>
</Button.RenderTransform>
<Button.Template>
<ControlTemplate>
<Image Stretch="Fill" Source="Application_Images\circle.png"/>
</ControlTemplate>
</Button.Template>
<!--<Image Source="dropdown.png" Margin="9,8,0,4" />-->
<Button.Flyout>
<MenuFlyout x:Name="settings">
<MenuFlyoutItem Text = "Profile" />
<MenuFlyoutItem Text = "Sign Out" />
</MenuFlyout>
</Button.Flyout>
</Button>
<Image ToolTipService.ToolTip="Dashboard" Source="Application_Images\circle.png" Stretch="Uniform" Grid.Column="3" Grid.Row="3" Grid.RowSpan="3" Margin="1,0,0,0" VerticalAlignment="Stretch"/>
<StackPanel Background="#E1E1E1" Grid.Column="4" HorizontalAlignment="Center" Margin="0,1,0,13" Width="1" Grid.RowSpan="5" Grid.Row="2" />
</Grid>
</Grid>
</UserControl>
复杂的网格布局可能会造成混淆。我根据应用程序的实际显示简化了您的布局，并拉近了徽标和帐户之间的距离。
<Grid>
<!-- <VisualStateManager.VisualStateGroups>
<VisualStateGroup>
<VisualState>
<VisualState.StateTriggers>
<AdaptiveTrigger MinWindowWidth="500" />
</VisualState.StateTriggers>
<VisualState.Setters>
<Setter Target="TitleColumn.Width" Value="Auto"/>
<Setter Target="HolderColumn1.Width" Value="Auto"/>
<Setter Target="HolderColumn2.Width" Value="Auto"/>
</VisualState.Setters>
</VisualState>
<VisualState>
<VisualState.StateTriggers>
<AdaptiveTrigger MinWindowWidth="750" />
</VisualState.StateTriggers>
<VisualState.Setters>
<Setter Target="TitleColumn.Width" Value="20*"/>
<Setter Target="HolderColumn1.Width" Value="*"/>
<Setter Target="HolderColumn2.Width" Value="*"/>
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>-->
<Grid x:Name="p" BorderBrush="Silver" BorderThickness="0,0,1,1">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" x:Name="HolderColumn1"/>
<ColumnDefinition Width="20*" x:Name="TitleColumn"/>
<ColumnDefinition Width="Auto" x:Name="AccountColumn"/>
<ColumnDefinition Width="*" x:Name="HolderColumn2"/>
</Grid.ColumnDefinitions>
<StackPanel Orientation="Horizontal" Grid.Column="1">
<Image Source="Application_Images\circle.png" Stretch="Uniform" Margin="0,0,9,0" HorizontalAlignment="Left" VerticalAlignment="Center"/>
<Image ToolTipService.ToolTip="Dashboard" VerticalAlignment="Center" Source="Application_Images\circle.png" Stretch="Uniform" HorizontalAlignment="Left" Margin="5,0,0,0"/>
</StackPanel>
<StackPanel Grid.Column="2" BorderBrush="Silver" VerticalAlignment="Center" BorderThickness="1,0,0,0" Margin="15,0,0,0" Padding="15,0,0,0">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<StackPanel VerticalAlignment="Center">
<TextBlock FontSize="14" Text="" TextWrapping="Wrap" Name="TBUserName" Foreground="#27aae1" TextAlignment="right" FontWeight="Bold" />
<TextBlock FontSize="13" Text="Admin" TextWrapping="Wrap" Name="TBRole" Foreground="#414042" TextAlignment="right" >
<TextBlock.RenderTransform>
<CompositeTransform ScaleY="1"/>
</TextBlock.RenderTransform>
</TextBlock>
</StackPanel>
<Image Source="Application_Images\circle.png" Height="30" Stretch="Uniform" RenderTransformOrigin="-0.057,0.714" Grid.Column="1" Margin="10,3,10,2" VerticalAlignment="Center" />
<Button Background="Transparent" Grid.Column="2" Margin="0,0,3,6" Height="5" RenderTransformOrigin="0.5,0.5" >
<Button.RenderTransform>
<CompositeTransform ScaleX="1" ScaleY="1"/>
</Button.RenderTransform>
<Button.Template>
<ControlTemplate>
<Image Stretch="Fill" Source="Application_Images\circle.png"/>
</ControlTemplate>
</Button.Template>
<Button.Flyout>
<MenuFlyout x:Name="settings">
<MenuFlyoutItem Text = "Profile" />
<MenuFlyoutItem Text = "Sign Out" />
</MenuFlyout>
</Button.Flyout>
</Button>
</Grid>
</StackPanel>
</Grid>
</Grid>
显示内容如下：
更新
在Gridrow/column定义中，*表示space左边。但是，如果定义有很多*，就说明这space是按比例分配的。如：
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="2*"/>
</Grid.ColumnDefinitions>
表示第二列是第一列宽度的两倍。
而Auto表示宽度或高度随着内容的变化而变化
我给的layout中，TitleColumn和HolderColumn的比例是20:1，相当于一个动态的Padding，这是不起作用的。也可以换成Grid的Padding。
此时AccountColumn的宽度由内容决定，剩下的space全部被TitleColumn占用。随着 window 宽度的变化，控件之间的距离也会按比例变化。这就是 self-adaptation.
此致。