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

Posted

技术标签:

【中文标题】无法消除 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-&gt;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 中)设置动画