Search code examples
xamllistviewwindows-runtimewindows-store

Remove padding on ListViewItem inside a flyout

I have the following flyout that i show when i press a button

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

it looks like this enter image description here

and i use this as my ListViewItem style

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

What i would like to know is how to remove the left and right padding each items appears to have, i've tried setting the margins and padding to 0 but it allways seem to have a space between the sides of the items and the edge of the flyout.

Solution

  • Since I just got poked for my bad habit of so many quickie answers in comments...

    Looking at the structure of the default control style template for FlyoutPresenter we notice there's a padding bound to a resource of;

    <Thickness x:Key="FlyoutContentThemePadding">12,11,12,12</Thickness>

    Which is often the culprit when you notice your Flyout content getting a bit squished. While yes ListView and other ItemsControl variants generally have their own templated Paddings/Margins that can interfere, the more we embed something into additional templated controls, the more layers there are to sort through to find our culprit.

    Glad it helped. :)