WINUI2.5 Archives - 8 중 7 번째 페이지

[C#/WINUI2.5] ListBox 엘리먼트 : SelectionChanged 이벤트 사용하기

■ ListBox 엘리먼트의 SelectionChanged 이벤트를 사용하는 방법을 보여준다. ▶ 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"
    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"
    FontFamily="나눔고딕코딩"
    FontSize="16">
    <Grid>
        <StackPanel
            HorizontalAlignment="Center"
            VerticalAlignment="Center">
            <ListBox Name="listBox"
                HorizontalAlignment="Center"
                Width="200"
                SelectionChanged="listBox_SelectionChanged">
                <x:String>Blue</x:String>
                <x:String>Green</x:String>
                <x:String>Red</x:String>
                <x:String>Yellow</x:String>
            </ListBox>
            <Rectangle Name="rectangle"
                VerticalAlignment="Center"
                Margin="0 10 0 0"
                Width="100"
                Height="30" />
        </StackPanel>
    </Grid>
</Page>

<Page x:Class="TestProject.MainPage"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"

FontFamily="나눔고딕코딩"

FontSize="16">

<Grid>

<StackPanel

HorizontalAlignment="Center"

VerticalAlignment="Center">

<ListBox Name="listBox"

HorizontalAlignment="Center"

Width="200"

SelectionChanged="listBox_SelectionChanged">

<x:String>Blue</x:String>

<x:String>Green</x:String>

<x:String>Red</x:String>

<x:String>Yellow</x:String>

</ListBox>

<Rectangle Name="rectangle"

VerticalAlignment="Center"

Margin="0 10 0 0"

Width="100"

Height="30" />

</StackPanel>

</Grid>

</Page>

▶ 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.Media;

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 = "ListBox 엘리먼트 : SelectionChanged 이벤트 사용하기";

            #endregion
        }

        #endregion

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

        #region 리스트 박스 선택 변경시 처리하기 - listBox_SelectionChanged(sender, e)

        /// <summary>
        /// 리스트 박스 선택 변경시 처리하기
        /// </summary>
        /// <param name="sender">이벤트 발생자</param>
        /// <param name="e">이벤트 인자</param>
        private void listBox_SelectionChanged(object sender, SelectionChangedEventArgs e)
        {
            string colorName = e.AddedItems[0].ToString();

            switch(colorName)
            {
                case "Blue"   : this.rectangle.Fill = new SolidColorBrush(Windows.UI.Colors.Blue  ); break;
                case "Green"  : this.rectangle.Fill = new SolidColorBrush(Windows.UI.Colors.Green ); break;
                case "Red"    : this.rectangle.Fill = new SolidColorBrush(Windows.UI.Colors.Red   ); break;
                case "Yellow" : this.rectangle.Fill = new SolidColorBrush(Windows.UI.Colors.Yellow); break;
            }
        }

        #endregion
    }
}

using Windows.Foundation;

using Windows.Graphics.Display;

using Windows.UI.ViewManagement;

using Windows.UI.Xaml;

using Windows.UI.Xaml.Controls;

using Windows.UI.Xaml.Media;

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 = "ListBox 엘리먼트 : SelectionChanged 이벤트 사용하기";

#endregion

}

#endregion

//////////////////////////////////////////////////////////////////////////////////////////////////// Method

////////////////////////////////////////////////////////////////////////////////////////// Private

#region 리스트 박스 선택 변경시 처리하기 - listBox_SelectionChanged(sender, e)

/// <summary>

/// 리스트 박스 선택 변경시 처리하기

/// </summary>

/// <param name="sender">이벤트 발생자</param>

/// <param name="e">이벤트 인자</param>

private void listBox_SelectionChanged(object sender, SelectionChangedEventArgs e)

{

string colorName = e.AddedItems[0].ToString();

switch(colorName)

{

case "Blue" : this.rectangle.Fill = new SolidColorBrush(Windows.UI.Colors.Blue ); break;

case "Green" : this.rectangle.Fill = new SolidColorBrush(Windows.UI.Colors.Green ); break;

case "Red" : this.rectangle.Fill = new SolidColorBrush(Windows.UI.Colors.Red ); break;

case "Yellow" : this.rectangle.Fill = new SolidColorBrush(Windows.UI.Colors.Yellow); break;

}

#endregion

}

TestProject.zip

[C#/WINUI2.5] GridView 엘리먼트 사용하기

■ GridView 엘리먼트를 사용하는 방법을 보여준다. ▶ 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
    }
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

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>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

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

<Image

AutomationProperties.Name="{x:Bind Title}"

AutomationProperties.AccessibilityView="Raw"

Width="190"

Height="130"

Stretch="UniformToFill"

Source="{x:Bind ImageLocation}" />

</DataTemplate>

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

<Grid.ColumnDefinitions>

</Grid.ColumnDefinitions>

</StackPanel>

</StackPanel>

</Grid>

</DataTemplate>

<StackPanel

Width="240"

Orientation="Horizontal">

<TextBlock

Style="{StaticResource TitleTextBlockStyle}"

Margin="10 0 0 0"

Text="{x:Bind Title}" />

</StackPanel>

</DataTemplate>

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

<TextBlock

Style="{ThemeResource CaptionTextBlockStyle}"

Foreground="{ThemeResource SystemControlForegroundAltHighBrush}"

Text="좋아요 : " />

<TextBlock

Style="{ThemeResource CaptionTextBlockStyle}"

Foreground="{ThemeResource SystemControlForegroundAltHighBrush}"

Text="{x:Bind Likes}" />

</StackPanel>

</Grid>

</DataTemplate>

</Page.Resources>

<Grid>

<Grid

HorizontalAlignment="Center"

VerticalAlignment="Center">

<Grid.ColumnDefinitions>

</Grid.ColumnDefinitions>

<Grid.RowDefinitions>

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

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

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

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

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

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

}

TestProject.zip

[C#/WINUI2.5] GridView 엘리먼트 : 커스텀 레이아웃 설정하기

■ GridView 엘리먼트에서 커스텀 레이아웃을 설정하는 방법을 보여준다. ▶ 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
    }
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

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="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="Auto" />
                <ColumnDefinition Width="50"   />
                <ColumnDefinition Width="Auto" />
            </Grid.ColumnDefinitions>
            <GridView Name="gridView" Grid.Column="0"
                ItemTemplate="{StaticResource ImageOverlayDataTemplateKey}">
                <GridView.ItemContainerStyle>
                    <Style TargetType="GridViewItem">
                        <Setter Property="Margin" Value="5" />
                    </Style>
                </GridView.ItemContainerStyle>
                <GridView.ItemsPanel>
                    <ItemsPanelTemplate>
                        <ItemsWrapGrid
                            Orientation="Horizontal"
                            MaximumRowsOrColumns="3"
                            Loaded="itemsWrapGrid_Loaded" />
                    </ItemsPanelTemplate>
                </GridView.ItemsPanel>
            </GridView>
            <StackPanel Grid.Column="2">
                <StackPanel.Resources>
                    <Style x:Key="DefaultNumberBoxStyleKey" TargetType="muxc:NumberBox">
                        <Setter Property="SpinButtonPlacementMode"    Value="Inline"  />
                        <Setter Property="SmallChange"                Value="1"       />
                        <Setter Property="HorizontalAlignment"        Value="Stretch" />
                        <Setter Property="HorizontalContentAlignment" Value="Stretch" />
                        <Setter Property="MaxWidth"                   Value="250"     />
                        <Setter Property="Margin"                     Value="0 0 0 0" />
                    </Style>
                </StackPanel.Resources>
                <muxc:NumberBox Name="columnSpaceNumberBox"
                    Style="{ThemeResource DefaultNumberBoxStyleKey}"
                    AutomationProperties.Name="space between columns"
                    Minimum="0"
                    Maximum="100"
                    Value="5"
                    Header="컬럼 간격"
                    ValueChanged="numberBox_ValueChanged" />
                <muxc:NumberBox Name="rowSpaceNumberBox"
                    Style="{ThemeResource DefaultNumberBoxStyleKey}"
                    AutomationProperties.Name="space between rows"
                    Margin="0 10 0 0"
                    Minimum="0"
                    Maximum="100"
                    Value="5"
                    Header="행 간격"
                    ValueChanged="numberBox_ValueChanged" />
                <muxc:NumberBox Name="wrapItemCountNumberBox"
                    Style="{ThemeResource DefaultNumberBoxStyleKey}"
                    AutomationProperties.Name="maximum number of items before wrapping"
                    Margin="0 10 0 0"
                    Minimum="1"
                    Maximum="8"
                    Value="3"
                    Header="랩핑 전 항목 최대 수"
                    ValueChanged="numberBox_ValueChanged" />
            </StackPanel>
        </Grid>
    </Grid>
</Page>

100

101

102

103

104

105

106

107

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

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

<TextBlock

Style="{ThemeResource CaptionTextBlockStyle}"

Foreground="{ThemeResource SystemControlForegroundAltHighBrush}"

Text="좋아요 : " />

<TextBlock

Style="{ThemeResource CaptionTextBlockStyle}"

Foreground="{ThemeResource SystemControlForegroundAltHighBrush}"

Text="{x:Bind Likes}" />

</StackPanel>

</Grid>

</DataTemplate>

</Page.Resources>

<Grid>

<Grid

HorizontalAlignment="Center"

VerticalAlignment="Center">

<Grid.ColumnDefinitions>

</Grid.ColumnDefinitions>

<GridView Name="gridView" Grid.Column="0"

ItemTemplate="{StaticResource ImageOverlayDataTemplateKey}">

<GridView.ItemContainerStyle>

</Style>

</GridView.ItemContainerStyle>

<GridView.ItemsPanel>

<ItemsWrapGrid

Orientation="Horizontal"

MaximumRowsOrColumns="3"

Loaded="itemsWrapGrid_Loaded" />

</ItemsPanelTemplate>

</GridView.ItemsPanel>

</GridView>

<StackPanel.Resources>

</Style>

</StackPanel.Resources>

<muxc:NumberBox Name="columnSpaceNumberBox"

Style="{ThemeResource DefaultNumberBoxStyleKey}"

AutomationProperties.Name="space between columns"

Minimum="0"

Maximum="100"

Value="5"

Header="컬럼 간격"

ValueChanged="numberBox_ValueChanged" />

<muxc:NumberBox Name="rowSpaceNumberBox"

Style="{ThemeResource DefaultNumberBoxStyleKey}"

AutomationProperties.Name="space between rows"

Margin="0 10 0 0"

Minimum="0"

Maximum="100"

Value="5"

Header="행 간격"

ValueChanged="numberBox_ValueChanged" />

<muxc:NumberBox Name="wrapItemCountNumberBox"

Style="{ThemeResource DefaultNumberBoxStyleKey}"

AutomationProperties.Name="maximum number of items before wrapping"

Margin="0 10 0 0"

Minimum="1"

Maximum="8"

Value="3"

Header="랩핑 전 항목 최대 수"

ValueChanged="numberBox_ValueChanged" />

</StackPanel>

</Grid>

</Page>

▶ MainPage.xaml.cs


using Microsoft.UI.Xaml.Controls;
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
    {
        //////////////////////////////////////////////////////////////////////////////////////////////////// Field
        ////////////////////////////////////////////////////////////////////////////////////////// Private

        #region Field

        /// <summary>
        /// 항목 랩 그리그
        /// </summary>
        private ItemsWrapGrid itemsWrapGrid = null;

        #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 = "GridView 엘리먼트 : 커스텀 레이아웃 설정하기";

            #endregion

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

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

            this.gridView.ItemsSource = sourceCollection;
        }

        #endregion

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

        #region 항목 랩 그리그 로드시 처리하기 - itemsWrapGrid_Loaded(sender, e)

        /// <summary>
        /// 항목 랩 그리그 로드시 처리하기
        /// </summary>
        /// <param name="sender">이벤트 발생자</param>
        /// <param name="e">이벤트 인자</param>
        private void itemsWrapGrid_Loaded(object sender, RoutedEventArgs e)
        {
            this.itemsWrapGrid = sender as ItemsWrapGrid;
        }

        #endregion
        #region 숫자 박스 값 변경시 처리하기 - numberBox_ValueChanged(sender, e)

        /// <summary>
        /// 숫자 박스 값 변경시 처리하기
        /// </summary>
        /// <param name="sender">이벤트 발생자</param>
        /// <param name="e">이벤트 인자</param>
        private void numberBox_ValueChanged(NumberBox sender, NumberBoxValueChangedEventArgs e)
        {
            if(this.itemsWrapGrid == null)
            {
                return;
            }

            if(sender == this.wrapItemCountNumberBox)
            {
                this.itemsWrapGrid.MaximumRowsOrColumns = (int)this.wrapItemCountNumberBox.Value;

                return;
            }

            int rowSpace    = (int)this.rowSpaceNumberBox.Value;
            int columnSpace = (int)this.columnSpaceNumberBox.Value;

            for(int i = 0; i < this.gridView.Items.Count; i++)
            {
                GridViewItem item = this.gridView.ContainerFromIndex(i) as GridViewItem;

                Thickness newMargin = item.Margin;

                newMargin.Left   = columnSpace;
                newMargin.Top    = rowSpace;
                newMargin.Right  = columnSpace;
                newMargin.Bottom = rowSpace;

                item.Margin = newMargin;
            }
        }

        #endregion
    }
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

using Microsoft.UI.Xaml.Controls;

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

{

//////////////////////////////////////////////////////////////////////////////////////////////////// Field

////////////////////////////////////////////////////////////////////////////////////////// Private

#region Field

/// <summary>

/// 항목 랩 그리그

/// </summary>

private ItemsWrapGrid itemsWrapGrid = null;

#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 = "GridView 엘리먼트 : 커스텀 레이아웃 설정하기";

#endregion

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

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

this.gridView.ItemsSource = sourceCollection;

}

