0

我到底想要什么

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

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

其中“_”什么都不是。

是）我有的

我有一个非常简单的例子，gridView 中有边框，但我不明白为什么 GridView.ItemTemplate 中的项目之间有空格？如果我在 ItemHeight 和 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();
        }
    }
}

和 xml 片段

<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>

结果

截屏

问题

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

PS所有投诉谷歌翻译。

4

1 回答 1

3

它被埋在深处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，因此您可能也需要调整这些元素，因为其中一些元素会在各种视觉状态下发挥作用。

于 2013-02-17T04:58:33.477 回答