[C#/UWP] ListView 엘리먼트 : 이미지를 갖는 항목 표시하기

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
    }
}

 

728x90

 

▶ 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:local="using:TestProject"
    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"
    FontFamily="나눔고딕코딩"
    FontSize="16">
    <Grid>
        <ListView Name="listView"
            Width="600"
            Height="500"
            BorderThickness="1"
            BorderBrush="{ThemeResource SystemControlForegroundBaseMediumLowBrush}"
            AllowDrop="True"
            CanDrag="True"
            CanDragItems="True"
            CanReorderItems="True">
            <ListView.ItemTemplate>
                <DataTemplate x:DataType="local:CustomItem">
                    <Grid Margin="0,12,0,12" AutomationProperties.Name="{x:Bind Title}">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition
                                MinWidth="150"
                                Width="Auto" />
                            <ColumnDefinition Width="*" />
                        </Grid.ColumnDefinitions>
                        <Image
                            MaxHeight="100"
                            Stretch="Fill"
                            Source="{x:Bind ImageLocation}" />
                        <StackPanel Grid.Column="1"
                            Margin="10 0 0 0">
                            <TextBlock
                                Style="{ThemeResource BaseTextBlockStyle}"
                                HorizontalAlignment="Left"
                                Margin="0 0 0 5"
                                LineHeight="20"
                                FontSize="14"
                                FontWeight="SemiBold"
                                Text="{x:Bind Title}" />
                            <TextBlock
                                Style="{ThemeResource BodyTextBlockStyle}"
                                Width="350"
                                FontFamily="Segoe UI"
                                FontWeight="Normal"
                                TextTrimming="CharacterEllipsis"
                                TextWrapping="NoWrap"
                                Text="{x:Bind Description}" />
                            <StackPanel Orientation="Horizontal">
                                <TextBlock
                                    Style="{ThemeResource CaptionTextBlockStyle}"
                                    Margin="0"
                                    Text="조회수" />
                                <TextBlock
                                    Style="{ThemeResource CaptionTextBlockStyle}"
                                    Margin="5 0 0 0"
                                    Text="{x:Bind Views}" />
                                <TextBlock
                                    Margin="5 0 0 0"
                                    FontFamily="Segoe UI"
                                    FontSize="12"
                                    FontWeight="Bold"
                                    Text=" &#x22C5; " />
                                <TextBlock
                                    Style="{ThemeResource CaptionTextBlockStyle}"
                                    Text="좋아요 " />
                                <TextBlock
                                    Style="{ThemeResource CaptionTextBlockStyle}"
                                    Margin="5 0 0 0"
                                    Text="{x:Bind Likes}" />
                            </StackPanel>
                        </StackPanel>
                    </Grid>
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>
    </Grid>
</Page>

 

300x250

 

▶ MainPage.xaml.cs

using Windows.Foundation;
using Windows.Graphics.Display;
using Windows.UI.ViewManagement;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Navigation;

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 = "ListView 엘리먼트 : 이미지를 갖는 항목 표시하기";

            #endregion
        }

        #endregion

        //////////////////////////////////////////////////////////////////////////////////////////////////// Method
        ////////////////////////////////////////////////////////////////////////////////////////// Protected

        #region 탐색되는 경우 처리하기 - OnNavigatedTo(e)

        /// <summary>
        /// 탐색되는 경우 처리하기
        /// </summary>
        /// <param name="e">이벤트 인자</param>
        protected override void OnNavigatedTo(NavigationEventArgs e)
        {
            this.listView.ItemsSource = CustomItem.GetList();
        }

        #endregion
    }
}