5일차. PhotoLab 샘플 따라 만들기 (3/3)

   이번 글에서는 WinUI 컨트롤을 사용하므로 4일차. C++/WinRT 프로젝트에 WinUI 적용하기를 참고하여 미리 설치하시면 좋습니다

 

데이터를 표시하는 DataTemplate 개체 추가

   위 링크에서 WinUI를 적용하셨으면 다시 예제를 따라 만들어 보겠습니다. 문서 개요 탭에서 ImageGridView를 마우스 오른쪽 클릭한후 추가 템플릿 편집 > 생성된 항목(ItemTemplate) 편집 > 빈 항목 만들기를 누른 후 뜬 창에 Name (key) 값을 ImageGridView_DefaultItemTemplate로 입력한 다음 확인을 눌러줍니다. 그러면 <Page.Resources> 태그가 생성되면서 안에 DataTemplate가 생성이 됩니다. 이는 자식(Item) 요소의 템플릿, 그러니까 디자인에 관련된 리소스입니다. 생성이 되었다면 ImageGridView에 teItemTemplate="{StaticResource ImageGridView_DefaultItemTemplate}"라는 항목이 자동적으로 생성된 것을 볼 수 있습니다. 이제 DataImageGridView_DefaultItemTemplate 템플릿 안에 Grid를 지우고 아래 코드로 수정해 봅시다.

<Grid Height="300"
      Width="300"
      Margin="8">
    <Grid.RowDefinitions>
        <RowDefinition />
        <RowDefinition Height="Auto" />
    </Grid.RowDefinitions>
</Grid>

   Grid는 이름 그대로 행열로 배치할 수 있는 격자입니다. RowDefinitions와 ColumnDefinitions 속성을 사용하여 Grid의 행과 열을 지정할 수 있죠. Grid의 높이와 넓이는 300픽셀로 지정했고 바깥 여백은 8픽셀로 지정했습니다. 그리고 2개의 행을 생성하고 두 번째 행의 높이는 자동으로 주었습니다.

<Grid Height="300"
      Width="300"
      Margin="8">
    <Grid.RowDefinitions>
        <RowDefinition />
        <RowDefinition Height="Auto" />
    </Grid.RowDefinitions>

    <Image x:Name="ItemImage"
           Source="Assets/StoreLogo.png"
           Stretch="Uniform" />

    <StackPanel Orientation="Vertical"
                Grid.Row="1">
        <TextBlock Text="ImageTitle"
                   HorizontalAlignment="Center"
                   Style="{StaticResource SubtitleTextBlockStyle}" />
        <StackPanel Orientation="Horizontal"
                    HorizontalAlignment="Center">
            <TextBlock Text="ImageFileType"
                       HorizontalAlignment="Center"
                       Style="{StaticResource CaptionTextBlockStyle}" />
            <TextBlock Text="ImageDimensions"
                       HorizontalAlignment="Center"
                       Style="{StaticResource CaptionTextBlockStyle}"
                       Margin="8,0,0,0" />
        </StackPanel>

        <muxc:RatingControl Value="3" IsReadOnly="True"/>
    </StackPanel>
</Grid>

   여기에 Image 태그와 StackPanel을 추가해 줍시다. 위에서 설정한 Grid의 설정을 미루어 보아 Image는 고정된 크기를, StackPanel은 높이가 가변적(Auto)으로 변할 것으로 예상됩니다. Image 태그는 Source를 Assets의 로고로 설정되어 있습니다. 차후 이 부분을 수정하면 이미지가 표시될 것으로 추측해볼 수 있습니다. Stretch는 Uniform으로 설정하였는데 이 부분은 Uniform이 기본값입니다. StackPanel의 자식 요소는 세로로 정렬되며 해당 요소를 두 번째 행으로 지정하였습니다. 나머지는 넘어가겠습니다. 다음은 WinUI의 컨트롤 요소인 RatingControl이 나왔습니다. 위에서 설정한 muxc 네임스페이스로 사용하고, 기본값은 별 5개 만점에 3개, 그리고 수정이 불가능한 읽기 전용으로 설정하였습니다.

