WPF中的比例大小调整

Question

我有一个网格(Grid)，其中有两列。其中一列的宽度是另一列的两倍。

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="1*" />
        <ColumnDefinition Width="2*" />
    </Grid.ColumnDefinitions>      
    <TextBox Grid.Column="0" Text="12"/>
    <TextBox Grid.Column="1" Text="" />
</Grid>

但是在运行时，当我在第二个文本框中输入时，宽度会改变而不维持1:2的比例。
我不想保持固定宽度。宽度将根据用户输入在运行时更改。
我希望即使宽度在运行时发生变化，它仍然保持1:2的比例。

- Olivarsham

---

你的每个语句对我来说都很令人困惑。你想在运行时使用固定宽度吗？ - D J

他希望一个列的宽度始终是另一个列宽度的两倍。 - JoanComasFdz

你需要一个转换器，可以看一下这个例子https://dev59.com/i3VC5IYBdhLWcg3w51ry#7358445 - JoanComasFdz

但是我尝试了他的示例，它仍然固定不受您输入的文本的影响。 - D J

我已经发布了一个新答案，我认为它将解决你的问题。它取决于你在文本框中输入的文本，以及整个网格的宽度。 - Mats Magnem

Answer 1

这可以这样完成：

MainWindow.xaml

<Grid>
    <Grid Width="{Binding Path=GridWidth}"
          Margin="0,60,0,0">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="1*" />
            <ColumnDefinition Width="2*" />
        </Grid.ColumnDefinitions>
        <TextBox Grid.Column="0" Text="Single 33%"/>
        <TextBox Grid.Column="1" Text="Double 67%" />
    </Grid>
    <Button Content="Increase" Height="34" HorizontalAlignment="Left" Margin="19,12,0,0" Name="button1" VerticalAlignment="Top" Width="90" Click="button_Click" />
    <Button Content="Decrease" Height="34" HorizontalAlignment="Left" Margin="120,12,0,0" Name="button2" VerticalAlignment="Top" Width="90" Click="button_Click" />
</Grid>

我有两个按钮，可以增加或减少图示的总网格宽度。

MainWindows.cs

public partial class MainWindow : Window, INotifyPropertyChanged
{
    public static readonly DependencyProperty GridWidthProperty = DependencyProperty.Register("GridWidth", typeof(Double), typeof(MainWindow), new UIPropertyMetadata(300d));
    public Double GridWidth
    {
        get { return (Double)GetValue(GridWidthProperty); }
        set
        {
            SetValue(GridWidthProperty, value);
            NotifyPropertyChanged("GridWidth");
        }
    }

    public MainWindow()
    {
        InitializeComponent();
        this.DataContext = this;
    }

    private void button_Click(object sender, RoutedEventArgs e)
    {
        if (sender == button1)
            this.GridWidth += 50;
        else if (sender == button2)
            this.GridWidth -= 50;
    }

    public event PropertyChangedEventHandler PropertyChanged;
    public void NotifyPropertyChanged(String PropertyName)
    {
        if (PropertyChanged != null)
            PropertyChanged(this, new PropertyChangedEventArgs(PropertyName));
    }
}

- Mats Magnem

---

没关系...这不是你要找的。我会把这个答案改成你可能需要的东西。 - Mats Magnem

Answer 2

以下是另一种方案，您可以根据自己的需求进行修改。

在此示例中，您可以在第一列的文本框中输入网格的宽度。或者，您可以通过按钮展开或缩小宽度。只是为了说明，您可能需要根据您的目的进行更改。

MainWindow.cs

public partial class MainWindow : Window, INotifyPropertyChanged
{
    public static readonly DependencyProperty GridWidthProperty = DependencyProperty.Register("GridWidth", typeof(Double), typeof(MainWindow), new UIPropertyMetadata(300d, OnGridWidthPropertyChanged));
    public Double GridWidth
    {
        get { return (Double)GetValue(GridWidthProperty); }
        set
        {
            SetValue(GridWidthProperty, value);
            NotifyPropertyChanged("GridWidth");
        }
    }

    public static readonly DependencyProperty ColumnWidthProperty = DependencyProperty.Register("ColumnWidth", typeof(String), typeof(MainWindow), new UIPropertyMetadata("100", OnColumnWidthPropertyChanged));
    public String ColumnWidth
    {
        get { return (String)GetValue(ColumnWidthProperty); }
        set
        {
            SetValue(ColumnWidthProperty, value);
            NotifyPropertyChanged("ColumnWidth");
        }
    }

    private static void OnGridWidthPropertyChanged(DependencyObject sender, DependencyPropertyChangedEventArgs args)
    {
        MainWindow ctl = sender as MainWindow;

        ctl.doGridWidthChanged();
        ctl = null;
    }

    private static void OnColumnWidthPropertyChanged(DependencyObject sender, DependencyPropertyChangedEventArgs args)
    {
        MainWindow ctl = sender as MainWindow;

        ctl.doColumnWidthChanged();
        ctl = null;
    }

    public MainWindow()
    {
        InitializeComponent();
        this.DataContext = this;
    }

    private void button_Click(object sender, RoutedEventArgs e)
    {
        if (sender == button1)
            this.GridWidth += 50;
        else if (sender == button2)
            this.GridWidth -= 50;
    }

    private void doGridWidthChanged()
    {
        if (Double.IsNaN(this.GridWidth))
            return;

        this.ColumnWidth = Math.Round((this.GridWidth / 3), 2).ToString();
    }

    private void doColumnWidthChanged()
    {
        Double columnwidthval = Double.NaN;

        if (!String.IsNullOrEmpty(this.ColumnWidth) && Double.TryParse(this.ColumnWidth, out columnwidthval))
            this.GridWidth = columnwidthval * 3;
        else
            this.ColumnWidth = Math.Round((this.GridWidth / 3), 2).ToString();
    }

    public event PropertyChangedEventHandler PropertyChanged;
    public void NotifyPropertyChanged(String PropertyName)
    {
        if (PropertyChanged != null)
            PropertyChanged(this, new PropertyChangedEventArgs(PropertyName));
    }
}

And here is my XAML code.

MainWindow.xaml

<Window x:Class="WpfApplication3.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="clr-namespace:WpfApplication3"
        Title="MainWindow" Height="600" Width="800">
    <Grid>
        <Grid Margin="0,60,0,0"
              Width="{Binding Path=GridWidth}">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="1*" />
                <ColumnDefinition Width="2*" />
            </Grid.ColumnDefinitions>
            <Border Grid.Column="0" Background="GhostWhite" />
            <Border Grid.Column="1" Background="AliceBlue" />
            <Border Grid.ColumnSpan="2" BorderBrush="DimGray" BorderThickness="1" />
            <StackPanel Grid.Column="0" Orientation="Vertical" Margin="3">
                <TextBlock Text="Single" />
                <TextBox Text="{Binding Path=ColumnWidth, Mode=TwoWay}" />
            </StackPanel>
            <StackPanel Grid.Column="1" Orientation="Vertical" Margin="3">
                <TextBlock Text="Double" />
            </StackPanel>
        </Grid>
        <Button Content="Increase" Height="34" HorizontalAlignment="Left" Margin="19,12,0,0" Name="button1" VerticalAlignment="Top" Width="90" Click="button_Click" />
        <Button Content="Decrease" Height="34" HorizontalAlignment="Left" Margin="120,12,0,0" Name="button2" VerticalAlignment="Top" Width="90" Click="button_Click" />
    </Grid>
</Window>

希望这有所帮助！

- Mats Magnem