UWP Xaml GridViewItem：删除边距

Question

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

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

并以这段代码结束：

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

编辑：它还有一个默认的最小高度，您可能也想将其设置为 0。

Answer 2

下面的代码应该可以工作：

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

Answer 3

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

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

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

我看到两个解决方案。首先是删除 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>

UWP Xaml GridViewItem：删除边距

UWP Xaml GridViewItem: Remove margin

xaml

winrt-xaml

uwp