【问题标题】:Remove padding on ListViewItem inside a flyout删除浮出控件内 ListViewItem 上的填充
【发布时间】:2016-09-21 20:32:45
【问题描述】:

当我按下按钮时,我会显示以下弹出窗口

<Flyout x:Name="saveDiscardMenu" Placement="Bottom" >
        <Grid >
            <Grid.RowDefinitions>
                <RowDefinition />
                <RowDefinition />
            </Grid.RowDefinitions>
            <ListView Name="SaveDiscardList" ItemClick="SaveDiscardList_ItemClick" >
                <ListViewItem Style="{StaticResource ListViewItemPDF}">
                    <TextBlock x:Uid="SaveChanges" Name="saveChanges"  Grid.Row="0" Tapped="saveChanges_Tapped"></TextBlock>
                </ListViewItem>
                <ListViewItem Style="{StaticResource ListViewItemPDF}">
                    <TextBlock x:Uid="DiscardChanges" Name="discardChanges" Grid.Row="1" Margin="0,20,0,0" Tapped="discardChanges_Tapped" ></TextBlock>
                </ListViewItem>
            </ListView>
        </Grid>
    </Flyout>

看起来像这样

我将其用作我的 ListViewItem 样式

<Style TargetType="ListViewItem" x:Key="ListViewItemPDF">
    <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,0,0,0"/>
    <Setter Property="HorizontalContentAlignment" Value="Stretch" />
    <Setter Property="VerticalContentAlignment" Value="Stretch" />
    <Setter Property="Padding" Value="0" />
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="ListViewItem">
                <ListViewItemPresenter
                ContentTransitions="{TemplateBinding ContentTransitions}"
                Padding="{TemplateBinding Padding}"
                SelectionCheckMarkVisualEnabled="True"
                CheckHintBrush="{ThemeResource ListViewItemCheckHintThemeBrush}"
                CheckSelectingBrush="{ThemeResource ListViewItemCheckSelectingThemeBrush}"
                CheckBrush="{ThemeResource ListViewItemCheckThemeBrush}"
                DragBackground="{ThemeResource ListViewItemDragBackgroundThemeBrush}"
                DragForeground="{ThemeResource ListViewItemDragForegroundThemeBrush}"
                FocusBorderBrush="{ThemeResource ListViewItemFocusBorderThemeBrush}"
                PlaceholderBackground="{ThemeResource ListViewItemPlaceholderBackgroundThemeBrush}"
                PointerOverBackground="{StaticResource MyLightBlue}"
                SelectedBorderThickness="{ThemeResource ListViewItemCompactSelectedBorderThemeThickness}"
                SelectedBackground="{ThemeResource ListViewItemSelectedBackgroundThemeBrush}"
                SelectedForeground="{ThemeResource ListViewItemSelectedForegroundThemeBrush}"
                SelectedPointerOverBackground="{ThemeResource ListViewItemSelectedPointerOverBackgroundThemeBrush}"
                SelectedPointerOverBorderBrush="{ThemeResource ListViewItemSelectedPointerOverBorderThemeBrush}"
                DisabledOpacity="{ThemeResource ListViewItemDisabledThemeOpacity}"
                DragOpacity="{ThemeResource ListViewItemDragThemeOpacity}"
                ReorderHintOffset="{ThemeResource ListViewItemReorderHintThemeOffset}"
                HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
                VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
                PointerOverBackgroundMargin="1"
                ContentMargin="4" />
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

我想知道的是如何删除每个项目似乎有的左右填充,我尝试将边距和填充设置为 0,但它似乎总是在项目的两侧之间有一个空间和弹出按钮的边缘。

【问题讨论】:

  • 使用整个 ListView 似乎只提供了两个选项,这似乎是一个沉重的过度杀伤路线......无论如何,FlyoutPresenter 已经内置了填充到&lt;Thickness x:Key="FlyoutContentThemePadding"&gt;12,11,12,12&lt;/Thickness&gt; 的资源,听起来你想编辑/删除。
  • 好的,谢谢,错过了问题出在 Flyout 而不是 ListView 中
  • 只要你找到补救办法。干杯。 :)

标签: xaml listview windows-runtime windows-store


【解决方案1】:

尝试覆盖 ItemContainerStyle 中的 Margin 和 Padding:

<ListView>
    <ListView.ItemContainerStyle>
        <Style TargetType="ListViewItem">
            <Setter Property="Margin" Value="0"/>
            <Setter Property="Padding" Value="0"/>
            <Setter Property="MinWidth" Value="0"/>
        </Style>
    </ListView.ItemContainerStyle>
</ListView>

可能是 MinWidth,MinHeight 也需要设置为 0。

【讨论】:

    【解决方案2】:

    因为我刚刚因为我在 cmets 中有这么多快速回答的坏习惯而被戳...

    查看default control style template 的结构FlyoutPresenter 我们注意到有一个填充绑定到资源;

    &lt;Thickness x:Key="FlyoutContentThemePadding"&gt;12,11,12,12&lt;/Thickness&gt;

    当您注意到您的 Flyout 内容变得有点挤压时,这通常是罪魁祸首。虽然是的,ListView 和其他 ItemsControl 变体通常都有自己的模板化 Paddings/Margins 可能会产生干扰,但我们在其他模板化控件中嵌入的东西越多,需要排序的层就越多,以找出我们的罪魁祸首。

    很高兴它有所帮助。 :)

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 2016-11-28
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2016-07-10
      • 2018-07-14
      相关资源
      最近更新 更多