将宽度/高度设置为以 xaml 为单位的比例

本文关键字：为单位 xaml 高度 设置 | 更新日期: 2023-09-27 18:33:17

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

任何想法如何在不诉诸代码的情况下完成此操作（如果没有其他选择，我愿意这样做）？

将宽度/高度设置为以 xaml 为单位的比例

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

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

例如：

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 中，将用户控件更改为您需要的任何内容：

<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>

这是一个银光代码。以下是获取屏幕高度和宽度的方法

public MainPage()
    {
        InitializeComponent();
        Loaded += new RoutedEventHandler(MainPage_Loaded);
    }
    void MainPage_Loaded(object sender, RoutedEventArgs e)
    {
        int Width = HtmlPage.Window.Eval("screen.width");
        int Height = HtmlPage.Window.Eval("screen.height");
//Now here increase the height and width of control
double factor = Width/1024; // this is your default you asked for
gdTestElement.Width = 300*factor;
gdTestElement.Height = 100*factor;
        }

:)试着让我知道

相关文章：