xaml Xaml/C# UWP App Won't Scale Properly

[NPDPdev]

I am working on the beginnings of my first UWP app, and am a little confused. One of the key benefits to UWP apps is supposed to be their automatic scalability, and developers are encouraged to set the sizes of UI elements in multiples of four (for easier scaling across platforms). I am using a Raspberry Pi 3 (running Win10 IoT Core), and using a screen with an 800x480 resolution. In VS2019, I get an xaml preview for my UI that shows me what it would look like on certain device presets. The closest preview preset to my screen is one that's 1024*768.

 

 

Here is my code to create sections in the UI and set their colors (so I can see the "zones" I have created):

<Grid>
        <Grid.RowDefinitions>
            <RowDefinition/>
            <RowDefinition Height="704"/>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="128"/>
            <ColumnDefinition/>
        </Grid.ColumnDefinitions>
        <Rectangle Fill="Coral" Width="128"/>
        <Rectangle Fill="Gray" Grid.Column="1" Grid.Row="0"/>
        <Rectangle Fill="Red" Grid.Row="1"/>

        <Grid Grid.Column="2" Grid.Row="1">
        </Grid>
        

    </Grid>

 

 

 

This is what I would like the UI to look like across all platforms.

 

Vs. What actually displays on my prototype screen:

 

The final system will have a different display than the one I am using to test, so the row and column values must scale with the display parameters.

 

 

Here is the specific part related to establishing Row/column length/height:

	<Grid.RowDefinitions>
            <RowDefinition/>
            <RowDefinition Height="704"/>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="128"/>
            <ColumnDefinition/>
        </Grid.ColumnDefinitions>

 

I have found that within Xaml and C# I could do 

SystemParameters.FullPrimaryScreenHeight

and it would return me the height of the display/window, meaning I could use the formula

SystemParameters.FullPrimaryScreenHeight-(SystemParameters.FullPrimaryScreenHeight/12)=Properly scaled vertical resolution

to find my needed height for the row.

Unfortunately, I cannot do arithmetic operations using Xaml alone. I know that there is some way to use Xaml in conjunction with C#, but this is my first time developing based on Microsoft's UWP.

 

I'm sure that the combination of Xaml and C# is a fairly common practice, like HTML and CSS or HTML and JS, but I am just unsure how to do it.

Sorry for the word-vomit, but I couldn't think of a simple way to explain this.

 

[NPDPdev]

By using the Name attribute, it allows me to address a specific Xaml tag from within the C# file. I just use that name as if said tag was an object, and I can interact with it however I want. I did not end up using this solution though, and instead remembered that Grid row/column sizes support pixel counts OR factors. I simply entered the factors that I wanted, and everything now displays as it should.

 

Here is the changed code:

	<Grid.RowDefinitions>
            <RowDefinition/>
            <RowDefinition x:Name="ContentArea" Height="12*"/>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition x:Name="Sidebar" Width="0.125*"/>
            <ColumnDefinition/>
        </Grid.ColumnDefinitions>

 

 

Here is the correct screen displaying:

[Franck]

You should indeed always use factor in xaml or else you will always have scaling issues. There is some edge case like phone with super high dpi and small screen. Your ratio will make text a couple actual pixel high and completely unreadable on screen but for that there is some system resources you can read from and it tell you the minimum size for display text and things like that where you can enforce a minimum value to all text and controls based of this.