#endregion

//////////////////////////////////////////////////////////////////////////////////////////////////// Method

////////////////////////////////////////////////////////////////////////////////////////// Private

#region 항목 랩 그리그 로드시 처리하기 - itemsWrapGrid_Loaded(sender, e)

/// <summary>

/// 항목 랩 그리그 로드시 처리하기

/// </summary>

/// <param name="sender">이벤트 발생자</param>

/// <param name="e">이벤트 인자</param>

private void itemsWrapGrid_Loaded(object sender, RoutedEventArgs e)

{

this.itemsWrapGrid = sender as ItemsWrapGrid;

}

#endregion

#region 숫자 박스 값 변경시 처리하기 - numberBox_ValueChanged(sender, e)

/// <summary>

/// 숫자 박스 값 변경시 처리하기

/// </summary>

/// <param name="sender">이벤트 발생자</param>

/// <param name="e">이벤트 인자</param>

private void numberBox_ValueChanged(NumberBox sender, NumberBoxValueChangedEventArgs e)

{

if(this.itemsWrapGrid == null)

{

return;

}

if(sender == this.wrapItemCountNumberBox)

{

this.itemsWrapGrid.MaximumRowsOrColumns = (int)this.wrapItemCountNumberBox.Value;

return;

}

int rowSpace = (int)this.rowSpaceNumberBox.Value;

int columnSpace = (int)this.columnSpaceNumberBox.Value;

for(int i = 0; i < this.gridView.Items.Count; i++)

{

GridViewItem item = this.gridView.ContainerFromIndex(i) as GridViewItem;

Thickness newMargin = item.Margin;

newMargin.Left = columnSpace;

newMargin.Top = rowSpace;

newMargin.Right = columnSpace;

newMargin.Bottom = rowSpace;

item.Margin = newMargin;

}

#endregion

}

TestProject.zip

[C#/WINUI2.5] GridView 엘리먼트 : ItemTemplate 속성 사용하기

■ GridView 엘리먼트의 ItemTemplate 속성을 사용하는 방법을 보여준다. ▶ 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
    }
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

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: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>
    </Page.Resources>
    <Grid>
        <StackPanel
            HorizontalAlignment="Center"
            VerticalAlignment="Center">
            <GridView Name="gridView"
                ItemTemplate="{StaticResource ImageDataTemplateKey}"
                HorizontalAlignment="Center"
                IsItemClickEnabled="True"
                SelectionMode="Single"
                ItemClick="gridView_ItemClick" />
            <TextBlock Name="textBlock"
                HorizontalAlignment="Center"
                Margin="0 10 0 0" />
        </StackPanel>
    </Grid>
</Page>

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

<Image

AutomationProperties.Name="{x:Bind Title}"

AutomationProperties.AccessibilityView="Raw"

Width="190"

Height="130"

Stretch="UniformToFill"

Source="{x:Bind ImageLocation}" />

</DataTemplate>

</Page.Resources>

<Grid>

<StackPanel

HorizontalAlignment="Center"

VerticalAlignment="Center">

<GridView Name="gridView"

ItemTemplate="{StaticResource ImageDataTemplateKey}"

HorizontalAlignment="Center"

IsItemClickEnabled="True"

SelectionMode="Single"

ItemClick="gridView_ItemClick" />

<TextBlock Name="textBlock"

HorizontalAlignment="Center"

Margin="0 10 0 0" />

</StackPanel>

</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 엘리먼트 : ItemTemplate 속성 사용하기";

            #endregion

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

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

            this.gridView.ItemsSource = sourceCollection;
        }

        #endregion

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

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

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

        #endregion
    }
}

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 엘리먼트 : ItemTemplate 속성 사용하기";

#endregion

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

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

this.gridView.ItemsSource = sourceCollection;

}

#endregion

//////////////////////////////////////////////////////////////////////////////////////////////////// Method

////////////////////////////////////////////////////////////////////////////////////////// Private

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

/// <summary>

/// 그리드 뷰 항목 클릭시 처리하기

/// </summary>

/// <param name="sender">이벤트 발생자</param>

/// <param name="e">이벤트 인자</param>

private void gridView_ItemClick(object sender, ItemClickEventArgs e)

{

this.textBlock.Text = $"{(e.ClickedItem as CustomItem).Title} 항목을 클릭했습니다.";

}

#endregion

}

TestProject.zip

[C#/WINUI2.5] FlipView 엘리먼트 : ItemsPanel 속성을 사용해 수직 플립 뷰 만들기

■ FlipView 엘리먼트의 ItemsPanel 속성을 사용해 수직 플립 뷰를 만드는 방법을 보여준다. ▶ 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"
    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"
    FontFamily="나눔고딕코딩"
    FontSize="16">
    <Grid>
        <FlipView
            MaxWidth="400"
            Height="270">
            <Image Source="ms-appx:///IMAGE/cliff.jpg"   />
            <Image Source="ms-appx:///IMAGE/grapes.jpg"  />
            <Image Source="ms-appx:///IMAGE/rainier.jpg" />
            <Image Source="ms-appx:///IMAGE/sunset.jpg"  />
            <Image Source="ms-appx:///IMAGE/valley.jpg"  />
            <FlipView.ItemsPanel >
                <ItemsPanelTemplate>
                    <VirtualizingStackPanel Orientation="Vertical" />
                </ItemsPanelTemplate>
            </FlipView.ItemsPanel>
        </FlipView>
    </Grid>
</Page>

<Page x:Class="TestProject.MainPage"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"

FontFamily="나눔고딕코딩"

FontSize="16">

<Grid>

<FlipView

MaxWidth="400"

Height="270">

<FlipView.ItemsPanel >

</ItemsPanelTemplate>

</FlipView.ItemsPanel>

</FlipView>

</Grid>

</Page>

▶ MainPage.xaml.cs


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 = "FlipView 엘리먼트 : ItemsPanel 속성을 사용해 수직 플립 뷰 만들기";

            #endregion
        }

        #endregion
    }
}

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 = "FlipView 엘리먼트 : ItemsPanel 속성을 사용해 수직 플립 뷰 만들기";

#endregion

}

#endregion

}

TestProject.zip

[C#/WINUI2.5] FlipView 엘리먼트 : ItemTemplate 속성 사용하기

■ FlipView 엘리먼트의 ItemTemplate 속성을 사용하는 방법을 보여준다. ▶ ColorItem.cs


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

namespace TestProject
{
    /// <summary>
    /// 색상 항목
    /// </summary>
    public class ColorItem
    {
        //////////////////////////////////////////////////////////////////////////////////////////////////// Property
        ////////////////////////////////////////////////////////////////////////////////////////// Public

        #region 명칭 - Name

        /// <summary>
        /// 명칭
        /// </summary>
        public string Name { get; set; }

        #endregion
        #region 브러시 - Brush

        /// <summary>
        /// 브러시
        /// </summary>
        public Brush Brush { get; set; }

        #endregion

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

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

        /// <summary>
        /// 리스트 구하기
        /// </summary>
        /// <returns>리스트</returns>
        public static List<ColorItem> GetList()
        {
            List<ColorItem> list = new List<ColorItem>();

            list.Add(new ColorItem { Name = "Blue" , Brush = new SolidColorBrush(Colors.Blue ) });
            list.Add(new ColorItem { Name = "Green", Brush = new SolidColorBrush(Colors.Green) });
            list.Add(new ColorItem { Name = "Red"  , Brush = new SolidColorBrush(Colors.Red  ) });

            return list;
        }

        #endregion
    }
}

using System.Collections.Generic;

using Windows.UI;

using Windows.UI.Xaml.Media;

namespace TestProject

{

/// <summary>

/// 색상 항목

/// </summary>

public class ColorItem

{

//////////////////////////////////////////////////////////////////////////////////////////////////// Property

////////////////////////////////////////////////////////////////////////////////////////// Public

#region 명칭 - Name

/// <summary>

/// 명칭

/// </summary>

public string Name { get; set; }

#endregion

#region 브러시 - Brush

/// <summary>

/// 브러시

/// </summary>

public Brush Brush { get; set; }

#endregion

//////////////////////////////////////////////////////////////////////////////////////////////////// Method

////////////////////////////////////////////////////////////////////////////////////////// Static

//////////////////////////////////////////////////////////////////////////////// Public

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

/// <summary>

/// 리스트 구하기

/// </summary>

/// <returns>리스트</returns>

public static List<ColorItem> GetList()

{

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

list.Add(new ColorItem { Name = "Blue" , Brush = new SolidColorBrush(Colors.Blue ) });

list.Add(new ColorItem { Name = "Green", Brush = new SolidColorBrush(Colors.Green) });

list.Add(new ColorItem { Name = "Red" , Brush = new SolidColorBrush(Colors.Red ) });

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:local="using:TestProject"
    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"
    FontFamily="나눔고딕코딩"
    FontSize="16">
    <Grid>
        <FlipView Name="flipView"
            MaxWidth="400"
            Height="250"
            BorderThickness="1"
            BorderBrush="Black">
            <FlipView.ItemTemplate>
                <DataTemplate x:DataType="local:ColorItem">
                    <Grid>
                        <Border Background="{x:Bind Brush}">
                            <TextBlock
                                Style="{StaticResource TitleTextBlockStyle}"
                                HorizontalAlignment="Center"
                                VerticalAlignment="Center"
                                Foreground="White"
                                FontWeight="Bold"
                                FontSize="30"
                                Text="{x:Bind Name}" />
                        </Border>
                    </Grid>
                </DataTemplate>
            </FlipView.ItemTemplate>
        </FlipView>
    </Grid>
</Page>

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

<FlipView Name="flipView"

MaxWidth="400"

Height="250"

BorderThickness="1"

BorderBrush="Black">

<FlipView.ItemTemplate>

<Grid>

<TextBlock

Style="{StaticResource TitleTextBlockStyle}"

HorizontalAlignment="Center"

VerticalAlignment="Center"

Foreground="White"

FontWeight="Bold"

FontSize="30"

Text="{x:Bind Name}" />

</Border>

</Grid>

</DataTemplate>

</FlipView.ItemTemplate>

</FlipView>

</Grid>

</Page>

▶ MainPage.xaml.cs


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 = "FlipView 엘리먼트 : ItemTemplate 속성 사용하기";

            #endregion

            this.flipView.ItemsSource = ColorItem.GetList();
        }

        #endregion
    }
}

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 = "FlipView 엘리먼트 : ItemTemplate 속성 사용하기";

#endregion

this.flipView.ItemsSource = ColorItem.GetList();

}

#endregion

}

TestProject.zip

[C#/WINUI2.5] FlipView 엘리먼트 사용하기

■ FlipView 엘리먼트를 사용하는 방법을 보여준다. ▶ 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"
    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"
    FontFamily="나눔고딕코딩"
    FontSize="16">
    <Grid>
        <FlipView
            MaxWidth="400"
            Height="270">
            <Image Source="ms-appx:///IMAGE/cliff.jpg"   />
            <Image Source="ms-appx:///IMAGE/grapes.jpg"  />
            <Image Source="ms-appx:///IMAGE/rainier.jpg" />
            <Image Source="ms-appx:///IMAGE/sunset.jpg"  />
            <Image Source="ms-appx:///IMAGE/valley.jpg"  />
        </FlipView>
    </Grid>
</Page>

<Page x:Class="TestProject.MainPage"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"

FontFamily="나눔고딕코딩"

FontSize="16">

<Grid>

<FlipView

MaxWidth="400"

Height="270">

</FlipView>

</Grid>

</Page>

▶ MainPage.xaml.cs


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 = "FlipView 엘리먼트 사용하기";

            #endregion
        }

        #endregion
    }
}

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 = "FlipView 엘리먼트 사용하기";

#endregion

}

#endregion

}

TestProject.zip

[C#/WINUI2.5] ToggleSwitch 엘리먼트 : OnContent/OffContent 속성 사용하기

■ ToggleSwitch 엘리먼트의 OnContent/OffContent 속성을 사용하는 방법을 보여준다. ▶ 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"
    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"
    FontFamily="나눔고딕코딩"
    FontSize="16">
    <Grid>
        <StackPanel
            HorizontalAlignment="Center"
            VerticalAlignment="Center">
            <ToggleSwitch Name="toggleSwitch"
                HorizontalAlignment="Center"
                Header="작업"
                OnContent="작동중"
                OffContent="대기중"
                IsOn="True" />
            <ProgressRing
                HorizontalAlignment="Left"
                Margin="10 10 0 0"
                IsActive="{x:Bind toggleSwitch.IsOn, Mode=OneWay}" />
        </StackPanel>
    </Grid>
</Page>

<Page x:Class="TestProject.MainPage"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"

FontFamily="나눔고딕코딩"

FontSize="16">

<Grid>

<StackPanel

HorizontalAlignment="Center"

VerticalAlignment="Center">

<ToggleSwitch Name="toggleSwitch"

HorizontalAlignment="Center"

Header="작업"

OnContent="작동중"

OffContent="대기중"

IsOn="True" />

<ProgressRing

HorizontalAlignment="Left"

Margin="10 10 0 0"

IsActive="{x:Bind toggleSwitch.IsOn, Mode=OneWay}" />

</StackPanel>

</Grid>

</Page>

▶ MainPage.xaml.cs


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 = "ToggleSwitch 엘리먼트 : OnContent/OffContent 속성 사용하기";

            #endregion
        }

        #endregion
    }
}

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 = "ToggleSwitch 엘리먼트 : OnContent/OffContent 속성 사용하기";

#endregion

}

#endregion

}

TestProject.zip

