첨부 실행 코드는 나눔고딕코딩 폰트를 사용합니다.
유용한 소스 코드가 있으면 icodebroker@naver.com으로 보내주시면 감사합니다.
블로그 자료는 자유롭게 사용하세요.

728x90
반응형

TestProject.zip
0.84MB

▶ CustomItem.cs

using System;
using System.Collections.Generic;

namespace TestProject
{
    /// <summary>
    /// 커스텀 항목
    /// </summary>
    public class CustomItem
    {
        //////////////////////////////////////////////////////////////////////////////////////////////////// Property
        ////////////////////////////////////////////////////////////////////////////////////////// Public

        #region 제목 - Title

        /// <summary>
        /// 제목
        /// </summary>
        public string Title { get; set; }

        #endregion
        #region 이미지 위치 - ImageLocation

        /// <summary>
        /// 이미지 위치
        /// </summary>
        public string ImageLocation { get; set; }

        #endregion
        #region 조회 수 - Views

        /// <summary>
        /// 조회 수
        /// </summary>
        public string Views { get; set; }

        #endregion
        #region 좋아요 - Likes

        /// <summary>
        /// 좋아요
        /// </summary>
        public string Likes { get; set; }

        #endregion
        #region 설명 - Description

        /// <summary>
        /// 설명
        /// </summary>
        public string Description { get; set; }

        #endregion

        //////////////////////////////////////////////////////////////////////////////////////////////////// Constructor
        ////////////////////////////////////////////////////////////////////////////////////////// Public

        #region 생성자 - CustomItem()

        /// <summary>
        /// 생성자
        /// </summary>
        public CustomItem()
        {
        }

        #endregion

        //////////////////////////////////////////////////////////////////////////////////////////////////// Method
        ////////////////////////////////////////////////////////////////////////////////////////// Static
        //////////////////////////////////////////////////////////////////////////////// Public

        #region 리스트 구하기 - GetList()

        /// <summary>
        /// 리스트 구하기
        /// </summary>
        /// <returns>리스트</returns>
        public static List<CustomItem> GetList()
        {
            string[] textArray = new[]
            {
                "Lorem ipsum dolor sit amet, consectetur adipiscing elit. " +
                "Integer id facilisis lectus. " +
                "Cras nec convallis ante, quis pulvinar tellus. " +
                "Integer dictum accumsan pulvinar. " +
                "Pellentesque eget enim sodales sapien vestibulum consequat.",
                "Nullam eget mattis metus. Donec pharetra, tellus in mattis tincidunt, magna ipsum gravida nibh, vitae lobortis ante odio vel quam.",
                "Quisque accumsan pretium ligula in faucibus. " +
                "Mauris sollicitudin augue vitae lorem cursus condimentum quis ac mauris. " +
                "Pellentesque quis turpis non nunc pretium sagittis. " +
                "Nulla facilisi. " +
                "Maecenas eu lectus ante. " +
                "Proin eleifend vel lectus non tincidunt. " +
                "Fusce condimentum luctus nisi, in elementum ante tincidunt nec.",
                "Aenean in nisl at elit venenatis blandit ut vitae lectus. " +
                "Praesent in sollicitudin nunc. " +
                "Pellentesque justo augue, pretium at sem lacinia, scelerisque semper erat. " +
                "Ut cursus tortor at metus lacinia dapibus.",
                "Ut consequat magna luctus justo egestas vehicula. " +
                "Integer pharetra risus libero, et posuere justo mattis et.",
                "Proin malesuada, libero vitae aliquam venenatis, diam est faucibus felis, vitae efficitur erat nunc non mauris. " +
                "Suspendisse at sodales erat.",
                "Aenean vulputate, turpis non tincidunt ornare, metus est sagittis erat, id lobortis orci odio eget quam. " +
                "Suspendisse ex purus, lobortis quis suscipit a, volutpat vitae turpis.",
                "Duis facilisis, quam ut laoreet commodo, elit ex aliquet massa, non varius tellus lectus et nunc. " +
                "Donec vitae risus ut ante pretium semper. " +
                "Phasellus consectetur volutpat orci, eu dapibus turpis. " +
                "Fusce varius sapien eu mattis pharetra.",
            };

            Random random = new Random();

            const int listCount = 8;

            List<CustomItem> list = new List<CustomItem>();

            for(int i = 0; i < listCount; i++)
            {
                list.Add
                (
                    new CustomItem()
                    {
                        Title         = $"이미지 {i + 1}",
                        ImageLocation = $"/IMAGE/landscape{i + 1}.jpg",
                        Views         = random.Next(100, 999).ToString(),
                        Likes         = random.Next(10, 99).ToString(),
                        Description   = textArray[i % textArray.Length],
                    }
                );
            }

            return list;
        }

