首页 > 解决方案 > 如何使 2 列按比例调整大小超过某个宽度,但当表单低于该宽度时只有一个调整大小?

问题描述

我有一个 WPF 应用程序,主窗口中有 2 个网格列。调整大小时,我希望右列永远不会低于 220 宽度,但左列继续缩小。如果窗口足够扩大,我希望两列按比例扩大,左列的大小是右列的两倍。我想我可以用下面的 XAML 来做到这一点......

<Grid.ColumnDefinitions>
    <ColumnDefinition Width="2*"/>
    <ColumnDefinition Width="1*" MinWidth="220"/>
</Grid.ColumnDefinitions>

但是发生的情况是,当右列达到 220 时,它们都停止调整大小并且窗口仅在右列上方关闭(开始覆盖控件),如下图所示。我现在明白它为什么这样做了,但我不知道如何让它按照我想要的方式运行。

这是表格总宽度约为 660 时的样子 这是表格总宽度约为 660 时的样子

这就是挤到660以下的样子 这就是挤到660以下的样子

这就是我希望它在压缩到 660 以下时的样子 这就是我希望它在压缩到 660 以下时的样子

标签: wpfxaml

解决方案


应用DataTrigger如果ActualWidth第 2 列等于MinWidth第 2 列然后更改为Width第1 列应该可以实现您的目标。autoColumnDifinition

    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="2*">
            <ColumnDefinition.Style>
                <Style TargetType="ColumnDefinition">
                    <Style.Triggers>
                        <DataTrigger Value="True">
                            <DataTrigger.Binding>
                                <MultiBinding Converter="{StaticResource eqCvrt}">
                                    <Binding ElementName="c2" Path="ActualWidth"/>
                                    <Binding ElementName="c2" Path="MinWidth"/>
                                </MultiBinding>
                            </DataTrigger.Binding>
                            <Setter Property="Width" Value="auto"/>
                        </DataTrigger>
                    </Style.Triggers>
                </Style>
            </ColumnDefinition.Style>
        </ColumnDefinition>
        <ColumnDefinition Width="1*" MinWidth="220" Name="c2"/>
    </Grid.ColumnDefinitions>

public class EqualityConverter : IMultiValueConverter
{
    public object Convert(object[] values, Type targetType, object parameter, CultureInfo culture)
    {
        return Object.Equals(values[0], values[1]);
    }

    public object[] ConvertBack(object value, Type[] targetTypes, object parameter, CultureInfo culture)
    {
        return null;
    }
}

推荐阅读