logo标签列表

具有缩放、水平滚动和居中内容的WinRT ItemsControl

c#xamlwindows-8windows-runtimewinrt-xaml
3

我已经付出了几个小时的努力，但似乎找不到解决我的问题的方法。

我的问题是，我有一个占据整个屏幕的项控件。它显示一个水平的图片列表，只能水平滚动。它们在垂直方向上居中，并最初占用大约33％的屏幕空间。

我希望用户能够将此列表缩放以使图片占用100％的可用空间。通过设置Scrollviewer.ZoomEnabled ="true"，我已经做到了这一点，效果很好。通过将itemscontrol的滚动视图器的垂直内容对齐设置为“Center”，应用程序可以很好地围绕中心进行缩放。

然而...

当我在使用触摸输入的设备上运行它，或者使用模拟器进行触摸时，缩放行为按预期工作，直到我尝试垂直滚动。

然后，项会立即“跳”到底部，而非中心，并且重新正确定位它们的唯一方法是缩小并再次放大。

这种行为令人非常沮丧，因为我似乎无法解决它。任何帮助都将不胜感激！

这里是复制问题的最小解决方案 https://skydrive.live.com/redir?resid=EE9DF7D217DF3EA6!1060&authkey=!AJVGrLoTrOz8Hyk

如果您想重新创建它，请参阅以下代码：

ITEMSCONTROL.XAML

<Style x:Key="ItemsControlStyle" TargetType="ItemsControl">
    <Setter Property="ItemsPanel">
        <Setter.Value>
            <ItemsPanelTemplate>
                <VirtualizingStackPanel Orientation="Horizontal" Margin="90,0" ManipulationMode="TranslateX"/>
            </ItemsPanelTemplate>
        </Setter.Value>
    </Setter>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="ItemsControl">
                <ScrollViewer ZoomMode="Enabled"
                              VerticalSnapPointsType="None"
                              MinZoomFactor="0.5"
                              VerticalScrollMode="Disabled"
                              VerticalScrollBarVisibility="Disabled"
                              HorizontalScrollMode="Enabled" 
                              HorizontalScrollBarVisibility="Visible"
                              VerticalContentAlignment="Center">
                    <ItemsPresenter VerticalAlignment="Center" IsHitTestVisible="False" ScrollViewer.VerticalScrollMode="Disabled" ScrollViewer.VerticalScrollBarVisibility="Disabled"/>
                </ScrollViewer>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

主页面.xaml（节选）

<ItemsControl Grid.Row="1" ItemsSource="{Binding Pages}" Style="{StaticResource ItemsControlStyle}">
        <ItemsControl.ItemTemplate>
            <DataTemplate>
                <Border Padding="5" VerticalAlignment="Center"  Margin="10">
                    <Border.Background>
                        <ImageBrush ImageSource="../Images/Shadow.png"/>
                    </Border.Background>
                    <Grid>
                        <ProgressRing IsActive="True" VerticalAlignment="Center" HorizontalAlignment="Center" Height="50" Width="50" Foreground="White" Visibility="{Binding HasLoaded, Converter={StaticResource BooleanToVisibilityConverter}}"/>
                    <Image Opacity="0" Source="{Binding LocalUrl, Converter={StaticResource LocalImagePathConverter}}" Height="{Binding Height}" Width="{Binding Width}" ImageOpened="ImageLoaded" />
                    </Grid>
                </Border>
            </DataTemplate>
        </ItemsControl.ItemTemplate>
    </ItemsControl>
你能添加一些截图吗？我无法回复这个问题，或者可能根本无法理解你的意思。 - JuanK
我能够在模拟器中第一次运行应用程序时重现您的问题。但是，当我退出应用程序并再次运行时，我无法再次发生这种情况。看起来ScrollViewer将内容错误地固定在顶部，而不是像您想要的那样固定在中间。非常奇怪。我希望我能为您提供答案。 - Jared Bienz - MSFT
1个回答
1

好的，我进行了测试：

  1. 在触摸屏上（本地机器）- 正常工作
  2. 在触摸屏模拟器上 - 正常工作
  3. 在 Surface RT 上（远程机器）- 正常工作
  4. 在普通显示器模拟器上 - 正常工作

你试过边做边摸耳朵吗？ :)

我认为这不是一个普遍的问题，因为我无法复制它。

提供一个示例项目非常方便。 - Jerry Nixon
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接