c# - 将宽度/高度设置为在 xaml 中成比例？

Question

我正在创建一个大小为 300x100 的用户控件，我希望它在 1024x768 屏幕上是该分辨率，但在 2048x1536 屏幕上我希望它是 600x200，一般来说我喜欢将其大小设置为与高度差成比例(因此，如果屏幕是两倍高，控件将是两倍高和两倍宽)。

关于如何在不借助代码隐藏的情况下完成此操作的任何想法(如果别无选择，我愿意这样做)？

Answer 1

您可以通过创建代理控件在没有代码隐藏的情况下解决这个问题。人们经常使用这种方法来正确更新他们可以绑定(bind)到的 ActualWidth 和 ActualHeight 属性，如 this question 的答案中所示。 .

在您的情况下，您可能希望将代理控件的元素绑定(bind)到某个拉伸(stretch)到整个窗口大小的元素。当绑定(bind)元素的宽度或高度发生变化时，您可以将代理控件上的两个属性的值设置为计算出的比例高度和宽度。然后，您可以将用户控件的宽度和高度绑定(bind)到这些比例大小。

例如:

public class ProportionalSizeHelper : FrameworkElement, INotifyPropertyChanged
{
    private double _proportionalWidth = 0;
    private double _proportionalHeight = 0;

    public event PropertyChangedEventHandler PropertyChanged;

    public FrameworkElement Element
    {
        get { return (FrameworkElement)GetValue(ElementProperty); }
        set { SetValue(ElementProperty, value); }
    }

    public double ProportionalHeight
    {
        get{ return _proportionalHeight; }
    }

    public double ProportionalWidth
    {
        get { return _proportionalWidth; }
    }

    public static readonly DependencyProperty ElementProperty =
        DependencyProperty.Register("Element", typeof(FrameworkElement), typeof(ProportionalSizeHelper), 
                                    new PropertyMetadata(null,OnElementPropertyChanged));

    private static void OnElementPropertyChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
    {
        ((ProportionalSizeHelper)d).OnElementChanged(e);
    }

    private void OnElementChanged(DependencyPropertyChangedEventArgs e)
    {
        FrameworkElement oldElement = (FrameworkElement)e.OldValue;
        FrameworkElement newElement = (FrameworkElement)e.NewValue;

        if (newElement != null)
        {   
            newElement.SizeChanged += new SizeChangedEventHandler(Element_SizeChanged);
        }
        else
        {
            _proportionalHeight = 0;
            _proportionalWidth = 0;
        }
        if (oldElement != null)
        {
            oldElement.SizeChanged -= new SizeChangedEventHandler(Element_SizeChanged);
        }
        NotifyPropChange();
    }

    private void Element_SizeChanged(object sender, SizeChangedEventArgs e)
    {
        // This can be whatever calculation you need
        double factor = Math.Min(Element.ActualWidth/1024, Element.ActualHeight/768);
        _proportionalHeight = 100*factor;
        _proportionalWidth = 300*factor;
        NotifyPropChange();
    }

    private void NotifyPropChange()
    {
        if (PropertyChanged != null)
        {
            PropertyChanged(this, new PropertyChangedEventArgs("ProportionalWidth".NonNls()));
            PropertyChanged(this, new PropertyChangedEventArgs("ProportionalHeight".NonNls()));
        }
    }
}

然后在 xaml 中，将 UserControl 更改为您需要的任何内容:

<Grid x:Name="LayoutRoot">
    <Grid.Resources>
        <c:ProportionalSizeHelper Element="{Binding ElementName=LayoutRoot}" x:Name="proxy" />
    </Grid.Resources>
    <UserControl Width="{Binding ProportionalWidth, ElementName=proxy}" Height={Binding ProportionalHeight, ElementName=proxy}  />
</Grid>