[英]Set Width property of an element as percentage of another element's width
I have a Grid like this:我有一个这样的网格:
<Grid HorizontalAlignment="Stretch">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"></ColumnDefinition>
<ColumnDefinition Width="2*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<TextBlock Text="Rank Percentage" Grid.Column="0" />
<Rectangle Height="20" Grid.Column="1" Width="{x:Bind CurrentCar.RankPercentage, Mode=OneWay}"
</Grid>
I want the width of the rectangle to be proportional to the width of the column.我希望矩形的宽度与列的宽度成正比。 The width of the Grid is not known during compile time (it depends on how user resizes the window of the app). Grid 的宽度在编译期间是未知的(这取决于用户如何调整应用程序窗口的大小)。 For example: If Grid has Width 450, CurrentCar.RankPercentage = 80, Rectangle should have Width = 450 * (2/3) * (80/100)例如:如果网格的宽度为 450,CurrentCar.RankPercentage = 80,则矩形的宽度应为 450 * (2/3) * (80/100)
I have tried to use a Converter with ConverterParameter = ActualWidth of the Grid, but it's not working.我曾尝试使用 ConverterParameter = ActualWidth of the Grid,但它不起作用。
You can use the Grid's SizeChanged
event this:您可以使用网格的SizeChanged
事件:
private void TheGrid_SizeChanged(object sender, SizeChangedEventArgs e)
{
double rectangleWidth = TheGrid.ActualWidth;
rectangleWidth *= (2.0 / 3.0);
rectangleWidth *= (CurrentCar.RankPercentage / 100.0);
TheRectangle.Width = rectangleWidth;
}
But I think you should take a look at the ProgressBar control.但我认为您应该看一下ProgressBar控件。
You could use the valueConverter
but you might need to modify the Converter
a little bit.您可以使用valueConverter
,但您可能需要稍微修改Converter
。 You could add a property to the Converter
and bind with your root grid
, then pass the element name as parameter to the Converter
.您可以向Converter
添加一个属性并与您的根grid
绑定,然后将元素名称作为参数传递给Converter
。 Then you could get width value of the Grid
inside the Converter
.然后你可以在Converter
中获取Grid
的宽度值。 I've made a simple demo which you could try.我做了一个简单的演示,你可以试试。
Xaml: Xaml:
<Page.Resources>
<local:MyValueConverter x:Key="MyValueConverter" UIParameter="{x:Bind MyGrid}" />
</Page.Resources>
<Grid x:Name="MyGrid" HorizontalAlignment="Stretch">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"></ColumnDefinition>
<ColumnDefinition Width="2*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<TextBlock Text="Rank Percentage" Grid.Column="0" />
<Rectangle Height="20" Grid.Column="1" Fill="Red"
Width="{x:Bind CurrentCar.RankPercentage, Mode=OneWay, Converter={StaticResource MyValueConverter}}"/>
</Grid>
MainPage.cs:主页.cs:
There might be a warning in this.Bindings.Update()
. this.Bindings.Update()
中可能会有警告。 But actually, it does not matter但其实,无所谓
public ViewModel CurrentCar { get; set; }
public MainPage()
{
this.InitializeComponent();
CurrentCar= new ViewModel();
CurrentCar.RankPercentage = 0.5;
this.Loaded += MainPage_Loaded;
}
private void MainPage_Loaded(object sender, RoutedEventArgs e)
{
this.Bindings.Update();
}
}
public class ViewModel
{
public double RankPercentage { get; set; }
}
public class MyValueConverter : IValueConverter
{
public UIElement UIParameter { get; set; }
public object Convert(object value, Type targetType, object parameter, string language)
{
double rankPercentage = System.Convert.ToDouble(value);
double rectangleWidth=0;
if (UIParameter != null)
{
Grid grid = UIParameter as Grid;
double gridWidth = grid.ActualWidth;
rectangleWidth = gridWidth * (2.0 / 3.0) * rankPercentage;
return rectangleWidth;
}
return rectangleWidth;
}
public object ConvertBack(object value, Type targetType, object parameter, string language)
{
throw new NotImplementedException();
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.