[C#/WINUI2.5] Slider 엘리먼트 사용하기

■ Slider 엘리먼트를 사용하는 기본적인 방법을 보여준다. ▶ 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"
    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"
    FontFamily="나눔고딕코딩"
    FontSize="16">
    <Grid>
        <Slider
            HorizontalAlignment="Center"
            VerticalAlignment="Center"
            Width="500"
            Header="테스트"
            Orientation="Horizontal"
            Minimum="0"
            Maximum="1000"
            LargeChange="100"
            SmallChange="10"
            StepFrequency="10"
            TickFrequency="100"
            TickPlacement="Outside"
            Value="800" />
    </Grid>
</Page>

<Page x:Class="TestProject.MainPage"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"

FontFamily="나눔고딕코딩"

FontSize="16">

<Grid>

<Slider

HorizontalAlignment="Center"

VerticalAlignment="Center"

Width="500"

Header="테스트"

Orientation="Horizontal"

Minimum="0"

Maximum="1000"

LargeChange="100"

SmallChange="10"

StepFrequency="10"

TickFrequency="100"

TickPlacement="Outside"

Value="800" />

</Grid>

</Page>

▶ MainPage.xaml.cs


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 = "Slider 엘리먼트 사용하기";

            #endregion
        }

        #endregion
    }
}

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 = "Slider 엘리먼트 사용하기";

#endregion

}

#endregion

}

TestProject.zip

[C#/WINUI2.5] RatingControl 엘리먼트 : PlaceholderValue 속성 사용하기

■ RatingControl 엘리먼트의 PlaceholderValue 속성을 사용하는 방법을 보여준다. ▶ 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"
    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"
    FontFamily="나눔고딕코딩"
    FontSize="16">
    <Grid>
        <StackPanel
            HorizontalAlignment="Center"
            VerticalAlignment="Center">
            <muxc:RatingControl
                HorizontalAlignment="Center"
                PlaceholderValue="{x:Bind slider.Value, Mode=TwoWay}" />
            <Slider Name="slider"
                Margin="0 10 0 0"
                Header="PlaceholderValue"
                Minimum="0"
                Maximum="5"
                StepFrequency="0.5"
                SmallChange="0.5"
                IsFocusEngagementEnabled="False" />
        </StackPanel>
    </Grid>
</Page>

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

Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"

FontFamily="나눔고딕코딩"

FontSize="16">

<Grid>

<StackPanel

HorizontalAlignment="Center"

VerticalAlignment="Center">

<muxc:RatingControl

HorizontalAlignment="Center"

PlaceholderValue="{x:Bind slider.Value, Mode=TwoWay}" />

<Slider Name="slider"

Margin="0 10 0 0"

Header="PlaceholderValue"

Minimum="0"

Maximum="5"

StepFrequency="0.5"

SmallChange="0.5"

IsFocusEngagementEnabled="False" />

</StackPanel>

</Grid>

</Page>

▶ MainPage.xaml.cs


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 = "RatingControl 엘리먼트 : PlaceholderValue 속성 사용하기";

            #endregion
        }

        #endregion
    }
}

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 = "RatingControl 엘리먼트 : PlaceholderValue 속성 사용하기";

#endregion

}

#endregion

}

TestProject.zip

[C#/WINUI2.5] RatingControl 엘리먼트 사용하기

■ RatingControl 엘리먼트를 사용하는 방법을 보여준다. ▶ 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"
    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"
    FontFamily="나눔고딕코딩"
    FontSize="16">
    <Grid>
        <StackPanel
            HorizontalAlignment="Center"
            VerticalAlignment="Center">
            <muxc:RatingControl Name="ratingControl"
                IsClearEnabled="True"
                IsReadOnly="False">
                <muxc:RatingControl.Resources>
                   <SolidColorBrush x:Key="RatingControlSelectedForeground"   Color="Gold" />
                   <SolidColorBrush x:Key="RatingControlUnselectedForeground" Color="Gray" />
                </muxc:RatingControl.Resources>
            </muxc:RatingControl>
            <TextBlock Name="textBlock"
                HorizontalAlignment="Center"
                Margin="0 10 0 0"
                Text="{x:Bind ratingControl.Value, Mode=OneWay}" />
        </StackPanel>
    </Grid>
</Page>

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

Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"

FontFamily="나눔고딕코딩"

FontSize="16">

<Grid>

<StackPanel

HorizontalAlignment="Center"

VerticalAlignment="Center">

<muxc:RatingControl Name="ratingControl"

IsClearEnabled="True"

IsReadOnly="False">

<muxc:RatingControl.Resources>

</muxc:RatingControl.Resources>

</muxc:RatingControl>

<TextBlock Name="textBlock"

HorizontalAlignment="Center"

Margin="0 10 0 0"

Text="{x:Bind ratingControl.Value, Mode=OneWay}" />

</StackPanel>

</Grid>

</Page>

▶ MainPage.xaml.cs


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 = "RatingControl 엘리먼트 사용하기";

            #endregion
        }

        #endregion
    }
}

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 = "RatingControl 엘리먼트 사용하기";

#endregion

}

#endregion

}

TestProject.zip

[C#/WINUI2.5] RadioButtons 엘리먼트 사용하기

■ RadioButtons 엘리먼트를 사용하는 방법을 보여준다. ▶ 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"
    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"
    FontFamily="나눔고딕코딩"
    FontSize="16">
    <Grid>
        <StackPanel
            HorizontalAlignment="Center"
            VerticalAlignment="Center">
            <muxc:RadioButtons
                HorizontalAlignment="Center"
                Header="옵션 :">
                <RadioButton Content="옵션 1" Checked="radioButton_Checked" />
                <RadioButton Content="옵션 2" Checked="radioButton_Checked" />
                <RadioButton Content="옵션 3" Checked="radioButton_Checked" />
            </muxc:RadioButtons>
            <TextBlock Name="textBlock"
                HorizontalAlignment="Center"
                Margin="0 10 0 0"
                Text="옵션을 선택해 주시기 바립니다." />
        </StackPanel>
    </Grid>
</Page>

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

Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"

FontFamily="나눔고딕코딩"

FontSize="16">

<Grid>

<StackPanel

HorizontalAlignment="Center"

VerticalAlignment="Center">

<muxc:RadioButtons

HorizontalAlignment="Center"

Header="옵션 :">

</muxc:RadioButtons>

<TextBlock Name="textBlock"

HorizontalAlignment="Center"

Margin="0 10 0 0"

Text="옵션을 선택해 주시기 바립니다." />

</StackPanel>

</Grid>

</Page>

▶ MainPage.xaml.cs


using System.Collections.Generic;
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 = "RadioButtons 엘리먼트 사용하기";

            #endregion
        }

        #endregion

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

        #region 라디오 버튼 체크시 처리하기 - radioButton_Checked(sender, e)

        /// <summary>
        /// 라디오 버튼 체크시 처리하기
        /// </summary>
        /// <param name="sender">이벤트 발생자</param>
        /// <param name="e">이벤트 인자</param>
        private void radioButton_Checked(object sender, RoutedEventArgs e)
        {
            this.textBlock.Text = $"{(sender as RadioButton).Content.ToString()} 항목을 선택했습니다.";
        }

        #endregion
    }
}

using System.Collections.Generic;

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 = "RadioButtons 엘리먼트 사용하기";

#endregion

}

#endregion

//////////////////////////////////////////////////////////////////////////////////////////////////// Method

////////////////////////////////////////////////////////////////////////////////////////// Private

#region 라디오 버튼 체크시 처리하기 - radioButton_Checked(sender, e)

/// <summary>

/// 라디오 버튼 체크시 처리하기

/// </summary>

/// <param name="sender">이벤트 발생자</param>

/// <param name="e">이벤트 인자</param>

private void radioButton_Checked(object sender, RoutedEventArgs e)

{

this.textBlock.Text = $"{(sender as RadioButton).Content.ToString()} 항목을 선택했습니다.";

}

#endregion

}

TestProject.zip

[C#/WINUI2.5] ComboBox 엘리먼트 : TextSubmitted 이벤트 사용하기

■ ComboBox 엘리먼트의 TextSubmitted 이벤트를 사용하는 방법을 보여준다. ▶ 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"
    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"
    FontFamily="나눔고딕코딩"
    FontSize="16">
    <Grid>
        <StackPanel
            HorizontalAlignment="Center"
            VerticalAlignment="Center">
            <ComboBox Name="comboBox"
                HorizontalAlignment="Center"
                Width="200"
                Header="폰트 크기"
                IsEditable="True"
                ItemsSource="{x:Bind fontSizeList}"
                Loaded="comboBox_Loaded"
                TextSubmitted="comboBox_TextSubmitted" />
            <TextBlock Name="textBlock"
                HorizontalAlignment="Center"
                Margin="0 10 0 0"
                FontFamily="Segoe UI"
                FontSize="{x:Bind (x:Double)comboBox.SelectedValue, Mode=OneWay}"
                Text="You can set the font size used for this text." />
        </StackPanel>
    </Grid>
</Page>

<Page x:Class="TestProject.MainPage"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"

FontFamily="나눔고딕코딩"

FontSize="16">

<Grid>

<StackPanel

HorizontalAlignment="Center"

VerticalAlignment="Center">

<ComboBox Name="comboBox"

HorizontalAlignment="Center"

Width="200"

Header="폰트 크기"

IsEditable="True"

ItemsSource="{x:Bind fontSizeList}"

Loaded="comboBox_Loaded"

TextSubmitted="comboBox_TextSubmitted" />

<TextBlock Name="textBlock"

HorizontalAlignment="Center"

Margin="0 10 0 0"

FontFamily="Segoe UI"

FontSize="{x:Bind (x:Double)comboBox.SelectedValue, Mode=OneWay}"

Text="You can set the font size used for this text." />

</StackPanel>

</Grid>

</Page>

▶ MainPage.xaml.cs


using System.Collections.Generic;
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 List<double> fontSizeList { get; } = new List<double>()
        {
            8,
            9,
            10,
            11,
            12,
            14,
            16,
            18,
            20,
            24,
            28,
            36,
            48,
            72
        };

        #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 = "ComboBox 엘리먼트 : TextSubmitted 이벤트 사용하기";

            #endregion
        }

        #endregion

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

        #region 콤보 박스 로드시 처리하기 - comboBox_Loaded(sender, e)

        /// <summary>
        /// 콤보 박스 로드시 처리하기
        /// </summary>
        /// <param name="sender">이벤트 발생자</param>
        /// <param name="e">이벤트 인자</param>
        private void comboBox_Loaded(object sender, RoutedEventArgs e)
        {
            this.comboBox.SelectedIndex = 2;
        }

        #endregion
        #region 콤보 박스 텍스트 제출시 처리하기 - comboBox_TextSubmitted(comboBox, e)

        /// <summary>
        /// 콤보 박스 텍스트 제출시 처리하기
        /// </summary>
        /// <param name="comboBox">콤보 박스</param>
        /// <param name="e">이벤트 인자</param>
        private void comboBox_TextSubmitted(ComboBox comboBox, ComboBoxTextSubmittedEventArgs e)
        {
            bool isDouble = double.TryParse(comboBox.Text, out double newValue);

            if(isDouble && (this.fontSizeList.Contains(newValue) || (newValue <= 100 && newValue >= 8)))
            {
                comboBox.SelectedItem = newValue;
            }
            else
            {
                comboBox.Text = comboBox.SelectedValue.ToString();

                ContentDialog contentDialog = new ContentDialog
                {
                    Content         = "폰트 크기는 8에서 100 사이어야 합니다.",
                    CloseButtonText = "닫기",
                    DefaultButton   = ContentDialogButton.Close
                };

                IAsyncOperation<ContentDialogResult> asyncOperation = contentDialog.ShowAsync();
            }

            e.Handled = true;
        }

        #endregion
    }
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

using System.Collections.Generic;

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 List<double> fontSizeList { get; } = new List<double>()

{

10,

11,

12,

14,

16,

18,

20,

24,

28,

36,

48,

};

#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 = "ComboBox 엘리먼트 : TextSubmitted 이벤트 사용하기";

#endregion

}

#endregion

//////////////////////////////////////////////////////////////////////////////////////////////////// Method

////////////////////////////////////////////////////////////////////////////////////////// Private

#region 콤보 박스 로드시 처리하기 - comboBox_Loaded(sender, e)

/// <summary>

/// 콤보 박스 로드시 처리하기

/// </summary>

/// <param name="sender">이벤트 발생자</param>

/// <param name="e">이벤트 인자</param>

private void comboBox_Loaded(object sender, RoutedEventArgs e)

{

this.comboBox.SelectedIndex = 2;

}

#endregion

#region 콤보 박스 텍스트 제출시 처리하기 - comboBox_TextSubmitted(comboBox, e)

/// <summary>

/// 콤보 박스 텍스트 제출시 처리하기

/// </summary>

/// <param name="comboBox">콤보 박스</param>

/// <param name="e">이벤트 인자</param>

private void comboBox_TextSubmitted(ComboBox comboBox, ComboBoxTextSubmittedEventArgs e)

{

bool isDouble = double.TryParse(comboBox.Text, out double newValue);

if(isDouble && (this.fontSizeList.Contains(newValue) || (newValue <= 100 && newValue >= 8)))

{

comboBox.SelectedItem = newValue;

}

else

{

comboBox.Text = comboBox.SelectedValue.ToString();

ContentDialog contentDialog = new ContentDialog

{

Content = "폰트 크기는 8에서 100 사이어야 합니다.",

CloseButtonText = "닫기",

DefaultButton = ContentDialogButton.Close

};

IAsyncOperation<ContentDialogResult> asyncOperation = contentDialog.ShowAsync();

}

e.Handled = true;

}

#endregion

}

TestProject.zip

