Scale UWP screen and resize

Brad Johnson 1

how to allow scale / resize of the app including the columns?

screenshot of the XAML and also the app running, with snippet of code below

App XAML UIApp Running

code

<Page
x:Class="ShippingTestUWP.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:ShippingTestUWP"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:Interactivity="using:Microsoft.Xaml.Interactivity"
xmlns:Interactions="using:Microsoft.Xaml.Interactions.Core"
mc:Ignorable="d"
Background="{ThemeResource ApplicationPageBackgroundThemeBrush}" Width="3840" Height="2160"
IsTabStop="True">
<Grid>
<Grid.Background>
<ImageBrush Stretch="Fill" ImageSource="Assets/alum_bg.jpg" />
</Grid.Background>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="77*"/>
<ColumnDefinition Width="883*"/>
</Grid.ColumnDefinitions>
<RelativePanel Margin="65,147,3402,1080" Grid.ColumnSpan="2">
<RelativePanel.Background>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0" Opacity="0.3">
<GradientStop Color="White"/>
<GradientStop Color="#FFB6C3E4" Offset="1"/>
</LinearGradientBrush>
</RelativePanel.Background>
<ListView Name="StockBayPanel1"
SelectionMode="Single"
ScrollViewer.VerticalScrollBarVisibility="Auto"
ScrollViewer.IsVerticalRailEnabled="True"
ScrollViewer.VerticalScrollMode="Enabled"
ScrollViewer.HorizontalScrollMode="Enabled"
ScrollViewer.HorizontalScrollBarVisibility="Auto"
ScrollViewer.IsHorizontalRailEnabled="True" FocusVisualPrimaryBrush="{x:Null}">
<ListView.HeaderTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal" HorizontalAlignment="Right">
<TextBlock Text="Cast" Width="80" Foreground="Black" HorizontalTextAlignment="Left" />
<TextBlock Text="Items" Width="80" Foreground="Black" HorizontalTextAlignment="Right" />
<TextBlock Text="Open" Width="80" Foreground="Black" HorizontalTextAlignment="Center" />
<TextBlock Text="Grade" Width="80" Foreground="Black" HorizontalTextAlignment="Center" />
</StackPanel>
</DataTemplate>
</ListView.HeaderTemplate>
<ListView.ItemTemplate>
<DataTemplate x:DataType="local:stockBayPanel">
<StackPanel Orientation="Horizontal" HorizontalAlignment="Center" >
<TextBlock Text="{x:Bind CastNumber}"
Width="80" FontSize="30"/>
<TextBlock Text="{x:Bind Items}"
Width="80" FontSize="30" HorizontalTextAlignment="Right"/>
<TextBlock Text="{x:Bind Open}"
Width="80" FontSize="30" HorizontalTextAlignment="Center"/>
<TextBlock x:Name="CastGrade" Text="{x:Bind CastGrade}"
Width="80" FontSize="30" HorizontalTextAlignment="Right"/>
Interactivity:Interaction.Behaviors
<Interactions:DataTriggerBehavior Binding="{x:Bind CastGrade}" Value="107052">
<Interactions:ChangePropertyAction TargetObject="{Binding ElementName=CastGrade}" PropertyName="Foreground" Value="Red" />
</Interactions:DataTriggerBehavior>
</Interactivity:Interaction.Behaviors>
</StackPanel>

                </DataTemplate>  
            </ListView.ItemTemplate>  
        </ListView>  
    </RelativePanel>  
    <TextBox TextAlignment="Center" BorderThickness="0" x:Name="bayInput1" HorizontalAlignment="Left" Margin="220,72,0,0" Text="" TextWrapping="Wrap" VerticalAlignment="Top" TextChanged="bayInput1_TextChanged" FontSize="38" FontWeight="Bold" RenderTransformOrigin="0.594,0.5" Background="{x:Null}"/>  
    <RelativePanel Margin="169,147,2990,1080" Grid.Column="1" RequestedTheme="Default">  
        <RelativePanel.Background>  
            <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0" Opacity="0.3">  
                <GradientStop Color="White"/>  
                <GradientStop Color="#FFB6C3E4" Offset="1"/>  
            </LinearGradientBrush>  
        </RelativePanel.Background>  
        <ListView x:Name="StockBayPanel2"  
            SelectionMode="Single"  
            ScrollViewer.VerticalScrollBarVisibility="Auto"  
            ScrollViewer.IsVerticalRailEnabled="True"  
            ScrollViewer.VerticalScrollMode="Enabled"  
            ScrollViewer.HorizontalScrollMode="Enabled"  
            ScrollViewer.HorizontalScrollBarVisibility="Auto"  
            ScrollViewer.IsHorizontalRailEnabled="True">  
            <ListView.HeaderTemplate>  
                <DataTemplate>  
                    <StackPanel Orientation="Horizontal"  HorizontalAlignment="Right">  
                        <TextBlock Text="Cast" Width="80" Foreground="Black"  HorizontalTextAlignment="Left" />  
                        <TextBlock Text="Items" Width="80" Foreground="Black" HorizontalTextAlignment="Right" />  
                        <TextBlock Text="Open" Width="80" Foreground="Black" HorizontalTextAlignment="Center" />  
                        <TextBlock Text="Grade" Width="80" Foreground="Black" HorizontalTextAlignment="Center" />  
                    </StackPanel>  
                </DataTemplate>  
            </ListView.HeaderTemplate>  
            <ListView.ItemTemplate>  
                <DataTemplate x:DataType="local:stockBayPanel">  
                    <StackPanel Orientation="Horizontal" HorizontalAlignment="Center" >  
                        <TextBlock Text="{x:Bind CastNumber}"  
                               Width="80" FontSize="30"/>  
                        <TextBlock Text="{x:Bind Items}"  
                               Width="80" FontSize="30" HorizontalTextAlignment="Right"/>  
                        <TextBlock Text="{x:Bind Open}"  
                               Width="80" FontSize="30" HorizontalTextAlignment="Center"/>  
                        <TextBlock x:Name="CastGrade" Text="{x:Bind CastGrade}"  
                               Width="80" FontSize="30" HorizontalTextAlignment="Right"/>  
                        <Interactivity:Interaction.Behaviors>  
                            <Interactions:DataTriggerBehavior Binding="{x:Bind CastGrade}" Value="107052">  
                                <Interactions:ChangePropertyAction TargetObject="{Binding ElementName=CastGrade}" PropertyName="Foreground" Value="Red" />  
                            </Interactions:DataTriggerBehavior>  
                        </Interactivity:Interaction.Behaviors>  
                    </StackPanel>  
                </DataTemplate>  
            </ListView.ItemTemplate>  
        </ListView>  
    </RelativePanel>  
    <TextBox TextAlignment="Center" BorderThickness="0" x:Name="bayInput2" HorizontalAlignment="Left" Margin="324,72,0,0" Text="" TextWrapping="Wrap" VerticalAlignment="Top" TextChanged="bayInput2_TextChanged" FontSize="38" FontWeight="Bold" RenderTransformOrigin="0.594,0.5" Grid.Column="1" Background="{x:Null}"/>  
    <RelativePanel Margin="585,147,2574,1080" Grid.Column="1">  
        <RelativePanel.Background>                <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0" Opacity="0.3">  
                <GradientStop Color="White"/>  
                <GradientStop Color="#FFB6C3E4" Offset="1"/>  
            </LinearGradientBrush>  
        </RelativePanel.Background>  
        <ListView x:Name="StockBayPanel3"  
            SelectionMode="Single"  
            ScrollViewer.VerticalScrollBarVisibility="Auto"  
            ScrollViewer.IsVerticalRailEnabled="True"  
            ScrollViewer.VerticalScrollMode="Enabled"  
            ScrollViewer.HorizontalScrollMode="Enabled"  
            ScrollViewer.HorizontalScrollBarVisibility="Auto"  
            ScrollViewer.IsHorizontalRailEnabled="True">  
            <ListView.HeaderTemplate>  
                <DataTemplate>  
                    <StackPanel Orientation="Horizontal"  HorizontalAlignment="Right">  
                        <TextBlock Text="Cast" Width="80" Foreground="Black"  HorizontalTextAlignment="Left" />  
                        <TextBlock Text="Items" Width="80" Foreground="Black" HorizontalTextAlignment="Right" />  
                        <TextBlock Text="Open" Width="80" Foreground="Black" HorizontalTextAlignment="Center" />  
                        <TextBlock Text="Grade" Width="80" Foreground="Black" HorizontalTextAlignment="Center" />  
                    </StackPanel>  
                </DataTemplate>  
            </ListView.HeaderTemplate>  
            <ListView.ItemTemplate>  
                <DataTemplate x:DataType="local:stockBayPanel">  
                    <StackPanel Orientation="Horizontal" HorizontalAlignment="Center" >  
                        <TextBlock Text="{x:Bind CastNumber}"  
                               Width="80" FontSize="30"/>  
                        <TextBlock Text="{x:Bind Items}"  
                               Width="80" FontSize="30" HorizontalTextAlignment="Right"/>  
                        <TextBlock Text="{x:Bind Open}"  
                               Width="80" FontSize="30" HorizontalTextAlignment="Center"/>  
                        <TextBlock x:Name="CastGrade" Text="{x:Bind CastGrade}"  
                               Width="80" FontSize="30" HorizontalTextAlignment="Right"/>  
                        <Interactivity:Interaction.Behaviors>  
                            <Interactions:DataTriggerBehavior Binding="{x:Bind CastGrade}" Value="107052">  
                                <Interactions:ChangePropertyAction TargetObject="{Binding ElementName=CastGrade}" PropertyName="Foreground" Value="Red" />  
                            </Interactions:DataTriggerBehavior>  
                        </Interactivity:Interaction.Behaviors>  
                    </StackPanel>  
                </DataTemplate>  
            </ListView.ItemTemplate>  
        </ListView>  
    </RelativePanel>

Nico Zhu (Shanghai Wicresoft Co,.Ltd.) 12,851 Reputation points

2020-05-26T15:00:16.82+00:00

Do you means that you want scale the Page content?
Brad Johnson 1 Reputation point

2020-05-26T15:47:29.64+00:00

Yeah, like I can remove the top code for page size, but the content goes.
So I want to be able to resize with all the data fields in tact and them resize according to window size
Nico Zhu (Shanghai Wicresoft Co,.Ltd.) 12,851 Reputation points

2020-05-27T08:13:36.997+00:00

So you want resize the content base on your windows size, but not simply zoom the content, right?
Brad Johnson 1 Reputation point

2020-05-27T08:31:46.52+00:00

Yes window size.
If I remember size the window, content sizes accordingly.
So it works on different screen sizes etc
Nico Zhu (Shanghai Wicresoft Co,.Ltd.) 12,851 Reputation points

2020-05-27T08:38:07.937+00:00

For your requirement, you could use AdaptiveTrigger to make responsive layouts with XAML. Please check this document