Fixed sized usable page with Template 10 with Hamburger?

Question

I'm trying to create a drawing surface within a Template 10 UWP Hamburger template app with a template image in the background. Is there any way to force the main visual space to be non-scrollable? When I use the following XAML, the image expands off the screen as I stretch the app window wider.

        <!--  content  -->
    <StackPanel EntranceNavigationTransitionInfo.IsTargetElement="True"
                  Padding="12,8,0,0"
                  RelativePanel.AlignBottomWithPanel="True"
                  RelativePanel.AlignLeftWithPanel="True"
                  RelativePanel.AlignRightWithPanel="True"
                  RelativePanel.Below="pageHeader">
        <StackPanel Orientation="Horizontal">
            <ComboBox Name="TemplateComboBox" ItemsSource="{x:Bind _templates}" SelectionChanged="TemplateComboBox_SelectionChanged" PlaceholderText="Select a template...">
                <ComboBoxItem Content="{Binding}" />
            </ComboBox>
            <TextBlock x:Name="stateTextBox"
                   Margin="16,0,0,0"
                   Text="Current Visual State" />
        </StackPanel>
        <Grid Name="DrawingGrid" Margin="0,5,5,5" >
            <Image Name="TemplateImage" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" Stretch="Uniform" />
        </Grid>
    </StackPanel>

There is code in the code-behind to set the Image source as the combo selection changes. I just want the image to stretch to the current viewable area.

sigh Haven't even started with the Ink yet :(

Answer 1

You could think about detecting the visible area's width and height, then set the width and height as your image control's width and height.

<Grid EntranceNavigationTransitionInfo.IsTargetElement="True"
              Padding="12,8,0,0"
              RelativePanel.AlignBottomWithPanel="True"
              RelativePanel.AlignLeftWithPanel="True"
              RelativePanel.AlignRightWithPanel="True"
              RelativePanel.Below="pageHeader">
        <Grid.RowDefinitions>
            <RowDefinition Height="*"></RowDefinition>
            <RowDefinition Height="9*"></RowDefinition>
        </Grid.RowDefinitions>
        <StackPanel Orientation="Horizontal">
            <ComboBox Name="TemplateComboBox" PlaceholderText="Select a template...">
                <ComboBoxItem Content="{Binding}" />
            </ComboBox>
            <TextBlock x:Name="stateTextBox"
               Margin="16,0,0,0"
               Text="Current Visual State" />
        </StackPanel>
        <Grid Margin="0,5,5,5" x:Name="grid" Grid.Row="1">
            <ScrollViewer Name="scrollviewer" Width="{Binding ElementName=grid,Path=Width}" Height="{Binding ElementName=grid,Path=Height}" ScrollViewer.VerticalScrollBarVisibility="Hidden" ScrollViewer.HorizontalScrollBarVisibility="Hidden">
                <Image Name="TemplateImage" VerticalAlignment="Stretch" Source="/Assets/pic.jpg" HorizontalAlignment="Stretch" Stretch="Uniform" />
            </ScrollViewer>
        </Grid>
</Grid>

private void Page_SizeChanged(object sender, SizeChangedEventArgs e)
{
    TemplateImage.Width = scrollviewer.ViewportWidth;
    TemplateImage.Height = scrollviewer.ViewportHeight;
}