[C#/WINUI2.5] ComboBox 엘리먼트 : ItemsSource 속성 사용하기

■ ComboBox 엘리먼트의 ItemsSource 속성을 사용하는 방법을 보여준다. ▶ 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"
    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"
    FontFamily="나눔고딕코딩"
    FontSize="16">
    <Grid>
        <StackPanel
            HorizontalAlignment="Center"
            VerticalAlignment="Center">
            <ComboBox Name="comboBox"
                Width="200"
                Header="폰트"
                DisplayMemberPath="Item1"
                SelectedValuePath="Item2"
                ItemsSource="{x:Bind fontList}"
                Loaded="comboBox_Loaded" />
            <TextBlock Name="textBlock"
                Margin="0 10 0 0"
                FontFamily="{x:Bind (FontFamily)comboBox.SelectedValue, Mode=OneWay}"
                Text="You can set the font used for this text." />
        </StackPanel>
    </Grid>
</Page>

<Page x:Class="TestProject.MainPage"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"

FontFamily="나눔고딕코딩"

FontSize="16">

<Grid>

<StackPanel

HorizontalAlignment="Center"

VerticalAlignment="Center">

<ComboBox Name="comboBox"

Width="200"

Header="폰트"

DisplayMemberPath="Item1"

SelectedValuePath="Item2"

ItemsSource="{x:Bind fontList}"

Loaded="comboBox_Loaded" />

<TextBlock Name="textBlock"

Margin="0 10 0 0"

FontFamily="{x:Bind (FontFamily)comboBox.SelectedValue, Mode=OneWay}"

Text="You can set the font used for this text." />

</StackPanel>

</Grid>

</Page>

▶ MainPage.xaml.cs


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

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

        #region Field

        /// <summary>
        /// 폰트 리스트
        /// </summary>
        private List<Tuple<string, FontFamily>> fontList { get; } = new List<Tuple<string, FontFamily>>()
        {
            new Tuple<string, FontFamily>("Arial"          , new FontFamily("Arial"          )),
            new Tuple<string, FontFamily>("Comic Sans MS"  , new FontFamily("Comic Sans MS"  )),
            new Tuple<string, FontFamily>("Courier New"    , new FontFamily("Courier New"    )),
            new Tuple<string, FontFamily>("Segoe UI"       , new FontFamily("Segoe UI"       )),
            new Tuple<string, FontFamily>("Times New Roman", new FontFamily("Times New Roman"))
        };

        #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 = "ComboBox 엘리먼트 : ItemsSource 속성 사용하기";

            #endregion
        }

        #endregion

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

        #region 콤보 박스 로드시 처리하기 - comboBox_Loaded(sender, e)

        /// <summary>
        /// 콤보 박스 로드시 처리하기
        /// </summary>
        /// <param name="sender">이벤트 발생자</param>
        /// <param name="e">이벤트 인자</param>
        private void comboBox_Loaded(object sender, RoutedEventArgs e)
        {
            this.comboBox.SelectedIndex = 2;
        }

        #endregion
    }
}

using System;

using System.Collections.Generic;

using Windows.Foundation;

using Windows.Graphics.Display;

using Windows.UI.ViewManagement;

using Windows.UI.Xaml;

using Windows.UI.Xaml.Controls;

using Windows.UI.Xaml.Media;

namespace TestProject

{

/// <summary>

/// 메인 페이지

/// </summary>

public sealed partial class MainPage : Page

{

//////////////////////////////////////////////////////////////////////////////////////////////////// Field

////////////////////////////////////////////////////////////////////////////////////////// Private

#region Field

/// <summary>

/// 폰트 리스트

/// </summary>

private List<Tuple<string, FontFamily>> fontList { get; } = new List<Tuple<string, FontFamily>>()

{

new Tuple<string, FontFamily>("Arial" , new FontFamily("Arial" )),

new Tuple<string, FontFamily>("Comic Sans MS" , new FontFamily("Comic Sans MS" )),

new Tuple<string, FontFamily>("Courier New" , new FontFamily("Courier New" )),

new Tuple<string, FontFamily>("Segoe UI" , new FontFamily("Segoe UI" )),

new Tuple<string, FontFamily>("Times New Roman", new FontFamily("Times New Roman"))

};

#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 = "ComboBox 엘리먼트 : ItemsSource 속성 사용하기";

#endregion

}

#endregion

//////////////////////////////////////////////////////////////////////////////////////////////////// Method

////////////////////////////////////////////////////////////////////////////////////////// Private

#region 콤보 박스 로드시 처리하기 - comboBox_Loaded(sender, e)

/// <summary>

/// 콤보 박스 로드시 처리하기

/// </summary>

/// <param name="sender">이벤트 발생자</param>

/// <param name="e">이벤트 인자</param>

private void comboBox_Loaded(object sender, RoutedEventArgs e)

{

this.comboBox.SelectedIndex = 2;

}

#endregion

}

TestProject.zip

[C#/WINUI2.5] ComboBox 엘리먼트 : SelectionChanged 이벤트 사용하기

■ ComboBox 엘리먼트의 SelectionChanged 이벤트를 사용하는 방법을 보여준다. ▶ 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"
    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"
    FontFamily="나눔고딕코딩"
    FontSize="16">
    <Grid>
        <StackPanel
            HorizontalAlignment="Center"
            VerticalAlignment="Center">
            <ComboBox
                Width="200"
                Header="색상"
                PlaceholderText="색상을 선택해 주시기 바랍니다."
                SelectionChanged="comboBox_SelectionChanged">
                <x:String>파란색</x:String>
                <x:String>녹색</x:String>
                <x:String>빨간색</x:String>
                <x:String>노란색</x:String>
            </ComboBox>
            <Rectangle Name="rectangle"
                Margin="0 10 0 0"
                Height="30"
                Width="100" />
        </StackPanel>
    </Grid>
</Page>

<Page x:Class="TestProject.MainPage"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"

FontFamily="나눔고딕코딩"

FontSize="16">

<Grid>

<StackPanel

HorizontalAlignment="Center"

VerticalAlignment="Center">

<ComboBox

Width="200"

Header="색상"

PlaceholderText="색상을 선택해 주시기 바랍니다."

SelectionChanged="comboBox_SelectionChanged">

<x:String>파란색</x:String>

<x:String>녹색</x:String>

<x:String>빨간색</x:String>

<x:String>노란색</x:String>

</ComboBox>

<Rectangle Name="rectangle"

Margin="0 10 0 0"

Height="30"

Width="100" />

</StackPanel>

</Grid>

</Page>

▶ MainPage.xaml.cs


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

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 = "ComboBox 엘리먼트 : SelectionChanged 이벤트 사용하기";

            #endregion
        }

        #endregion

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

        #region 콤보 박스 선택 변경시 처리하기 - comboBox_SelectionChanged(sender, e)

        /// <summary>
        /// 콤보 박스 선택 변경시 처리하기
        /// </summary>
        /// <param name="sender">이벤트 발생자</param>
        /// <param name="e">이벤트 인자</param>
        private void comboBox_SelectionChanged(object sender, SelectionChangedEventArgs e)
        {
            string colorName = e.AddedItems[0].ToString();

            Color color;

            switch(colorName)
            {
                case "파란색" : color = Colors.Blue;   break;
                case "녹색"   : color = Colors.Green;  break;
                case "빨간색" : color = Colors.Red;    break;
                case "노란색" : color = Colors.Yellow; break;
            }

            this.rectangle.Fill = new SolidColorBrush(color);
        }

        #endregion
    }
}

using Windows.Foundation;

using Windows.Graphics.Display;

using Windows.UI;

using Windows.UI.ViewManagement;

using Windows.UI.Xaml;

using Windows.UI.Xaml.Controls;

using Windows.UI.Xaml.Media;

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 = "ComboBox 엘리먼트 : SelectionChanged 이벤트 사용하기";

#endregion

}

#endregion

//////////////////////////////////////////////////////////////////////////////////////////////////// Method

////////////////////////////////////////////////////////////////////////////////////////// Private

#region 콤보 박스 선택 변경시 처리하기 - comboBox_SelectionChanged(sender, e)

/// <summary>

/// 콤보 박스 선택 변경시 처리하기

/// </summary>

/// <param name="sender">이벤트 발생자</param>

/// <param name="e">이벤트 인자</param>

private void comboBox_SelectionChanged(object sender, SelectionChangedEventArgs e)

{

string colorName = e.AddedItems[0].ToString();

Color color;

switch(colorName)

{

case "파란색" : color = Colors.Blue; break;

case "녹색" : color = Colors.Green; break;

case "빨간색" : color = Colors.Red; break;

case "노란색" : color = Colors.Yellow; break;

}

this.rectangle.Fill = new SolidColorBrush(color);

}

#endregion

}

TestProject.zip

[C#/WINUI2.5] ColorPicker 엘리먼트 : 색상 선택하기

■ ColorPicker 엘리먼트를 사용해 색상을 선택하는 방법을 보여준다. ▶ 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"
    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"
    FontFamily="나눔고딕코딩"
    FontSize="16">
    <Grid>
        <Grid
            HorizontalAlignment="Center"
            VerticalAlignment="Center">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto" />
                <ColumnDefinition Width="50"   />
                <ColumnDefinition Width="Auto" />
            </Grid.ColumnDefinitions>
            <muxc:ColorPicker Name="colorPicker" Grid.Column="0"
                IsMoreButtonVisible="{x:Bind isMoreButtonVisibleCheckBox.IsChecked.Value, Mode=OneWay}"
                IsColorSliderVisible="{x:Bind isColorSliderVisibleCheckBox.IsChecked.Value, Mode=OneWay}"
                IsColorChannelTextInputVisible="{x:Bind isColorChannelTextInputVisibleCheckBox.IsChecked.Value, Mode=OneWay}"
                IsHexInputVisible="{x:Bind isHexInputVisibleCheckBox.IsChecked.Value, Mode=OneWay}"
                IsAlphaEnabled="{x:Bind isAlphaEnabledCheckBox.IsChecked.Value, Mode=OneWay}"
                IsAlphaSliderVisible="{x:Bind isAlphaSliderVisibleCheckBox.IsChecked.Value, Mode=OneWay}"
                IsAlphaTextInputVisible="{x:Bind isAlphaTextInputVisibleCheckBox.IsChecked.Value, Mode=OneWay}" />
            <StackPanel Grid.Column="2">
                <CheckBox Name="isMoreButtonVisibleCheckBox"
                    Content="IsMoreButtonVisible 속성"
                    IsChecked="False" />
                <CheckBox Name="isColorSliderVisibleCheckBox"
                    Content="IsColorSliderVisible 속성"
                    IsChecked="True" />
                <CheckBox Name="isColorChannelTextInputVisibleCheckBox"
                    Content="IsColorChannelTextInputVisible 속성"
                    IsChecked="True" />
                <CheckBox Name="isHexInputVisibleCheckBox"
                    Content="IsHexInputVisible 속성"
                    IsChecked="True" />
                <CheckBox Name="isAlphaEnabledCheckBox"
                    Content="IsAlphaEnabled 속성" />
                <CheckBox Name="isAlphaSliderVisibleCheckBox"
                    Content="IsAlphaSliderVisible 속성"
                    IsChecked="True"
                    IsEnabled="{x:Bind isAlphaEnabledCheckBox.IsChecked.Value, Mode=OneWay}" />
                <CheckBox Name="isAlphaTextInputVisibleCheckBox"
                    Content="IsAlphaTextInputVisible 속성"
                    IsChecked="True"
                    IsEnabled="{x:Bind isAlphaEnabledCheckBox.IsChecked.Value, Mode=OneWay}" />
                <muxc:RadioButtons x:Name="colorSpectrumShapeRadioButtons"
                        Margin="0 10 0 0"
                        Header="색상 스펙트럼 형태"
                        SelectedIndex="0"
                        SelectionChanged="colorSpectrumShapeRadioButtons_SelectionChanged">
                    <x:String>사각형</x:String>
                    <x:String>원</x:String>
                </muxc:RadioButtons>
                <StackPanel Margin="0 10 0 0">
                    <TextBlock Text="선택 색상" />
                    <Rectangle
                        Margin="0 10 0 0"
                        Height="100"
                        StrokeThickness="1"
                        Stroke="{ThemeResource TextControlBorderBrush}">
                        <Rectangle.Fill>
                            <SolidColorBrush Color="{x:Bind colorPicker.Color, Mode=OneWay}" />
                        </Rectangle.Fill>
                    </Rectangle>
                </StackPanel>
            </StackPanel>
        </Grid>
    </Grid>
</Page>

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

Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"

FontFamily="나눔고딕코딩"

FontSize="16">

<Grid>

<Grid

HorizontalAlignment="Center"

VerticalAlignment="Center">

<Grid.ColumnDefinitions>

</Grid.ColumnDefinitions>

<muxc:ColorPicker Name="colorPicker" Grid.Column="0"

IsMoreButtonVisible="{x:Bind isMoreButtonVisibleCheckBox.IsChecked.Value, Mode=OneWay}"

IsColorSliderVisible="{x:Bind isColorSliderVisibleCheckBox.IsChecked.Value, Mode=OneWay}"

IsColorChannelTextInputVisible="{x:Bind isColorChannelTextInputVisibleCheckBox.IsChecked.Value, Mode=OneWay}"

IsHexInputVisible="{x:Bind isHexInputVisibleCheckBox.IsChecked.Value, Mode=OneWay}"

IsAlphaEnabled="{x:Bind isAlphaEnabledCheckBox.IsChecked.Value, Mode=OneWay}"

IsAlphaSliderVisible="{x:Bind isAlphaSliderVisibleCheckBox.IsChecked.Value, Mode=OneWay}"

IsAlphaTextInputVisible="{x:Bind isAlphaTextInputVisibleCheckBox.IsChecked.Value, Mode=OneWay}" />

<CheckBox Name="isMoreButtonVisibleCheckBox"

Content="IsMoreButtonVisible 속성"

IsChecked="False" />

<CheckBox Name="isColorSliderVisibleCheckBox"

Content="IsColorSliderVisible 속성"

IsChecked="True" />

<CheckBox Name="isColorChannelTextInputVisibleCheckBox"

Content="IsColorChannelTextInputVisible 속성"

IsChecked="True" />

<CheckBox Name="isHexInputVisibleCheckBox"

Content="IsHexInputVisible 속성"

IsChecked="True" />

<CheckBox Name="isAlphaEnabledCheckBox"

Content="IsAlphaEnabled 속성" />

<CheckBox Name="isAlphaSliderVisibleCheckBox"

Content="IsAlphaSliderVisible 속성"

IsChecked="True"

IsEnabled="{x:Bind isAlphaEnabledCheckBox.IsChecked.Value, Mode=OneWay}" />

<CheckBox Name="isAlphaTextInputVisibleCheckBox"

Content="IsAlphaTextInputVisible 속성"

IsChecked="True"

IsEnabled="{x:Bind isAlphaEnabledCheckBox.IsChecked.Value, Mode=OneWay}" />

<muxc:RadioButtons x:Name="colorSpectrumShapeRadioButtons"

Margin="0 10 0 0"

Header="색상 스펙트럼 형태"

SelectedIndex="0"

SelectionChanged="colorSpectrumShapeRadioButtons_SelectionChanged">

<x:String>사각형</x:String>

<x:String>원</x:String>

</muxc:RadioButtons>

<Rectangle

Margin="0 10 0 0"

Height="100"

StrokeThickness="1"

Stroke="{ThemeResource TextControlBorderBrush}">

<Rectangle.Fill>

</Rectangle.Fill>

</Rectangle>

</StackPanel>

</Grid>

</Page>

▶ MainPage.xaml.cs


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 = "ColorPicker 엘리먼트 : 색상 선택하기";

            #endregion
        }

        #endregion

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

        #region 색상 스펙트럼 형태 라디오 버튼 리스트 선택 변경시 처리하기 - colorSpectrumShapeRadioButtons_SelectionChanged(sender, e)

        /// <summary>
        /// 색상 스펙트럼 형태 라디오 버튼 리스트 선택 변경시 처리하기
        /// </summary>
        /// <param name="sender">이벤트 발생자</param>
        /// <param name="e">이벤트 인자</param>
        private void colorSpectrumShapeRadioButtons_SelectionChanged(object sender, SelectionChangedEventArgs e)
        {
            switch(this.colorSpectrumShapeRadioButtons.SelectedItem)
            {
                case "Box" :

                    this.colorPicker.ColorSpectrumShape = Microsoft.UI.Xaml.Controls.ColorSpectrumShape.Box;

                    break;

                default :

                    this.colorPicker.ColorSpectrumShape = Microsoft.UI.Xaml.Controls.ColorSpectrumShape.Ring;

                    break;
            }
        }

        #endregion
    }
}

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 = "ColorPicker 엘리먼트 : 색상 선택하기";

