將寬度/高度設置爲與xaml成比例？

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，與用戶控件改變到你需要：

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

     } 

:)嘗試，讓我知道