VariableSizedWrapGrid 内的水平居中项目答案

【问题标题】：Horizontal Center Items inside VariableSizedWrapGridVariableSizedWrapGrid 内的水平居中项目
【发布时间】：2017-01-09 10:18:14
【问题描述】：

我有一个 VariableSizedWrapGrid，按钮作为项目：

<Page.Resources>
        <DataTemplate x:Key="LinkTemplate" x:DataType="local:LinkWeb">
            <Button Width="100" Height="100" HorizontalContentAlignment="Center" VerticalContentAlignment="Center" Margin="15,15,15,15" Click="Button_Click" >
                <Button.Content>                
                    <StackPanel>
                        <Image Source="{Binding ImageLink}" Margin="8,8,8,8" HorizontalAlignment="Center" Height="{Binding HeightImage}" Width="{Binding WidthImage}"/>                        
                        <TextBlock Text="{Binding Text}" TextWrapping="WrapWholeWords" />
                    </StackPanel>
                </Button.Content>            
            </Button>
        </DataTemplate>
    </Page.Resources>

...

<ScrollViewer VerticalScrollBarVisibility="Auto" HorizontalScrollBarVisibility="Disabled" Grid.Row="1">
            <ItemsControl x:Name="imageContent" ItemsSource="{Binding Enlaces}" ItemTemplate="{StaticResource LinkTemplate}" >
                <ItemsControl.ItemsPanel>
                    <ItemsPanelTemplate>
                        <VariableSizedWrapGrid Orientation="Horizontal" ScrollViewer.HorizontalScrollBarVisibility="Disabled" HorizontalChildrenAlignment="Stretch" MaximumRowsOrColumns="2"/>
                    </ItemsPanelTemplate>
                </ItemsControl.ItemsPanel>
            </ItemsControl>
        </ScrollViewer>

VariableSizedWrapGrid 每行显示两个项目，但项目显示为左对齐，如您所见：

我需要 VariableSizedWrapGrid 以他的内容为中心显示项目，如下所示：

知道如何实现这一目标吗？

编辑

我尝试将 ScrollViewer 居中，并且，是的，项目“更居中”，因为 ScrollViewer 内的 VariableSizedWrapGrid 居中，但是，在 VariableSizedWrapGrid 内，项目向左浮动，因此项目未居中，如您所见在这张照片中：

【问题讨论】：

为什么不简单地将 ScrollViewer 或 ItemsControl 居中？
我已经尝试将 ScrollViewer 居中，并且，是的，项目“更居中”，因为 ScrollViewer 内的 VariableSizedWrapGrid 居中，但是，在 VariableSizedWrapGrid 内，项目向左浮动，所以它们不是居中。我将更新问题以表明这一点。谢谢
@CarlosTI 您是否通过我的解决方案解决了您的问题？如果您对此问题有任何其他疑虑，请随时告诉我。

标签： c# xaml uwp win-universal-app uwp-xaml

【解决方案1】：

您可以将 VariableSizedWrapGrid 的 HorizontalChildrenAlignment 属性值设置为Center。它应该可以工作。

<ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
            <VariableSizedWrapGrid Orientation="Horizontal" ScrollViewer.HorizontalScrollBarVisibility="Disabled" HorizontalChildrenAlignment="Center" MaximumRowsOrColumns="2" />
        </ItemsPanelTemplate>
</ItemsControl.ItemsPanel>

【讨论】：

是的，谢谢！我正在测试另一种奇怪的行为，如果我放置的元素超过了配置 MaximumRowsOrColumns 允许的数量（在本例中为“2”，因为我尝试了 2 列和可变的行数），variablesizegrid 会变得疯狂，并且 Items 会离开。在您的示例中，如果添加更多元素，项目仍然居中？