#endregion

}

#endregion

//////////////////////////////////////////////////////////////////////////////////////////////////// Method

////////////////////////////////////////////////////////////////////////////////////////// Private

#region 색상 스펙트럼 형태 라디오 버튼 리스트 선택 변경시 처리하기 - colorSpectrumShapeRadioButtons_SelectionChanged(sender, e)

/// <summary>

/// 색상 스펙트럼 형태 라디오 버튼 리스트 선택 변경시 처리하기

/// </summary>

/// <param name="sender">이벤트 발생자</param>

/// <param name="e">이벤트 인자</param>

private void colorSpectrumShapeRadioButtons_SelectionChanged(object sender, SelectionChangedEventArgs e)

{

switch(this.colorSpectrumShapeRadioButtons.SelectedItem)

{

case "Box" :

this.colorPicker.ColorSpectrumShape = Microsoft.UI.Xaml.Controls.ColorSpectrumShape.Box;

break;

default :

this.colorPicker.ColorSpectrumShape = Microsoft.UI.Xaml.Controls.ColorSpectrumShape.Ring;

break;

}

#endregion

}

TestProject.zip

[C#/WINUI2.5] CheckBox 엘리먼트 : 3단계 상태 체크 박스 사용하기

■ CheckBox 엘리먼트에서 3단계 상태 체크 박스를 사용하는 방법을 보여준다. ▶ 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"
    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"
    FontFamily="나눔고딕코딩"
    FontSize="16">
    <Grid>
        <StackPanel
            HorizontalAlignment="Center"
            VerticalAlignment="Center">
            <CheckBox Name="allCheckBox"
                IsThreeState="True"
                Content="전체 선택"
                Checked="allCheckBox_Checked"
                Unchecked="allCheckBox_Unchecked"
                Indeterminate="allCheckBox_Indeterminate" />
            <CheckBox Name="option1CheckBox"
                Margin="20 0 0 0"
                Content="옵션 1"
                Checked="optionCheckBox_Checked"
                Unchecked="optionCheckBox_Unchecked" />
            <CheckBox Name="option2CheckBox"
                Margin="20 0 0 0"
                IsChecked="True"
                Content="옵션 2"
                Checked="optionCheckBox_Checked"
                Unchecked="optionCheckBox_Unchecked" />
            <CheckBox Name="option3CheckBox"
                Margin="20 0 0 0"
                Content="옵션 3"
                Checked="optionCheckBox_Checked"
                Unchecked="optionCheckBox_Unchecked" />
        </StackPanel>
    </Grid>
</Page>

<Page x:Class="TestProject.MainPage"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"

FontFamily="나눔고딕코딩"

FontSize="16">

<Grid>

<StackPanel

HorizontalAlignment="Center"

VerticalAlignment="Center">

<CheckBox Name="allCheckBox"

IsThreeState="True"

Content="전체 선택"

Checked="allCheckBox_Checked"

Unchecked="allCheckBox_Unchecked"

Indeterminate="allCheckBox_Indeterminate" />

<CheckBox Name="option1CheckBox"

Margin="20 0 0 0"

Content="옵션 1"

Checked="optionCheckBox_Checked"

Unchecked="optionCheckBox_Unchecked" />

<CheckBox Name="option2CheckBox"

Margin="20 0 0 0"

IsChecked="True"

Content="옵션 2"

Checked="optionCheckBox_Checked"

Unchecked="optionCheckBox_Unchecked" />

<CheckBox Name="option3CheckBox"

Margin="20 0 0 0"

Content="옵션 3"

Checked="optionCheckBox_Checked"

Unchecked="optionCheckBox_Unchecked" />

</StackPanel>

</Grid>

</Page>

▶ MainPage.xaml.cs


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 = "CheckBox 엘리먼트 : 3단계 상태 체크 박스 사용하기";

            #endregion
        }

        #endregion

        //////////////////////////////////////////////////////////////////////////////////////////////////// Method
        ////////////////////////////////////////////////////////////////////////////////////////// Private
        //////////////////////////////////////////////////////////////////////////////// Event

        #region 전체 체크 박스 체크시 처리하기 - allCheckBox_Checked(sender, e)

        /// <summary>
        /// 전체 체크 박스 체크시 처리하기
        /// </summary>
        /// <param name="sender">이벤트 발생자</param>
        /// <param name="e">이벤트 인자</param>
        private void allCheckBox_Checked(object sender, RoutedEventArgs e)
        {
            this.option1CheckBox.IsChecked = true;
            this.option2CheckBox.IsChecked = true;
            this.option3CheckBox.IsChecked = true;
        }

        #endregion
        #region 전체 체크 박스 체크 해제시 처리하기 - allCheckBox_Unchecked(sender, e)

        /// <summary>
        /// 전체 체크 박스 체크 해제시 처리하기
        /// </summary>
        /// <param name="sender">이벤트 발생자</param>
        /// <param name="e">이벤트 인자</param>
        private void allCheckBox_Unchecked(object sender, RoutedEventArgs e)
        {
            this.option1CheckBox.IsChecked = false;
            this.option2CheckBox.IsChecked = false;
            this.option3CheckBox.IsChecked = false;
        }

        #endregion
        #region 전체 체크 박스 미정시 처리하기 - allCheckBox_Indeterminate(sender, e)

        /// <summary>
        /// 전체 체크 박스 미정시 처리하기
        /// </summary>
        /// <param name="sender">이벤트 발생자</param>
        /// <param name="e">이벤트 인자</param>
        private void allCheckBox_Indeterminate(object sender, RoutedEventArgs e)
        {
            if
            (
                this.option1CheckBox.IsChecked == true &&
                this.option2CheckBox.IsChecked == true &&
                this.option3CheckBox.IsChecked == true
            )
            {
                this.allCheckBox.IsChecked = false;
            }
        }

        #endregion
        #region 옵션 체크 박스 체크시 처리하기 - optionCheckBox_Checked(sender, e)

        /// <summary>
        /// 옵션 체크 박스 체크시 처리하기
        /// </summary>
        /// <param name="sender">이벤트 발생자</param>
        /// <param name="e">이벤트 인자</param>
        private void optionCheckBox_Checked(object sender, RoutedEventArgs e)
        {
            SetAllCheckBoxState();
        }

        #endregion
        #region 옵션 체크 박스 체크 해제시 처리하기 - optionCheckBox_Unchecked(sender, e)

        /// <summary>
        /// 옵션 체크 박스 체크 해제시 처리하기
        /// </summary>
        /// <param name="sender">이벤트 발생자</param>
        /// <param name="e">이벤트 인자</param>
        private void optionCheckBox_Unchecked(object sender, RoutedEventArgs e)
        {
            SetAllCheckBoxState();
        }

        #endregion

        //////////////////////////////////////////////////////////////////////////////// Function

        #region 전체 체크 박스 상태 설정하기 - SetAllCheckBoxState()

        /// <summary>
        /// 전체 체크 박스 상태 설정하기
        /// </summary>
        private void SetAllCheckBoxState()
        {
            if(this.option1CheckBox != null)
            {
                if(this.option1CheckBox.IsChecked == true && this.option2CheckBox.IsChecked == true && this.option3CheckBox.IsChecked == true)
                {
                    this.allCheckBox.IsChecked = true;
                }
                else if(this.option1CheckBox.IsChecked == false && this.option2CheckBox.IsChecked == false && this.option3CheckBox.IsChecked == false)
                {
                    this.allCheckBox.IsChecked = false;
                }
                else
                {
                    this.allCheckBox.IsChecked = null;
                }
            }
        }

        #endregion
    }
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

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 = "CheckBox 엘리먼트 : 3단계 상태 체크 박스 사용하기";

#endregion

}

#endregion

//////////////////////////////////////////////////////////////////////////////////////////////////// Method

////////////////////////////////////////////////////////////////////////////////////////// Private

//////////////////////////////////////////////////////////////////////////////// Event

#region 전체 체크 박스 체크시 처리하기 - allCheckBox_Checked(sender, e)

/// <summary>

/// 전체 체크 박스 체크시 처리하기

/// </summary>

/// <param name="sender">이벤트 발생자</param>

/// <param name="e">이벤트 인자</param>

private void allCheckBox_Checked(object sender, RoutedEventArgs e)

{

this.option1CheckBox.IsChecked = true;

this.option2CheckBox.IsChecked = true;

this.option3CheckBox.IsChecked = true;

}

#endregion

#region 전체 체크 박스 체크 해제시 처리하기 - allCheckBox_Unchecked(sender, e)

/// <summary>

/// 전체 체크 박스 체크 해제시 처리하기

/// </summary>

/// <param name="sender">이벤트 발생자</param>

/// <param name="e">이벤트 인자</param>

private void allCheckBox_Unchecked(object sender, RoutedEventArgs e)

{

this.option1CheckBox.IsChecked = false;

this.option2CheckBox.IsChecked = false;

this.option3CheckBox.IsChecked = false;

}

#endregion

#region 전체 체크 박스 미정시 처리하기 - allCheckBox_Indeterminate(sender, e)

/// <summary>

/// 전체 체크 박스 미정시 처리하기

/// </summary>

/// <param name="sender">이벤트 발생자</param>

/// <param name="e">이벤트 인자</param>

private void allCheckBox_Indeterminate(object sender, RoutedEventArgs e)

