Jump to content
Search In
  • More options...
Find results that contain...
Find results in...

Xaml/C# UWP App Won't Scale Properly

Go to solution Solved by 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:

Screenshot_2021-05-03_21-44-47.jpg.0026d36dce82e5d1e504020a8a34f018.jpg

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.

Screenshot_2021-05-03_20-53-46.jpg.2f2ffbcf7ca483c63f39ddb22c4b693f.jpg

 

Vs. What actually displays on my prototype screen:

Screenshot_2021-05-03_20-51-58.jpg.a84d59e3737af47cc5ab781e8a39d09b.jpg

 

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.

 

Link to post
Share on other sites

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:

Screenshot_2021-05-03_21-44-47.jpg.0026d36dce82e5d1e504020a8a34f018.jpg

Link to post
Share on other sites

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.

Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Newegg

×