Fadi Banna Fadi Banna - 24 days ago 7
C# Question

Scale UWP Application to all phone sizes

So I'm building UWP Application that will mainly target phones, but since it can be run on PC and Tablets I used VisualStateManager to correct the layout for bigger screens.
Now Phones also have different screen sizes and I'm looking for a way to simply scale all the components in my page without using Visual state for every single phone and screen resolution out there, or alternatively Using the state manager but without having to re position every single element for every single screen size(between 5" and 6" phones its easy since you can see preview of changes in VS 2015 but for smaller phones its pretty annoying).
here is a sample page from my App:

<Grid>
<Canvas x:Name="canvas">
<Canvas.Background>
<ImageBrush Stretch="Fill" ImageSource="Assets/start-01.jpg"/>
</Canvas.Background>
<RelativePanel x:Name="relativePanel" Canvas.Left="-3" Height="612" Canvas.Top="10" >

<Image x:Name="play" HorizontalAlignment="Left" Height="36" Margin="83,271,-3,0" VerticalAlignment="Top" Width="194" Source="Assets/start bottuns-01.png" Stretch="Fill" Tapped="play_Tapped"/>
<TextBlock x:Name="playTB" Height="36" Margin="130,265,69.333,0" TextWrapping="Wrap" Text="RACE" FontSize="30" VerticalAlignment="Top" CharacterSpacing="364" Tapped="play_Tapped" FontFamily="Lucida Sans Unicode"/>
<Image x:Name="highscoresBT" HorizontalAlignment="Left" Height="36" Margin="83,337,-3,0" VerticalAlignment="Top" Width="194" Source="Assets/start bottuns-01.png" Stretch="Fill" Tapped="highscoresBT_Tapped"/>
<TextBlock x:Name="highscoreTB" Height="36" Margin="85,337,76,0" TextWrapping="Wrap" Text="HIGHSCORES" FontSize="24" VerticalAlignment="Top" CharacterSpacing="194" Tapped="highscoresBT_Tapped" FontFamily="Lucida Sans Unicode"/>
<Image x:Name="storeBT" HorizontalAlignment="Left" Height="36" Margin="83,403,-3,0" VerticalAlignment="Top" Width="194" Source="Assets/start bottuns-01.png" Stretch="Fill" Tapped="storeBT_Tapped"/>
<TextBlock x:Name="storeTB" HorizontalAlignment="Left" Height="36" Margin="124,397,-108,0" TextWrapping="Wrap" Text="STORE" Width="151" FontSize="30" VerticalAlignment="Top" CharacterSpacing="364" Tapped="storeBT_Tapped"/>
<Image x:Name="helpBut" HorizontalAlignment="Left" Height="100" Margin="144,522,-3,0" VerticalAlignment="Top" Width="72" Source="Assets/helpBut-01.png" Tapped="helpBut_Tapped"/>
<Image x:Name="coinsBG" HorizontalAlignment="Left" Height="19" Margin="295,0,-3,0" VerticalAlignment="Top" Width="56" Source="Assets/comp bar-01.png" Stretch="Fill"/>
<Image x:Name="coinsIC" HorizontalAlignment="Left" Height="19" VerticalAlignment="Top" Width="14" Source="Assets/coins-01.png" Margin="329,1,-3,0"/>
<TextBlock x:Name="coinsOwnedTB" HorizontalAlignment="Left" Height="14" Margin="303,2,-3,0" TextWrapping="Wrap" Text="120" VerticalAlignment="Top" Width="21" FontSize="10" FontFamily="Lucida Sans Unicode" Foreground="#FF535257"/>
<Image x:Name="scoreBG" HorizontalAlignment="Left" Height="23" Margin="13,0,-3,0" VerticalAlignment="Top" Width="136" Source="Assets/comp bar-01.png" Stretch="Fill"/>
<TextBlock x:Name="scoreNameTB" HorizontalAlignment="Left" Height="21" Margin="14,2,-3,0" TextWrapping="Wrap" Text="Score: " VerticalAlignment="Top" Width="48" FontSize="14" FontFamily="Lucida Sans Unicode" Foreground="#FF535257"/>
<TextBlock x:Name="scoreTB" HorizontalAlignment="Left" Height="21" Margin="62,2,-3,0" TextWrapping="Wrap" Text="" VerticalAlignment="Top" Width="87" FontSize="14" FontFamily="Lucida Sans Unicode" Foreground="#FF535257"/>
<Image x:Name="feedbackBT" HorizontalAlignment="Left" Height="36" Margin="83,469,-3,0" VerticalAlignment="Top" Width="194" Source="Assets/start bottuns-01.png" Stretch="Fill" Tapped="feedback_Tapped"/>
<TextBlock x:Name="feedbackTB" Height="36" Margin="96,463,60.667,0" TextWrapping="Wrap" Text="SUPPORT" FontSize="30" VerticalAlignment="Top" Tapped="feedback_Tapped" FontFamily="Lucida Sans Unicode" TextAlignment="Center" CharacterSpacing="200"/>
</RelativePanel>
</Canvas>
</Grid>