{

(

this.option1CheckBox.IsChecked == true &&

this.option2CheckBox.IsChecked == true &&

this.option3CheckBox.IsChecked == true

)

{

this.allCheckBox.IsChecked = false;

}

#endregion

#region 옵션 체크 박스 체크시 처리하기 - optionCheckBox_Checked(sender, e)

/// <summary>

/// 옵션 체크 박스 체크시 처리하기

/// </summary>

/// <param name="sender">이벤트 발생자</param>

/// <param name="e">이벤트 인자</param>

private void optionCheckBox_Checked(object sender, RoutedEventArgs e)

{

SetAllCheckBoxState();

}

#endregion

#region 옵션 체크 박스 체크 해제시 처리하기 - optionCheckBox_Unchecked(sender, e)

/// <summary>

/// 옵션 체크 박스 체크 해제시 처리하기

/// </summary>

/// <param name="sender">이벤트 발생자</param>

/// <param name="e">이벤트 인자</param>

private void optionCheckBox_Unchecked(object sender, RoutedEventArgs e)

{

SetAllCheckBoxState();

}

#endregion

//////////////////////////////////////////////////////////////////////////////// Function

#region 전체 체크 박스 상태 설정하기 - SetAllCheckBoxState()

/// <summary>

/// 전체 체크 박스 상태 설정하기

/// </summary>

private void SetAllCheckBoxState()

{

if(this.option1CheckBox != null)

{

if(this.option1CheckBox.IsChecked == true && this.option2CheckBox.IsChecked == true && this.option3CheckBox.IsChecked == true)

{

this.allCheckBox.IsChecked = true;

}

else if(this.option1CheckBox.IsChecked == false && this.option2CheckBox.IsChecked == false && this.option3CheckBox.IsChecked == false)

{

this.allCheckBox.IsChecked = false;

}

else

{

this.allCheckBox.IsChecked = null;

}

#endregion

}

TestProject.zip

[C#/WINUI2.5] CheckBox 엘리먼트 : IsThreeState 속성 사용하기

■ CheckBox 엘리먼트의 IsThreeState 속성을 사용하는 방법을 보여준다. ▶ 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"
    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"
    FontFamily="나눔고딕코딩"
    FontSize="16">
    <Grid>
        <StackPanel
            HorizontalAlignment="Center"
            VerticalAlignment="Center">
            <CheckBox
                IsThreeState="True"
                Content="3단계 상태 체크 박스"
                Checked="checkBox_Checked"
                Unchecked="checkBox_Unchecked"
                Indeterminate="checkBox_Indeterminate" />
            <TextBlock Name="textBlock"
                Margin="0 10 0 0" />
        </StackPanel>
    </Grid>
</Page>

<Page x:Class="TestProject.MainPage"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"

FontFamily="나눔고딕코딩"

FontSize="16">

<Grid>

<StackPanel

HorizontalAlignment="Center"

VerticalAlignment="Center">

<CheckBox

IsThreeState="True"

Content="3단계 상태 체크 박스"

Checked="checkBox_Checked"

Unchecked="checkBox_Unchecked"

Indeterminate="checkBox_Indeterminate" />

<TextBlock Name="textBlock"

Margin="0 10 0 0" />

</StackPanel>

</Grid>

</Page>

▶ MainPage.xaml.cs


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 = "CheckBox 엘리먼트 : IsThreeState 속성 사용하기";

            #endregion
        }

        #endregion

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

        #region 체크 박스 체크시 처리하기 - checkBox_Checked(sender, e)

        /// <summary>
        /// 체크 박스 체크시 처리하기
        /// </summary>
        /// <param name="sender">이벤트 발생자</param>
        /// <param name="e">이벤트 인자</param>
        private void checkBox_Checked(object sender, RoutedEventArgs e)
        {
            this.textBlock.Text = "체크 박스를 체크했습니다.";
        }

        #endregion
        #region 체크 박스 체크 해제시 처리하기 - checkBox_Unchecked(sender, e)

        /// <summary>
        /// 체크 박스 체크 해제시 처리하기
        /// </summary>
        /// <param name="sender">이벤트 발생자</param>
        /// <param name="e">이벤트 인자</param>
        private void checkBox_Unchecked(object sender, RoutedEventArgs e)
        {
            this. textBlock.Text = "체크 박스를 체크 해제했습니다.";
        }

        #endregion
        #region 체크 박스 미정시 처리하기 - checkBox_Indeterminate(sender, e)

        /// <summary>
        /// 체크 박스 미정시 처리하기
        /// </summary>
        /// <param name="sender">이벤트 발생자</param>
        /// <param name="e">이벤트 인자</param>
        private void checkBox_Indeterminate(object sender, RoutedEventArgs e)
        {
            this.textBlock.Text = "체크 박스 상태가 미정입니다.";
        }

        #endregion
    }
}

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 = "CheckBox 엘리먼트 : IsThreeState 속성 사용하기";

#endregion

}

#endregion

//////////////////////////////////////////////////////////////////////////////////////////////////// Method

////////////////////////////////////////////////////////////////////////////////////////// Private

#region 체크 박스 체크시 처리하기 - checkBox_Checked(sender, e)

/// <summary>

/// 체크 박스 체크시 처리하기

/// </summary>

/// <param name="sender">이벤트 발생자</param>

/// <param name="e">이벤트 인자</param>

private void checkBox_Checked(object sender, RoutedEventArgs e)

{

this.textBlock.Text = "체크 박스를 체크했습니다.";

}

#endregion

#region 체크 박스 체크 해제시 처리하기 - checkBox_Unchecked(sender, e)

/// <summary>

/// 체크 박스 체크 해제시 처리하기

/// </summary>

/// <param name="sender">이벤트 발생자</param>

/// <param name="e">이벤트 인자</param>

private void checkBox_Unchecked(object sender, RoutedEventArgs e)

{

this. textBlock.Text = "체크 박스를 체크 해제했습니다.";

}

#endregion

#region 체크 박스 미정시 처리하기 - checkBox_Indeterminate(sender, e)

/// <summary>

/// 체크 박스 미정시 처리하기

/// </summary>

/// <param name="sender">이벤트 발생자</param>

/// <param name="e">이벤트 인자</param>

private void checkBox_Indeterminate(object sender, RoutedEventArgs e)

{

this.textBlock.Text = "체크 박스 상태가 미정입니다.";

}

#endregion

}

TestProject.zip

[C#/WINUI2.5] CheckBox 엘리먼트 : Checked/Unchecked 이벤트 사용하기

■ CheckBox 엘리먼트의 Checked/Unchecked 이벤트를 사용하는 방법을 보여준다. ▶ 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"
    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"
    FontFamily="나눔고딕코딩"
    FontSize="16">
    <Grid>
        <StackPanel
            HorizontalAlignment="Center"
            VerticalAlignment="Center">
            <CheckBox
                Content="2단계 상태 체크 박스"
                Checked="checkBox_Checked"
                Unchecked="checkBox_Unchecked" />
            <TextBlock Name="textBlock"
                Margin="0 10 0 0" />
        </StackPanel>
    </Grid>
</Page>

<Page x:Class="TestProject.MainPage"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"

FontFamily="나눔고딕코딩"

FontSize="16">

<Grid>

<StackPanel

HorizontalAlignment="Center"

VerticalAlignment="Center">

<CheckBox

Content="2단계 상태 체크 박스"

Checked="checkBox_Checked"

Unchecked="checkBox_Unchecked" />

<TextBlock Name="textBlock"

Margin="0 10 0 0" />

</StackPanel>

</Grid>

</Page>

▶ MainPage.xaml.cs


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 = "CheckBox 엘리먼트 : Checked/Unchecked 이벤트 사용하기";

            #endregion
        }

        #endregion

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

        #region 체크 박스 체크시 처리하기 - checkBox_Checked(sender, e)

        /// <summary>
        /// 체크 박스 체크시 처리하기
        /// </summary>
        /// <param name="sender">이벤트 발생자</param>
        /// <param name="e">이벤트 인자</param>
        private void checkBox_Checked(object sender, RoutedEventArgs e)
        {
            this.textBlock.Text = "체크 박스를 체크했습니다.";
        }

        #endregion
        #region 체크 박스 체크 해제시 처리하기 - checkBox_Unchecked(sender, e)

        /// <summary>
        /// 체크 박스 체크 해제시 처리하기
        /// </summary>
        /// <param name="sender">이벤트 발생자</param>
        /// <param name="e">이벤트 인자</param>
        private void checkBox_Unchecked(object sender, RoutedEventArgs e)
        {
            this. textBlock.Text = "체크 박스를 체크 해제했습니다.";
        }

        #endregion
    }
}

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 = "CheckBox 엘리먼트 : Checked/Unchecked 이벤트 사용하기";

#endregion

}

#endregion

//////////////////////////////////////////////////////////////////////////////////////////////////// Method

////////////////////////////////////////////////////////////////////////////////////////// Private

#region 체크 박스 체크시 처리하기 - checkBox_Checked(sender, e)

/// <summary>

/// 체크 박스 체크시 처리하기

/// </summary>

/// <param name="sender">이벤트 발생자</param>

/// <param name="e">이벤트 인자</param>

private void checkBox_Checked(object sender, RoutedEventArgs e)

{

this.textBlock.Text = "체크 박스를 체크했습니다.";

}

#endregion

#region 체크 박스 체크 해제시 처리하기 - checkBox_Unchecked(sender, e)

/// <summary>

/// 체크 박스 체크 해제시 처리하기

/// </summary>

/// <param name="sender">이벤트 발생자</param>

/// <param name="e">이벤트 인자</param>

private void checkBox_Unchecked(object sender, RoutedEventArgs e)

{

this. textBlock.Text = "체크 박스를 체크 해제했습니다.";

}

#endregion

}

TestProject.zip

[C#/WINUI2.5] ToggleSplitButton 엘리먼트 사용하기

■ ToggleSplitButton 엘리먼트를 사용하는 방법을 보여준다. ▶ 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"
    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"
    FontFamily="나눔고딕코딩"
    FontSize="16">
    <Grid>
        <StackPanel
            HorizontalAlignment="Center"
            VerticalAlignment="Center">
            <muxc:ToggleSplitButton Name="toggleSplitButton" AutomationProperties.Name="bullets"
                IsCheckedChanged="toggleSplitButton_IsCheckedChanged">
                <SymbolIcon Name="currentSymbolIcon"
                    Symbol="List" />
                <muxc:ToggleSplitButton.Flyout>
                    <Flyout Placement="Bottom">
                        <StackPanel Orientation="Horizontal">
                            <StackPanel.Resources>
                                <Style TargetType="Button">
                                    <Setter Property="Margin"    Value="5" />
                                    <Setter Property="MinWidth"  Value="0" />
                                    <Setter Property="MinHeight" Value="0" />
                                    <Setter Property="Padding"   Value="5" />
                                </Style>
                            </StackPanel.Resources>
                            <Button AutomationProperties.Name="bulleted list"
                                Click="bulletButton_Click">
                                <SymbolIcon Symbol="List" />
                            </Button>
                            <Button AutomationProperties.Name="roman numerals list"
                                Click="bulletButton_Click">
                                <SymbolIcon Symbol="Bullets" />
                            </Button>
                        </StackPanel>
                    </Flyout>
                </muxc:ToggleSplitButton.Flyout>
            </muxc:ToggleSplitButton>
            <RichEditBox Name="richEditBox"
                HorizontalAlignment="Center"
                Margin="0 10 0 0"
                Width="240"
                MinHeight="96"
                PlaceholderText="Type something here" />
        </StackPanel>
    </Grid>
</Page>

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

Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"

FontFamily="나눔고딕코딩"

FontSize="16">

<Grid>

<StackPanel

HorizontalAlignment="Center"

VerticalAlignment="Center">

<muxc:ToggleSplitButton Name="toggleSplitButton" AutomationProperties.Name="bullets"

IsCheckedChanged="toggleSplitButton_IsCheckedChanged">

<SymbolIcon Name="currentSymbolIcon"

Symbol="List" />

<muxc:ToggleSplitButton.Flyout>

<StackPanel.Resources>

</Style>

</StackPanel.Resources>

<Button AutomationProperties.Name="bulleted list"

Click="bulletButton_Click">

</Button>

<Button AutomationProperties.Name="roman numerals list"

Click="bulletButton_Click">

</Button>

</StackPanel>

</Flyout>

</muxc:ToggleSplitButton.Flyout>

</muxc:ToggleSplitButton>

<RichEditBox Name="richEditBox"

HorizontalAlignment="Center"

Margin="0 10 0 0"

Width="240"

MinHeight="96"

PlaceholderText="Type something here" />

</StackPanel>

</Grid>

</Page>

▶ MainPage.xaml.cs


using Windows.Foundation;
using Windows.Graphics.Display;
using Windows.UI.Text;
using Windows.UI.ViewManagement;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Automation;
using Windows.UI.Xaml.Controls;

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

        #region Field

        /// <summary>
        /// 현재 마커 타입
        /// </summary>
        private MarkerType currentMarkerType = MarkerType.Bullet;

        #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 = "ToggleSplitButton 엘리먼트 사용하기";

            #endregion

            this.richEditBox.Document.Selection.SetText
            (
                TextSetOptions.None,
                "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. " +
                "Tempor commodo ullamcorper a lacus."
            );
        }

        #endregion

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

        #region 불릿 버튼 클릭시 처리하기 - bulletButton_Click(sender, e)

        /// <summary>
        /// 불릿 버튼 클릭시 처리하기
        /// </summary>
        /// <param name="sender">이벤트 발생자</param>
        /// <param name="e">이벤트 인자</param>
        private void bulletButton_Click(object sender, RoutedEventArgs e)
        {
            Button buttonClicked = (Button)sender;

            SymbolIcon symbolIconClicked = buttonClicked.Content as SymbolIcon;

            if(symbolIconClicked.Symbol == Symbol.List)
            {
                this.currentMarkerType = MarkerType.Bullet;

                this.currentSymbolIcon.Symbol = Symbol.List;

                this.toggleSplitButton.SetValue(AutomationProperties.NameProperty, "bullets");
            }
            else if(symbolIconClicked.Symbol == Symbol.Bullets)
            {
                this.currentMarkerType = MarkerType.UppercaseRoman;

                this.currentSymbolIcon.Symbol = Symbol.Bullets;

                this.toggleSplitButton.SetValue(AutomationProperties.NameProperty, "roman numerals");
            }

            this.richEditBox.Document.Selection.ParagraphFormat.ListType = this.currentMarkerType;

            this.toggleSplitButton.IsChecked = true;

            this.toggleSplitButton.Flyout.Hide();

            this.richEditBox.Focus(FocusState.Keyboard);
        }

        #endregion
        #region 토글 분리 버튼 체크 여부 변경시 처리하기 - toggleSplitButton_IsCheckedChanged(sender, e)

        /// <summary>
        /// 토글 분리 버튼 체크 여부 변경시 처리하기
        /// </summary>
        /// <param name="sender">이벤트 발생자</param>
        /// <param name="e">이벤트 인자</param>
        private void toggleSplitButton_IsCheckedChanged
        (
            Microsoft.UI.Xaml.Controls.ToggleSplitButton                          sender,
            Microsoft.UI.Xaml.Controls.ToggleSplitButtonIsCheckedChangedEventArgs e
        )
        {
            if(sender.IsChecked)
            {
                this.richEditBox.Document.Selection.ParagraphFormat.ListType = currentMarkerType;
            }
            else
            {
                this.richEditBox.Document.Selection.ParagraphFormat.ListType = MarkerType.None;
            }
        }

        #endregion
    }
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

