locked
More Scaling Issues

    Question

  • I cant seem to figure out how to get the Xaml to draw flexibly for the snapped view in windows 8.1. In full screen it looks fine. I have the minimum width set to 500px since the old style snap view isn't conducive to the type of app I am making

    This is the XAML code I have for the Screen now. '

    <Page
        x:Name="pageRoot"
        x:Class="Cerebrum.GameScreen"
        DataContext="{Binding DefaultViewModel, RelativeSource={RelativeSource Self}}"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="using:Cerebrum"
        xmlns:common="using:Cerebrum.Common"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        mc:Ignorable="d">
    
        <Page.Resources>
            <common:BooleanToVisibilityConverter x:Key="BooleanToVisibilityConverter"/>
            <Storyboard x:Name="Storyboard1">
                <ColorAnimation Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)" 
    			Storyboard.TargetName="ColorChoice1" 
    			From="Red" To="Blue" Duration="0:0:01">
                </ColorAnimation>
            </Storyboard>
            <Storyboard x:Name="Storyboard2">
                <ColorAnimation Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)" 
                                Storyboard.TargetName="ColorChoice2" 
    			From="Red" To="Blue" Duration="0:0:01">
                </ColorAnimation>
            </Storyboard>
            <Storyboard x:Name="Storyboard3">
                <ColorAnimation Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)" 
                                Storyboard.TargetName="ColorChoice3"  
    			From="Red" To="Blue" Duration="0:0:01">
                </ColorAnimation>
            </Storyboard>
            <Storyboard x:Name="Storyboard4">
                <ColorAnimation Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)" 
    			Storyboard.TargetName="ColorChoice4" 
    			From="Red" To="Blue" Duration="0:0:01">
                </ColorAnimation>
            </Storyboard>
    
        </Page.Resources>
        <Page.BottomAppBar>
            <AppBar>
                <Grid>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition/>
                        <ColumnDefinition/>
                    </Grid.ColumnDefinitions>
                    <StackPanel Orientation="Horizontal"/>
                    <StackPanel Grid.Column="1" HorizontalAlignment="Right" Orientation="Horizontal"/>
                </Grid>
            </AppBar>
        </Page.BottomAppBar>
        <Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
            <VisualStateManager.VisualStateGroups>
                <VisualStateGroup x:Name="VisualStateGroup"/>
            </VisualStateManager.VisualStateGroups>
            <Grid>
                <Grid.RowDefinitions>
                    <RowDefinition Height="1*"/>
                    <RowDefinition Height="2*"/>
                    <RowDefinition Height="3*"/>
    				<RowDefinition Height="4*"/>
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="1*"/>
                    <ColumnDefinition Width="1*"/>
                    <ColumnDefinition Width="1*"/>
                    <ColumnDefinition Width="1*"/>
                </Grid.ColumnDefinitions>
    			
    			<Button Content="Previous Guess" HorizontalAlignment="Left" Margin="7,7,0,0" Grid.Row="1" Grid.Column="0" VerticalAlignment="Top" RenderTransformOrigin="-0.1,0.397" FontSize="18.667"/>
                        <Button Content="Next Guess" HorizontalAlignment="Right" Margin="0,7,7,0" Grid.Row="1" Grid.Column="3" VerticalAlignment="Top" RenderTransformOrigin="-0.1,0.397" FontSize="18.667"/>
                        <TextBlock x:Name="CurrGuessBlock" HorizontalAlignment="Left" TextWrapping="Wrap" Grid.Row="1" Grid.Column="1" Text="Current Guess: 10" VerticalAlignment="Top" Margin="10,10,0,0" FontSize="26.667" Height="45" Width="319"/>
                        <TextBlock x:Name="RemainGuessBlock" HorizontalAlignment="Left" TextWrapping="Wrap" Grid.Row="1" Grid.Column="2" Text="Remaining Guess: 9" VerticalAlignment="Top" Margin="10,10,0,0" Height="37" Width="322" FontSize="26.667"/>
    			
                <Rectangle x:Name="ColorChoice1" Fill="Red" Margin="10,0,10,0" Grid.Row="2" Tapped="ColorChoice1_Tapped" />
                <Rectangle x:Name="ColorChoice2" Fill="Green" Grid.Column="1" Margin="10,0,10,0" Grid.Row="2" Tapped="ColorChoice2_Tapped" />
                <Rectangle x:Name="ColorChoice3" Fill="Blue" Grid.Column="2" Margin="10,0,10,0"  Grid.Row="2" Tapped="ColorChoice3_Tapped" />
                <Rectangle x:Name="ColorChoice4" Fill="Yellow" Grid.Column="3" Margin="10,0,10,0"  Grid.Row="2" Tapped="ColorChoice4_Tapped" />
                <Rectangle x:Name="Answer1" Fill="#FFF4F4F5" HorizontalAlignment="Left" Height="100" Margin="10,10,0,0" Grid.Row="3" Stroke="Black" VerticalAlignment="Top" Width="100" RenderTransformOrigin="-0.2,0.24"/>
                <Rectangle x:Name="Answer2" Fill="#FFF4F4F5" HorizontalAlignment="Left" Height="100" Margin="10,10,0,0" Grid.Row="3" Stroke="Black" VerticalAlignment="Top" Width="100" Grid.Column="1"/>
                <Rectangle x:Name="Answer4" Fill="#FFF4F4F5" HorizontalAlignment="Left" Height="100" Margin="10,10,0,0" Grid.Row="3" Stroke="Black" VerticalAlignment="Top" Width="100" Grid.Column="3"/>
                <Rectangle x:Name="Answer3" Fill="#FFF4F4F5" HorizontalAlignment="Left" Height="100" Margin="10,10,0,0" Grid.Row="3" Stroke="Black" VerticalAlignment="Top" Width="100" Grid.Column="2"/>
                
                        
    
                <Button Content="Submit Guess" Grid.Row="4" Grid.Column="3" HorizontalAlignment="Right" Margin="0,112,7,0" VerticalAlignment="Top" Height="62" FontSize="26.667" RenderTransformOrigin="0.347,2.065" Width="242" Click="Button_Click"/>
                <TextBlock HorizontalAlignment="Left" Margin="15,135,0,0" Grid.Row="4" Grid.Column="1" TextWrapping="Wrap" Text="Game Time: 00:00:00" VerticalAlignment="Top" FontSize="21.333"/>
                <TextBlock HorizontalAlignment="Left" Margin="15,166,0,0" Grid.Row="4" Grid.Column="1" TextWrapping="Wrap" Text="Last Time: 00:00:00" VerticalAlignment="Top" FontSize="21.333" Width="195"/>
                <TextBlock HorizontalAlignment="Left" Margin="10,168,0,0" Grid.Row="4" Grid.Column="2" TextWrapping="Wrap" Text="Hints Remaining: 0" VerticalAlignment="Top" FontSize="20"/>
                <TextBlock HorizontalAlignment="Left" Margin="10,135,0,0" TextWrapping="Wrap" Grid.Column="2" Text="Prev. Guess Count: 00" VerticalAlignment="Top" FontSize="20" Width="195" Grid.Row="4"/>
            </Grid>
    		<local:CollapsedAppBar Grid.Row="1" HorizontalAlignment="Stretch" VerticalAlignment="Bottom" Foreground="Green" />
        </Grid>
    
        <!--
            This grid acts as a root panel for the page that defines two rows:
            * Row 0 contains the back button and page title
            * Row 1 contains the rest of the page layout
        -->
    </Page>

    The layout works fine in full mode, as shown in the picture below

    however, when it is put into the snap view the textbox and buttons get all wonky and don't scale properly. I cant seem to get them to auto orient and resize according to the snap of the screen.

    My question is: How do I make it so the textboxes and Buttons scale properly in snapped and full mode? I know that 8.1 snaps differently, Which is why my minimum width is 500px. I have also locked the orientation so it can only be landscape and landscape invert to simplify orientation. I only want to know how to get the textboxes and buttons to resize so that my UI still remains usable in snap mode.
    Friday, January 10, 2014 4:11 PM

Answers

  • You can use a ViewBox to scale things down, but you won't get a great effect by scaling your layout. Instead: reorganize it. Detect the skinny view and shift from a horizontal layout to a vertical one. That way your boxes can retain a usable width while all being available.

    A good example of this was in the Windows 8 samples which switched from a horizontally based GridView to a vertically based ListView.

    This is often a good plan for handling portrait view as well.

    See Quickstart: Designing apps for different window sizes for more details.

    --Rob

    Friday, January 10, 2014 4:43 PM
    Owner