실행 결과

따라서 실행할 경우 이런 Grid 형식으로 나오게 됩니다.

 

 

항목 컨테이너 스타일 수정

   항목의 컨트롤 템플릿에는 선택 항목, 포인터 가리키기, 포커스와 같은 상태를 표시하는 시각적 개체가 포함됩니다. 여기서는 컨트롤 템플릿의 Background와 Margin 속성을 수적하여 GridView의 자식 요소에 회색 배경을 줍니다.

   여기서는 ImageGridView를 우클릭하고 추가 템플릿 편집 > 생성된 항목 컨테이너(ItemContainerStyle) 편집 > 복사본 편집을 차례대로 선택해 줍니다. 그리고 Name (key)값을 ImageGridView_DefaultItemContainerStyle로 설정해줍니다. 그러면 이하와 같은 코드들이 Page.Resources 안에 생성되는데, 템플릿 복사본에서는 수정할 속성만 유지하면 되기 때문에 Margin 프로퍼티만 남기고 다른 Setter 태그들은 모두 지워줍시다.

<Style x:Key="ImageGridView_DefaultItemContainerStyle" TargetType="GridViewItem">
    <Setter Property="FontFamily" Value="{ThemeResource ContentControlThemeFontFamily}"/>
    <Setter Property="FontSize" Value="{ThemeResource ControlContentThemeFontSize}"/>
    <Setter Property="Background" Value="{ThemeResource GridViewItemBackground}"/>
    <Setter Property="Foreground" Value="{ThemeResource GridViewItemForeground}"/>
    <Setter Property="TabNavigation" Value="Local"/>
    <Setter Property="IsHoldingEnabled" Value="True"/>
    <Setter Property="HorizontalContentAlignment" Value="Center"/>
    <Setter Property="VerticalContentAlignment" Value="Center"/>
    <Setter Property="Margin" Value="0,0,4,4"/>
    <Setter Property="MinWidth" Value="{ThemeResource GridViewItemMinWidth}"/>
    <Setter Property="MinHeight" Value="{ThemeResource GridViewItemMinHeight}"/>
    <Setter Property="AllowDrop" Value="False"/>
    <Setter Property="UseSystemFocusVisuals" Value="{StaticResource UseSystemFocusVisuals}"/>
    <Setter Property="FocusVisualMargin" Value="-2"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="GridViewItem">
            <!-- XAML removed for clarity
                <ListViewItemPresenter ... />
            -->   
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

   Setter 태그를 추가해 Background 속성값을 Gray로 설정해 주고, Margin 속성값을 0,0,4,4에서 8로 수정해 줍니다. 결과적으로 아래와 같은 태그만 남게 됩니다. 다시 실행해 보겠습니다.

<Style x:Key="ImageGridView_DefaultItemContainerStyle" TargetType="GridViewItem">
	<Setter Property="Background" Value="Gray" />
	<Setter Property="Margin" Value="8" />
</Style>

실행 결과

   아이템의 배경이 회색으로 바뀌었습니다.

 

 

최종 조정

   마지막으로 Grid 요소들을 가운데로 조정해 보겠습니다. 단순히 GridView에서 HrizontalAlignment 속성값을 Center로 줘도 가운데로 오긴 하지만, 스크롤 막대의 위치가 창의 가장자리가 아닌 GridView의 가장자리에 배치된다는 문제점이 있습니다. 이번에도 ImageGridView를 우클릭해 추가 템플릿 편집 > 항목 레이아웃(ItemsPanel) 편집> 복사본 편집을 눌러줍니다. 그리고 Name(key) 값은 ImageGridView_ItemsPanelTemplate로 설정해 주겠습니다. GridView에는 항목의 레이아웃을 관리하는 내부 패널이 있습니다. 이 패널을 ItemsWrapGrid라고 하는데 이 요소를 수정해 주겠습니다. 이하의 코드처럼 Orientation 속성값은 Horizontal로, HorizontalAlignment는 Center로 주면 됩니다. 다시 실행해 봅시다.

