Set width/height to be proportional in xaml?

Question

I'm creating a user control which is of size 300x100, I'd like it to be that resolution on a 1024x768 screen, but on a 2048x1536 screen I'd like it to be 600x200, in general I'd like to set its size proportionally to the height differential (so if the screen is twice as high the control will be twice as high and twice as wide).

Any ideas how I can accomplish this without resorting to code behind (I'm willing to if given no other choice)?

good quesion , do you know of any API which revils the current resoulotion ? — eran otzap, Sep 28 '13 at 08:31
look at the bottom answer http://stackoverflow.com/questions/5082610/get-and-set-screen-resolution — eran otzap, Sep 28 '13 at 08:33
@meds, do I understand well that, no matter what is your current window size, you want your control size to be proportional to screen resolution? — dkozl, Sep 28 '13 at 08:34
have to tried viewbox control..http://www.c-sharpcorner.com/uploadfile/yougerthen/working-with-wpf-viewbox-control/ — loop, Sep 28 '13 at 08:39

score 2 · Accepted Answer · edited May 23 '17 at 11:52

You can solve this without code behind by creating a proxy control. People often use this approach to get correctly updating ActualWidth and ActualHeight properties they can bind to as in the answer to this question.

In your case, you would want to bind the element of the proxy control to some element which is stretching to the full window size. When the width or height of the bound element changes you can then set the value of two properties on your proxy control to be the calculated proportional height and width. You can then just bind to these proportional sizes for the width and height of your user control.

For example:

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()));
        }
    }
}

Then in the xaml, with UserControl changed to whatever you need:

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

score 1 · Answer 2 · answered Sep 28 '13 at 11:33

This is a silverlight code. Here's how to get the screen height and width

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;

        }

:) Try and let me know

Set width/height to be proportional in xaml?

2 Answers2