UWP控件如何锁定长宽比

在UWP界面设计的过程中，有时候我们需要锁定一些控件的长宽比，但又需要自动调整控件的大小。控件并没有直接实现锁定长宽比的功能，但只需要简单的代码即可实现自动缩放的情况下锁定长宽比。

下面这一段代码表现的是一个布局复杂的按钮控件。这个版本中，按钮sampleButton的长宽比会随着窗口长宽比改变。

<Page
    x:Class="App2.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:App2"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <Grid.RowDefinitions>
            <RowDefinition Height="*"/>
            <RowDefinition Height="*"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="*"/>
        </Grid.ColumnDefinitions>
        <Button x:Name="sampleButton" 
                VerticalAlignment="Stretch" 
                HorizontalAlignment="Stretch"
                Grid.Row="1"
                Grid.Column="1"/>
    </Grid>
</Page>

说明：以下描述最简单的OnSizeChanged的方法。如果是自定义的控件需要实现长宽比锁定，可以重载其Measure方法。重载Measure方法的性能更高。具体方式见控件UI性能调优。

我们想要让这个按钮锁定在正方形。很简单，只需要在Button外面再套一个Grid，再监听其SizeChanged事件：

将

<Button x:Name="sampleButton" 
                VerticalAlignment="Stretch" 
                HorizontalAlignment="Stretch"
                Grid.Row="1"
                Grid.Column="1"/>

改为

        <Grid x:Name="sampleButtonFrame"
              Grid.Row="1"
              Grid.Column="1"
              SizeChanged="sampleButtonFrame_SizeChanged">
            <Button x:Name="sampleButton"
                    VerticalAlignment="Stretch"
                    HorizontalAlignment="Stretch"/>
        </Grid>

然后在后台代码中添加如下函数：

        private void sampleButtonFrame_SizeChanged(object sender, SizeChangedEventArgs e)
        {
            if (e.NewSize.Width > e.NewSize.Height)
            {
                sampleButton.Width = e.NewSize.Height;
                sampleButton.Height = double.NaN;
            }
            else
            {
                sampleButton.Width = double.NaN;
                sampleButton.Height = e.NewSize.Width;
            }
        }

这样，在调整窗口大小时，按钮就能始终保持正方形了。如果需要其他比例，只需要稍微修改后台代码即可。

留言

有想法？请给我们留言！您的留言不会直接显示在网站内。