4

私はGrid2つの列を持っています。1つの列は他の列の2倍の幅です。 

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

しかし、実行時に2番目のテキストボックスに入力すると、幅は1：2の比率を維持せずに変更されます。
固定幅を保ちたくない。幅は、ユーザー入力に基づいて実行時に変更されます。
実行時に幅が変更されても、幅を1：2の比率にしたいですか？

4

2 に答える 2

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>

説明のために、合計グリッド幅を増減する 2 つのボタンがあります。

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));
    }
}
于 2013-01-17T10:39:29.103 に答える
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));
    }
}

そして、これが私の 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>

それが役立つことを願っています!

于 2013-01-17T11:10:39.353 に答える