GridView（WinRT）中项目之间的大空间

Question

我到底想要什么

具有相同外观的项目表（不错的控件），但上面有不同的文本 像这样，但更多：

_ 3 6
1 4 7
2 5 8
_ _ 9

其中“_”什么都不是。

我拥有什么

我在gridView中有一个非常简单的边框示例 我不明白为什么GridView.ItemTemplate中的项目之间有空格？ 如果我在ItemHeight＆amp;中设置更大的值，一切都好（我可以看到边框的完整大小） ItemWidth
但在这种情况下，我在物品之间有更大的空间 <VariableSizedWrapGrid Orientation="Vertical" Margin="0" ItemHeight=" 我是关于它的 " ItemWidth=" 它 " />

我的示例的完整代码

---

class SomeData
{
    public SomeData(int i)
    {
        Number = i;
    }

    public int Number { get; set; }
}

class SomeModel
{
    public SomeModel(int key)
    {
        Key = key.ToString();
        Items = new List<SomeData>();
    }

    public string Key { get; set; }

    public List<SomeData> Items { get; set; }
}

class ItemPanelVM : BindableBase
{
    public ItemPanelVM()
    {
        var list = new List<SomeModel>();

        for (int i = 0; i < 10; i++)
        {
            list.Add(new SomeModel(i));

            for (int j = 0; j < 10; j++)
            {
                list[i].Items.Add(new SomeData(j));
            }
        }

        SomeGroup = list;
    }


    private List<SomeModel> _someModels;
    public List<SomeModel> SomeGroup
    {
        get { return _someModels; }
        set
        {
            _someModels = value;
            OnPropertyChanged();
        }
    }
}

---

和xaml片段

---

<UserControl.Resources>

    <CollectionViewSource
        x:Key="simpleViewSource"
        IsSourceGrouped="True"
        Source="{Binding SomeGroup}"
        ItemsPath="Items"
        d:Source="{Binding SomeGroup, Source={d:DesignInstance Type=test:ItemPanelVM, IsDesignTimeCreatable=True}}"/>

</UserControl.Resources>

<Grid DataContext="{Binding}">  
    <GridView SelectionMode="None" IsItemClickEnabled="False" 
              ItemsSource="{Binding Source={StaticResource simpleViewSource}}" 
              HorizontalAlignment="Left" 
              Margin="0">

        <GridView.ItemsPanel>
            <ItemsPanelTemplate>
                <VirtualizingStackPanel Orientation="Horizontal"/>
            </ItemsPanelTemplate>
        </GridView.ItemsPanel>
        <GridView.GroupStyle>
            <GroupStyle>
                <GroupStyle.HeaderTemplate>
                    <DataTemplate>
                        <Grid Margin="0" >
                            <TextBlock Text="{Binding Key}" />
                        </Grid>
                    </DataTemplate>
                </GroupStyle.HeaderTemplate>
                <GroupStyle.Panel>
                    <ItemsPanelTemplate>
                        <VariableSizedWrapGrid Orientation="Vertical" Margin="0"
                                               ItemHeight="30" ItemWidth="30" />
                    </ItemsPanelTemplate>
                </GroupStyle.Panel>
            </GroupStyle>
        </GridView.GroupStyle>
        <GridView.ItemTemplate>
            <DataTemplate>
                <Grid>
                    <Border DataContext="{Binding}" Margin="0" Background="Pink" BorderThickness="2" BorderBrush="Brown" Height="30" Width="30">
                        <TextBlock Text="{Binding Number}" HorizontalAlignment="Center" VerticalAlignment="Center" TextAlignment="Center"/>
                    </Border>
                </Grid>
            </DataTemplate>
        </GridView.ItemTemplate>
    </GridView>
</Grid>

---

结果

screenshot

问题

为什么呢？这些空间在哪里？ 这不是我不知道该怎么做。这是关于我不知道发生了什么。

P.S。所有投诉谷歌翻译。

Answer 1

它埋藏在ItemContainerStyle的深处;创建副本：

然后在样式

中搜索以下两个元素

 <Setter Property="Margin" Value="0,0,2,2"/>
  ...

      <Border x:Name="ContentBorder" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" Margin="4">

将两者的边距设置为零，您将删除空格。我注意到风格中有很多元素，硬编码的边距为4，所以你可能也需要调整它们，因为其中一些元素会在各种视觉状态下发挥作用。