using Windows.Foundation;

using Windows.Graphics.Display;

using Windows.UI.Text;

using Windows.UI.ViewManagement;

using Windows.UI.Xaml;

using Windows.UI.Xaml.Automation;

using Windows.UI.Xaml.Controls;

namespace TestProject

{

/// <summary>

/// 메인 페이지

/// </summary>

public sealed partial class MainPage : Page

{

//////////////////////////////////////////////////////////////////////////////////////////////////// Field

////////////////////////////////////////////////////////////////////////////////////////// Private

#region Field

/// <summary>

/// 현재 마커 타입

/// </summary>

private MarkerType currentMarkerType = MarkerType.Bullet;

#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 = "ToggleSplitButton 엘리먼트 사용하기";

#endregion

this.richEditBox.Document.Selection.SetText

(

TextSetOptions.None,

"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. " +

"Tempor commodo ullamcorper a lacus."

);

}

#endregion

//////////////////////////////////////////////////////////////////////////////////////////////////// Method

////////////////////////////////////////////////////////////////////////////////////////// Private

#region 불릿 버튼 클릭시 처리하기 - bulletButton_Click(sender, e)

/// <summary>

/// 불릿 버튼 클릭시 처리하기

/// </summary>

/// <param name="sender">이벤트 발생자</param>

/// <param name="e">이벤트 인자</param>

private void bulletButton_Click(object sender, RoutedEventArgs e)

{

Button buttonClicked = (Button)sender;

SymbolIcon symbolIconClicked = buttonClicked.Content as SymbolIcon;

if(symbolIconClicked.Symbol == Symbol.List)

{

this.currentMarkerType = MarkerType.Bullet;

this.currentSymbolIcon.Symbol = Symbol.List;

this.toggleSplitButton.SetValue(AutomationProperties.NameProperty, "bullets");

}

else if(symbolIconClicked.Symbol == Symbol.Bullets)

{

this.currentMarkerType = MarkerType.UppercaseRoman;

this.currentSymbolIcon.Symbol = Symbol.Bullets;

this.toggleSplitButton.SetValue(AutomationProperties.NameProperty, "roman numerals");

}

this.richEditBox.Document.Selection.ParagraphFormat.ListType = this.currentMarkerType;

this.toggleSplitButton.IsChecked = true;

this.toggleSplitButton.Flyout.Hide();

this.richEditBox.Focus(FocusState.Keyboard);

}

#endregion

#region 토글 분리 버튼 체크 여부 변경시 처리하기 - toggleSplitButton_IsCheckedChanged(sender, e)

/// <summary>

/// 토글 분리 버튼 체크 여부 변경시 처리하기

/// </summary>

/// <param name="sender">이벤트 발생자</param>

/// <param name="e">이벤트 인자</param>

private void toggleSplitButton_IsCheckedChanged

(

Microsoft.UI.Xaml.Controls.ToggleSplitButton sender,

Microsoft.UI.Xaml.Controls.ToggleSplitButtonIsCheckedChangedEventArgs e

)

{

if(sender.IsChecked)

{

this.richEditBox.Document.Selection.ParagraphFormat.ListType = currentMarkerType;

}

else

{

this.richEditBox.Document.Selection.ParagraphFormat.ListType = MarkerType.None;

}

#endregion

}

TestProject.zip

[C#/WINUI2.5] SplitButton 엘리먼트 : Style 속성에서 SplitButtonRevealStyle 리소스 사용하기

■ SplitButton 엘리먼트의 Style 속성에서 SplitButtonRevealStyle 리소스를 사용하는 방법을 보여준다. ▶ 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"
    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"
    FontFamily="나눔고딕코딩"
    FontSize="16">
    <Grid>
        <StackPanel
            HorizontalAlignment="Center"
            VerticalAlignment="Center">
            <muxc:SplitButton Name="splitButton" AutomationProperties.Name="font color"
                Style="{ThemeResource SplitButtonRevealStyle}"
                MinWidth="0"
                MinHeight="0"
                Padding="0"
                Click="splitButton_Click">
                <Rectangle Name="currentColorRectangle"
                    Margin="10"
                    Width="32"
                    Height="32"
                    Fill="Green" />
                <muxc:SplitButton.Flyout>
                    <Flyout Placement="Bottom">
                        <VariableSizedWrapGrid
                            Orientation="Horizontal"
                            MaximumRowsOrColumns="3">
                            <VariableSizedWrapGrid.Resources>
                                <Style TargetType="Rectangle">
                                    <Setter Property="Width"  Value="32" />
                                    <Setter Property="Height" Value="32" />
                                </Style>
                                <Style TargetType="Button">
                                    <Setter Property="Margin"    Value="10" />
                                    <Setter Property="MinWidth"  Value="0"  />
                                    <Setter Property="MinHeight" Value="0"  />
                                    <Setter Property="Padding"   Value="0"  />
                                </Style>
                            </VariableSizedWrapGrid.Resources>
                            <Button AutomationProperties.Name="Red"
                                Click="colorButton_Click">
                                <Button.Content>
                                    <Rectangle Fill="Red" />
                                </Button.Content>
                            </Button>
                            <Button AutomationProperties.Name="Orange"
                                Click="colorButton_Click">
                                <Button.Content>
                                    <Rectangle Fill="Orange" />
                                </Button.Content>
                            </Button>
                            <Button AutomationProperties.Name="Yellow"
                                Click="colorButton_Click">
                                <Button.Content>
                                    <Rectangle Fill="Yellow" />
                                </Button.Content>
                            </Button>
                            <Button AutomationProperties.Name="Green"
                                Click="colorButton_Click">
                                <Button.Content>
                                    <Rectangle Fill="Green" />
                                </Button.Content>
                            </Button>
                            <Button AutomationProperties.Name="Blue"
                                Click="colorButton_Click">
                                <Button.Content>
                                    <Rectangle Fill="Blue" />
                                </Button.Content>
                            </Button>
                            <Button AutomationProperties.Name="Indigo"
                                Click="colorButton_Click">
                                <Button.Content>
                                    <Rectangle Fill="Indigo" />
                                </Button.Content>
                            </Button>
                            <Button AutomationProperties.Name="Violet"
                                Click="colorButton_Click">
                                <Button.Content>
                                    <Rectangle Fill="Violet" />
                                </Button.Content>
                            </Button>
                            <Button AutomationProperties.Name="Gray"
                                Click="colorButton_Click">
                                <Button.Content>
                                    <Rectangle Fill="Gray" />
                                </Button.Content>
                            </Button>
                        </VariableSizedWrapGrid>
                    </Flyout>
                </muxc:SplitButton.Flyout>
            </muxc:SplitButton>
            <RichEditBox Name="richEditBox"
                HorizontalAlignment="Center"
                Margin="0 10 0 0"
                Width="240"
                MinHeight="96"
                PlaceholderText="Type something here"
                TextChanged="richEditBox_TextChanged" />
        </StackPanel>
    </Grid>
</Page>

100

101

102

103

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

Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"

FontFamily="나눔고딕코딩"

FontSize="16">

<Grid>

<StackPanel

HorizontalAlignment="Center"

VerticalAlignment="Center">

<muxc:SplitButton Name="splitButton" AutomationProperties.Name="font color"

Style="{ThemeResource SplitButtonRevealStyle}"

MinWidth="0"

MinHeight="0"

Padding="0"

Click="splitButton_Click">

<Rectangle Name="currentColorRectangle"

Margin="10"

Width="32"

Height="32"

Fill="Green" />

<muxc:SplitButton.Flyout>

<VariableSizedWrapGrid

Orientation="Horizontal"

MaximumRowsOrColumns="3">

<VariableSizedWrapGrid.Resources>

</Style>

</Style>

</VariableSizedWrapGrid.Resources>

<Button AutomationProperties.Name="Red"

Click="colorButton_Click">

<Button.Content>

</Button.Content>

</Button>

<Button AutomationProperties.Name="Orange"

Click="colorButton_Click">

<Button.Content>

</Button.Content>

</Button>

<Button AutomationProperties.Name="Yellow"

Click="colorButton_Click">

<Button.Content>

</Button.Content>

</Button>

<Button AutomationProperties.Name="Green"

Click="colorButton_Click">

<Button.Content>

</Button.Content>

</Button>

<Button AutomationProperties.Name="Blue"

Click="colorButton_Click">

<Button.Content>

</Button.Content>

</Button>

<Button AutomationProperties.Name="Indigo"

Click="colorButton_Click">

<Button.Content>

</Button.Content>

</Button>

<Button AutomationProperties.Name="Violet"

Click="colorButton_Click">

<Button.Content>

</Button.Content>

</Button>

<Button AutomationProperties.Name="Gray"

Click="colorButton_Click">

<Button.Content>

</Button.Content>

</Button>

</VariableSizedWrapGrid>

</Flyout>

</muxc:SplitButton.Flyout>

</muxc:SplitButton>

<RichEditBox Name="richEditBox"

HorizontalAlignment="Center"

Margin="0 10 0 0"

Width="240"

MinHeight="96"

PlaceholderText="Type something here"

TextChanged="richEditBox_TextChanged" />

</StackPanel>

</Grid>

</Page>

▶ MainPage.xaml.cs


using Windows.Foundation;
using Windows.Graphics.Display;
using Windows.UI;
using Windows.UI.Text;
using Windows.UI.ViewManagement;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Media;
using Windows.UI.Xaml.Shapes;

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

        #region Field

        /// <summary>
        /// 현재 색상
        /// </summary>
        private Color currentColor = Colors.Green;

        #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 = "SplitButton 엘리먼트 : Style 속성에서 SplitButtonRevealStyle 리소스 사용하기";

            #endregion

            this.richEditBox.Document.Selection.CharacterFormat.ForegroundColor = this.currentColor;

            this.richEditBox.Document.Selection.SetText
            (
                TextSetOptions.None,
                "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. " +
                "Tempor commodo ullamcorper a lacus."
            );
        }

        #endregion

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

        #region 분리 버튼 클릭시 처리하기 - splitButton_Click(sender, e)

        /// <summary>
        /// 분리 버튼 클릭시 처리하기
        /// </summary>
        /// <param name="sender">이벤트 발생자</param>
        /// <param name="e">이벤트 인자</param>
        private void splitButton_Click(Microsoft.UI.Xaml.Controls.SplitButton sender, Microsoft.UI.Xaml.Controls.SplitButtonClickEventArgs e)
        {
            Rectangle rectangle = sender.Content as Rectangle;

            Color color = (rectangle.Fill as SolidColorBrush).Color;

            this.richEditBox.Document.Selection.CharacterFormat.ForegroundColor = color;

            this.currentColor = color;
        }

        #endregion
        #region 색상 버튼 클릭시 처리하기 - colorButton_Click(sender, e)

        /// <summary>
        /// 색상 버튼 클릭시 처리하기
        /// </summary>
        /// <param name="sender">이벤트 발생자</param>
        /// <param name="e">이벤트 인자</param>
        private void colorButton_Click(object sender, RoutedEventArgs e)
        {
            Button colorButtonClicked = sender as Button;

            Rectangle colorRectangleClicked = colorButtonClicked.Content as Rectangle;

            Color colorClicked = (colorRectangleClicked.Fill as SolidColorBrush).Color;

            this.richEditBox.Document.Selection.CharacterFormat.ForegroundColor = colorClicked;

            this.currentColorRectangle.Fill = new SolidColorBrush(colorClicked);

            this.splitButton.Flyout.Hide();

            this.richEditBox.Focus(FocusState.Keyboard);

            this.currentColor = colorClicked;
        }

        #endregion
        #region 리치 에디트 박스 텍스트 변경시 처리하기 - richEditBox_TextChanged(sender, e)

        /// <summary>
        /// 리치 에디트 박스 텍스트 변경시 처리하기
        /// </summary>
        /// <param name="sender">이벤트 발생자</param>
        /// <param name="e">이벤트 인자</param>
        private void richEditBox_TextChanged(object sender, RoutedEventArgs e)
        {
            if(this.richEditBox.Document.Selection.CharacterFormat.ForegroundColor != currentColor)
            {
                this.richEditBox.Document.Selection.CharacterFormat.ForegroundColor = currentColor;
            }
        }

        #endregion
    }
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

using Windows.Foundation;

using Windows.Graphics.Display;

using Windows.UI;

using Windows.UI.Text;

using Windows.UI.ViewManagement;

using Windows.UI.Xaml;

using Windows.UI.Xaml.Controls;

using Windows.UI.Xaml.Media;

using Windows.UI.Xaml.Shapes;

namespace TestProject

