ListView 안의 여백을 지우는 방법

안녕하세요.

ListView와 ListViewItem 상위 속성인 StackPanel 사이에 1만큼의 여백이 있는데, 어떻게 지우나요?
라이브 속성 탐색기로 확인 결과 ListView의 Height는 50으로 찍히는데, ListViewItem를 감싸는 StackPanel의 Height는 48로 찍히는 걸 확인했어요.

빨간색 배경이 ListView Background 색상입니다.
image

아래는 관련 소스입니다.

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="50"/>
        <RowDefinition Height="*"/>
    </Grid.RowDefinitions>

    <Grid>
        <ListView BorderThickness="0"
                  SnapsToDevicePixels="True"
                  ScrollViewer.HorizontalScrollBarVisibility="Disabled"
                  ScrollViewer.VerticalScrollBarVisibility="Disabled"
                  Background="Red">
            <ListView.ItemsPanel>
                <ItemsPanelTemplate>
                    <StackPanel Orientation="Horizontal"/>
                </ItemsPanelTemplate>
            </ListView.ItemsPanel>
            <controls:MenuListItem 
                ImageSource="/Styles/Resources/home.png"
                Text="Home"/>
            <controls:MenuListItem 
                ImageSource="/Styles/Resources/party.png"
                Text="Search"/>
        </ListView>
    </Grid>
</Grid>

MenuListItem.xaml

<Style TargetType="{x:Type controls:MenuListItem}">
    <Setter Property="BorderThickness" Value="0"/>
    <Setter Property="Padding" Value="0"/>
    <Setter Property="Margin" Value="0"/>
    <Setter Property="Height" Value="50"/>
    <Setter Property="Width" Value="150"/>
    <Setter Property="Background" Value="{DynamicResource Green}"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type controls:MenuListItem}">
                <ControlTemplate.Resources>
                    <Style TargetType="{x:Type Button}">
                        <Setter Property="Template">
                            <Setter.Value>
                                <ControlTemplate TargetType="Button">
                                    <Grid Background="{TemplateBinding Background}" Margin="{TemplateBinding Margin}">
                                        <ContentPresenter SnapsToDevicePixels="True"/>
                                    </Grid>
                                </ControlTemplate>
                            </Setter.Value>
                        </Setter>
                    </Style>
                </ControlTemplate.Resources>
                <Border BorderThickness="{TemplateBinding BorderThickness}"
                        Background="{TemplateBinding Background}"
                        Padding="{TemplateBinding Padding}"
                        Margin="{TemplateBinding Margin}">
                    <Button Padding="10"
                            Height="50"
                            Margin="{TemplateBinding Margin}"
                            Command="{TemplateBinding Command}"
                            BorderThickness="{TemplateBinding BorderThickness}"
                            Background="{TemplateBinding Background}"
                            HorizontalContentAlignment="Left"
                        >
                        <Grid Background="{TemplateBinding Background}" Margin="20,0,0,0">
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="auto"/>
                                <ColumnDefinition Width="*"/>
                            </Grid.ColumnDefinitions>

                            <Grid>
                                <Image Source="{TemplateBinding ImageSource}"
                                   VerticalAlignment="Center" Stretch="UniformToFill"
                                   Height="24"/>
                            </Grid>

                            <Grid Grid.Column="1">
                                <TextBlock Text="{TemplateBinding Text}"
                                       VerticalAlignment="Center"
                                       Margin="20,0,0,0"
                                       Foreground="{DynamicResource Antique}"
                                       FontSize="16"
                                       FontWeight="ExtraBlack"/>
                            </Grid>
                        </Grid>
                    </Button>
                </Border>

                <ControlTemplate.Triggers>
                    <Trigger Property="IsMouseOver" Value="True">
                        <Setter Property="Background" Value="{DynamicResource DarkGreen}"/>
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate> 
        </Setter.Value>
    </Setter>
</Style>

MenuListItem.cs

public class MenuListItem : ListViewItem
{
    public MenuListItem()
    {
        DefaultStyleKey = typeof(MenuListItem);
    }

    public override void OnApplyTemplate()
    {
        base.OnApplyTemplate();
    }

    public ImageSource ImageSource
    {
        get { return (ImageSource)GetValue(ImageSourceProperty); }
        set { SetValue(ImageSourceProperty, value); }
    }

    public static readonly DependencyProperty ImageSourceProperty =
        DependencyProperty.Register("ImageSource", typeof(ImageSource), typeof(MenuListItem), new UIPropertyMetadata(null));


    public string Text
    {
        get { return (string)GetValue(TextProperty); }
        set { SetValue(TextProperty, value); }
    }

    public static readonly DependencyProperty TextProperty =
        DependencyProperty.Register("Text", typeof(string), typeof(MenuListItem), new UIPropertyMetadata(string.Empty));


    public ICommand Command
    {
        get { return (ICommand)GetValue(CommandProperty); }
        set { SetValue(CommandProperty, value); }
    }

    public static readonly DependencyProperty CommandProperty =
        DependencyProperty.Register("Command", typeof(ICommand), typeof(MenuListItem), new PropertyMetadata(null));
}
1개의 좋아요

ListView(ListBox)의 Template에서 전체를 감싸는 Border에 기본 Padding이 "1"로 되어 있기 때문입니다.

image

image

image

가장 간단한 솔루션은 ListView의 Padding을 "-1"로 하는 것입니다.

4개의 좋아요

답글 감사합니다. 보여주신 xaml은 직접 구현하신건가요? 아니면 문서같은 곳이 있어서 저도 확인해볼 수 있는 곳이 있는건가요??

1개의 좋아요

WPF가 이제는 공개되어 있어서 github에서 themes쪽에서 살펴보실 수 있습니다.

2개의 좋아요