[wpf] ListView 사용법 및 예제 -4-(ListView 꾸미기)

ListView 사용법 및 예제는 총 4개의 게시글로 구성되어있습니다.

 

ListView 사용법 및 예제 -1-

ListView 사용법 및 예제 -2-(ObservableCollection 사용하기)

ListView 사용법 및 예제 -3-(INotifyPropertyChanged.PropertyChanged 사용하기

ListView 사용법 및 예제 -4-(ListView 꾸미기)

 

이번게시글에서는 ListView에 디자인을 입혀보겠습니다.

 

1. 실행화면

 

2. MainWindows.xaml

<Window x:Class="ListViewTest.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:ListViewTest"
        mc:Ignorable="d"
        Title="MainWindow" Height="300" Width="370" Background="LightGreen">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="5*"></RowDefinition>
            <RowDefinition Height="1*"></RowDefinition>
        </Grid.RowDefinitions>
        <ListView Grid.Row="0" Name="studentListView" FontSize="15" Margin="3">
            <ListView.View>
                <GridView>
                    <GridViewColumn HeaderTemplate="{StaticResource NameHeaderTemplate}" CellTemplate="{StaticResource NameCellTemplate}" />
                    <GridViewColumn HeaderTemplate="{StaticResource AgeHeaderTemplate}" CellTemplate="{StaticResource AgeCellTemplate}" />
                    <GridViewColumn HeaderTemplate="{StaticResource GenderHeaderTemplate}" CellTemplate="{StaticResource GenderCellTemplate}"/>
                </GridView>
            </ListView.View>
        </ListView>
        <Grid Grid.Row="1">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="1*"></ColumnDefinition>
                <ColumnDefinition Width="1*"></ColumnDefinition>
            </Grid.ColumnDefinitions>
            <Button Grid.Column="0" Name="AddStudentBtn" Margin="5,0,3,3" Content="학생추가하기" Click="AddStudentBtn_Click" BorderThickness="0"></Button>
            <Button Grid.Column="1" Name="OneYearAfterBtn" Margin="3,0,3,5" Content="일년 후" Click="OneYearAfterBtn_Click" BorderThickness="0"></Button>
        </Grid>
    </Grid>
</Window>

GridViewColumn태그에 HeaderTemplate과 CellTemplate을 정의합니다.

 

 

3. App.xaml

<Application x:Class="ListViewTest.App"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:local="clr-namespace:ListViewTest"
             StartupUri="MainWindow.xaml">
    <Application.Resources>

        <LinearGradientBrush x:Key="SubtleGreen" EndPoint="0.476,0.09" StartPoint="0.476,1.363">
            <GradientStop Color="#FF48D13A" Offset="0.013"/>
            <GradientStop Color="#FF66D34E" Offset="1"/>
            <GradientStop Color="#FFF7F6F7" Offset="0.54"/>
            <GradientStop Color="#FFE2FDE1" Offset="0.46"/>
        </LinearGradientBrush>

        <Style x:Key="GreenBorder" TargetType="Border">
            <Setter Property="BorderBrush" Value="#FF6FD465"/>
            <Setter Property="BorderThickness" Value="4"/>
            <Setter Property="CornerRadius" Value="5"/>
        </Style>

        <Style x:Key="HeaderTextBlock" TargetType="TextBlock">
            <Setter Property="FontSize" Value="14"/>
            <Setter Property="FontWeight" Value="Bold"/>
            <Setter Property="Background" Value="{StaticResource SubtleGreen}"/>
            <Setter Property="Padding" Value="5"/>
            <Setter Property="Width" Value="100"/>
            <Setter Property="TextAlignment" Value="Center"/>
            <Setter Property="Foreground" Value="DarkGreen"/>
        </Style>

        <DataTemplate x:Key="NameHeaderTemplate">
            <Grid>
                <Border Style="{StaticResource GreenBorder}">
                    <TextBlock Text="이름" Style="{StaticResource HeaderTextBlock}" />
                </Border>
            </Grid>
        </DataTemplate>

        <DataTemplate x:Key="AgeHeaderTemplate">
            <Grid>
                <Border Style="{StaticResource GreenBorder}">
                    <TextBlock Text="나이" Style="{StaticResource HeaderTextBlock}" />
                </Border>
            </Grid>
        </DataTemplate>

        <DataTemplate x:Key="GenderHeaderTemplate">
            <Grid>
                <Border Style="{StaticResource GreenBorder}">
                    <TextBlock Text="성별" Style="{StaticResource HeaderTextBlock}" />
                </Border>
            </Grid>
        </DataTemplate>

        <DataTemplate x:Key="NameCellTemplate">
            <Grid Width="100">
                <TextBlock Foreground="Black"  HorizontalAlignment="Center" Text="{Binding name}"/>
            </Grid>
        </DataTemplate>

        <DataTemplate x:Key="AgeCellTemplate">
            <Grid Width="100">
                <TextBlock Foreground="Black"  HorizontalAlignment="Center" Text="{Binding Age}"/>
            </Grid>
        </DataTemplate>

        <DataTemplate x:Key="GenderCellTemplate">
            <Grid Width="100">
                <TextBlock Foreground="Black"  HorizontalAlignment="Center" Text="{Binding gender}"/>
            </Grid>
        </DataTemplate>

    </Application.Resources>
</Application>

 

MainWindow 코드가 길어지는것을 방지하기 위해 디자인코드는 App.xaml쪽에 넣어두곤 합니다.

 

Header템플릿의 구성은 border 안에 TextBlock을 넣어주었습니다.

 

Border로 외각에 코너가 둥근 테두리를 넣어주고 내부에 TextBlock에는 그라데이션 효과를 넣었습니다.