缩放时UWP ListView内容不再居中的问题解决

问题原因 #

默认ListView的ItemsPanel采用横向StackPanel时，缩放操作会打破原本的居中对齐逻辑，加上手动固定ListViewItem的宽高，导致缩放后内容左偏移。要实现Drawboard式的缩放居中效果，需要调整布局容器和对齐属性。

解决方案 #

1. 修改ListView的XAML配置

替换默认的ItemsPanel，确保横向布局的容器始终居中，同时优化ScrollViewer的属性：

<ListView Grid.Row="1"
    x:Name="canvases"
    SelectionMode="None"
    HorizontalAlignment="Stretch"
    HorizontalContentAlignment="Center"
    ScrollViewer.ZoomMode="Enabled"
    ScrollViewer.HorizontalScrollBarVisibility="Auto"
    ScrollViewer.HorizontalScrollMode="Enabled"
    ScrollViewer.VerticalScrollMode="Disabled">
    <ListView.ItemsPanel>
        <ItemsPanelTemplate>
            <StackPanel Orientation="Horizontal" HorizontalAlignment="Center"/>
        </ItemsPanelTemplate>
    </ListView.ItemsPanel>
    <ListView.ItemContainerStyle>
        <Style TargetType="ListViewItem">
            <Setter Property="HorizontalAlignment" Value="Center"/>
            <Setter Property="Padding" Value="10"/> <!-- 可选，添加页面间间距 -->
        </Style>
    </ListView.ItemContainerStyle>
</ListView>

• ItemsPanel改用横向StackPanel并设置HorizontalAlignment="Center"，确保所有子项整体居中。
• ItemContainerStyle强制ListViewItem居中，避免单个项偏移。
• 关闭垂直滚动（VerticalScrollMode="Disabled"），保持Drawboard式的横向页面布局。

2. 调整C#初始化代码

移除ListViewItem的固定宽高设置，让容器自适应内容，同时确保Grid和InkCanvas的尺寸正确：

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.Background = new SolidColorBrush(Windows.UI.Colors.White);
    grid.Children.Add(canvas);

    ListViewItem item = new ListViewItem();
    item.Content = grid;
    // 移除固定宽高，让ItemContainerStyle控制对齐
    canvases.Items.Add(item);

    addCanvas(canvas);
}

3. 额外优化（可选）

如果需要更精准的缩放居中，可以监听ScrollViewer的ViewChanged事件，手动调整偏移：

// 在页面Loaded事件中添加
var scrollViewer = canvases.FindDescendant<ScrollViewer>();
if (scrollViewer != null)
{
    scrollViewer.ViewChanged += (s, e) =>
    {
        if (!e.IsIntermediate)
        {
            // 计算居中偏移
            var offset = (scrollViewer.ViewportWidth - scrollViewer.ExtentWidth * scrollViewer.ZoomFactor) / 2;
            scrollViewer.ScrollToHorizontalOffset(Math.Max(0, offset));
        }
    };
}

注：FindDescendant是WinUI/UWP的扩展方法，若未引用可自行实现遍历可视化树的逻辑。

效果说明 #

修改后，ListView会横向填充窗口，缩放时所有页面项会始终保持居中对齐，与Drawboard的页面缩放体验一致。

内容的提问来源于stack exchange，提问作者Zev G