        #endregion
    }
}

 

▶ MainPage.xaml

<Page x:Class="TestProject.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:muxc="using:Microsoft.UI.Xaml.Controls"
    xmlns:local="using:TestProject"
    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"
    FontFamily="나눔고딕코딩"
    FontSize="16">
    <Page.Resources>
        <DataTemplate x:Key="ImageDataTemplateKey" x:DataType="local:CustomItem">
            <Image
                AutomationProperties.Name="{x:Bind Title}"
                AutomationProperties.AccessibilityView="Raw"
                Width="190"
                Height="130"
                Stretch="UniformToFill"
                Source="{x:Bind ImageLocation}" />
        </DataTemplate>
        <DataTemplate x:Key="IconTextDataTemplateKey" x:DataType="local:CustomItem">
            <RelativePanel
                AutomationProperties.Name="{x:Bind Title}"
                Width="280"
                MinHeight="160">
                <Image Name="image"
                    RelativePanel.AlignLeftWithPanel="True"
                    RelativePanel.AlignTopWithPanel="True"
                    Margin="0 5 0 0"
                    Width="18"
                    Stretch="Uniform"
                    Source="{x:Bind ImageLocation}" />
                <TextBlock Name="titleTextBlock"
                    Style="{StaticResource BaseTextBlockStyle}"
                    RelativePanel.RightOf="image"
                    RelativePanel.AlignTopWithPanel="True"
                    Margin="10 0 0 0"
                    Text="{x:Bind Title}" />
                <TextBlock
                    Style="{StaticResource CaptionTextBlockStyle}"
                    RelativePanel.Below="titleTextBlock"
                    Margin="0 5 10 0" 
                    TextWrapping="Wrap"
                    TextTrimming="WordEllipsis"
                    Text="{x:Bind Description}" />
            </RelativePanel>
        </DataTemplate>
        <DataTemplate x:Key="ImageTextDataTemplateKey" x:DataType="local:CustomItem">
            <Grid AutomationProperties.Name="{x:Bind Title}" Width="280">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="Auto"/>
                    <ColumnDefinition Width="*" />
                </Grid.ColumnDefinitions>
                <Image Source="{x:Bind ImageLocation}" Height="100" Stretch="Fill" VerticalAlignment="Top"/>
                <StackPanel Grid.Column="1" Margin="8,0,0,8">
                    <TextBlock Text="{x:Bind Title}" Style="{ThemeResource SubtitleTextBlockStyle}" Margin="0,0,0,8"/>
                    <StackPanel Orientation="Horizontal">
                        <TextBlock Text="{x:Bind Views}" Style="{ThemeResource CaptionTextBlockStyle}"/>
                        <TextBlock Text=" Views " Style="{ThemeResource CaptionTextBlockStyle}"/>
                    </StackPanel>
                    <StackPanel Orientation="Horizontal">
                        <TextBlock Text="{x:Bind Likes}" Style="{ThemeResource CaptionTextBlockStyle}" />
                        <TextBlock Text=" Likes" Style="{ThemeResource CaptionTextBlockStyle}"/>
                    </StackPanel>
                </StackPanel>
            </Grid>
        </DataTemplate>
        <DataTemplate x:Key="TextDataTemplateKey" x:DataType="local:CustomItem">
            <StackPanel
                Width="240"
                Orientation="Horizontal">
                <TextBlock
                    Style="{StaticResource TitleTextBlockStyle}"
                    Margin="10 0 0 0"
                    Text="{x:Bind Title}" />
            </StackPanel>
        </DataTemplate>
        <DataTemplate x:Key="ImageOverlayDataTemplateKey" x:DataType="local:CustomItem">
            <Grid AutomationProperties.Name="{x:Bind Title}"
                Width="100">
                <Image
                    Stretch="UniformToFill"
                    Source="{x:Bind ImageLocation}" />
                <StackPanel
                    VerticalAlignment="Bottom"
                    Height="40"
                    Orientation="Vertical"
                    Background="{ThemeResource SystemControlBackgroundBaseMediumBrush}"
                    Padding="5 1 5 1"
                    Opacity=".75">
                    <TextBlock
                        Foreground="{ThemeResource SystemControlForegroundAltHighBrush}"
                        Text="{x:Bind Title}" />
                    <StackPanel Orientation="Horizontal">
                        <TextBlock
                            Style="{ThemeResource CaptionTextBlockStyle}"
                            Foreground="{ThemeResource SystemControlForegroundAltHighBrush}"
                            Text="좋아요 : " />
                        <TextBlock
                            Style="{ThemeResource CaptionTextBlockStyle}"
                            Foreground="{ThemeResource SystemControlForegroundAltHighBrush}"
                            Text="{x:Bind Likes}" />
                    </StackPanel>
                </StackPanel>
            </Grid>
        </DataTemplate>
    </Page.Resources>
    <Grid>
        <Grid
            HorizontalAlignment="Center"
            VerticalAlignment="Center">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*"    />
                <ColumnDefinition Width="10"   />
                <ColumnDefinition Width="Auto" />
            </Grid.ColumnDefinitions>
            <Grid Grid.Column="0">
                <Grid.RowDefinitions>
                    <RowDefinition Height="*"    />
                    <RowDefinition Height="10"   />
                    <RowDefinition Height="Auto" />
                </Grid.RowDefinitions>
                <GridView Name="gridView" Grid.Row="0"
                    ItemTemplate="{StaticResource ImageDataTemplateKey}"
                    FlowDirection="LeftToRight"
                    CanDragItems="{x:Bind canDragItemsCheckBox.IsChecked.Value, Mode=OneWay}"
                    CanReorderItems="{x:Bind canReorderItemsCheckBox.IsChecked.Value, Mode=OneWay}"
                    AllowDrop="{x:Bind allowDropCheckBox.IsChecked.Value, Mode=OneWay}"
                    IsItemClickEnabled="{x:Bind isItemClickEnabledCheckBox.IsChecked.Value, Mode=OneWay}"
                    SelectionChanged="gridView_SelectionChanged" 
                    ItemClick="gridView_ItemClick" />
                <StackPanel Grid.Row="2">
                    <TextBlock Name="selectionTextBlock" />
                    <TextBlock Name="clikedItemTextBlock" />
                </StackPanel>
            </Grid>
            <StackPanel Grid.Column="2">
                <muxc:RadioButtons Header="항목 템플리트">
                    <RadioButton
                        GroupName="Template"
                        IsChecked="True"
                        Tag="ImageDataTemplateKey"
                        Content="이미지"
                        Checked="itemTemplateRadioButton_Checked" />
                    <RadioButton
                        GroupName="Template"
                        Tag="IconTextDataTemplateKey"
                        Content="아이콘/텍스트"
                        Checked="itemTemplateRadioButton_Checked" />
                    <RadioButton
                        GroupName="Template"
                        Tag="ImageTextDataTemplateKey"
                        Content="이미지/텍스트"
                        Checked="itemTemplateRadioButton_Checked" />
                    <RadioButton
                        GroupName="Template"
                        Tag="TextDataTemplateKey"
                        Content="텍스트"
                        Checked="itemTemplateRadioButton_Checked" />
                    <RadioButton
                        GroupName="Template"
                        Tag="ImageOverlayDataTemplateKey"
                        Content="이미지 오버레이"
                        Checked="itemTemplateRadioButton_Checked" />
                </muxc:RadioButtons>
                <StackPanel>
                    <ToggleButton
                        Margin="0 10 0 0"
                        Content="FlowDirection 속성 반전"
                        Click="reverseFlowDirectionToggleButton_Click" />
                    <CheckBox Name="canDragItemsCheckBox"
                        Margin="0 10 0 0"
                        Content="CanDragItems 속성" />
                    <CheckBox Name="canReorderItemsCheckBox"
                        Content="CanReorderItems 속성" />
                    <CheckBox Name="allowDropCheckBox"
                        Content="AllowDrop 속성" />
                    <CheckBox Name="isItemClickEnabledCheckBox"
                        Content="IsItemClickEnabled 속성"
                        Click="isItemClickEnabledCheckBox_Click" />
                    <ComboBox
                        Margin="0 10 0 0"
                        Header="SelectionMode 속성"
                        SelectedIndex="1"
                        SelectionChanged="selectionModeComboBox_SelectionChanged">
                        <x:String>None</x:String>
                        <x:String>Single</x:String>
                        <x:String>Multiple</x:String>
                        <x:String>Extended</x:String>
                    </ComboBox>
                </StackPanel>
            </StackPanel>
        </Grid>
    </Grid>
