如何在xaml win8中添加静态标题和可滚动内容

Question

我正在尝试在 xaml 页面中添加静态标题或标题，用户可以在其中滚动某些内容但不能滚动标题

<Page
x:Class="Advanced8weeks.day1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:Advanced8weeks"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">

 <!--- I want this block to remain static on the top of the page --> 

<Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
    <TextBlock HorizontalAlignment="Left" Margin="80,100,0,0" TextWrapping="Wrap" Text="Day 1 " VerticalAlignment="Top" FontWeight="Bold" FontSize="24" RenderTransformOrigin="0.483,1.826"/>
    <TextBlock HorizontalAlignment="Left" Margin="80,192,0,0" TextWrapping="Wrap" Text="Legs + cardio (1 min rest between sets) " VerticalAlignment="Top" FontWeight="Bold" FontSize="18"/>

      <!--- From here I want to add a lot of Images and  Button where user can scroll down --> 

        <TextBlock HorizontalAlignment="Left" Margin="80,287,0,0" TextWrapping="Wrap" Text="leg extentions 5 x 15 reps " VerticalAlignment="Top" Height="47" FontSize="16"/>
    <Image HorizontalAlignment="Left" Height="100" Margin="80,334,0,0" VerticalAlignment="Top" Width="100" Source="pictures/imag1.png"/>
    <TextBox HorizontalAlignment="Left" Margin="80,439,0,0" TextWrapping="Wrap" Text="" VerticalAlignment="Top" Width="27" Height="17"/>
    <TextBlock HorizontalAlignment="Left" Margin="80,417,0,0" TextWrapping="Wrap" Text="Set 1 " VerticalAlignment="Top" RenderTransformOrigin="-0.022,0.231" Width="47" FontSize="14"/>
    <Button Content="OK" HorizontalAlignment="Left" Margin="158,439,0,0" VerticalAlignment="Top" FontSize="14" Click="Button_Click" Height="37"/>

    <TextBlock HorizontalAlignment="Left" Margin="752,192,0,0" TextWrapping="Wrap" Text="" VerticalAlignment="Top"  x:Name="timer" Height="22" Width="59" />
    <ScrollBar HorizontalAlignment="Left" Margin="472,317,0,0" VerticalAlignment="Top"/>
    <TextBlock HorizontalAlignment="Left" Margin="80,506,0,0" TextWrapping="Wrap" Text="Squats 5 x 15 reps " VerticalAlignment="Top" Height="21" Width="148" FontSize="16"/>
    <Image HorizontalAlignment="Left" Height="100" Margin="111,555,0,0" VerticalAlignment="Top" Width="100"/>
    <Image HorizontalAlignment="Left" Height="68" Margin="80,541,0,0" VerticalAlignment="Top" Width="65" Source="pictures/imag2.png"/>
    <TextBox HorizontalAlignment="Left" Margin="80,623,0,0" TextWrapping="Wrap" Text="" VerticalAlignment="Top" RenderTransformOrigin="0.203,0.344" Width="64" Height="23"/>
    <Button Content="OK" HorizontalAlignment="Left" Margin="158,617,0,0" VerticalAlignment="Top" RenderTransformOrigin="0.225,-0.342" Width="54"/>


</Grid>

所以我的第一次尝试是添加一个 ScrollViewer ，所以我这样做了

<Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
    <TextBlock HorizontalAlignment="Left" Margin="80,100,0,0" TextWrapping="Wrap" Text="Day 1 " VerticalAlignment="Top" FontWeight="Bold" FontSize="24" RenderTransformOrigin="0.483,1.826"/>
    <TextBlock HorizontalAlignment="Left" Margin="80,192,0,0" TextWrapping="Wrap" Text="Legs + cardio (1 min rest between sets) " VerticalAlignment="Top" FontWeight="Bold" FontSize="18"/>

      <!--- From here I want to add a lot of Images and   Button where user can scroll down -->

    <ScrollViewer >   

    <TextBlock HorizontalAlignment="Left" Margin="80,287,0,0" TextWrapping="Wrap" Text="leg extentions 5 x 15 reps " VerticalAlignment="Top" Height="47" FontSize="16"/>
    <Image HorizontalAlignment="Left" Height="100" Margin="80,334,0,0" VerticalAlignment="Top" Width="100" Source="pictures/imag1.png"/>
    <TextBox HorizontalAlignment="Left" Margin="80,439,0,0" TextWrapping="Wrap" Text="" VerticalAlignment="Top" Width="27" Height="17"/>
    <TextBlock HorizontalAlignment="Left" Margin="80,417,0,0" TextWrapping="Wrap" Text="Set 1 " VerticalAlignment="Top" RenderTransformOrigin="-0.022,0.231" Width="47" FontSize="14"/>
    <Button Content="OK" HorizontalAlignment="Left" Margin="158,439,0,0" VerticalAlignment="Top" FontSize="14" Click="Button_Click" Height="37"/>

    <TextBlock HorizontalAlignment="Left" Margin="752,192,0,0" TextWrapping="Wrap" Text="" VerticalAlignment="Top"  x:Name="timer" Height="22" Width="59" />
    <ScrollBar HorizontalAlignment="Left" Margin="472,317,0,0" VerticalAlignment="Top"/>
    <TextBlock HorizontalAlignment="Left" Margin="80,506,0,0" TextWrapping="Wrap" Text="Squats 5 x 15 reps " VerticalAlignment="Top" Height="21" Width="148" FontSize="16"/>
    <Image HorizontalAlignment="Left" Height="100" Margin="111,555,0,0" VerticalAlignment="Top" Width="100"/>
    <Image HorizontalAlignment="Left" Height="68" Margin="80,541,0,0" VerticalAlignment="Top" Width="65" Source="pictures/imag2.png"/>
    <TextBox HorizontalAlignment="Left" Margin="80,623,0,0" TextWrapping="Wrap" Text="" VerticalAlignment="Top" RenderTransformOrigin="0.203,0.344" Width="64" Height="23"/>
    <Button Content="OK" HorizontalAlignment="Left" Margin="158,617,0,0" VerticalAlignment="Top" RenderTransformOrigin="0.225,-0.342" Width="54"/>

    </ScrollViewer>

</Grid>

但是 VS express 给了我这个错误：

Content 属性被设置了多次

如果有人能解释我做错了什么以及为什么做错了，我将不胜感激

非常感谢，

贝斯

Answer 1

您不能向ScrollViewer 添加多个项目，因为它是ContentControl，并且只能存储一个元素。您应该将任何 Panel 放入您的 ScrollViewer（Grid、StackPanel、DockPanel 等）中，这将包含您的所有元素：

<ScrollViewer>   
    <Grid>
    ...
    </Grid>
</ScrollViewer>