[C#/WINUI3/.NET6] ItemsView 엘리먼트 : Layout/ItemTemplate 속성을 사용해 레이아웃 LinedFlowLayout/StackLayout/UniformGridLayout 객체 교체하기

■ ItemsView 엘리먼트의 Layout/ItemTemplate 속성을 사용해 레이아웃 LinedFlowLayout/StackLayout/UniformGridLayout 객체를 교체하는 방법을 보여준다.

▶ CustomDataObject.cs


using System;
using System.Collections.Generic;

namespace TestProject
{
    /// <summary>
    /// 커스텀 데이터 객체
    /// </summary>
    public class CustomDataObject
    {
        //////////////////////////////////////////////////////////////////////////////////////////////////// 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 생성자 - CustomDataObject()

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

        #endregion

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

        #region 커스텀 데이터 객체 리스트 구하기 - GetCustomDataObjectList(includeAllItems)

        /// <summary>
        /// 커스텀 데이터 객체 리스트 구하기
        /// </summary>
        /// <param name="includeAllItems">모든 항목 포함 여부</param>
        /// <returns>커스텀 데이터 객체 리스트</returns>
        public static List<CustomDataObject> GetCustomDataObjectList(bool includeAllItems = false)
        {
            string[] dummyTextArray = new string[]
            {
                @"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();

            int count = includeAllItems ? 13 : 8;

            List<CustomDataObject> targetList = new List<CustomDataObject>();

            for(int i = 0; i < count; i++)
            {
                targetList.Add
                (
                    new CustomDataObject()
                    {
                        Title         = $"Item {i + 1}",
                        ImageLocation = $"/IMAGE/LandscapeImage{i + 1:d2}.jpg",
                        Views         = random.Next(100, 999).ToString(),
                        Likes         = random.Next(10, 99).ToString(),
                        Description   = dummyTextArray[i % dummyTextArray.Length],
                    }
                );
            }

            return targetList;
        }

        #endregion
    }
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

using System;

using System.Collections.Generic;

namespace TestProject

{

/// <summary>

/// 커스텀 데이터 객체

/// </summary>

public class CustomDataObject

{

//////////////////////////////////////////////////////////////////////////////////////////////////// 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 생성자 - CustomDataObject()

/// <summary>

/// 생성자

/// </summary>

public CustomDataObject()

{

}

#endregion

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

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

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

#region 커스텀 데이터 객체 리스트 구하기 - GetCustomDataObjectList(includeAllItems)

/// <summary>

/// 커스텀 데이터 객체 리스트 구하기

/// </summary>

/// <param name="includeAllItems">모든 항목 포함 여부</param>

/// <returns>커스텀 데이터 객체 리스트</returns>

public static List<CustomDataObject> GetCustomDataObjectList(bool includeAllItems = false)

{

string[] dummyTextArray = new string[]

{

@"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();

int count = includeAllItems ? 13 : 8;

List<CustomDataObject> targetList = new List<CustomDataObject>();

for(int i = 0; i < count; i++)

{

targetList.Add

(

new CustomDataObject()

{

Title = $"Item {i + 1}",

ImageLocation = $"/IMAGE/LandscapeImage{i + 1:d2}.jpg",

Views = random.Next(100, 999).ToString(),

Likes = random.Next(10, 99).ToString(),

Description = dummyTextArray[i % dummyTextArray.Length],

}

);

}

return targetList;

}

#endregion

}

▶ MainWindow.xaml


<?xml version="1.0" encoding="utf-8"?>
<Window x:Class="TestProject.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:TestProject"
    Title="TestProject">
    <Border Name="border"
        Margin="10"
        BorderThickness="1"
        BorderBrush="Black">
        <Border.Resources>
            <DataTemplate x:Key="LinedFlowLayoutDataTemplateKey" x:DataType="local:CustomDataObject">
                <ItemContainer>
                    <Grid>
                        <Image
                            HorizontalAlignment="Center"
                            VerticalAlignment="Center"
                            MinWidth="70"
                            Stretch="UniformToFill"
                            Source="{x:Bind ImageLocation}" />
                        <StackPanel
                            VerticalAlignment="Bottom"
                            Height="40"
                            Padding="5 1 5 1"
                            Orientation="Vertical"
                            Background="{ThemeResource SystemControlBackgroundBaseMediumBrush}"
                            Opacity="0.75">
                            <TextBlock
                                Foreground="{ThemeResource SystemControlForegroundAltHighBrush}"
                                Text="{x:Bind Title}" />
                            <StackPanel Orientation="Horizontal">
                                <TextBlock
                                    Style="{ThemeResource CaptionTextBlockStyle}"
                                    Foreground="{ThemeResource SystemControlForegroundAltHighBrush}"
                                    Text="{x:Bind Likes}" />
                                <TextBlock
                                    Style="{ThemeResource CaptionTextBlockStyle}"
                                    Foreground="{ThemeResource SystemControlForegroundAltHighBrush}"
                                    Text=" Likes" />
                            </StackPanel>
                        </StackPanel>
                    </Grid>
                </ItemContainer>
            </DataTemplate>
            <DataTemplate x:Key="StackLayoutDataTemplateKey" x:DataType="local:CustomDataObject">
                <ItemContainer>
                    <RelativePanel
                        Width="480"
                        MinHeight="80"
                        MaxHeight="100">
                        <Image Name="image"
                            HorizontalAlignment="Center"
                            VerticalAlignment="Center"
                            Margin="0 5 0 0"
                            Width="24"
                            Height="16"
                            RelativePanel.AlignLeftWithPanel="True"
                            RelativePanel.AlignTopWithPanel="True"
                            Stretch="UniformToFill"
                            Source="{x:Bind ImageLocation}" />
                        <TextBlock Name="titleTextBlock"
                            Style="{StaticResource BaseTextBlockStyle}"
                            Margin="10 0 0 0"
                            RelativePanel.RightOf="image"
                            RelativePanel.AlignTopWithPanel="True"
                            Text="{x:Bind Title}" />
                        <TextBlock
                            Style="{StaticResource CaptionTextBlockStyle}"
                            Margin="0 5 10 5"
                            RelativePanel.Below="titleTextBlock"
                            TextWrapping="Wrap"
                            TextTrimming="WordEllipsis"
                            Text="{x:Bind Description}" />
                    </RelativePanel>
                </ItemContainer>
            </DataTemplate>
            <DataTemplate x:Key="UniformGridLayoutDataTemplateKey" x:DataType="local:CustomDataObject">
                <ItemContainer>
                    <Grid Width="150">
                        <Image
                            HorizontalAlignment="Center"
                            VerticalAlignment="Center"
                            Stretch="UniformToFill"
                            Source="{x:Bind ImageLocation}" />
                        <StackPanel
                            VerticalAlignment="Bottom"
                            Height="40"
                            Padding="5 1 5 1"
                            Orientation="Vertical"
                            Opacity="0.75"
                            Background="{ThemeResource SystemControlBackgroundBaseMediumBrush}">
                            <TextBlock
                                Foreground="{ThemeResource SystemControlForegroundAltHighBrush}"
                                Text="{x:Bind Title}" />
                            <StackPanel Orientation="Horizontal">
                                <TextBlock
                                    Style="{ThemeResource CaptionTextBlockStyle}"
                                    Foreground="{ThemeResource SystemControlForegroundAltHighBrush}"
                                    Text="{x:Bind Likes}" />
                                <TextBlock
                                    Style="{ThemeResource CaptionTextBlockStyle}"
                                    Foreground="{ThemeResource SystemControlForegroundAltHighBrush}"
                                    Text=" Likes" />
                            </StackPanel>
                        </StackPanel>
                    </Grid>
                </ItemContainer>
            </DataTemplate>
        </Border.Resources>
        <Grid Margin="10">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*"    />
                <ColumnDefinition Width="Auto" />
            </Grid.ColumnDefinitions>
            <StackPanel Grid.Column="0">
                <ItemsView Name="itemsView"
                    ItemTemplate="{StaticResource LinedFlowLayoutDataTemplateKey}"
                    HorizontalAlignment="Left"
                    Width="500"
                    Height="500">
                    <ItemsView.Layout>
                        <LinedFlowLayout
                            LineHeight="160"
                            LineSpacing="5"
                            MinItemSpacing="5"
                            ItemsStretch="Fill" />
                    </ItemsView.Layout>
                </ItemsView>
            </StackPanel>
            <StackPanel Grid.Column="1"
                Width="200">
                <StackPanel.Resources>
                    <Style x:Key="DefaultNumberBoxStyle" TargetType="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"     />
                    </Style>
                </StackPanel.Resources>
                <RadioButtons
                    Header="Layout"
                    FontWeight="SemiBold">
                    <RadioButton Name="linedFlowLayoutRadioButton"
                        GroupName="ItemsViewLayouts"
                        FontWeight="Normal"
                        Content="LinedFlowLayout"
                        IsChecked="True" />
                    <RadioButton Name="uniformGridLayoutRadioButton"
                        GroupName="ItemsViewLayouts"
                        FontWeight="Normal"
                        Content="UniformGridLayout" />
                    <RadioButton Name="stackLayoutRadioButton"
                        GroupName="ItemsViewLayouts"
                        FontWeight="Normal"
                        Content="StackLayout" />
                </RadioButtons>
                <StackPanel Name="linedFlowLayoutSettingStackPanel"
                    Margin="0 10 0 0"
                    MinHeight="300">
                    <TextBlock
                        FontWeight="SemiBold"
                        Text="LinedFlowLayout settings" />
                    <NumberBox Name="lineSpacingNumberBox"
                        Style="{ThemeResource DefaultNumberBoxStyle}"
                        Margin="0 10 0 0"
                        Header="Space between lines"
                        Minimum="0"
                        Maximum="100"
                        Value="5" />
                    <NumberBox Name="minItemSpacingNumberBox"
                        Style="{ThemeResource DefaultNumberBoxStyle}"
                        Margin="0 10 0 0"
                        Header="Minimum space between items on a line"
                        Minimum="0"
                        Maximum="100"
                        Value="5" />
                    <RadioButtons
                        Margin="0 10 0 0"
                        Header="Line height">
                        <RadioButton Name="smallLineHeightRadioButton"
                            GroupName="LinedFlowLayoutLineHeights"
                            Content="Small" />
                        <RadioButton Name="largeLineHeightRadioButton"
                            GroupName="LinedFlowLayoutLineHeights"
                            Content="Large"
                            IsChecked="True" />
                    </RadioButtons>
                </StackPanel>
                <StackPanel Name="stackLayoutSettingsStackPanel"
                    Margin="0 10 0 0"
                    MinHeight="300"
                    Visibility="Collapsed">
                    <TextBlock
                        FontWeight="SemiBold"
                        Text="StackLayout settings" />
                    <NumberBox Name="spacingNumberBox"
                        Style="{ThemeResource DefaultNumberBoxStyle}"
                        Margin="0 10 0 0"
                        Header="Space between rows"
                        Minimum="0"
                        Maximum="100"
                        Value="5" />
                </StackPanel>
                <StackPanel Name="uniformGridLayoutSettingsStackPanel"
                    Margin="0 10 0 0"
                    MinHeight="300"
                    Visibility="Collapsed">
                    <TextBlock
                        FontWeight="SemiBold"
                        Text="UniformGridLayout settings" />
                    <NumberBox Name="minColumnSpacingNumberBox"
                        Style="{ThemeResource DefaultNumberBoxStyle}"
                        Margin="0 10 0 0"
                        Header="Minimum space between columns"
                        Minimum="0"
                        Maximum="100"
                        Value="5" />
                    <NumberBox Name="minRowSpacingNumberBox"
                        Style="{ThemeResource DefaultNumberBoxStyle}"
                        Margin="0 10 0 0"
                        Header="Minimum space between rows"
                        Minimum="0"
                        Maximum="100"
                        Value="5" />
                    <NumberBox Name="mximumRowsOrColumnsNumberBox"
                        Style="{ThemeResource DefaultNumberBoxStyle}"
                        Header="Maximum number of items per row before wrapping"
                        Minimum="1"
                        Maximum="8"
                        Value="3" />
                </StackPanel>
            </StackPanel>
        </Grid>
    </Border>
</Window>

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

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

217

218

219

220

221

222

223

224

225

226

227

228

229

230

231

232

233

234

235

236

237

238

<?xml version="1.0" encoding="utf-8"?>

<Window x:Class="TestProject.MainWindow"

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

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

xmlns:local="using:TestProject"

Title="TestProject">

<Border Name="border"

Margin="10"

BorderThickness="1"

BorderBrush="Black">

<Border.Resources>

<Grid>

<Image

HorizontalAlignment="Center"

VerticalAlignment="Center"

MinWidth="70"

Stretch="UniformToFill"

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

<StackPanel

VerticalAlignment="Bottom"

Height="40"

Padding="5 1 5 1"

Orientation="Vertical"

Background="{ThemeResource SystemControlBackgroundBaseMediumBrush}"

Opacity="0.75">

<TextBlock

Foreground="{ThemeResource SystemControlForegroundAltHighBrush}"

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

<TextBlock

Style="{ThemeResource CaptionTextBlockStyle}"

Foreground="{ThemeResource SystemControlForegroundAltHighBrush}"

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

<TextBlock

Style="{ThemeResource CaptionTextBlockStyle}"

Foreground="{ThemeResource SystemControlForegroundAltHighBrush}"

Text=" Likes" />

</StackPanel>

</Grid>

</ItemContainer>

</DataTemplate>

<RelativePanel

Width="480"

MinHeight="80"

MaxHeight="100">

<Image Name="image"

HorizontalAlignment="Center"

VerticalAlignment="Center"

Margin="0 5 0 0"

Width="24"

Height="16"

RelativePanel.AlignLeftWithPanel="True"

RelativePanel.AlignTopWithPanel="True"

Stretch="UniformToFill"

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

<TextBlock Name="titleTextBlock"

Style="{StaticResource BaseTextBlockStyle}"

Margin="10 0 0 0"

RelativePanel.RightOf="image"

RelativePanel.AlignTopWithPanel="True"

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

<TextBlock

Style="{StaticResource CaptionTextBlockStyle}"

Margin="0 5 10 5"

RelativePanel.Below="titleTextBlock"

TextWrapping="Wrap"

TextTrimming="WordEllipsis"

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

</RelativePanel>

</ItemContainer>

</DataTemplate>

<Image

HorizontalAlignment="Center"

VerticalAlignment="Center"

Stretch="UniformToFill"

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

<StackPanel

VerticalAlignment="Bottom"

Height="40"

Padding="5 1 5 1"

Orientation="Vertical"

Opacity="0.75"

Background="{ThemeResource SystemControlBackgroundBaseMediumBrush}">

<TextBlock

Foreground="{ThemeResource SystemControlForegroundAltHighBrush}"

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

<TextBlock

Style="{ThemeResource CaptionTextBlockStyle}"

Foreground="{ThemeResource SystemControlForegroundAltHighBrush}"

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

<TextBlock

Style="{ThemeResource CaptionTextBlockStyle}"

Foreground="{ThemeResource SystemControlForegroundAltHighBrush}"

Text=" Likes" />

</StackPanel>

</Grid>

</ItemContainer>

</DataTemplate>

</Border.Resources>

<Grid.ColumnDefinitions>

</Grid.ColumnDefinitions>

<ItemsView Name="itemsView"

ItemTemplate="{StaticResource LinedFlowLayoutDataTemplateKey}"

HorizontalAlignment="Left"

Width="500"

Height="500">

<ItemsView.Layout>

<LinedFlowLayout

LineHeight="160"

LineSpacing="5"

MinItemSpacing="5"

ItemsStretch="Fill" />

</ItemsView.Layout>

</ItemsView>

</StackPanel>

<StackPanel Grid.Column="1"

Width="200">

<StackPanel.Resources>

</Style>

</StackPanel.Resources>

<RadioButtons

Header="Layout"

FontWeight="SemiBold">

<RadioButton Name="linedFlowLayoutRadioButton"

GroupName="ItemsViewLayouts"

FontWeight="Normal"

Content="LinedFlowLayout"

IsChecked="True" />

<RadioButton Name="uniformGridLayoutRadioButton"

GroupName="ItemsViewLayouts"

FontWeight="Normal"

Content="UniformGridLayout" />

<RadioButton Name="stackLayoutRadioButton"

GroupName="ItemsViewLayouts"

FontWeight="Normal"

Content="StackLayout" />

</RadioButtons>

<StackPanel Name="linedFlowLayoutSettingStackPanel"

Margin="0 10 0 0"

MinHeight="300">

<TextBlock

FontWeight="SemiBold"

Text="LinedFlowLayout settings" />

<NumberBox Name="lineSpacingNumberBox"

Style="{ThemeResource DefaultNumberBoxStyle}"

Margin="0 10 0 0"

Header="Space between lines"

Minimum="0"

Maximum="100"

Value="5" />

<NumberBox Name="minItemSpacingNumberBox"

Style="{ThemeResource DefaultNumberBoxStyle}"

Margin="0 10 0 0"

Header="Minimum space between items on a line"

Minimum="0"

Maximum="100"

Value="5" />

<RadioButtons

Margin="0 10 0 0"

Header="Line height">

<RadioButton Name="smallLineHeightRadioButton"

GroupName="LinedFlowLayoutLineHeights"

Content="Small" />

<RadioButton Name="largeLineHeightRadioButton"

GroupName="LinedFlowLayoutLineHeights"

Content="Large"

IsChecked="True" />

</RadioButtons>

</StackPanel>

<StackPanel Name="stackLayoutSettingsStackPanel"

Margin="0 10 0 0"

MinHeight="300"

Visibility="Collapsed">

<TextBlock

FontWeight="SemiBold"

Text="StackLayout settings" />

<NumberBox Name="spacingNumberBox"

Style="{ThemeResource DefaultNumberBoxStyle}"

Margin="0 10 0 0"

Header="Space between rows"

Minimum="0"

Maximum="100"

Value="5" />

</StackPanel>

<StackPanel Name="uniformGridLayoutSettingsStackPanel"

Margin="0 10 0 0"

MinHeight="300"

Visibility="Collapsed">

<TextBlock

FontWeight="SemiBold"

Text="UniformGridLayout settings" />

<NumberBox Name="minColumnSpacingNumberBox"

Style="{ThemeResource DefaultNumberBoxStyle}"

Margin="0 10 0 0"

Header="Minimum space between columns"

Minimum="0"

Maximum="100"

Value="5" />

<NumberBox Name="minRowSpacingNumberBox"

Style="{ThemeResource DefaultNumberBoxStyle}"

Margin="0 10 0 0"

Header="Minimum space between rows"

Minimum="0"

Maximum="100"

Value="5" />

<NumberBox Name="mximumRowsOrColumnsNumberBox"

Style="{ThemeResource DefaultNumberBoxStyle}"

Header="Maximum number of items per row before wrapping"

Minimum="1"

Maximum="8"

Value="3" />

</StackPanel>

</Grid>

</Border>

</Window>

▶ MainWindow.xaml.cs


using System.Collections.Generic;
using System.Collections.ObjectModel;
using System.Threading.Tasks;

using Microsoft.UI.Dispatching;
using Microsoft.UI.Xaml;
using Microsoft.UI.Xaml.Controls;

namespace TestProject
{
    /// <summary>
    /// 메인 윈도우
    /// </summary>
    public sealed partial class MainWindow : Window
    {
        //////////////////////////////////////////////////////////////////////////////////////////////////// Field
        ////////////////////////////////////////////////////////////////////////////////////////// Private

        #region Field

        /// <summary>
        /// 선형 플로우 레이아웃
        /// </summary>
        private LinedFlowLayout linedFlowLayout = null;

        /// <summary>
        /// 선형 플로우 레이아웃 데이터 템플리트
        /// </summary>
        private DataTemplate linedFlowLayoutDataTemplate = null;

        /// <summary>
        /// 스택 레이아웃
        /// </summary>
        private StackLayout stackLayout = null;

        /// <summary>
        /// 스택 레이아웃 데이터 템플리트
        /// </summary>
        private DataTemplate stackLayoutDataTemplate = null;

        /// <summary>
        /// 유니폼 그리드 레이아웃
        /// </summary>
        private UniformGridLayout uniformGridLayout = null;

        /// <summary>
        /// 유니폼 그리드 레이아웃 데이터 템플리트
        /// </summary>
        private DataTemplate uniformGridLayoutDataTemplate = null;

        /// <summary>
        /// 선형 플로우 레이아웃 라인 높이 비동기 적용 여부
        /// </summary>
        private bool applyLinedFlowLayoutLineHeightAsync = false;

        /// <summary>
        /// 선형 플로우 레이아웃 옵션 비동기 적용 여부
        /// </summary>
        private bool applyLinedFlowLayoutOptionsAsync = false;

        #endregion

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

        #region 생성자 - MainWindow()

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

            this.border.Loaded                              += border_Loaded;
            this.linedFlowLayoutRadioButton.Checked         += layoutRadioButton_Checked;
            this.uniformGridLayoutRadioButton.Checked       += layoutRadioButton_Checked;
            this.stackLayoutRadioButton.Checked             += layoutRadioButton_Checked;
            this.lineSpacingNumberBox.ValueChanged          += linedFlowLayoutSettingsNumberBox_ValueChanged;
            this.minItemSpacingNumberBox.ValueChanged       += linedFlowLayoutSettingsNumberBox_ValueChanged;
            this.smallLineHeightRadioButton.Checked         += lineHeightRadioButton_Checked;
            this.largeLineHeightRadioButton.Checked         += lineHeightRadioButton_Checked;
            this.spacingNumberBox.ValueChanged              += stackLayoutSettingsNumberBox_ValueChanged;
            this.minColumnSpacingNumberBox.ValueChanged     += uniformGridLayoutSettingsNumberBox_ValueChanged;
            this.minRowSpacingNumberBox.ValueChanged        += uniformGridLayoutSettingsNumberBox_ValueChanged;
            this.mximumRowsOrColumnsNumberBox.ValueChanged  += uniformGridLayoutSettingsNumberBox_ValueChanged;
        }

        #endregion

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

        #region 테두리 로드시 처리하기 - border_Loaded(sender, e)

        /// <summary>
        /// 테두리 로드시 처리하기
        /// </summary>
        /// <param name="sender">이벤트 발생자</param>
        /// <param name="e">이벤트 인자</param>
        private void border_Loaded(object sender, RoutedEventArgs e)
        {
            if(this.itemsView != null)
            {
                this.itemsView.ScrollView.ViewChanged += itemsViewScrollView_ViewChanged;

                this.linedFlowLayout             = this.itemsView.Layout as LinedFlowLayout;
                this.linedFlowLayoutDataTemplate = this.itemsView.ItemTemplate as DataTemplate;
            }

            List<CustomDataObject> sourceList = CustomDataObject.GetCustomDataObjectList(includeAllItems: true);

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

            Task.Run
            (
                delegate ()
                {
                    _ = DispatcherQueue.TryEnqueue
                    (
                        DispatcherQueuePriority.Low,
                        () =>
                        {
                            if(this.itemsView != null)
                            {
                                this.itemsView.ItemsSource = sourceCollection;
                            }
                        }
                    );
                }
            );
        }

        #endregion
        #region 아이템 뷰 스크롤 뷰 뷰 변경시 처리하기 - itemsViewScrollView_ViewChanged(sender, e)

        /// <summary>
        /// 아이템 뷰 스크롤 뷰 뷰 변경시 처리하기
        /// </summary>
        /// <param name="sender">이벤트 발생자</param>
        /// <param name="e">이벤트 인자</param>
        private void itemsViewScrollView_ViewChanged(ScrollView sender, object e)
        {
            if(sender.VerticalOffset == 0 && (this.applyLinedFlowLayoutOptionsAsync || this.applyLinedFlowLayoutLineHeightAsync))
            {
                if(this.applyLinedFlowLayoutOptionsAsync)
                {
                    this.applyLinedFlowLayoutOptionsAsync = false;

                    ApplyLinedFlowLayoutSettings();
                }

                if(this.applyLinedFlowLayoutLineHeightAsync)
                {
                    this.applyLinedFlowLayoutLineHeightAsync = false;

                    ApplyLinedFlowLayoutLineHeight();
                }
            }
        }

        #endregion
        #region 레이아웃 라디오 버튼 체크시 처리하기 - layoutRadioButton_Checked(sender, e)

        /// <summary>
        /// 레이아웃 라디오 버튼 체크시 처리하기
        /// </summary>
        /// <param name="sender">이벤트 발생자</param>
        /// <param name="e">이벤트 인자</param>
        private void layoutRadioButton_Checked(object sender, RoutedEventArgs e)
        {
            if(sender is RadioButton radioButton && this.itemsView != null)
            {
                switch(radioButton.Content.ToString())
                {
                    case "LinedFlowLayout" :

                        if(this.linedFlowLayout != null && this.linedFlowLayoutDataTemplate != null)
                        {
                            this.itemsView.Layout       = this.linedFlowLayout;
                            this.itemsView.ItemTemplate = this.linedFlowLayoutDataTemplate;

                            this.linedFlowLayoutSettingStackPanel.Visibility    = Visibility.Visible;
                            this.stackLayoutSettingsStackPanel.Visibility       = Visibility.Collapsed;
                            this.uniformGridLayoutSettingsStackPanel.Visibility = Visibility.Collapsed;
                        }

                        break;

                    case "StackLayout" :

                        if(this.stackLayout == null)
                        {
                            this.stackLayout = new StackLayout() { Spacing = 5 };
                        }

                        if(this.stackLayoutDataTemplate == null)
                        {
                            this.stackLayoutDataTemplate = this.border.Resources["StackLayoutDataTemplateKey"] as DataTemplate;
                        }

                        this.itemsView.Layout       = this.stackLayout;
                        this.itemsView.ItemTemplate = this.stackLayoutDataTemplate;

                        this.linedFlowLayoutSettingStackPanel.Visibility    = Visibility.Collapsed;
                        this.stackLayoutSettingsStackPanel.Visibility       = Visibility.Visible;
                        this.uniformGridLayoutSettingsStackPanel.Visibility = Visibility.Collapsed;

                        break;

                    case "UniformGridLayout" :

                        if(this.uniformGridLayout == null)
                        {
                            this.uniformGridLayout = new UniformGridLayout()
                            {
                                MinRowSpacing        = 5,
                                MinColumnSpacing     = 5,
                                MaximumRowsOrColumns = 3
                            };
                        }

                        if(this.uniformGridLayoutDataTemplate == null)
                        {
                            this.uniformGridLayoutDataTemplate = this.border.Resources["UniformGridLayoutDataTemplateKey"] as DataTemplate;
                        }

                        this.itemsView.Layout       = this.uniformGridLayout;
                        this.itemsView.ItemTemplate = this.uniformGridLayoutDataTemplate;

                        this.linedFlowLayoutSettingStackPanel.Visibility    = Visibility.Collapsed;
                        this.stackLayoutSettingsStackPanel.Visibility       = Visibility.Collapsed;
                        this.uniformGridLayoutSettingsStackPanel.Visibility = Visibility.Visible;

                        break;
                }
            }
        }

        #endregion
        #region 선형 플로우 레이아웃 설정 넘버 박스 값 변경시 처리하기 - linedFlowLayoutSettingsNumberBox_ValueChanged(sender, e)

        /// <summary>
        /// 선형 플로우 레이아웃 설정 넘버 박스 값 변경시 처리하기
        /// </summary>
        /// <param name="sender">이벤트 발생자</param>
        /// <param name="e">이벤트 인자</param>
        private void linedFlowLayoutSettingsNumberBox_ValueChanged(NumberBox sender, NumberBoxValueChangedEventArgs e)
        {
            if(this.itemsView != null && this.itemsView.ScrollView != null && this.itemsView.ScrollView.VerticalOffset != 0)
            {
                this.itemsView.ScrollView.ScrollTo(0, 0, new ScrollingScrollOptions(ScrollingAnimationMode.Disabled, ScrollingSnapPointsMode.Ignore));

                this.applyLinedFlowLayoutOptionsAsync = true;
            }
            else
            {
                ApplyLinedFlowLayoutSettings();
            }
        }

        #endregion
        #region 라인 높이 라디오 버튼 체크시 처리하기 - lineHeightRadioButton_Checked(sender, e)

        /// <summary>
        /// 라인 높이 라디오 버튼 체크시 처리하기
        /// </summary>
        /// <param name="sender">이벤트 발생자</param>
        /// <param name="e">이벤트 인자</param>
        private void lineHeightRadioButton_Checked(object sender, RoutedEventArgs e)
        {
            if(this.itemsView != null && this.itemsView.ScrollView != null && this.itemsView.ScrollView.VerticalOffset != 0)
            {
                this.itemsView.ScrollView.ScrollTo(0, 0, new ScrollingScrollOptions(ScrollingAnimationMode.Disabled, ScrollingSnapPointsMode.Ignore));

                this.applyLinedFlowLayoutLineHeightAsync = true;
            }
            else
            {
                ApplyLinedFlowLayoutLineHeight();
            }
        }

        #endregion
        #region 스택 레이아웃 설정 넘버 박스 값 변경시 처리하기 - stackLayoutSettingsNumberBox_ValueChanged(sender, e)

        /// <summary>
        /// 스택 레이아웃 설정 넘버 박스 값 변경시 처리하기
        /// </summary>
        /// <param name="sender">이벤트 발생자</param>
        /// <param name="e">이벤트 인자</param>
        private void stackLayoutSettingsNumberBox_ValueChanged(NumberBox sender, NumberBoxValueChangedEventArgs e)
        {
            if(this.stackLayout != null)
            {
                this.stackLayout.Spacing = this.spacingNumberBox.Value;
            }
        }

        #endregion
        #region 유니폼 그리드 레이아웃 설정 넘버 박스 값 변경시 처리하기 - uniformGridLayoutSettingsNumberBox_ValueChanged(sender, e)

        /// <summary>
        /// 유니폼 그리드 레이아웃 설정 넘버 박스 값 변경시 처리하기
        /// </summary>
        /// <param name="sender">이벤트 발생자</param>
        /// <param name="e">이벤트 인자</param>
        private void uniformGridLayoutSettingsNumberBox_ValueChanged(NumberBox sender, NumberBoxValueChangedEventArgs e)
        {
            if(this.uniformGridLayout != null)
            {
                this.uniformGridLayout.MinColumnSpacing     = this.minColumnSpacingNumberBox.Value;
                this.uniformGridLayout.MinRowSpacing        = this.minRowSpacingNumberBox.Value;
                this.uniformGridLayout.MaximumRowsOrColumns = (int)this.mximumRowsOrColumnsNumberBox.Value;
            }
        }

        #endregion

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

        #region 선형 플로우 레이아웃 설정 적용하기 - ApplyLinedFlowLayoutSettings()

        /// <summary>
        /// 선형 플로우 레이아웃 설정 적용하기
        /// </summary>
        private void ApplyLinedFlowLayoutSettings()
        {
            if(this.linedFlowLayout != null && this.lineSpacingNumberBox != null && this.minItemSpacingNumberBox != null)
            {
                this.linedFlowLayout.LineSpacing    = this.lineSpacingNumberBox.Value;
                this.linedFlowLayout.MinItemSpacing = this.minItemSpacingNumberBox.Value;
            }
        }

        #endregion
        #region 선형 플로우 레이아웃 라인 높이 적용하기 - ApplyLinedFlowLayoutLineHeight()

        /// <summary>
        /// 선형 플로우 레이아웃 라인 높이 적용하기
        /// </summary>
        private void ApplyLinedFlowLayoutLineHeight()
        {
            if(this.linedFlowLayout != null && this.smallLineHeightRadioButton != null)
            {
                this.linedFlowLayout.LineHeight = (bool)this.smallLineHeightRadioButton.IsChecked ? 80 : 160;
            }
        }

        #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

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

217

218

219

220

221

222

223

224

225

226

227

228

229

230

231

232

233

234

235

236

237

238

239

240

241

242

243

244

245

246

247

248

249

250

251

252

253

254

255

256

257

258

259

260

261

262

263

264

265

266

267

268

269

270

271

272

273

274

275

276

277

278

279

280

281

282

283

284

285

286

287

288

289

290

291

292

293

294

295

296

297

298

299

300

301

302

303

304

305

306

307

308

309

310

311

312

313

314

315

316

317

318

319

320

321

322

323

324

325

326

327

328

329

330

331

332

333

334

335

336

337

338

339

340

341

342

343

344

345

346

347

348

349

350

351

352

353

354

355

using System.Collections.Generic;

using System.Collections.ObjectModel;

using System.Threading.Tasks;

using Microsoft.UI.Dispatching;

using Microsoft.UI.Xaml;

using Microsoft.UI.Xaml.Controls;

namespace TestProject

{

/// <summary>

/// 메인 윈도우

/// </summary>

public sealed partial class MainWindow : Window

{

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

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

#region Field

/// <summary>

/// 선형 플로우 레이아웃

/// </summary>

private LinedFlowLayout linedFlowLayout = null;

/// <summary>

/// 선형 플로우 레이아웃 데이터 템플리트

/// </summary>

private DataTemplate linedFlowLayoutDataTemplate = null;

/// <summary>

/// 스택 레이아웃

/// </summary>

private StackLayout stackLayout = null;

/// <summary>

/// 스택 레이아웃 데이터 템플리트

/// </summary>

private DataTemplate stackLayoutDataTemplate = null;

/// <summary>

/// 유니폼 그리드 레이아웃

/// </summary>

private UniformGridLayout uniformGridLayout = null;

/// <summary>

/// 유니폼 그리드 레이아웃 데이터 템플리트

/// </summary>

private DataTemplate uniformGridLayoutDataTemplate = null;

/// <summary>

/// 선형 플로우 레이아웃 라인 높이 비동기 적용 여부

/// </summary>

private bool applyLinedFlowLayoutLineHeightAsync = false;

/// <summary>

/// 선형 플로우 레이아웃 옵션 비동기 적용 여부

/// </summary>

private bool applyLinedFlowLayoutOptionsAsync = false;

#endregion

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

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

#region 생성자 - MainWindow()

/// <summary>

/// 생성자

/// </summary>

public MainWindow()

{

InitializeComponent();

this.border.Loaded += border_Loaded;

this.linedFlowLayoutRadioButton.Checked += layoutRadioButton_Checked;

this.uniformGridLayoutRadioButton.Checked += layoutRadioButton_Checked;

this.stackLayoutRadioButton.Checked += layoutRadioButton_Checked;

this.lineSpacingNumberBox.ValueChanged += linedFlowLayoutSettingsNumberBox_ValueChanged;

this.minItemSpacingNumberBox.ValueChanged += linedFlowLayoutSettingsNumberBox_ValueChanged;

this.smallLineHeightRadioButton.Checked += lineHeightRadioButton_Checked;

this.largeLineHeightRadioButton.Checked += lineHeightRadioButton_Checked;

this.spacingNumberBox.ValueChanged += stackLayoutSettingsNumberBox_ValueChanged;

this.minColumnSpacingNumberBox.ValueChanged += uniformGridLayoutSettingsNumberBox_ValueChanged;

this.minRowSpacingNumberBox.ValueChanged += uniformGridLayoutSettingsNumberBox_ValueChanged;

this.mximumRowsOrColumnsNumberBox.ValueChanged += uniformGridLayoutSettingsNumberBox_ValueChanged;

}

#endregion

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

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

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

#region 테두리 로드시 처리하기 - border_Loaded(sender, e)

/// <summary>

/// 테두리 로드시 처리하기

/// </summary>

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

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

private void border_Loaded(object sender, RoutedEventArgs e)

{

if(this.itemsView != null)

{

this.itemsView.ScrollView.ViewChanged += itemsViewScrollView_ViewChanged;

this.linedFlowLayout = this.itemsView.Layout as LinedFlowLayout;

this.linedFlowLayoutDataTemplate = this.itemsView.ItemTemplate as DataTemplate;

}

List<CustomDataObject> sourceList = CustomDataObject.GetCustomDataObjectList(includeAllItems: true);

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

Task.Run

(

delegate ()

{

_ = DispatcherQueue.TryEnqueue

(

DispatcherQueuePriority.Low,

() =>

{

if(this.itemsView != null)

{

this.itemsView.ItemsSource = sourceCollection;

}

);

}

);

}

#endregion

#region 아이템 뷰 스크롤 뷰 뷰 변경시 처리하기 - itemsViewScrollView_ViewChanged(sender, e)

/// <summary>

/// 아이템 뷰 스크롤 뷰 뷰 변경시 처리하기

/// </summary>

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

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

private void itemsViewScrollView_ViewChanged(ScrollView sender, object e)

{

if(sender.VerticalOffset == 0 && (this.applyLinedFlowLayoutOptionsAsync || this.applyLinedFlowLayoutLineHeightAsync))

{

if(this.applyLinedFlowLayoutOptionsAsync)

{

this.applyLinedFlowLayoutOptionsAsync = false;

ApplyLinedFlowLayoutSettings();

}

if(this.applyLinedFlowLayoutLineHeightAsync)

{

this.applyLinedFlowLayoutLineHeightAsync = false;

ApplyLinedFlowLayoutLineHeight();

}

#endregion

#region 레이아웃 라디오 버튼 체크시 처리하기 - layoutRadioButton_Checked(sender, e)

/// <summary>

/// 레이아웃 라디오 버튼 체크시 처리하기

/// </summary>

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

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

private void layoutRadioButton_Checked(object sender, RoutedEventArgs e)

{

if(sender is RadioButton radioButton && this.itemsView != null)

{

switch(radioButton.Content.ToString())

{

case "LinedFlowLayout" :

if(this.linedFlowLayout != null && this.linedFlowLayoutDataTemplate != null)

{

this.itemsView.Layout = this.linedFlowLayout;

this.itemsView.ItemTemplate = this.linedFlowLayoutDataTemplate;

this.linedFlowLayoutSettingStackPanel.Visibility = Visibility.Visible;

this.stackLayoutSettingsStackPanel.Visibility = Visibility.Collapsed;

this.uniformGridLayoutSettingsStackPanel.Visibility = Visibility.Collapsed;

}

break;

case "StackLayout" :

if(this.stackLayout == null)

{

this.stackLayout = new StackLayout() { Spacing = 5 };

}

if(this.stackLayoutDataTemplate == null)

{

this.stackLayoutDataTemplate = this.border.Resources["StackLayoutDataTemplateKey"] as DataTemplate;

}

this.itemsView.Layout = this.stackLayout;

this.itemsView.ItemTemplate = this.stackLayoutDataTemplate;

this.linedFlowLayoutSettingStackPanel.Visibility = Visibility.Collapsed;

this.stackLayoutSettingsStackPanel.Visibility = Visibility.Visible;

this.uniformGridLayoutSettingsStackPanel.Visibility = Visibility.Collapsed;

break;

case "UniformGridLayout" :

if(this.uniformGridLayout == null)

{

this.uniformGridLayout = new UniformGridLayout()

{

MinRowSpacing = 5,

MinColumnSpacing = 5,

MaximumRowsOrColumns = 3

};

}

if(this.uniformGridLayoutDataTemplate == null)

{

this.uniformGridLayoutDataTemplate = this.border.Resources["UniformGridLayoutDataTemplateKey"] as DataTemplate;

}

this.itemsView.Layout = this.uniformGridLayout;

this.itemsView.ItemTemplate = this.uniformGridLayoutDataTemplate;

this.linedFlowLayoutSettingStackPanel.Visibility = Visibility.Collapsed;

this.stackLayoutSettingsStackPanel.Visibility = Visibility.Collapsed;

this.uniformGridLayoutSettingsStackPanel.Visibility = Visibility.Visible;

break;

}

#endregion

#region 선형 플로우 레이아웃 설정 넘버 박스 값 변경시 처리하기 - linedFlowLayoutSettingsNumberBox_ValueChanged(sender, e)

/// <summary>

/// 선형 플로우 레이아웃 설정 넘버 박스 값 변경시 처리하기

/// </summary>

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

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

private void linedFlowLayoutSettingsNumberBox_ValueChanged(NumberBox sender, NumberBoxValueChangedEventArgs e)

{

if(this.itemsView != null && this.itemsView.ScrollView != null && this.itemsView.ScrollView.VerticalOffset != 0)

{

this.itemsView.ScrollView.ScrollTo(0, 0, new ScrollingScrollOptions(ScrollingAnimationMode.Disabled, ScrollingSnapPointsMode.Ignore));

this.applyLinedFlowLayoutOptionsAsync = true;

}

else

{

ApplyLinedFlowLayoutSettings();

}

#endregion

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

/// <summary>

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

/// </summary>

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

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

private void lineHeightRadioButton_Checked(object sender, RoutedEventArgs e)

{

if(this.itemsView != null && this.itemsView.ScrollView != null && this.itemsView.ScrollView.VerticalOffset != 0)

{

this.itemsView.ScrollView.ScrollTo(0, 0, new ScrollingScrollOptions(ScrollingAnimationMode.Disabled, ScrollingSnapPointsMode.Ignore));

this.applyLinedFlowLayoutLineHeightAsync = true;

}

else

{

ApplyLinedFlowLayoutLineHeight();

}

#endregion

#region 스택 레이아웃 설정 넘버 박스 값 변경시 처리하기 - stackLayoutSettingsNumberBox_ValueChanged(sender, e)

/// <summary>

/// 스택 레이아웃 설정 넘버 박스 값 변경시 처리하기

/// </summary>

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

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

private void stackLayoutSettingsNumberBox_ValueChanged(NumberBox sender, NumberBoxValueChangedEventArgs e)

{

if(this.stackLayout != null)

{

this.stackLayout.Spacing = this.spacingNumberBox.Value;

}

#endregion

#region 유니폼 그리드 레이아웃 설정 넘버 박스 값 변경시 처리하기 - uniformGridLayoutSettingsNumberBox_ValueChanged(sender, e)

/// <summary>

/// 유니폼 그리드 레이아웃 설정 넘버 박스 값 변경시 처리하기

/// </summary>

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

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

private void uniformGridLayoutSettingsNumberBox_ValueChanged(NumberBox sender, NumberBoxValueChangedEventArgs e)

{

if(this.uniformGridLayout != null)

{

this.uniformGridLayout.MinColumnSpacing = this.minColumnSpacingNumberBox.Value;

this.uniformGridLayout.MinRowSpacing = this.minRowSpacingNumberBox.Value;

this.uniformGridLayout.MaximumRowsOrColumns = (int)this.mximumRowsOrColumnsNumberBox.Value;

}

#endregion

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

#region 선형 플로우 레이아웃 설정 적용하기 - ApplyLinedFlowLayoutSettings()

/// <summary>

/// 선형 플로우 레이아웃 설정 적용하기

/// </summary>

private void ApplyLinedFlowLayoutSettings()

{

if(this.linedFlowLayout != null && this.lineSpacingNumberBox != null && this.minItemSpacingNumberBox != null)

{

this.linedFlowLayout.LineSpacing = this.lineSpacingNumberBox.Value;

this.linedFlowLayout.MinItemSpacing = this.minItemSpacingNumberBox.Value;

}

#endregion

#region 선형 플로우 레이아웃 라인 높이 적용하기 - ApplyLinedFlowLayoutLineHeight()

/// <summary>

/// 선형 플로우 레이아웃 라인 높이 적용하기

/// </summary>

private void ApplyLinedFlowLayoutLineHeight()

{

if(this.linedFlowLayout != null && this.smallLineHeightRadioButton != null)

{

this.linedFlowLayout.LineHeight = (bool)this.smallLineHeightRadioButton.IsChecked ? 80 : 160;

}

#endregion

}

TestProject.zip