So basiclly I need a way to scale and re position all the elements according to the Grid/Canvas/Relative panel size (They are not really all needed for this page it was just some kind of trials).

Maybe a programmatic way not necessarily altering the XAML code.

Thanks in advance:)

Answer

I managed to get what I was looking for with the help of a ViewBox that scales my App automatically to fit screen size:

    <Viewbox Stretch="UniformToFill" >
    <Grid x:Name="canvas" >
        <Grid.Background>
            <ImageBrush Stretch="Fill" ImageSource="Assets/start-01.jpg"/>
        </Grid.Background>
        <Image x:Name="play" Height="34" HorizontalAlignment="Left" Margin="78,281,0,325" Width="194" Source="Assets/start bottuns-01.png" Stretch="Fill" Tapped="play_Tapped"/>
        <TextBlock x:Name="playTB" Height="34" Margin="125,276,90,0" TextWrapping="Wrap" Text="RACE" FontSize="30" CharacterSpacing="364" Tapped="play_Tapped" FontFamily="Lucida Sans Unicode"  VerticalAlignment="Top" d:LayoutOverrides="HorizontalAlignment"/>
        <Image x:Name="highscoresBT" HorizontalAlignment="Left" Height="34" Margin="78,335,0,0" VerticalAlignment="Top" Width="194" Source="Assets/start bottuns-01.png" Stretch="Fill" Tapped="highscoresBT_Tapped"/>
        <TextBlock x:Name="highscoreTB" Height="34" Margin="88,335,82,0" TextWrapping="Wrap" Text="HIGHSCORES" FontSize="24" VerticalAlignment="Top" CharacterSpacing="100" Tapped="highscoresBT_Tapped" FontFamily="Lucida Sans Unicode"/>
        <Image x:Name="storeBT" HorizontalAlignment="Left" Height="34" Margin="78,398,0,0" VerticalAlignment="Top" Width="194" Source="Assets/start bottuns-01.png" Stretch="Fill" Tapped="storeBT_Tapped"/>
        <TextBlock x:Name="storeTB" HorizontalAlignment="Left" Height="34" Margin="111,392,0,0" TextWrapping="Wrap" Text="STORE" Width="151" FontSize="30" VerticalAlignment="Top" CharacterSpacing="364" Tapped="storeBT_Tapped"/>
        <Image x:Name="helpBut" Height="96" Margin="115,511,122,0" VerticalAlignment="Top" Source="Assets/helpBut-01.png" Tapped="helpBut_Tapped" d:LayoutOverrides="HorizontalAlignment, LeftPosition, RightPosition"/>
        <Image x:Name="coinsBG" HorizontalAlignment="Left" Height="18" Margin="294,12,0,0" VerticalAlignment="Top" Width="56" Source="Assets/comp bar-01.png" Stretch="Fill"/>
        <Image x:Name="coinsIC" HorizontalAlignment="Left" Height="18" VerticalAlignment="Top" Width="14" Source="Assets/coins-01.png" Margin="328,13,0,0"/>
        <TextBlock x:Name="coinsOwnedTB" HorizontalAlignment="Left" Height="14" Margin="302,14,0,0" TextWrapping="Wrap" Text="120" VerticalAlignment="Top" Width="21" FontSize="10" FontFamily="Lucida Sans Unicode" Foreground="#FF535257"/>
        <Image x:Name="scoreBG" HorizontalAlignment="Left" Height="22" VerticalAlignment="Top" Width="136" Source="Assets/comp bar-01.png" Stretch="Fill" Margin="12,12,0,0" d:LayoutOverrides="HorizontalAlignment"/>
        <TextBlock x:Name="scoreNameTB" HorizontalAlignment="Left" Height="20" Margin="13,14,0,0" TextWrapping="Wrap" Text="Score: " VerticalAlignment="Top" Width="48" FontSize="14" FontFamily="Lucida Sans Unicode" Foreground="#FF535257"/>
        <TextBlock x:Name="scoreTB" HorizontalAlignment="Left" Height="20" Margin="61,14,0,0" TextWrapping="Wrap" Text="" VerticalAlignment="Top" Width="87" FontSize="14" FontFamily="Lucida Sans Unicode" Foreground="#FF535257" d:LayoutOverrides="HorizontalAlignment"/>
        <Image x:Name="feedbackBT" HorizontalAlignment="Left" Height="34" Margin="78,461,0,0" VerticalAlignment="Top" Width="194" Source="Assets/start bottuns-01.png" Stretch="Fill" Tapped="feedback_Tapped"/>
        <TextBlock x:Name="feedbackTB" Height="34" Margin="91,455,98,0" TextWrapping="Wrap" Text="SUPPORT" FontSize="30" VerticalAlignment="Top" Tapped="feedback_Tapped" FontFamily="Lucida Sans Unicode" TextAlignment="Center" CharacterSpacing="200"/>
    </Grid>
</Viewbox>

This is what worked for me :)