居中对齐最后一行的GridView项目

Question

居中对齐最后一行的GridView项目

c#gridviewuwpwinrt-xamluwp-xaml

3

我想实现一个GridView，每行显示3个项目，如果最后一行有2个项目，则最后一行的项目应该居中对齐，而不是左对齐。以下是几张图片来说明我想要实现的效果。

目前我的实现看起来像这样： this

。

而这就是我想要实现的效果。 this

任何帮助将不胜感激。

- aadilp

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Nico Zhu · Accepted Answer

有很多方法可以实现您提到的功能。

总结一下，您需要继承 GridView 并重写 MeasureOverride ArrangeOverride 方法来重新计算面板子元素的每个 Rect。这种方法比较复杂。如需更多信息，请参阅 XAML 自定义面板概述。

您还可以使用 PrepareContainerForItemOverride 方法直接重新布局项目。

<local:VariableGrid 
           x:Name="MyGridView" 
           SelectionMode="Single"       
         IsSwipeEnabled="False">
    <local:VariableGrid.ItemTemplate >
        <DataTemplate>
            <StackPanel BorderBrush="Red" BorderThickness="3" Height="200" Width="200" Margin="20">
            </StackPanel>
        </DataTemplate>
    </local:VariableGrid.ItemTemplate>
    <local:VariableGrid.ItemsPanel>
        <ItemsPanelTemplate>
            <VariableSizedWrapGrid 
                Orientation="Horizontal"
                VerticalAlignment="Top"
                ScrollViewer.HorizontalScrollMode="Enabled"
                ScrollViewer.VerticalScrollMode="Disabled"
                MaximumRowsOrColumns="4">
            </VariableSizedWrapGrid>
        </ItemsPanelTemplate>
    </local:VariableGrid.ItemsPanel>
</local:VariableGrid>

VariableGrid.cs

public sealed class VariableGrid : GridView
{
    public VariableGrid()
    {
        this.DefaultStyleKey = typeof(VariableGrid);
    }
    protected override void PrepareContainerForItemOverride(DependencyObject element, object item)
    {
        var list = this.ItemsSource as List<string>;      
        var griditem = element as GridViewItem;          
        for (var t = ((list.Count - list.Count % 4)); t < list.Count; t++)
        {
            if (item as string == list[t])
            {
                if (griditem != null)
                {
                    VariableSizedWrapGrid.SetColumnSpan(griditem, 2);
                }
            }
        }
        base.PrepareContainerForItemOverride(element, item);
    }
}

然而，这种简单的方法并不适用于所有情况。