无法消除 Windows 8 Metro 'ListView' 中 Tiles 之间的填充/边距

Posted 2023-03-06

技术标签:

【中文标题】无法消除 Windows 8 Metro \'ListView\' 中 Tiles 之间的填充/边距【英文标题】：Can't eliminate padding/margin between Tiles in Windows 8 Metro 'ListView'无法消除 Windows 8 Metro 'ListView' 中 Tiles 之间的填充/边距 【发布时间】：2012-08-23 14:34:49 【问题描述】：

我正在尝试在StackPanel 中构建两个ListView 对象，并让所有ItemTemplate Tiles 相互“接触”（这意味着ListViews 内没有边距或填充）。似乎 Windows 8 Metro 有某种内置的填充/边距。 我的问题：如何删除这些或将它们设置为0？

这是我的代码：

<StackPanel x:Name="teesSP" 
            HorizontalAlignment="Left" 
            Orientation="Horizontal" 
            VerticalAlignment="Top" >

    <ListView x:Name="timesLV1"            
              SelectionMode="Multiple" 
              SelectionChanged="timesLV_Click" 
              ItemTemplate="StaticResource TimeTileTemplate">
        <ListView.ItemContainerStyle>
            <Style TargetType="ListViewItem">
                <Setter Property="Padding" Value="0"/>
                <Setter Property="Margin" Value="0"/>
            </Style>
        </ListView.ItemContainerStyle>
    </ListView>

    <ListView x:Name="timesLV2"            
              SelectionMode="Multiple" 
              SelectionChanged="timesLV_Click" 
              ItemTemplate="StaticResource TimeTileTemplate">
        <ListView.ItemContainerStyle>
            <Style TargetType="ListViewItem">
                <Setter Property="Padding" Value="0"/>
                <Setter Property="Margin" Value="0"/>
            </Style>
        </ListView.ItemContainerStyle>
    </ListView>

</StackPanel>

我的ItemTemplate 是：

<DataTemplate x:Key="TimeTileTemplate">
    <Grid HorizontalAlignment="Center" Background="White" >
        <Border BorderBrush="Black" BorderThickness="2" >
            <StackPanel Margin="0,0,0,0" Orientation="Horizontal"
                Width="130" Height="60" VerticalAlignment="Center" >
                <TextBlock Margin="2,0,0,0" TextWrapping="Wrap"
                    Style="StaticResource ItemSubtitleStyle"
                    VerticalAlignment="Center"
                    HorizontalAlignment="Left"
                    Text="Binding startTime" Width="70" />
                <TextBlock TextWrapping="Wrap"
                    Style="StaticResource ItemTitleStyle"
                    VerticalAlignment="Center"
                    HorizontalAlignment="Right"
                    Text="Binding startHole" Width="40" />
            </StackPanel>
        </Border>
    </Grid>
</DataTemplate>

...它呈现以下内容：

【问题讨论】：

你的TimeTileTemplate是什么样的？ @mydogisbox：对不起...忘记包含那篇文章。我已将其添加到原始问题中。 @Erno - 我使用的是 Windows 8 Release Preview，Build 8400。 【参考方案1】：

编辑：显然它在 ListView 模板中。在 VS2012 RTM 附带的 Blend 2012 中编辑它。

转到 Blend，创建一个模板副本，然后转到 VS2012 XAML 中的 xaml 转到顶部并转到 Margin's 并将它们全部设置为 0。

【讨论】：

我试了一下...同样的结果。转到 Blend，创建一个模板副本，然后转到 VS2012 XAML 中的 xaml 转到顶部的并转到 Margin 并将它们全部设置为 0。问题不在于页边距。如果你给你的内容一个大的字体大小，它会正确呈现。有某种最小高度，但不是 MinHeight 属性。【参考方案2】：

是的，ListViewItem 控件的模板中有一个 4px 的 Margin（看看ContentBorder 元素）：

