WPF将Width绑定到Parent.Width*0.3

Question

我想将控件的宽度绑定到父级的宽度,但是达到一定的比例.有没有办法做这样的事情:

<Rectangle  Name="rectangle1" Width="{Binding ActualWidth*0.3, ElementName=thumbnailCanvas, UpdateSourceTrigger=PropertyChanged}" Height="{Binding ActualHeight, ElementName=thumbnailCanvas, UpdateSourceTrigger=PropertyChanged}"/>

Answer 1

当然,但您需要使用转换器.像这样的东西:

using System;
using System.Globalization;
using System.Windows.Data;
using System.Windows.Markup;

namespace WpfTestBench.Converters
{
    public class PercentageConverter : MarkupExtension, IValueConverter
    {
        private static PercentageConverter _instance;

        #region IValueConverter Members

        public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
        {
            return System.Convert.ToDouble(value) * System.Convert.ToDouble(parameter);
        }

        public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
        {
            throw new NotImplementedException();
        }

        #endregion

        public override object ProvideValue(IServiceProvider serviceProvider)
        {
            return _instance ?? (_instance = new PercentageConverter());
        }
    }
}

你的XAML看起来像:

<Window x:Class="WpfTestBench.ScaleSample"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:converters="clr-namespace:WpfTestBench.Converters"
        Title="Scale sample" Height="300" Width="300">
    <Grid Name="ParentGrid">
        <Rectangle
            Width="{Binding Path=ActualWidth, ElementName=ParentGrid, Converter={converters:PercentageConverter}, ConverterParameter='0,5'}"
            Stroke="Black" StrokeThickness="2" />
    </Grid>
</Window>

Answer 2

我建议只使用网格列和*宽度类型在XAML中执行此操作:

<Window x:Class="NameSpace.WindowName"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="Window1" Height="300" Width="300">
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="2*" />
        </Grid.ColumnDefinitions>

        <Grid Grid.Column="0"></Grid><!--This item take up 1/3 of window width-->
        <Grid Grid.Column="1"></Grid> <!--This item take up remaining 2/3 of window width-->

    </Grid>
</Window>

您可以通过更改列宽中*之前的数字来更改列占用的比率.这里设置为1和2,因此网格将分为3(所有*宽度的总和),宽度的1/3到第一列,2/3到第二列.