将宽度/高度设置为与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; 

     } 

:)尝试，让我知道