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

Question

我正在尝试在 Template 10 UWP Hamburger 模板应用程序中创建一个绘图表面，背景中有一个模板图像。有没有办法强制主视觉 space 不可滚动？当我使用以下 XAML 时，图像会随着我将应用 window 拉宽而扩展到屏幕之外。

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

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

叹息还没开始使用 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;
}

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

Fixed sized usable page with Template 10 with Hamburger?

c#

xaml

uwp

template10