Question

我想创建一个图像网格，它们之间没有任何边距。我试图通过GridView实现这一目标。如果有更简单的方法，请告诉我。

我在StackOverflow上找到了这个答案：

https://stackoverflow.com/a/23817931/5739170

结束了这段代码：

<Page.Resources>
    <Style x:Key="MyGridViewItemStyle" TargetType="GridViewItem">
        <Setter Property="Padding" Value="0" />
        <Setter Property="Margin" Value="0" />
        <Setter Property="BorderThickness" Value="0" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="GridViewItem">
                    <GridViewItemPresenter ContentMargin="0" Padding="0" Margin="0" BorderThickness="0"/>
                </ControlTemplate>
            </Setter.Value>
        </Setter>

    </Style>
</Page.Resources>

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <StackPanel>
        <GridView ItemsSource="{x:Bind FieldList}" Margin="0,50,0,0" Padding="0" BorderThickness="0" ItemContainerStyle="{StaticResource MyGridViewItemStyle}" IsItemClickEnabled="True" ItemClick="OnItemClick">
            <GridView.ItemTemplate>
                <DataTemplate x:DataType="data:Field">
                    <Image Width="20" Height="20" Margin="0" Source="{x:Bind ImagePath}"/>
                </DataTemplate>
            </GridView.ItemTemplate>
        </GridView>
        <TextBlock x:Name="text">Hallo!</TextBlock>
    </StackPanel>
</Grid>

但仍有余地： Screenshot

我也尝试使用负边距但是当我使用它们时，点击不再被正确识别。

如何删除边距？

Answer 1

似乎GridViewItem的默认MinWidth为44px。

您可以通过GridViewItemStyle将其设置为0：

<Setter Property="MinWidth" Value="0" />

编辑：它也有默认的MinHeight，您可能也希望将其设置为0.

Answer 2

你的代码很好。如果在DataTemplate中添加一个Grid（带背景），您将看到网格之间没有边距：

<DataTemplate x:DataType="data:Field">
    <Grid Background="Red">
        <Image Width="20" Height="20" Margin="0" Source="{x:Bind ImagePath}"/>
    </Grid>
</DataTemplate>

您的问题如下：您为图像控件设置了固定大小，所有这些都在容器中，但容器没有固定，因此图像在容器中居中。

我看到两个解决方案。首先是删除Image控件的固定大小，并使用Strecth属性正确填充：

<DataTemplate x:DataType="data:Field">
    <Image VerticalAlignment="Stretch" 
           HorizontalAlignment="Stretch" 
           Stretch="UniformToFill" 
           Margin="0" 
           Source="{x:Bind ImagePath}"/>
</DataTemplate>

对于第一个解决方案，您必须确保容器的填充行为。你可以这样做：

<GridViewItemPresenter ContentMargin="0"
                       Padding="0"
                       Margin="0"
                       BorderThickness="0"
                       HorizontalAlignment="Stretch"
                       HorizontalContentAlignment="Stretch" />

第二种解决方案是直接在容器上设置固定大小：

<Style x:Key="MyGridViewItemStyle"
       TargetType="GridViewItem">
    <Setter Property="Padding"
            Value="0" />
    <Setter Property="Margin"
            Value="0" />
    <Setter Property="BorderThickness"
            Value="0" />
    <Setter Property="Width"
            Value="20" />
    <Setter Property="Height"
            Value="20" />
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="GridViewItem">
                <GridViewItemPresenter ContentMargin="0"
                                       Padding="0"
                                       Margin="0"
                                       BorderThickness="0"/>
            </ControlTemplate>
        </Setter.Value>
    </Setter>

</Style>

Answer 3

以下代码应该有效：

<GridView.ItemContainerStyle> <Style TargetType="GridViewItem"> <Setter Property="Margin" Value="0"/> </Style> </GridView.ItemContainerStyle>

UWP Xaml GridViewItem：删除边距

3 个答案: