[C#/UWP] ListView 엘리먼트 : 로그 또는 메시지 표시시 아래에서부터 항목 추가하기

TestProject.zip

0.02MB

▶ Message.cs

using System;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Media;

namespace TestProject
{
    /// <summary>
    /// 메시지
    /// </summary>
    public class Message
    {
        //////////////////////////////////////////////////////////////////////////////////////////////////// Property
        ////////////////////////////////////////////////////////////////////////////////////////// Public

        #region 메시지 텍스트 - MessageText

        /// <summary>
        /// 메시지 텍스트
        /// </summary>
        public string MessageText { get; private set; }

        #endregion
        #region 메시지 시간 - MessageTime

        /// <summary>
        /// 메시지 시간
        /// </summary>
        public DateTime MessageTime { get; private set; }

        #endregion
        #region 메시지 정렬 - MessageAlignment

        /// <summary>
        /// 메시지 정렬
        /// </summary>
        public HorizontalAlignment MessageAlignment { get; set; }

        #endregion
        #region 배경색 - BackgroundColor

        /// <summary>
        /// 배경색
        /// </summary>
        public SolidColorBrush BackgroundColor { get; set; }

        #endregion

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

        #region 생성자 - Message(messageText, messageTime, messageAlignment)

        /// <summary>
        /// 생성자
        /// </summary>
        /// <param name="messageText">메시지 텍스트</param>
        /// <param name="messageTime">메시지 시간</param>
        /// <param name="messageAlignment">메시지 정렬</param>
        public Message(string messageText, DateTime messageTime, HorizontalAlignment messageAlignment)
        {
            MessageText      = messageText;
            MessageTime      = messageTime;
            MessageAlignment = messageAlignment;

            if(MessageAlignment == HorizontalAlignment.Left)
            {
                BackgroundColor = (SolidColorBrush)Application.Current.Resources["SystemControlBackgroundAccentBrush"];
            }
            else if(MessageAlignment == HorizontalAlignment.Right)
            {
                BackgroundColor = (SolidColorBrush)Application.Current.Resources["SystemControlErrorTextForegroundBrush"];
            }
        }

        #endregion

        //////////////////////////////////////////////////////////////////////////////////////////////////// Method
        ////////////////////////////////////////////////////////////////////////////////////////// Public

        #region 문자열 구하기 - ToString()

        /// <summary>
        /// 문자열 구하기
        /// </summary>
        /// <returns>문자열</returns>
        public override string ToString()
        {
            return $"{MessageTime.ToString()} {MessageText}";
        }

        #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">
    <Page.Resources>
        <DataTemplate x:Key="ListViewDataTemplateKey" x:DataType="local:Message">
            <Grid
                Margin="5"
                HorizontalAlignment="{x:Bind MessageAlignment}"
                Height="Auto">
                <StackPanel
                    Width="350"
                    MinHeight="75"
                    CornerRadius="4"
                    Padding="10 0 0 10"
                    Background="{x:Bind BackgroundColor}">
                    <TextBlock
                        Padding="0 10 0 0"
                        Foreground="{ThemeResource SystemControlForegroundAltHighBrush}"
                        FontSize="20"
                        Text="{x:Bind MessageText}" />
                    <TextBlock
                        Padding="0 0 0 10"
                        Foreground="{ThemeResource SystemControlForegroundAltMediumHighBrush}"
                        FontSize="15"
                        Text="{x:Bind MessageTime}" />
                </StackPanel>
            </Grid>
        </DataTemplate>
    </Page.Resources>
    <Grid>
        <Grid
            HorizontalAlignment="Center"
            VerticalAlignment="Center">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto" />
                <ColumnDefinition Width="10"   />
                <ColumnDefinition Width="Auto" />
            </Grid.ColumnDefinitions>
            <ListView Name="listView" Grid.Column="0"
                ItemTemplate="{StaticResource ListViewDataTemplateKey}"
                Width="600"
                Height="500"
                BorderThickness="1"
                BorderBrush="{ThemeResource SystemControlForegroundBaseMediumLowBrush}"
                SelectionMode="None">
                <ListView.ItemsPanel>
                    <ItemsPanelTemplate>
                        <ItemsStackPanel 
                            ItemsUpdatingScrollMode="KeepLastItemInView" 
                            VerticalAlignment="Bottom" />
                    </ItemsPanelTemplate>
                </ListView.ItemsPanel>
                <ListView.ItemContainerStyle>
                    <Style TargetType="ListViewItem">
                        <Setter Property="HorizontalContentAlignment" Value="Stretch" />
                    </Style>
                </ListView.ItemContainerStyle>
            </ListView>
            <StackPanel Grid.Column="2">
                <Button
                    Content="메시지 송신"
                    Click="{x:Bind SendMessage}" />
                <Button
                    Margin="0 10 0 0"
                    Content="메시지 수신"
                    Click="{x:Bind ReceiveMessage}" />
            </StackPanel>
        </Grid>
    </Grid>
</Page>

 

300x250

 

▶ MainPage.xaml.cs

using System;
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
    {
        //////////////////////////////////////////////////////////////////////////////////////////////////// Field
        ////////////////////////////////////////////////////////////////////////////////////////// Private

        #region Field

        /// <summary>
        /// 메시지 카운트
        /// </summary>
        private int messageCount;

        #endregion

        //////////////////////////////////////////////////////////////////////////////////////////////////// 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
        ////////////////////////////////////////////////////////////////////////////////////////// Private

        #region 메시지 송신하기 - SendMessage()

        /// <summary>
        /// 메시지 송신하기
        /// </summary>
        private void SendMessage()
        {
            this.listView.Items.Add(new Message($"Message {++messageCount}", DateTime.Now, HorizontalAlignment.Right));
        }

        #endregion
        #region 메시지 수신하기 - ReceiveMessage(e)

        /// <summary>
        /// 메시지 수신하기
        /// </summary>
        private void ReceiveMessage()
        {
            this.listView.Items.Add(new Message($"Message {++messageCount}", DateTime.Now, HorizontalAlignment.Left));
        }

        #endregion
    }
}