删除浮出控件内 ListViewItem 上的填充
Remove padding on ListViewItem inside a flyout
我按下按钮时会显示以下弹出窗口
<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,但它似乎总是有一个 space项目的侧面和弹出窗口的边缘。
尝试覆盖 ItemContainerStyle 中的边距和填充:
<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。
因为我刚刚因为在评论中快速回答的坏习惯而受到戳...
查看 FlyoutPresenter
的 default control style template 的结构,我们注意到有一个填充绑定到资源;
<Thickness x:Key="FlyoutContentThemePadding">12,11,12,12</Thickness>
当您发现 Flyout 内容有点被压扁时,这通常是罪魁祸首。是的,虽然 ListView 和其他 ItemsControl 变体通常有自己的模板化 Paddings/Margins 可能会产生干扰,但我们将某些东西嵌入到其他模板化控件中的次数越多,需要分类的层次就越多才能找到我们的罪魁祸首。
很高兴它有所帮助。 :)
我按下按钮时会显示以下弹出窗口
<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,但它似乎总是有一个 space项目的侧面和弹出窗口的边缘。
尝试覆盖 ItemContainerStyle 中的边距和填充:
<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。
因为我刚刚因为在评论中快速回答的坏习惯而受到戳...
查看 FlyoutPresenter
的 default control style template 的结构,我们注意到有一个填充绑定到资源;
<Thickness x:Key="FlyoutContentThemePadding">12,11,12,12</Thickness>
当您发现 Flyout 内容有点被压扁时,这通常是罪魁祸首。是的,虽然 ListView 和其他 ItemsControl 变体通常有自己的模板化 Paddings/Margins 可能会产生干扰,但我们将某些东西嵌入到其他模板化控件中的次数越多,需要分类的层次就越多才能找到我们的罪魁祸首。
很高兴它有所帮助。 :)