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 的比例？

Answer 1

这是另一个替代答案，您可以根据自己的需要进行修改。

在本例中，您可以在第一列的文本框中输入网格的宽度。或者您可以使用按钮扩大或缩小宽度。只是为了说明。您可能需要根据自己的目的进行更改。

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));
    }
}

这是我的 XAML 代码。

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>

希望有帮助！

Answer 2

这可以这样完成：

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));
    }
}