XAML水平Stackpanel滚动

时间:2013-10-10 06:00:52

标签: xaml windows-8 windows-runtime horizontal-scrolling stackpanel

我在滚动浏览器中滚动水平堆栈面板时遇到问题。我正在尝试做的比我的例子更复杂,但在删除变量之后,我想如果我能解决这个问题,我可以解决所有问题。

基本上,当包含水平堆栈面板时,我无法让滚动查看器水平滚动。

以下是示例XAML:

   <ScrollViewer>
        <StackPanel Orientation="Horizontal">
            <Image Source="test.png" Width="400" Height="400"/>
            <Image Source="test.png" Width="400" Height="400"/>
            <Image Source="test.png" Width="400" Height="400"/>
            <Image Source="test.png" Width="400" Height="400"/>
            <Image Source="test.png" Width="400" Height="400"/>
            <Image Source="test.png" Width="400" Height="400"/>
            <Image Source="test.png" Width="400" Height="400"/>
        </StackPanel>
    </ScrollViewer>

奇怪的是,如果我只是将方向从水平交换到垂直,它会滚动得很好。我已经阅读过多个帖子,堆栈面板有问题可能使它们不适合滚动查看器,所以我也尝试使用网格,但得到相同的结果。

  <ScrollViewer>
        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="400"/>
                <ColumnDefinition Width="400"/>
                <ColumnDefinition Width="400"/>
                <ColumnDefinition Width="400"/>
                <ColumnDefinition Width="400"/>
                <ColumnDefinition Width="400"/>
            </Grid.ColumnDefinitions>                
            <Image Source="test.png" Width="400" Height="400"  Grid.Column="0"/>
            <Image Source="test.png" Width="400" Height="400"  Grid.Column="1"/>
            <Image Source="test.png" Width="400" Height="400"  Grid.Column="2"/>
            <Image Source="test.png" Width="400" Height="400"  Grid.Column="3"/>
            <Image Source="test.png" Width="400" Height="400"  Grid.Column="4"/>
            <Image Source="test.png" Width="400" Height="400"  Grid.Column="5"/>
        </Grid>
    </ScrollViewer>

看起来很简单,我觉得我误解了一些基本的东西。如果有人可以提供帮助,我将非常感激。

1 个答案:

答案 0 :(得分:8)

您只需打开水平滚动即可。 It's hidden by default(但垂直的不是,因此是混乱)。

<ScrollViewer HorizontalScrollBarVisibility="Auto">