XAML 缩放时，UWP ListView停止居中显示内容

我有一个用InkCanvas填充的ListView，每个InkCanvas代表一个页面。我将ListView设置为可滚动的，如下所示：

<ListView Grid.Row="1"
    x:Name="canvases"
    SelectionMode="None"
    ScrollViewer.ZoomMode="Enabled"
    ScrollViewer.HorizontalScrollBarVisibility="Auto"
    ScrollViewer.HorizontalScrollMode="Enabled"
    HorizontalContentAlignment="Center">

并且ListView被填充到相应的c#文件中：

for (int i = 0; i < 120; i++)
{
    InkCanvas canvas = new InkCanvas();
    canvas.Width = 720;
    canvas.Height = 1080;
    Grid grid = new Grid();
    grid.Width = canvas.Width;
    grid.Height = canvas.Height;
    grid.Children.Add(canvas);
    grid.Background = new SolidColorBrush(Windows.UI.Colors.White);

    ListViewItem item = new ListViewItem();
    item.Content = grid;
    item.Width = canvas.Width;
    item.Height = canvas.Height;
    canvases.Items.Add(item);

    addCanvas(canvas);
}

现在，当我运行程序时，视图最初是居中的，但当我向外滚动时，它向左移动：

Video

您需要稍微更改ListView的样式。
1.在Generic.xaml中查找ListView的默认样式
1.查找默认样式中名为ScrollViewer的ScrollViewer元素。
1.将ScrollViewer的HorizontalContentAlignment和HorizontalAlignment属性设置为居中
1.删除为ListView设置的HorizontalContentAlignment。
1.运行应用程序，你会得到你想要的行为。

在此处设置Xaml样式：

<Style x:Key="ListViewStyle1" TargetType="ListView">
        <Setter Property="IsTabStop" Value="False"/>
        <Setter Property="TabNavigation" Value="Once"/>
        <Setter Property="IsSwipeEnabled" Value="True"/>
        <Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Disabled"/>
        <Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto"/>
        <Setter Property="ScrollViewer.HorizontalScrollMode" Value="Disabled"/>
        <Setter Property="ScrollViewer.IsHorizontalRailEnabled" Value="False"/>
        <Setter Property="ScrollViewer.VerticalScrollMode" Value="Enabled"/>
        <Setter Property="ScrollViewer.IsVerticalRailEnabled" Value="True"/>
        <Setter Property="ScrollViewer.ZoomMode" Value="Disabled"/>
        <Setter Property="ScrollViewer.IsDeferredScrollingEnabled" Value="False"/>
        <Setter Property="ScrollViewer.BringIntoViewOnFocusChange" Value="True"/>
        <Setter Property="UseSystemFocusVisuals" Value="{StaticResource UseSystemFocusVisuals}"/>
        <Setter Property="ItemContainerTransitions">
            <Setter.Value>
                <TransitionCollection>
                    <AddDeleteThemeTransition/>
                    <ContentThemeTransition/>
                    <ReorderThemeTransition/>
                    <EntranceThemeTransition IsStaggeringEnabled="False"/>
                </TransitionCollection>
            </Setter.Value>
        </Setter>
        <Setter Property="ItemsPanel">
            <Setter.Value>
                <ItemsPanelTemplate>
                    <ItemsStackPanel Orientation="Vertical"/>
                </ItemsPanelTemplate>
            </Setter.Value>
        </Setter>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="ListView">
                    <Border Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="{TemplateBinding CornerRadius}">
                        <ScrollViewer  x:Name="ScrollViewer" AutomationProperties.AccessibilityView="Raw" 
                                      BringIntoViewOnFocusChange="{TemplateBinding ScrollViewer.BringIntoViewOnFocusChange}"
                                      HorizontalScrollBarVisibility="{TemplateBinding ScrollViewer.HorizontalScrollBarVisibility}"
                                      HorizontalScrollMode="{TemplateBinding ScrollViewer.HorizontalScrollMode}"
                                      IsDeferredScrollingEnabled="{TemplateBinding ScrollViewer.IsDeferredScrollingEnabled}" 
                                      IsVerticalRailEnabled="{TemplateBinding ScrollViewer.IsVerticalRailEnabled}"
                                      IsHorizontalRailEnabled="{TemplateBinding ScrollViewer.IsHorizontalRailEnabled}"
                                      IsHorizontalScrollChainingEnabled="{TemplateBinding ScrollViewer.IsHorizontalScrollChainingEnabled}" 
                                      IsVerticalScrollChainingEnabled="{TemplateBinding ScrollViewer.IsVerticalScrollChainingEnabled}"
                                      TabNavigation="{TemplateBinding TabNavigation}"
                                      VerticalScrollBarVisibility="{TemplateBinding ScrollViewer.VerticalScrollBarVisibility}"
                                      VerticalScrollMode="{TemplateBinding ScrollViewer.VerticalScrollMode}" 
                                      HorizontalContentAlignment="Center"
                                      HorizontalAlignment="Center"
                                      ZoomMode="{TemplateBinding ScrollViewer.ZoomMode}">
                            <ItemsPresenter Footer="{TemplateBinding Footer}"
                                            FooterTemplate="{TemplateBinding FooterTemplate}" 
                                            FooterTransitions="{TemplateBinding FooterTransitions}"
                                            HeaderTemplate="{TemplateBinding HeaderTemplate}"
                                            HeaderTransitions="{TemplateBinding HeaderTransitions}" 
                                            
                                            
                                            Header="{TemplateBinding Header}" Padding="{TemplateBinding Padding}"/>
                        </ScrollViewer>
                    </Border>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

主页Xaml：

<Grid Background="Black">
    <ListView Grid.Row="1"
Style="{StaticResource ListViewStyle1}"
x:Name="canvases"
SelectionMode="None"
ScrollViewer.ZoomMode="Enabled"
ScrollViewer.HorizontalScrollBarVisibility="Auto"
ScrollViewer.HorizontalScrollMode="Enabled">
    </ListView>
</Grid>

结果：

XAML 缩放时，UWP ListView停止居中显示内容

1条答案

相关问题

热门标签

最新问答