AutoScale Player

Topics: Windows 8 Xaml
Feb 9, 2013 at 4:00 PM
Edited Feb 9, 2013 at 4:01 PM
Hi Tim,

I have been trying for a couple of days now to create a player which will scale effectively to different screen resolutions.

I am having real issues trying to accomplish this. I'm guessing it's a big ask but I have uploaded a very small project which has my best effort to date, but so close and yet still no cigars!

link to my sky drive containing the application zip:

I am testing this application by running it and dragging the UI between two monitors with different resolutions and also into snap view.

I have wrapped the player in a custom templated control to allow for easier data binding of a selected show.

I wonder if there is any chance you could take a look and offer me any pointers or suggestions.
Feb 11, 2013 at 5:21 PM
I think you'll have better luck if you hide Grid columns (by setting width=0) instead of trying to use transforms.

I was able to get it to work by:
1) Changing PlayerCanvas to a Grid and dropping the RenderTransform.
2) Changing your fullscreenchanged code to something like:
private void player_FullScreenChanged(object sender, RoutedPropertyChangedEventArgs<bool> e)
    if (e.NewValue)
        LayoutRoot.ColumnDefinitions[0].Width = new GridLength(0);
        LayoutRoot.ColumnDefinitions[2].Width = new GridLength(0);
        LayoutRoot.ColumnDefinitions[0].Width = new GridLength(.2, GridUnitType.Star);
        LayoutRoot.ColumnDefinitions[2].Width = new GridLength(.2, GridUnitType.Star);
Xaml z-order and sizing can be hard to control when you have multiple layers of different layout controls so it's often easier to resort to hiding instead of overlaying in these situations.
Feb 12, 2013 at 4:52 PM
Edited Feb 12, 2013 at 4:53 PM
Hi Tim,

I managed to get it to work with the canvas eventually, The toughest part was trying to keep the player in a 16x9 shape with a width = 60% of the display when dragging between monitors of differing resolutions. My mistake was trying to achieve this in the Measure/Arrange passes as the canvas, reported NaN or infinity, eventually I put my 16x9 math in the page code behind and attached to the LayoutRoot Updated event and all fell into place by using column widths as the basis for the calculation.

Thanks for your help.