</Page>

 

▶ MainPage.xaml.cs

using System.Collections.Generic;
using System.Collections.ObjectModel;
using Windows.Foundation;
using Windows.Graphics.Display;
using Windows.UI.ViewManagement;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;

namespace TestProject
{
    /// <summary>
    /// 메인 페이지
    /// </summary>
    public sealed partial class MainPage : Page
    {
        //////////////////////////////////////////////////////////////////////////////////////////////////// Constructor
        ////////////////////////////////////////////////////////////////////////////////////////// Public

        #region 생성자 - MainPage()

        /// <summary>
        /// 생성자
        /// </summary>
        public MainPage()
        {
            InitializeComponent();

            #region 윈도우 크기를 설정한다.

            double width  = 800d;
            double height = 600d;

            double dpi = (double)DisplayInformation.GetForCurrentView().LogicalDpi;

            ApplicationView.PreferredLaunchWindowingMode = ApplicationViewWindowingMode.PreferredLaunchViewSize;

            Size windowSize = new Size(width * 96d / dpi, height * 96d / dpi);

            ApplicationView.PreferredLaunchViewSize = windowSize;

            Window.Current.Activate();

            ApplicationView.GetForCurrentView().TryResizeView(windowSize);

            #endregion
            #region 윈도우 제목을 설정한다.

            ApplicationView.GetForCurrentView().Title = "GridView 엘리먼트 사용하기";

            #endregion

            List<CustomItem> sourceList = CustomItem.GetList();

            ObservableCollection<CustomItem> sourceCollection = new ObservableCollection<CustomItem>(sourceList);

            this.gridView.ItemsSource = sourceCollection;
        }