<Border x:Name="OuterContainer">
    <!-- Visual States -->
    <Grid x:Name="ReorderHintContent" Background="Transparent">
        <Path x:Name="SelectingGlyph" Data="F1 M133.1,17.9 L137.2,13.2 L144.6,19.6 L156.4,5.8 L161.2,9.9 L145.6,28.4 z" Fill="StaticResource ListViewItemCheckSelectingThemeBrush" FlowDirection="LeftToRight" HorizontalAlignment="Right" Height="13" Margin="0,9.5,9.5,0" Opacity="0" Stretch="Fill" VerticalAlignment="Top" Width="15"/>
        <Border x:Name="HintGlyphBorder" HorizontalAlignment="Right" Height="40" Margin="4" Opacity="0" VerticalAlignment="Top" Width="40">
            <Path x:Name="HintGlyph" Data="F1 M133.1,17.9 L137.2,13.2 L144.6,19.6 L156.4,5.8 L161.2,9.9 L145.6,28.4 z" Fill="StaticResource ListViewItemCheckHintThemeBrush" FlowDirection="LeftToRight" HorizontalAlignment="Right" Height="13" Margin="0,5.5,5.5,0" Opacity="0" Stretch="Fill" VerticalAlignment="Top" Width="15"/>
        </Border>
        <Border x:Name="ContentContainer">
            <Grid x:Name="InnerDragContent">
                <Rectangle x:Name="PointerOverBorder" Fill="StaticResource ListViewItemPointerOverBackgroundThemeBrush" IsHitTestVisible="False" Margin="1" Opacity="0"/>
                <Rectangle x:Name="FocusVisual" IsHitTestVisible="False" Opacity="0" Stroke="StaticResource ListViewItemFocusBorderThemeBrush" StrokeThickness="2"/>
                <Rectangle x:Name="SelectionBackground" Fill="StaticResource ListViewItemSelectedBackgroundThemeBrush" Margin="4" Opacity="0"/>
                <Border x:Name="ContentBorder" BorderBrush="TemplateBinding BorderBrush" BorderThickness="TemplateBinding BorderThickness" Background="TemplateBinding Background" Margin="4">
                    <Grid>
                        <ContentPresenter x:Name="contentPresenter" ContentTemplate="TemplateBinding ContentTemplate" ContentTransitions="TemplateBinding ContentTransitions" Content="TemplateBinding Content" HorizontalAlignment="TemplateBinding HorizontalContentAlignment" Margin="TemplateBinding Padding" VerticalAlignment="TemplateBinding VerticalContentAlignment"/>
                        <TextBlock x:Name="PlaceholderTextBlock" Foreground="x:Null" IsHitTestVisible="False" Margin="TemplateBinding Padding" Opacity="0" Text="Xg"/>
                        <Rectangle x:Name="PlaceholderRect" Fill="StaticResource ListViewItemPlaceholderBackgroundThemeBrush" IsHitTestVisible="False" Visibility="Collapsed"/>
                        <Rectangle x:Name="MultiArrangeOverlayBackground" Fill="StaticResource ListViewItemDragBackgroundThemeBrush" IsHitTestVisible="False" Opacity="0"/>
                    </Grid>
                </Border>
                <Rectangle x:Name="SelectedBorder" IsHitTestVisible="False" Margin="4" Opacity="0" Stroke="StaticResource ListViewItemSelectedBackgroundThemeBrush" StrokeThickness="StaticResource ListViewItemSelectedBorderThemeThickness"/>
                <Border x:Name="SelectedCheckMarkOuter" HorizontalAlignment="Right" IsHitTestVisible="False" Margin="4" VerticalAlignment="Top">
                    <Grid x:Name="SelectedCheckMark" Height="40" Opacity="0" Width="40">
                        <Path x:Name="SelectedEarmark" Data="M0,0 L40,0 L40,40 z" Fill="StaticResource ListViewItemSelectedBackgroundThemeBrush" Stretch="Fill"/>
                        <Path Data="F1 M133.1,17.9 L137.2,13.2 L144.6,19.6 L156.4,5.8 L161.2,9.9 L145.6,28.4 z" Fill="StaticResource ListViewItemCheckThemeBrush" FlowDirection="LeftToRight" HorizontalAlignment="Right" Height="13" Margin="0,5.5,5.5,0" Stretch="Fill" VerticalAlignment="Top" Width="15"/>
                    </Grid>
                </Border>
                <TextBlock x:Name="MultiArrangeOverlayText" Foreground="StaticResource ListViewItemDragForegroundThemeBrush" FontSize="26.667" FontFamily="StaticResource ContentControlThemeFontFamily" IsHitTestVisible="False" Margin="18,9,0,0" Opacity="0" TextWrapping="Wrap" Text="Binding TemplateSettings.DragItemsCount, RelativeSource=RelativeSource Mode=TemplatedParent" TextTrimming="WordEllipsis"/>
            </Grid>
        </Border>
    </Grid>
</Border>

您可以通过此模板编辑轻松覆盖这些边距。选择一个 ListViewEditItem 并执行Edit Style->Edit a Copy...action。

【讨论】：

我认为这正是我需要做的，我只是很难找到它。我可以创建 ListView 样式的副本，但没有出现 Margin 或 ContentBorder 供我编辑。您能否提供有关在何处/如何编辑 Margin 属性的任何进一步提示？谢谢。 @iTrout：您应该创建ListViewItem 样式的副本，而不是ListView 本身。直接在标记中创建一个 ListViewItem（没有 ListView），然后在设计图面上选择它。编辑样式后，您可以使这个新样式显式化。边距不是问题。用大字体尝试同样的事情，它可以很好地绘制而不必弄乱边距。【参考方案3】：

您应该提供否定的Margin：

<ListView.ItemContainerStyle>
   <Style TargetType="ListViewItem">
      <Setter Property="HorizontalContentAlignment" Value="Left" />
      <Setter Property="VerticalContentAlignment" Value="Center" />
      <Setter Property="Margin" Value="0,0,0,-8" />
   </Style>
