前端之家

  1. 首页
  2. 问答

UWP如何在缩放时保持ListViewItems居中

• 问答

我有一个要显示的图像列表。用户应该能够放大和缩小。我可以很好地进行管理，但我希望列表也以页面为中心。每当我缩小列表时，列表就会移到左侧。

我发现this帖子看起来很有帮助，但是设置ItemContainerStyle却无济于事。我在几个控件的Horizo​​ntalAlignments上进行了一些操作（尝试拉伸和居中的多种组合。总体效果基本上是相同的（缩小时列表向左移动）。

这是我的XAML：

<Grid >
    <ListView Selectionmode="None" 
              ScrollViewer.zoomMode="Enabled" 
              HorizontalContentAlignment="Center"
              BorderBrush="Red"
              BorderThickness="1"
              ScrollViewer.HorizontalScrollMode="Enabled"
              ScrollViewer.HorizontalScrollBarVisibility="Auto" >
        <ListViewItem HorizontalAlignment="Stretch">
            <Grid HorizontalAlignment="Stretch">
            <Image Source="/Assets/StoreLogo.png"
                   Width="500"/>
            </Grid>
        </ListViewItem>
        <ListViewItem>
            <Grid HorizontalAlignment="Stretch">
                <Image Source="/Assets/StoreLogo.png"
                   Width="500"/>
            </Grid>
        </ListViewItem>
        <ListViewItem>
            <Grid HorizontalAlignment="Stretch">
                <Image Source="/Assets/StoreLogo.png"
                   Width="500"/>
            </Grid>
        </ListViewItem>
        <ListView.ItemsPanel>
            <itemspaneltemplate>
                <StackPanel HorizontalAlignment="Center"
                            BorderBrush="Blue"
                            BorderThickness="1"/>
            </itemspaneltemplate>
        </ListView.ItemsPanel>
        <ListView.ItemContainerStyle>
            <Style TargetType="ListViewItem">
                <Setter Property="Padding" Value="0" />
                <Setter Property="Margin" Value="0" />
                <Setter Property="HorizontalContentAlignment" Value="Center" />
                <Setter Property="BorderBrush" Value="Green" />
                <Setter Property="BorderThickness" Value="1" />
            </Style>
        </ListView.ItemContainerStyle>
    </ListView>


</Grid>
mario_l 回答：UWP如何在缩放时保持ListViewItems居中

我希望有一个更优雅的解决方案，但这似乎具有正确的行为：

<Grid >
    <ListView SelectionMode="None" 
              ScrollViewer.ZoomMode="Enabled" 
              HorizontalContentAlignment="Center"
              BorderBrush="Red"
              BorderThickness="1"
              ScrollViewer.HorizontalScrollMode="Enabled"
              ScrollViewer.HorizontalScrollBarVisibility="Auto"
              Loaded="ListView_Loaded"
              Name="lstImage" >
        <ListViewItem >
            <Image Source="/Assets/StoreLogo.png"
                   Width="500"/>
        </ListViewItem>
        <ListViewItem >
            <Image Source="/Assets/StoreLogo.png"
                   Width="500"/>
        </ListViewItem>
        <ListViewItem >
            <Image Source="/Assets/StoreLogo.png"
                   Width="500"/>
        </ListViewItem>
        <ListView.ItemsPanel>
            <ItemsPanelTemplate>
                <StackPanel HorizontalAlignment="Center"
                            BorderBrush="Blue"
                            BorderThickness="1"/>
            </ItemsPanelTemplate>
        </ListView.ItemsPanel>
        <ListView.ItemContainerStyle>
            <Style TargetType="ListViewItem">
                <Setter Property="HorizontalAlignment"
                        Value="Center" />
            </Style>
        </ListView.ItemContainerStyle>
    </ListView>


</Grid>

背后的代码：

private void ListView_Loaded(object sender,RoutedEventArgs e)
{
    if (!(sender is ListView lv)) return;

    var border = VisualTreeHelper.GetChild(lv,0) as Border;
    var sv = border?.Child as ScrollViewer;
    sv.ViewChanged += ScrollViewer_ViewChanged;
}

private void ScrollViewer_ViewChanged(object sender,ScrollViewerViewChangedEventArgs e)
{
    if (!(sender is ScrollViewer sv)) return;
    if (!(lstImage?.ItemsPanelRoot is StackPanel sp)) return;

    sp.Width = sv.ZoomFactor > 1 ? double.NaN : lstImage.ActualWidth;
}
uwp-xaml
本文链接：https://www.f2er.com/2989508.html

大家都在问