Question

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

任何想法如何在不诉诸代码的情况下实现这一目标（如果没有其他选择我愿意）？

Answer 1

您可以通过创建代理控制来解决此问题，而无需代码。人们经常使用这种方法来正确更新他们可以绑定的ActualWidth和ActualHeight属性，如this question的答案。

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

例如：

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>

Answer 2

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

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;

        }

:)试试让我知道

设置宽度/高度与xaml成比例？

2 个答案: