wpf中的比例调整 [英] Proportional sizing in wpf
本文介绍了wpf中的比例调整的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有一个 Grid 有两列。一列是其他宽度的两倍。
< Grid>
< Grid.ColumnDefinitions>
< ColumnDefinition Width =1 */>
< ColumnDefinition Width =2 */>
< /Grid.ColumnDefinitions>
< TextBox Grid.Column =0Text =12/>
< TextBox Grid.Column =1Text =/>
< / Grid>
但是在运行时，当我输入第二个文本框时，宽度会发生变化，但不会保持1：2的比例。
我不想保持固定的宽度。宽度将根据用户输入在运行时更改。
即使宽度在运行时发生变化，我也希望宽度为1：2比例。
解决方案
这是另一个可供选择的答案，您可以根据需要进行修改。在此示例中，您可以输入您的网格在第一列的文本框中的宽度。或者您可以使用按钮扩大或缩小宽度。只是为了说明。您可能需要为此改变这种情况。
MainWindow.cs
<$ p
$ b public static readonly DependencyProperty GridWidthProperty = DependencyProperty.Register（GridWidth，typeof（Double），typeof（MainWindow），新的UIPropertyMetadata（300d，OnGridWidthPropertyChanged））;
public Double GridWidth
{
get {return（Double）GetValue（GridWidthProperty）; }
set
{
SetValue（GridWidthProperty，value）;
NotifyPropertyChanged（GridWidth）;
$ b 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;
$ b $ 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（）;
}
公共事件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 =MainWindowHeight =600Width =800>
<网格>
< Grid Margin =0,60,0,0
Width ={Binding Path = GridWidth}>
< Grid.ColumnDefinitions>
< ColumnDefinition Width =1 */>
< ColumnDefinition Width =2 */>
< /Grid.ColumnDefinitions>
< Border Grid.Column =0Background =GhostWhite/>
< Border Grid.Column =1Background =AliceBlue/>
< Border Grid.ColumnSpan =2BorderBrush =DimGrayBorderThickness =1/>
< StackPanel Grid.Column =0Orientation =VerticalMargin =3>
< TextBlock Text =Single/>
< TextBox Text ={Binding Path = ColumnWidth，Mode = TwoWay}/>
< / StackPanel>
< StackPanel Grid.Column =1Orientation =VerticalMargin =3>
< TextBlock Text =Double/>
< / StackPanel>
< / Grid>
< Button Content =增加Height =34HorizontalAlignment =LeftMargin =19,12,0,0Name =button1VerticalAlignment =TopWidth =90Click = button_Click/>
< / Grid>
< / Window>
希望有帮助！
I have a Grid having two columns. One column is twice the width as other.
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="1*" />
<ColumnDefinition Width="2*" />
</Grid.ColumnDefinitions>
<TextBox Grid.Column="0" Text="12"/>
<TextBox Grid.Column="1" Text="" />
</Grid>
But during runtime when i type in second text box the width changes without maintaining the 1:2 ratio.
I dont want to keep fixed width. The width will be changed at runtime based on user entry.
I want the width to be in 1:2 ratio even if the width changes at runtime?
解决方案
Here is another, alternative answer that you can modify into your needs.
In this example, you can enter the width of your grid in the textbox in the first column. Or you can expand or decrease the width with the button. Just for illustration. You may have to change this for your purpose.
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>
Hope that helps!
这篇关于wpf中的比例调整的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