        #endregion

        //////////////////////////////////////////////////////////////////////////////////////////////////// Method
        ////////////////////////////////////////////////////////////////////////////////////////// Private

        #region 그리드 뷰 선택 변경시 처리하기 - gridView_SelectionChanged(sender, e)

        /// <summary>
        /// 그리드 뷰 선택 변경시 처리하기
        /// </summary>
        /// <param name="sender">이벤트 발생자</param>
        /// <param name="e">이벤트 인자</param>
        private void gridView_SelectionChanged(object sender, SelectionChangedEventArgs e)
        {
            if(sender is GridView gridView)
            {
                this.selectionTextBlock.Text = $"{gridView.SelectedItems.Count}건의 항목을 선택했습니다.";
            }
        }

        #endregion
        #region 그리드 뷰 항목 클릭시 처리하기 - gridView_ItemClick(sender, e)

        /// <summary>
        /// 그리드 뷰 항목 클릭시 처리하기
        /// </summary>
        /// <param name="sender">이벤트 발생자</param>
        /// <param name="e">이벤트 인자</param>
        private void gridView_ItemClick(object sender, ItemClickEventArgs e)
        {
            this.clikedItemTextBlock.Text = $"{(e.ClickedItem as CustomItem).Title} 항목을 클릭했습니다.";
        }