<ItemsPanelTemplate x:Key="ImageGridView_ItemsPanelTemplate">
    <ItemsWrapGrid Orientation="Horizontal"
                   HorizontalAlignment="Center"/>
</ItemsPanelTemplate>

실행 결과

   가운데로 정렬되고 스크롤 막대도 창의 가장자리에 있는 것을 확인할 수 있습니다. 메인페이지 UI는 이상으로 종료입니다. 이하는 전체 MainPage.xaml 코드입니다.

<Page
    x:Class="PhotoLabExample.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:PhotoLabExample"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:muxc="using:Microsoft.UI.Xaml.Controls"
    NavigationCacheMode="Enabled"
    mc:Ignorable="d">
    <Page.Resources>
        <DataTemplate x:Key="ImageGridView_DefaultItemTemplate">
            <Grid Height="300" Width="300" Margin="8">
                <Grid.RowDefinitions>
                    <RowDefinition />
                    <RowDefinition Height="Auto" />
                </Grid.RowDefinitions>

                <Image x:Name="ItemImage"
                       Source="Assets/StoreLogo.png"
                       Stretch="Uniform" />

                <StackPanel Orientation="Vertical" 
                            Grid.Row="1">
                    <TextBlock Text="ImageTitle"
                               HorizontalAlignment="Center"
                               Style="{StaticResource SubtitleTextBlockStyle}" />

                    <StackPanel Orientation="Horizontal"
                                HorizontalAlignment="Center">
                        <TextBlock Text="ImageFileType"
                                   HorizontalAlignment="Center"
                                   Style="{StaticResource CaptionTextBlockStyle}" />

                        <TextBlock Text="ImageDimensions"
                                   HorizontalAlignment="Center"
                                   Style="{StaticResource CaptionTextBlockStyle}"
                                   Margin="8,0,0,0" />
                    </StackPanel>
                    <muxc:RatingControl Value="3" IsReadOnly="True" />
                </StackPanel>
            </Grid>
        </DataTemplate>
        <Style x:Key="ImageGridView_DefaultItemContainerStyle" TargetType="GridViewItem">
            <Setter Property="Background" Value="Gray" />
            <Setter Property="Margin" Value="8" />
        </Style>
        <ItemsPanelTemplate x:Key="ImageGridView_ItemsPanelTemplate">
            <ItemsWrapGrid Orientation="Horizontal"
                           HorizontalAlignment="Center" />
        </ItemsPanelTemplate>
    </Page.Resources>

    <RelativePanel Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <TextBlock x:Name="TitleTextBlock"
               Text="Collection"
               Margin="24,0,0,24"
               Style="{StaticResource TitleTextBlockStyle}" />
        <GridView ItemsPanel="{StaticResource ImageGridView_ItemsPanelTemplate}"
                  ItemContainerStyle="{StaticResource ImageGridView_DefaultItemContainerStyle}"
                  x:Name="ImageGridView"
                  Margin="0,0,0,8"
                  RelativePanel.AlignLeftWithPanel="True"
                  RelativePanel.AlignRightWithPanel="True"
                  RelativePanel.Below="TitleTextBlock"
                  ItemTemplate="{StaticResource ImageGridView_DefaultItemTemplate}" />
    </RelativePanel>
</Page>

 

 

참고

docs.microsoft.com/ko-kr/windows/uwp/design/basics/xaml-basics-ui

사용자 인터페이스 만들기 자습서 - UWP applications

github.com/Microsoft/Windows-appsample-photo-lab

microsoft/Windows-appsample-photo-lab