[XAML] 윈도우10 앱 ListView에 헤더(Header) 추가하기

XAML의 ListView에 헤더를 추가하는 방법입니다.

관련된 자료가 많지 않기 때문에 편법으로 헤더를 추가했습니다.

ListView위에 선택이 되지 않는 ListView를 하나 더 추가하는 방법을 사용했습니다.

먼저 윈도우 10 앱 프로젝트를 생성합니다.

Universal의 Blank App을 선택하고 프로젝트 이름을 입력하고 OK를 누르면 됩니다.

프로젝트가 생성되면 MainPage.xaml을 엽니다.

<Grid>와 </Grid> 사이에 다음과 같이 그리드를 나눠주는 코드를 추가합니다.

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

그리고 바로 아래에 헤더로 사용할 ListView를 추가합니다.

선택이 불가능하도록 SelectionMode와 IsHitTestVisible을 속성을 사용합니다.

        <ListView HorizontalAlignment="Left" VerticalAlignment="Top" Grid.Row="0" SelectionMode="None" IsHitTestVisible="False">
            <StackPanel Orientation="Horizontal">
                <TextBlock Text="Header 1" Margin="5, 0, 5, 0" FontWeight="Bold" Width="90" TextAlignment="Center" VerticalAlignment="Stretch" FontSize="15.333"/>
                <TextBlock Text="Header 2" Margin="5, 0, 5, 0" FontWeight="Bold" Width="90" TextAlignment="Center" VerticalAlignment="Stretch" FontSize="15.333"/>
                <TextBlock Text="Header 3" Margin="5, 0, 5, 0" FontWeight="Bold" Width="90" TextAlignment="Center" VerticalAlignment="Stretch" FontSize="15.333"/>
            </StackPanel>
        </ListView>

실행하면 헤더와 같이 상단에 추가되는 것을 확인할 수 있습니다.

이제 실제 ListView를 그리드의 두번째 Row에 추가하면 됩니다.

일반적으로 ListView는 바인딩을 통해서 데이터와 연결하지만 실제 데이터값을 입력하도록 하겠습니다.

헤더로 사용하는 ListView 바로 아래에 코드를 추가합니다.

        <ListView HorizontalAlignment="Left" VerticalAlignment="Top" Grid.Row="1" SelectionMode="Single">
            <StackPanel Orientation="Horizontal">
                <TextBlock Text="Item 1" Margin="5, 0, 5, 0" FontWeight="Bold" Width="90" TextAlignment="Center" VerticalAlignment="Stretch" FontSize="15.333"/>
                <TextBlock Text="Item 2" Margin="5, 0, 5, 0" FontWeight="Bold" Width="90" TextAlignment="Center" VerticalAlignment="Stretch" FontSize="15.333"/>
                <TextBlock Text="Item 3" Margin="5, 0, 5, 0" FontWeight="Bold" Width="90" TextAlignment="Center" VerticalAlignment="Stretch" FontSize="15.333"/>
            </StackPanel>
            
            <StackPanel Orientation="Horizontal">
                <TextBlock Text="Item 1" Margin="5, 0, 5, 0" FontWeight="Bold" Width="90" TextAlignment="Center" VerticalAlignment="Stretch" FontSize="15.333"/>
                <TextBlock Text="Item 2" Margin="5, 0, 5, 0" FontWeight="Bold" Width="90" TextAlignment="Center" VerticalAlignment="Stretch" FontSize="15.333"/>
                <TextBlock Text="Item 3" Margin="5, 0, 5, 0" FontWeight="Bold" Width="90" TextAlignment="Center" VerticalAlignment="Stretch" FontSize="15.333"/>
            </StackPanel>
        </ListView>

헤더가 달린 리스트뷰처럼 디자인이 가능합니다.

각 줄인 <StackPanel> 부분을 추가하면 다음과 같이 화면에 표시됩니다.

Grid 대신 StackPanel로 사용할 수도 있지만 앱 크기가 작아질 때 문제가 있습니다.

정상적으로 스크롤이 생성되지 않기 때문에 Grid를 추가해서 진행하는 것을 추천드립니다.