{

/// <summary>

/// 메인 페이지

/// </summary>

public sealed partial class MainPage : Page

{

//////////////////////////////////////////////////////////////////////////////////////////////////// Field

////////////////////////////////////////////////////////////////////////////////////////// Private

#region Field

/// <summary>

/// 현재 색상

/// </summary>

private Color currentColor = Colors.Green;

#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 = "SplitButton 엘리먼트 : Style 속성에서 SplitButtonRevealStyle 리소스 사용하기";

#endregion

this.richEditBox.Document.Selection.CharacterFormat.ForegroundColor = this.currentColor;

this.richEditBox.Document.Selection.SetText

(

TextSetOptions.None,

"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. " +

"Tempor commodo ullamcorper a lacus."

);

}

#endregion

//////////////////////////////////////////////////////////////////////////////////////////////////// Method

////////////////////////////////////////////////////////////////////////////////////////// Private

#region 분리 버튼 클릭시 처리하기 - splitButton_Click(sender, e)

/// <summary>

/// 분리 버튼 클릭시 처리하기

/// </summary>

/// <param name="sender">이벤트 발생자</param>

/// <param name="e">이벤트 인자</param>

private void splitButton_Click(Microsoft.UI.Xaml.Controls.SplitButton sender, Microsoft.UI.Xaml.Controls.SplitButtonClickEventArgs e)

{

Rectangle rectangle = sender.Content as Rectangle;

Color color = (rectangle.Fill as SolidColorBrush).Color;

this.richEditBox.Document.Selection.CharacterFormat.ForegroundColor = color;

this.currentColor = color;

}

#endregion

#region 색상 버튼 클릭시 처리하기 - colorButton_Click(sender, e)

/// <summary>

/// 색상 버튼 클릭시 처리하기

/// </summary>

/// <param name="sender">이벤트 발생자</param>

/// <param name="e">이벤트 인자</param>

private void colorButton_Click(object sender, RoutedEventArgs e)

{

Button colorButtonClicked = sender as Button;

Rectangle colorRectangleClicked = colorButtonClicked.Content as Rectangle;

Color colorClicked = (colorRectangleClicked.Fill as SolidColorBrush).Color;

this.richEditBox.Document.Selection.CharacterFormat.ForegroundColor = colorClicked;

this.currentColorRectangle.Fill = new SolidColorBrush(colorClicked);

this.splitButton.Flyout.Hide();

this.richEditBox.Focus(FocusState.Keyboard);

this.currentColor = colorClicked;

}

#endregion

#region 리치 에디트 박스 텍스트 변경시 처리하기 - richEditBox_TextChanged(sender, e)

/// <summary>

/// 리치 에디트 박스 텍스트 변경시 처리하기

/// </summary>

/// <param name="sender">이벤트 발생자</param>

/// <param name="e">이벤트 인자</param>

private void richEditBox_TextChanged(object sender, RoutedEventArgs e)

{

if(this.richEditBox.Document.Selection.CharacterFormat.ForegroundColor != currentColor)

{

this.richEditBox.Document.Selection.CharacterFormat.ForegroundColor = currentColor;

}

#endregion

}

TestProject.zip

[C#/WINUI2.5] ToggleButton 엘리먼트 : Style 속성에서 ToggleButtonRevealStyle 리소스 사용하기

■ ToggleButton 엘리먼트의 Style 속성에서 ToggleButtonRevealStyle 리소스를 사용하는 방법을 보여준다. ▶ 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"
    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"
    FontFamily="나눔고딕코딩"
    FontSize="16">
    <Grid>
        <ToggleButton
            Style="{StaticResource ToggleButtonRevealStyle}"
            HorizontalAlignment="Center"
            VerticalAlignment="Center"
            Content="토글 버튼" />
    </Grid>
</Page>

<Page x:Class="TestProject.MainPage"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"

FontFamily="나눔고딕코딩"

FontSize="16">

<Grid>

<ToggleButton

Style="{StaticResource ToggleButtonRevealStyle}"

HorizontalAlignment="Center"

VerticalAlignment="Center"

Content="토글 버튼" />

</Grid>

</Page>

▶ MainPage.xaml.cs


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 clickCount = 0;

        #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 = "ToggleButton 엘리먼트 : Style 속성에서 ToggleButtonRevealStyle 리소스 사용하기";

            #endregion
        }

        #endregion
    }
}

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 clickCount = 0;

#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 = "ToggleButton 엘리먼트 : Style 속성에서 ToggleButtonRevealStyle 리소스 사용하기";

#endregion

}

#endregion

}

TestProject.zip

[C#/WINUI2.5] RepeatButton 엘리먼트 : Style 속성에서 RepeatButtonRevealStyle 리소스 사용하기

■ RepeatButton 엘리먼트의 Style 속성에서 RepeatButtonRevealStyle 리소스를 사용하는 방법을 보여준다. ▶ 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"
    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"
    FontFamily="나눔고딕코딩"
    FontSize="16">
    <Grid>
        <StackPanel
            HorizontalAlignment="Center"
            VerticalAlignment="Center">
            <RepeatButton
                Style="{StaticResource RepeatButtonRevealStyle}"
                Content="클릭 후 계속 눌러주세요."
                Click="repeatButton_Click" />
            <TextBlock Name="textBlock"
                Margin="0 10 0 0" />
        </StackPanel>
    </Grid>
</Page>

<Page x:Class="TestProject.MainPage"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"

FontFamily="나눔고딕코딩"

FontSize="16">

<Grid>

<StackPanel

HorizontalAlignment="Center"

VerticalAlignment="Center">

<RepeatButton

Style="{StaticResource RepeatButtonRevealStyle}"

Content="클릭 후 계속 눌러주세요."

Click="repeatButton_Click" />

<TextBlock Name="textBlock"

Margin="0 10 0 0" />

</StackPanel>

</Grid>

</Page>

▶ MainPage.xaml.cs


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 clickCount = 0;

        #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 = "RepeatButton 엘리먼트 : Style 속성에서 RepeatButtonRevealStyle 리소스 사용하기";

            #endregion
        }

        #endregion

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

        #region 반복 버튼 클릭시 처리하기 - repeatButton_Click(sender, e)

        /// <summary>
        /// 반복 버튼 클릭시 처리하기
        /// </summary>
        /// <param name="sender">이벤트 발생자</param>
        /// <param name="e">이벤트 인자</param>
        private void repeatButton_Click(object sender, RoutedEventArgs e)
        {
            this.clickCount += 1;

            this.textBlock.Text = $"클릭 수 : {this.clickCount}";
        }

        #endregion
    }
}

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 clickCount = 0;

#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 = "RepeatButton 엘리먼트 : Style 속성에서 RepeatButtonRevealStyle 리소스 사용하기";

#endregion

}

#endregion

//////////////////////////////////////////////////////////////////////////////////////////////////// Method

////////////////////////////////////////////////////////////////////////////////////////// Private

#region 반복 버튼 클릭시 처리하기 - repeatButton_Click(sender, e)

/// <summary>

/// 반복 버튼 클릭시 처리하기

/// </summary>

/// <param name="sender">이벤트 발생자</param>

/// <param name="e">이벤트 인자</param>

private void repeatButton_Click(object sender, RoutedEventArgs e)

{

this.clickCount += 1;

this.textBlock.Text = $"클릭 수 : {this.clickCount}";

}

#endregion

}

TestProject.zip

[C#/WINUI2.5] HyperlinkButton 엘리먼트 : Click 이벤트 사용하기

■ HyperlinkButton 엘리먼트의 Click 이벤트를 사용하는 방법을 보여준다. ▶ DetailPage.xaml


<Page x:Class="TestProject.DetailPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"
    FontFamily="나눔고딕코딩"
    FontSize="16">
    <Grid>
        <TextBlock
            HorizontalAlignment="Center"
            VerticalAlignment="Center"
            Text="상세 페이지 입니다." />
    </Grid>
</Page>

<Page x:Class="TestProject.DetailPage"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"

FontFamily="나눔고딕코딩"

FontSize="16">

<Grid>

<TextBlock

HorizontalAlignment="Center"

VerticalAlignment="Center"

Text="상세 페이지 입니다." />

</Grid>

</Page>

▶ DetailPage.xaml.cs


using Windows.UI.Core;
using Windows.UI.ViewManagement;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Navigation;

namespace TestProject
{
    /// <summary>
    /// 상세 페이지
    /// </summary>
    public sealed partial class DetailPage : Page
    {
        //////////////////////////////////////////////////////////////////////////////////////////////////// Constructor
        ////////////////////////////////////////////////////////////////////////////////////////// Public

        #region 생성자 - DetailPage()

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

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

            ApplicationView.GetForCurrentView().Title = "상세 페이지";

            #endregion
        }

        #endregion

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

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

        /// <summary>
        /// 탐색되는 경우 처리하기
        /// </summary>
        /// <param name="e">이벤트 인자</param>
        protected override void OnNavigatedTo(NavigationEventArgs e)
        {
            SystemNavigationManager.GetForCurrentView().AppViewBackButtonVisibility = AppViewBackButtonVisibility.Visible;

            base.OnNavigatedTo(e);
        }

        #endregion
    }
}

using Windows.UI.Core;

using Windows.UI.ViewManagement;

using Windows.UI.Xaml.Controls;

using Windows.UI.Xaml.Navigation;

namespace TestProject

{

/// <summary>

/// 상세 페이지

/// </summary>

public sealed partial class DetailPage : Page

{

//////////////////////////////////////////////////////////////////////////////////////////////////// Constructor

////////////////////////////////////////////////////////////////////////////////////////// Public

#region 생성자 - DetailPage()

/// <summary>

/// 생성자

/// </summary>

public DetailPage()

{

InitializeComponent();

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

ApplicationView.GetForCurrentView().Title = "상세 페이지";

#endregion

}

#endregion

//////////////////////////////////////////////////////////////////////////////////////////////////// Method

////////////////////////////////////////////////////////////////////////////////////////// Protected

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

/// <summary>

/// 탐색되는 경우 처리하기

/// </summary>

/// <param name="e">이벤트 인자</param>

protected override void OnNavigatedTo(NavigationEventArgs e)

{

SystemNavigationManager.GetForCurrentView().AppViewBackButtonVisibility = AppViewBackButtonVisibility.Visible;

base.OnNavigatedTo(e);

}

#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"
    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"
    FontFamily="나눔고딕코딩"
    FontSize="16">
    <Grid>
        <HyperlinkButton
            HorizontalAlignment="Center"
            VerticalAlignment="Center"
            Content="상세 페이지로 이동"
            Click="hyperlinkButton_Click" />
    </Grid>
</Page>

<Page x:Class="TestProject.MainPage"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"

FontFamily="나눔고딕코딩"

FontSize="16">

<Grid>

<HyperlinkButton

HorizontalAlignment="Center"

VerticalAlignment="Center"

Content="상세 페이지로 이동"

Click="hyperlinkButton_Click" />

</Grid>

</Page>

▶ MainPage.xaml.cs


using Windows.Foundation;
using Windows.Graphics.Display;
using Windows.UI.Core;
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 = "HyperlinkButton 엘리먼트 : Click 이벤트 사용하기";

            #endregion
        }

        #endregion

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

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

        /// <summary>
        /// 탐색되는 경우 처리하기
        /// </summary>
        /// <param name="e">이벤트 인자</param>
        protected override void OnNavigatedTo(NavigationEventArgs e)
        {
            SystemNavigationManager.GetForCurrentView().AppViewBackButtonVisibility = AppViewBackButtonVisibility.Collapsed;

            base.OnNavigatedTo(e);
        }

        #endregion

        ////////////////////////////////////////////////////////////////////////////////////////// Private

        #region 하이퍼링크 버튼 클릭시 처리하기 - hyperlinkButton_Click(sender, e)

        /// <summary>
        /// 하이퍼링크 버튼 클릭시 처리하기
        /// </summary>
        /// <param name="sender">이벤트 발생자</param>
        /// <param name="e">이벤트 인자</param>
        private void hyperlinkButton_Click(object sender, RoutedEventArgs e)
        {
            Frame.Navigate(typeof(DetailPage));
        }

        #endregion
    }
}

using Windows.Foundation;

using Windows.Graphics.Display;

using Windows.UI.Core;

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 = "HyperlinkButton 엘리먼트 : Click 이벤트 사용하기";

#endregion

}

#endregion

//////////////////////////////////////////////////////////////////////////////////////////////////// Method

////////////////////////////////////////////////////////////////////////////////////////// Protected

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

/// <summary>

/// 탐색되는 경우 처리하기

/// </summary>

/// <param name="e">이벤트 인자</param>

protected override void OnNavigatedTo(NavigationEventArgs e)

{

SystemNavigationManager.GetForCurrentView().AppViewBackButtonVisibility = AppViewBackButtonVisibility.Collapsed;

base.OnNavigatedTo(e);

}

#endregion

////////////////////////////////////////////////////////////////////////////////////////// Private

#region 하이퍼링크 버튼 클릭시 처리하기 - hyperlinkButton_Click(sender, e)

/// <summary>

/// 하이퍼링크 버튼 클릭시 처리하기

/// </summary>

/// <param name="sender">이벤트 발생자</param>

/// <param name="e">이벤트 인자</param>

private void hyperlinkButton_Click(object sender, RoutedEventArgs e)

{

Frame.Navigate(typeof(DetailPage));

}

#endregion

}

▶ App.xaml

[C#/WINUI2.5] HyperlinkButton 엘리먼트 : NavigateUri 속성 사용하기

■ HyperlinkButton 엘리먼트의 NavigateUri 속성을 사용하는 방법을 보여준다. ▶ 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"
    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"
    FontFamily="나눔고딕코딩"
    FontSize="16">
    <Grid>
        <HyperlinkButton
            HorizontalAlignment="Center"
            VerticalAlignment="Center"
            NavigateUri="https://icodebroker.tistory.com"
            Content="icodebroker 블로그" />
    </Grid>
</Page>

<Page x:Class="TestProject.MainPage"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"

FontFamily="나눔고딕코딩"

FontSize="16">

<Grid>

<HyperlinkButton

HorizontalAlignment="Center"

VerticalAlignment="Center"

NavigateUri="https://icodebroker.tistory.com"

Content="icodebroker 블로그" />

</Grid>

</Page>

▶ MainPage.xaml.cs


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 = "HyperlinkButton 엘리먼트 : NavigateUri 속성 사용하기";

            #endregion
        }

        #endregion
    }
}

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 = "HyperlinkButton 엘리먼트 : NavigateUri 속성 사용하기";

#endregion

}

#endregion

}

TestProject.zip