WPF ListView Header 질문 드립니다.

🖥️ UI/UX 프로그래밍 Q&A WPF Q&A
1

ListView를 사용하면서 Header와 Column 부분의 경계를 확실히 나누려고 선을 긋고싶은데 검색을 해도 잘 안 나오는 것 같아 질문드립니다.

현재는 임시로 HeaderContainerStyle에 HeaderContainerStyle스타일을 입혀 아래 코드처럼 쓰고있습니다

<Style x:Key="GridViewColumnHeaderStyle_Padding" TargetType="GridViewColumnHeader">
    <Setter Property="Height" Value="20"/>
    <Setter Property="Background" Value="#1D2129" />
    <Setter Property="Foreground" Value="#959595" />
    <Setter Property="FontSize" Value="11"/>
    <Setter Property="FontFamily" Value="/fonts/#NanumBarunGothic"/>
    <Setter Property="HorizontalContentAlignment" Value="Center"/>
    <Setter Property="Margin" Value="-2,0,0,0"/>
    <!--ListView 헤더 제거 주석-->
    <!--<Setter Property="Visibility" Value="Collapsed"/>-->

    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="GridViewColumnHeader">
                <Grid>
                    <Border Background="{TemplateBinding Background}" BorderBrush="Black" BorderThickness="0,0,0,2" >
                        <ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" />
                    </Border>
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

이 방식으로 Border를 입혀서 밑에 부분에 선을 만들었는데 이렇게 만들다보니깐 제가 Header에 Margin을 줘서 간격을 주려하면 선마저 끊기길래 혹시 다른 방법이 있을까요?

또한 Margin이 아니라 헤더간의 간격을 주려면 어떻게 해야하나요?

2

GridViewColumnHeader 스타일에 Padding 속성은 줘보셨나요?
ControlTemplate내 ContentPresenter의 Margin="{TemplateBinding Padding}"도 지정해 주셔야 합니다.

<Style x:Key="GridViewColumnHeaderStyle_Padding" TargetType="GridViewColumnHeader">
    <Setter Property="Padding" Value="10,0" />
    ...
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="GridViewColumnHeader">
                <Grid>
                    <Border Background="{TemplateBinding Background}" BorderBrush="Black" BorderThickness="0,0,0,2" >
                        <ContentPresenter Margin="{TemplateBinding Padding}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"/>
                    </Border>
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
3

아 감사합니다 Margin="{TemplateBinding Padding}" 을 안해서 padding을 줘도 아무일도 없던거였군요…

이 질문과는 다르게 혹시 Padding을 줘서 헤더의 간격을 조정했을 때
Column값이 따라오게 하는 방법이 있을까요? 지금은 헤더나 Column값이 전부 가운데 정렬로 되어있는데 Padding을 헤더에 넣다보니 Column은 가만히 있는 현상이 있어서 하나하나 같은 Padding값을 넣어줘야할까요?

4

캡쳐를 첨부해 주실 수 있을까요? 일반적으로 컬럼의 크기는 별도의 속성을 주지 않더라도 헤더 컬럼의 크기와 연동됩니다.

5

222
사진과 같이 a그룹에만 padding을 20,0,0,0 을 줬을때 컬럼값도 같이 padding 20을 받아서 따라오게하고싶습니다

6

말씀하신대로 ListView의 GridView에서 각각의 컬럼에 정렬이나 여백을 주는 작업은 조금 번거롭습니다.

  • 정렬은 가운데로 두고 특정 컬럼의 여백만 조절하고 싶을 경우

    • 해당 GridViewColumn의 DisplayMemberBinding을 삭제하고 CellTemplate을 직접 정의하여 TextBlock의 Margin을 조정
      <ListView ItemsSource="{Binding Items}">
    <ListView.View>
        <GridView>
            <GridViewColumn>
                <GridViewColumn.CellTemplate>
                    <DataTemplate>
                        <TextBlock Text="{Binding Property1}" Margin="20,0,0,0"/>
                    </DataTemplate>
                </GridViewColumn.CellTemplate>
            </GridViewColumn>
            <GridViewColumn DisplayMemberBinding="{Binding Property2}"/>
            <GridViewColumn DisplayMemberBinding="{Binding Property3}"/>
        </GridView>
    </ListView.View>                    
</ListView>

  • 특정 컬럼의 정렬도 변경하고 여백도 조절하고 싶을 경우

    • ListViewItem 형식의 스타일에서 HorizontalContentAlignment 속성을 Stretch로 변경
    • 각 GridViewColumn의 DisplayMemberBinding을 삭제하고 모든 CellTemplate을 직접 정의하여 TextBlock의 Margin과 HorizontalAlignment를 지정
<ListView ItemsSource="{Binding Items}">
    <ListView.ItemContainerStyle>
        <Style TargetType="{x:Type ListViewItem}">
            <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
        </Style>
    </ListView.ItemContainerStyle>
    <ListView.View>
        <GridView>
            <GridViewColumn>
                <GridViewColumn.CellTemplate>
                    <DataTemplate>
                        <TextBlock Text="{Binding Property1}" Margin="20,0,0,0" HorizontalAlignment="Left"/>
                    </DataTemplate>
                </GridViewColumn.CellTemplate>
            </GridViewColumn>
            <GridViewColumn>
                <GridViewColumn.CellTemplate>
                    <DataTemplate>
                        <TextBlock Text="{Binding Property2}" HorizontalAlignment="Center"/>
                    </DataTemplate>
                </GridViewColumn.CellTemplate>
            </GridViewColumn>
            <GridViewColumn>
                <GridViewColumn.CellTemplate>
                    <DataTemplate>
                        <TextBlock Text="{Binding Property3}" HorizontalAlignment="Center"/>
                    </DataTemplate>
                </GridViewColumn.CellTemplate>
            </GridViewColumn>
        </GridView>
    </ListView.View>                    
</ListView>

ListView의 GridViewRowPresenter 클래스의 소스코드를 보시면 각 셀이 어떻게 생성되는지 이해하시는데 조금 도움이 될 것 같습니다.

7

감사합니다! 한번 해보겠습니다