</ListView.ItemContainerStyle>

【讨论】：

这是我接受的答案 - 使用负边距的简单性非常棒。谢谢！玩负边距是一种技巧。这是可以想象的最不支持的代码。【参考方案4】：

经过 1 小时的搜索。这是比负边距更好的解决方案：

下面，代码让你有你想要的利润！（这里：0）

<Style x:Key="ListViewItemStyle1" TargetType="ListViewItem">
   <Setter Property="Template">
      <Setter.Value>
         <ControlTemplate TargetType="ListViewItem">
            <ListViewItemPresenter ContentMargin="0" />
          </ControlTemplate>
      </Setter.Value>
    </Setter>            
</Style>

...

<ListView ItemContainerStyle="StaticResource ListViewItemStyle1">
 //your listView items
</ListView>

【讨论】：

【参考方案5】：

我已经为这个问题找到了相当明确的解决方案！

<Style x:Key="NoSpacesListViewItemStyle" TargetType="ListViewItem">
    <Setter Property="Margin" Value="0"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="ListViewItem">
                <ListViewItemPresenter ContentMargin="0" SelectionCheckMarkVisualEnabled="False" />
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

<ListView     IsSwipeEnabled="False"
              ItemContainerStyle="StaticResource NoSpacesListViewItemStyle"
              ItemTemplate="StaticResource SomeTemplate"
              ItemsSource="Binding SomeData"
              SelectionMode="None"/>

我也可以承认，选择边框在这种情况下不起作用。所以这个方法不适合有选择的ListViews。

完整的默认 ListViewItemStyle 具有相同的更改：

<Style x:Key="NoSpacesListViewItemStyle" TargetType="ListViewItem">
    <Setter Property="FontFamily" Value="ThemeResource ContentControlThemeFontFamily" />
    <Setter Property="FontSize" Value="ThemeResource ControlContentThemeFontSize" />
    <Setter Property="Background" Value="Transparent" />
    <Setter Property="TabNavigation" Value="Local" />
    <Setter Property="IsHoldingEnabled" Value="True" />
    <Setter Property="Margin" Value="0" />
    <Setter Property="HorizontalContentAlignment" Value="Left" />
    <Setter Property="VerticalContentAlignment" Value="Top" />
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="ListViewItem">
                <ListViewItemPresenter HorizontalContentAlignment="TemplateBinding HorizontalContentAlignment"
                                       VerticalContentAlignment="TemplateBinding VerticalContentAlignment"
                                       CheckBrush="ThemeResource ListViewItemCheckThemeBrush"
                                       CheckHintBrush="ThemeResource ListViewItemCheckHintThemeBrush"
                                       CheckSelectingBrush="ThemeResource ListViewItemCheckSelectingThemeBrush"
                                       ContentMargin="0"
                                       ContentTransitions="TemplateBinding ContentTransitions"
                                       DisabledOpacity="ThemeResource ListViewItemDisabledThemeOpacity"
                                       DragBackground="ThemeResource ListViewItemDragBackgroundThemeBrush"
                                       DragForeground="ThemeResource ListViewItemDragForegroundThemeBrush"
                                       DragOpacity="ThemeResource ListViewItemDragThemeOpacity"
                                       FocusBorderBrush="ThemeResource ListViewItemFocusBorderThemeBrush"
                                       Padding="TemplateBinding Padding"
                                       PlaceholderBackground="ThemeResource ListViewItemPlaceholderBackgroundThemeBrush"
                                       PointerOverBackground="ThemeResource ListViewItemPointerOverBackgroundThemeBrush"
                                       PointerOverBackgroundMargin="1"
                                       ReorderHintOffset="ThemeResource ListViewItemReorderHintThemeOffset"
                                       SelectedBackground="ThemeResource ListViewItemSelectedBackgroundThemeBrush"
                                       SelectedBorderThickness="ThemeResource ListViewItemCompactSelectedBorderThemeThickness"
                                       SelectedForeground="ThemeResource ListViewItemSelectedForegroundThemeBrush"
                                       SelectedPointerOverBackground="ThemeResource ListViewItemSelectedPointerOverBackgroundThemeBrush"
                                       SelectedPointerOverBorderBrush="ThemeResource ListViewItemSelectedPointerOverBorderThemeBrush"
                                       SelectionCheckMarkVisualEnabled="False" />
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

【讨论】：

以上是关于无法消除 Windows 8 Metro 'ListView' 中 Tiles 之间的填充/边距的主要内容，如果未能解决你的问题，请参考以下文章

Windows 8 Metro 风格应用示例

Windows 8 应用商店应用程序 (Metro) 是不是在 Windows 7 或 XP 中运行？

下拉选择控件 - Windows 8 Metro - XAML

Windows Store Metro APP如何适配屏幕大小

Windows 8 Metro Settings Flyouts 似乎不适用于 Javascript？

在 Windows 8/Metro/Store 中为 RectangleGeometry（在 Image.Clip 中）设置动画