使用带有汉堡包的模板 10 固定大小的可用页面？

Question

我正在尝试在 Template 10 UWP Hamburger 模板应用程序中创建一个绘图表面，背景中有一个模板图像。有没有办法强制主视觉空间不可滚动？当我使用以下 XAML 时，当我将应用程序窗口拉得更宽时，图像会从屏幕上展开。

        <!--  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>

代码隐藏中有代码可以在组合选择更改时设置图像源。我只是想让图像拉伸到当前的可视区域。

sigh 还没开始接触 Ink :(

Answer 1

您可以考虑检测可见区域的宽度和高度，然后将宽度和高度设置为图像控件的宽度和高度。

<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;
}