        #endregion
        #region 항목 템플리트 라디오 버튼 체크시 처리하기 - itemTemplateRadioButton_Checked(sender, e)

        /// <summary>
        /// 항목 템플리트 라디오 버튼 체크시 처리하기
        /// </summary>
        /// <param name="sender">이벤트 발생자</param>
        /// <param name="e">이벤트 인자</param>
        private void itemTemplateRadioButton_Checked(object sender, RoutedEventArgs e)
        {
            object tag = (sender as FrameworkElement).Tag;

            if(tag != null)
            {
                string dataTemplateKey = tag.ToString();

                this.gridView.ItemTemplate = (DataTemplate)Resources[dataTemplateKey];
            }
        }

        #endregion
        #region FlowDirection 속성 반전 토글 버튼 클릭시 처리하기 - reverseFlowDirectionToggleButton_Click(sender, e)

        /// <summary>
        /// FlowDirection 속성 반전 토글 버튼 클릭시 처리하기
        /// </summary>
        /// <param name="sender">이벤트 발생자</param>
        /// <param name="e">이벤트 인자</param>
        private void reverseFlowDirectionToggleButton_Click(object sender, RoutedEventArgs e)
        {
            if(this.gridView.FlowDirection == FlowDirection.LeftToRight)
            {
                this.gridView.FlowDirection = FlowDirection.RightToLeft;
            }
            else
            {
                this.gridView.FlowDirection = FlowDirection.LeftToRight;
            }
        }

        #endregion
        #region IsItemClickEnabled 속성 체크 박스 클릭시 처리하기 - isItemClickEnabledCheckBox_Click(sender, e)

        /// <summary>
        /// IsItemClickEnabled 속성 체크 박스 클릭시 처리하기
        /// </summary>
        /// <param name="sender">이벤트 발생자</param>
        /// <param name="e">이벤트 인자</param>
        private void isItemClickEnabledCheckBox_Click(object sender, RoutedEventArgs e)
        {
            this.clikedItemTextBlock.Text = string.Empty;
        }

        #endregion
        #region SelectionMode 속성 콤보 박스 선택 변경시 처리하기 - selectionModeComboBox_SelectionChanged(sender, e)

        /// <summary>
        /// SelectionMode 속성 콤보 박스 선택 변경시 처리하기
        /// </summary>
        /// <param name="sender">이벤트 발생자</param>
        /// <param name="e">이벤트 인자</param>
        private void selectionModeComboBox_SelectionChanged(object sender, SelectionChangedEventArgs e)
        {
            if(this.gridView != null)
            {
                string selectionMode = e.AddedItems[0].ToString();

                switch(selectionMode)
                {
                    case "None" :

                        this.gridView.SelectionMode = ListViewSelectionMode.None;

                        this.selectionTextBlock.Text = string.Empty;

                        break;

                    case "Single" :

                        this.gridView.SelectionMode = ListViewSelectionMode.Single;

                        break;

                    case "Multiple" :

                        this.gridView.SelectionMode = ListViewSelectionMode.Multiple;

                        break;

                    case "Extended" :

                        this.gridView.SelectionMode = ListViewSelectionMode.Extended;

                        break;
                }
            }
        }

        #endregion
    }
}
728x90
반응형
Posted by 사용자 icodebroker
TAG , , ,

댓글을 달아 주세요