MICROSOFT Archives - 8 중 2 번째 페이지

[C#/WINUI2.5] AcrylicBrush 엘리먼트 : 커스텀 배경 아크릴 브러시 사용하기

■ AcrylicBrush 엘리먼트를 사용해 커스텀 배경 아크릴 브러시를 만드는 방법을 보여준다. ▶ 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:media="using:Microsoft.UI.Xaml.Media"
    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"
    FontFamily="나눔고딕코딩"
    FontSize="16">
    <Page.Resources>
        <ResourceDictionary>
            <ResourceDictionary.ThemeDictionaries>
                <ResourceDictionary x:Key="Default">
                    <media:AcrylicBrush x:Key="CustomAcrylicBrushKey"
                        BackgroundSource="HostBackdrop"
                        TintOpacity="0.8"
                        TintColor="Black"
                        FallbackColor="Green" />
                </ResourceDictionary>
            </ResourceDictionary.ThemeDictionaries>
            <DataTemplate x:Key="ColorDataTemplateKey" x:DataType="SolidColorBrush">
                <StackPanel Orientation="Horizontal">
                    <Rectangle
                        Height="20"
                        Width="20"
                        Fill="{x:Bind}" />
                    <TextBlock
                        Margin="5 0 0 0"
                        Text="{x:Bind Color}" />
                </StackPanel>
            </DataTemplate>
        </ResourceDictionary>
    </Page.Resources>
    <Grid>
        <Grid
            HorizontalAlignment="Center"
            VerticalAlignment="Center">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*"    />
                <ColumnDefinition Width="50"   />
                <ColumnDefinition Width="Auto" />
            </Grid.ColumnDefinitions>
            <Grid Grid.Column="0"
                HorizontalAlignment="Center"
                VerticalAlignment="Center"
                Width="400"
                Height="400">
                <Grid>
                    <Rectangle
                        HorizontalAlignment="Left"
                        VerticalAlignment="Top"
                        Width="200"
                        Height="200"
                        Fill="Aqua" />
                    <Ellipse
                        HorizontalAlignment="Center"
                        VerticalAlignment="Center"
                        Width="200"
                        Height="200"
                        Fill="Magenta" />
                    <Rectangle
                        HorizontalAlignment="Right"
                        VerticalAlignment="Bottom"
                        Width="200"
                        Height="200"
                        Fill="Yellow" />
                </Grid>
                <Rectangle Name="rectangle"
                    Margin="20"
                    Fill="{ThemeResource CustomAcrylicBrushKey}" />
            </Grid>
            <StackPanel Grid.Column="2"
                VerticalAlignment="Center"
                Spacing="10">
                <TextBlock Text="색조 불투명도 :" />
                <Slider Name="tintOpacitySlider"
                    Width="200"
                    Minimum="0"
                    Maximum="1"
                    SmallChange="0.001"
                    StepFrequency="0.001"
                    IsFocusEngagementEnabled="False"
                    ValueChanged="tintOpacitySlider_ValueChanged" />
                <TextBlock Text="색조 색상 :" />
                <ComboBox Name="tintColorComboBox"
                    ItemTemplate="{StaticResource ColorDataTemplateKey}"
                    SelectionChanged="tintColorComboBox_SelectionChanged">
                    <SolidColorBrush Color="Black" />
                    <SolidColorBrush Color="Red"   />
                    <SolidColorBrush Color="Blue"  />
                </ComboBox>
                <TextBlock Text="폴백 색상 :" />
                <ComboBox Name="fallbackColorComboBox"
                    ItemTemplate="{StaticResource ColorDataTemplateKey}"
                    SelectionChanged="fallbackColorComboBox_SelectionChanged">
                    <SolidColorBrush Color="Green"  />
                    <SolidColorBrush Color="Yellow" />
                </ComboBox>
            </StackPanel>
        </Grid>
    </Grid>
</Page>

100

101

102

<Page x:Class="TestProject.MainPage"

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

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

xmlns:media="using:Microsoft.UI.Xaml.Media"

Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"

FontFamily="나눔고딕코딩"

FontSize="16">

<Page.Resources>

<ResourceDictionary.ThemeDictionaries>

<media:AcrylicBrush x:Key="CustomAcrylicBrushKey"

BackgroundSource="HostBackdrop"

TintOpacity="0.8"

TintColor="Black"

FallbackColor="Green" />

</ResourceDictionary>

</ResourceDictionary.ThemeDictionaries>

<Rectangle

Height="20"

Width="20"

Fill="{x:Bind}" />

<TextBlock

Margin="5 0 0 0"

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

</StackPanel>

</DataTemplate>

</ResourceDictionary>

</Page.Resources>

<Grid>

<Grid

HorizontalAlignment="Center"

VerticalAlignment="Center">

<Grid.ColumnDefinitions>

</Grid.ColumnDefinitions>

<Grid Grid.Column="0"

HorizontalAlignment="Center"

VerticalAlignment="Center"

Width="400"

Height="400">

<Grid>

<Rectangle

HorizontalAlignment="Left"

VerticalAlignment="Top"

Width="200"

Height="200"

Fill="Aqua" />

<Ellipse

HorizontalAlignment="Center"

VerticalAlignment="Center"

Width="200"

Height="200"

Fill="Magenta" />

<Rectangle

HorizontalAlignment="Right"

VerticalAlignment="Bottom"

Width="200"

Height="200"

Fill="Yellow" />

</Grid>

<Rectangle Name="rectangle"

Margin="20"

Fill="{ThemeResource CustomAcrylicBrushKey}" />

</Grid>

<StackPanel Grid.Column="2"

VerticalAlignment="Center"

Spacing="10">

<Slider Name="tintOpacitySlider"

Width="200"

Minimum="0"

Maximum="1"

SmallChange="0.001"

StepFrequency="0.001"

IsFocusEngagementEnabled="False"

ValueChanged="tintOpacitySlider_ValueChanged" />

<ComboBox Name="tintColorComboBox"

ItemTemplate="{StaticResource ColorDataTemplateKey}"

SelectionChanged="tintColorComboBox_SelectionChanged">

</ComboBox>

<ComboBox Name="fallbackColorComboBox"

ItemTemplate="{StaticResource ColorDataTemplateKey}"

SelectionChanged="fallbackColorComboBox_SelectionChanged">

</ComboBox>

</StackPanel>

</Grid>

</Page>

▶ MainPage.xaml.cs


using System.Linq;
using Windows.Foundation;
using Windows.Graphics.Display;
using Windows.UI.ViewManagement;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Controls.Primitives;
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 = "AcrylicBrush 엘리먼트 : 커스텀 배경 아크릴 브러시 사용하기";

            #endregion

            Loaded += Page_Loaded;
        }

        #endregion

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

        #region 페이지 로드시 처리하기 - Page_Loaded(sender, e)

        /// <summary>
        /// 페이지 로드시 처리하기
        /// </summary>
        /// <param name="sender">이벤트 발생자</param>
        /// <param name="e">이벤트 인자</param>
        private void Page_Loaded(object sender, RoutedEventArgs e)
        {
            this.tintOpacitySlider.Value = 0.8;

            this.tintColorComboBox.SelectedIndex = 0;

            this.fallbackColorComboBox.SelectedIndex = 0;
        }

        #endregion
        #region 색조 불투명도 슬라이더 값 변경시 처리하기 - tintOpacitySlider_ValueChanged(sender, e)

        /// <summary>
        /// 색조 불투명도 슬라이더 값 변경시 처리하기
        /// </summary>
        /// <param name="sender">이벤트 발생자</param>
        /// <param name="e">이벤트 인자</param>
        private void tintOpacitySlider_ValueChanged(object sender, RangeBaseValueChangedEventArgs e)
        {
            Microsoft.UI.Xaml.Media.AcrylicBrush brush = this.rectangle.Fill as Microsoft.UI.Xaml.Media.AcrylicBrush;

            brush.TintOpacity = e.NewValue;
        }

        #endregion
        #region 색조 색상 콤보 박스 선택 변경시 처리하기 - tintColorComboBox_SelectionChanged(sender, e)

        /// <summary>
        /// 색조 색상 콤보 박스 선택 변경시 처리하기
        /// </summary>
        /// <param name="sender">이벤트 발생자</param>
        /// <param name="e">이벤트 인자</param>
        private void tintColorComboBox_SelectionChanged(object sender, SelectionChangedEventArgs e)
        {
            Microsoft.UI.Xaml.Media.AcrylicBrush brush = this.rectangle.Fill as Microsoft.UI.Xaml.Media.AcrylicBrush;

            brush.TintColor = ((SolidColorBrush)e.AddedItems.First()).Color;
        }

        #endregion
        #region 폴백 색상 콤보 박스 선택 변경시 처리하기 - fallbackColorComboBox_SelectionChanged(sender, e)

        /// <summary>
        /// 폴백 색상 콤보 박스 선택 변경시 처리하기
        /// </summary>
        /// <param name="sender">이벤트 발생자</param>
        /// <param name="e">이벤트 인자</param>
        private void fallbackColorComboBox_SelectionChanged(object sender, SelectionChangedEventArgs e)
        {
            Microsoft.UI.Xaml.Media.AcrylicBrush brush = this.rectangle.Fill as Microsoft.UI.Xaml.Media.AcrylicBrush;

            brush.FallbackColor = ((SolidColorBrush)e.AddedItems.First()).Color;
        }

        #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

using System.Linq;

using Windows.Foundation;

using Windows.Graphics.Display;

using Windows.UI.ViewManagement;

using Windows.UI.Xaml;

using Windows.UI.Xaml.Controls;

using Windows.UI.Xaml.Controls.Primitives;

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 = "AcrylicBrush 엘리먼트 : 커스텀 배경 아크릴 브러시 사용하기";

#endregion

Loaded += Page_Loaded;

}

#endregion

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

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

#region 페이지 로드시 처리하기 - Page_Loaded(sender, e)

/// <summary>

/// 페이지 로드시 처리하기

/// </summary>

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

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

private void Page_Loaded(object sender, RoutedEventArgs e)

{

this.tintOpacitySlider.Value = 0.8;

this.tintColorComboBox.SelectedIndex = 0;

this.fallbackColorComboBox.SelectedIndex = 0;

}

#endregion

#region 색조 불투명도 슬라이더 값 변경시 처리하기 - tintOpacitySlider_ValueChanged(sender, e)

/// <summary>

/// 색조 불투명도 슬라이더 값 변경시 처리하기

/// </summary>

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

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

private void tintOpacitySlider_ValueChanged(object sender, RangeBaseValueChangedEventArgs e)

{

Microsoft.UI.Xaml.Media.AcrylicBrush brush = this.rectangle.Fill as Microsoft.UI.Xaml.Media.AcrylicBrush;

brush.TintOpacity = e.NewValue;

}

#endregion

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

/// <summary>

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

/// </summary>

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

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

private void tintColorComboBox_SelectionChanged(object sender, SelectionChangedEventArgs e)

{

Microsoft.UI.Xaml.Media.AcrylicBrush brush = this.rectangle.Fill as Microsoft.UI.Xaml.Media.AcrylicBrush;

brush.TintColor = ((SolidColorBrush)e.AddedItems.First()).Color;

}

#endregion

#region 폴백 색상 콤보 박스 선택 변경시 처리하기 - fallbackColorComboBox_SelectionChanged(sender, e)

/// <summary>

/// 폴백 색상 콤보 박스 선택 변경시 처리하기

/// </summary>

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

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

private void fallbackColorComboBox_SelectionChanged(object sender, SelectionChangedEventArgs e)

{

Microsoft.UI.Xaml.Media.AcrylicBrush brush = this.rectangle.Fill as Microsoft.UI.Xaml.Media.AcrylicBrush;

brush.FallbackColor = ((SolidColorBrush)e.AddedItems.First()).Color;

}

#endregion

}

TestProject.zip

[C#/WINUI2.5] AcrylicBrush 엘리먼트 : 커스텀 인-앱 아크릴 브러시 사용하기

■ AcrylicBrush 엘리먼트를 사용해 커스텀 인-앱 아크릴 브러시를 만드는 방법을 보여준다. ▶ 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:media="using:Microsoft.UI.Xaml.Media"
    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"
    FontFamily="나눔고딕코딩"
    FontSize="16">
    <Page.Resources>
        <ResourceDictionary>
            <ResourceDictionary.ThemeDictionaries>
                <ResourceDictionary x:Key="Default">
                    <media:AcrylicBrush x:Key="CustomAcrylicBrushKey"
                        BackgroundSource="Backdrop"
                        TintOpacity="0.8"
                        TintColor="Black"
                        FallbackColor="Green" />
                </ResourceDictionary>
            </ResourceDictionary.ThemeDictionaries>
            <DataTemplate x:Key="ColorDataTemplateKey" x:DataType="SolidColorBrush">
                <StackPanel Orientation="Horizontal">
                    <Rectangle
                        Height="20"
                        Width="20"
                        Fill="{x:Bind}" />
                    <TextBlock
                        Margin="5 0 0 0"
                        Text="{x:Bind Color}" />
                </StackPanel>
            </DataTemplate>
        </ResourceDictionary>
    </Page.Resources>
    <Grid>
        <Grid
            HorizontalAlignment="Center"
            VerticalAlignment="Center">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*"    />
                <ColumnDefinition Width="50"   />
                <ColumnDefinition Width="Auto" />
            </Grid.ColumnDefinitions>
            <Grid Grid.Column="0"
                HorizontalAlignment="Center"
                VerticalAlignment="Center"
                Width="400"
                Height="400">
                <Grid>
                    <Rectangle
                        HorizontalAlignment="Left"
                        VerticalAlignment="Top"
                        Width="200"
                        Height="200"
                        Fill="Aqua" />
                    <Ellipse
                        HorizontalAlignment="Center"
                        VerticalAlignment="Center"
                        Width="200"
                        Height="200"
                        Fill="Magenta" />
                    <Rectangle
                        HorizontalAlignment="Right"
                        VerticalAlignment="Bottom"
                        Width="200"
                        Height="200"
                        Fill="Yellow" />
                </Grid>
                <Rectangle Name="rectangle"
                    Margin="20"
                    Fill="{ThemeResource CustomAcrylicBrushKey}" />
            </Grid>
            <StackPanel Grid.Column="2"
                VerticalAlignment="Center"
                Spacing="10">
                <TextBlock Text="색조 불투명도 :" />
                <Slider Name="tintOpacitySlider"
                    Width="200"
                    Minimum="0"
                    Maximum="1"
                    SmallChange="0.001"
                    StepFrequency="0.001"
                    IsFocusEngagementEnabled="False"
                    ValueChanged="tintOpacitySlider_ValueChanged" />
                <TextBlock Text="색조 색상 :" />
                <ComboBox Name="tintColorComboBox"
                    ItemTemplate="{StaticResource ColorDataTemplateKey}"
                    SelectionChanged="tintColorComboBox_SelectionChanged">
                    <SolidColorBrush Color="Black" />
                    <SolidColorBrush Color="Red"   />
                    <SolidColorBrush Color="Blue"  />
                </ComboBox>
                <TextBlock Text="폴백 색상 :" />
                <ComboBox Name="fallbackColorComboBox"
                    ItemTemplate="{StaticResource ColorDataTemplateKey}"
                    SelectionChanged="fallbackColorComboBox_SelectionChanged">
                    <SolidColorBrush Color="Green"  />
                    <SolidColorBrush Color="Yellow" />
                </ComboBox>
            </StackPanel>
        </Grid>
    </Grid>
</Page>

100

101

102

<Page x:Class="TestProject.MainPage"

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

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

xmlns:media="using:Microsoft.UI.Xaml.Media"

Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"

FontFamily="나눔고딕코딩"

FontSize="16">

<Page.Resources>

<ResourceDictionary.ThemeDictionaries>

<media:AcrylicBrush x:Key="CustomAcrylicBrushKey"

BackgroundSource="Backdrop"

TintOpacity="0.8"

TintColor="Black"

FallbackColor="Green" />

</ResourceDictionary>

</ResourceDictionary.ThemeDictionaries>

<Rectangle

Height="20"

Width="20"

Fill="{x:Bind}" />

<TextBlock

Margin="5 0 0 0"

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

</StackPanel>

</DataTemplate>

</ResourceDictionary>

</Page.Resources>

<Grid>

<Grid

HorizontalAlignment="Center"

VerticalAlignment="Center">

<Grid.ColumnDefinitions>

</Grid.ColumnDefinitions>

<Grid Grid.Column="0"

HorizontalAlignment="Center"

VerticalAlignment="Center"

Width="400"

Height="400">

<Grid>

<Rectangle

HorizontalAlignment="Left"

VerticalAlignment="Top"

Width="200"

Height="200"

Fill="Aqua" />

<Ellipse

HorizontalAlignment="Center"

VerticalAlignment="Center"

Width="200"

Height="200"

Fill="Magenta" />

<Rectangle

HorizontalAlignment="Right"

VerticalAlignment="Bottom"

Width="200"

Height="200"

Fill="Yellow" />

</Grid>

<Rectangle Name="rectangle"

Margin="20"

Fill="{ThemeResource CustomAcrylicBrushKey}" />

</Grid>

<StackPanel Grid.Column="2"

VerticalAlignment="Center"

Spacing="10">

<Slider Name="tintOpacitySlider"

Width="200"

Minimum="0"

Maximum="1"

SmallChange="0.001"

StepFrequency="0.001"

IsFocusEngagementEnabled="False"

ValueChanged="tintOpacitySlider_ValueChanged" />

<ComboBox Name="tintColorComboBox"

ItemTemplate="{StaticResource ColorDataTemplateKey}"

SelectionChanged="tintColorComboBox_SelectionChanged">

</ComboBox>

<ComboBox Name="fallbackColorComboBox"

ItemTemplate="{StaticResource ColorDataTemplateKey}"

SelectionChanged="fallbackColorComboBox_SelectionChanged">

</ComboBox>

</StackPanel>

</Grid>

</Page>

▶ MainPage.xaml.cs


using System.Linq;
using Windows.Foundation;
using Windows.Graphics.Display;
using Windows.UI.ViewManagement;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Controls.Primitives;
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 = "AcrylicBrush 엘리먼트 : 커스텀 인-앱 아크릴 브러시 사용하기";

            #endregion

            Loaded += Page_Loaded;
        }

        #endregion

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

        #region 페이지 로드시 처리하기 - Page_Loaded(sender, e)

        /// <summary>
        /// 페이지 로드시 처리하기
        /// </summary>
        /// <param name="sender">이벤트 발생자</param>
        /// <param name="e">이벤트 인자</param>
        private void Page_Loaded(object sender, RoutedEventArgs e)
        {
            this.tintOpacitySlider.Value = 0.8;

            this.tintColorComboBox.SelectedIndex = 0;

            this.fallbackColorComboBox.SelectedIndex = 0;
        }

        #endregion
        #region 색조 불투명도 슬라이더 값 변경시 처리하기 - tintOpacitySlider_ValueChanged(sender, e)

        /// <summary>
        /// 색조 불투명도 슬라이더 값 변경시 처리하기
        /// </summary>
        /// <param name="sender">이벤트 발생자</param>
        /// <param name="e">이벤트 인자</param>
        private void tintOpacitySlider_ValueChanged(object sender, RangeBaseValueChangedEventArgs e)
        {
            Microsoft.UI.Xaml.Media.AcrylicBrush brush = this.rectangle.Fill as Microsoft.UI.Xaml.Media.AcrylicBrush;

            brush.TintOpacity = e.NewValue;
        }

        #endregion
        #region 색조 색상 콤보 박스 선택 변경시 처리하기 - tintColorComboBox_SelectionChanged(sender, e)

        /// <summary>
        /// 색조 색상 콤보 박스 선택 변경시 처리하기
        /// </summary>
        /// <param name="sender">이벤트 발생자</param>
        /// <param name="e">이벤트 인자</param>
        private void tintColorComboBox_SelectionChanged(object sender, SelectionChangedEventArgs e)
        {
            Microsoft.UI.Xaml.Media.AcrylicBrush brush = this.rectangle.Fill as Microsoft.UI.Xaml.Media.AcrylicBrush;

            brush.TintColor = ((SolidColorBrush)e.AddedItems.First()).Color;
        }

        #endregion
        #region 폴백 색상 콤보 박스 선택 변경시 처리하기 - fallbackColorComboBox_SelectionChanged(sender, e)

        /// <summary>
        /// 폴백 색상 콤보 박스 선택 변경시 처리하기
        /// </summary>
        /// <param name="sender">이벤트 발생자</param>
        /// <param name="e">이벤트 인자</param>
        private void fallbackColorComboBox_SelectionChanged(object sender, SelectionChangedEventArgs e)
        {
            Microsoft.UI.Xaml.Media.AcrylicBrush brush = this.rectangle.Fill as Microsoft.UI.Xaml.Media.AcrylicBrush;

            brush.FallbackColor = ((SolidColorBrush)e.AddedItems.First()).Color;
        }

        #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

using System.Linq;

using Windows.Foundation;

using Windows.Graphics.Display;

using Windows.UI.ViewManagement;

using Windows.UI.Xaml;

using Windows.UI.Xaml.Controls;

using Windows.UI.Xaml.Controls.Primitives;

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 = "AcrylicBrush 엘리먼트 : 커스텀 인-앱 아크릴 브러시 사용하기";

#endregion

Loaded += Page_Loaded;

}

#endregion

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

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

#region 페이지 로드시 처리하기 - Page_Loaded(sender, e)

/// <summary>

/// 페이지 로드시 처리하기

/// </summary>

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

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

private void Page_Loaded(object sender, RoutedEventArgs e)

{

this.tintOpacitySlider.Value = 0.8;

this.tintColorComboBox.SelectedIndex = 0;

this.fallbackColorComboBox.SelectedIndex = 0;

}

#endregion

#region 색조 불투명도 슬라이더 값 변경시 처리하기 - tintOpacitySlider_ValueChanged(sender, e)

/// <summary>

/// 색조 불투명도 슬라이더 값 변경시 처리하기

/// </summary>

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

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

private void tintOpacitySlider_ValueChanged(object sender, RangeBaseValueChangedEventArgs e)

{

Microsoft.UI.Xaml.Media.AcrylicBrush brush = this.rectangle.Fill as Microsoft.UI.Xaml.Media.AcrylicBrush;

brush.TintOpacity = e.NewValue;

}

#endregion

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

/// <summary>

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

/// </summary>

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

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

private void tintColorComboBox_SelectionChanged(object sender, SelectionChangedEventArgs e)

{

Microsoft.UI.Xaml.Media.AcrylicBrush brush = this.rectangle.Fill as Microsoft.UI.Xaml.Media.AcrylicBrush;

brush.TintColor = ((SolidColorBrush)e.AddedItems.First()).Color;

}

#endregion

#region 폴백 색상 콤보 박스 선택 변경시 처리하기 - fallbackColorComboBox_SelectionChanged(sender, e)

/// <summary>

/// 폴백 색상 콤보 박스 선택 변경시 처리하기

/// </summary>

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

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

private void fallbackColorComboBox_SelectionChanged(object sender, SelectionChangedEventArgs e)

{

Microsoft.UI.Xaml.Media.AcrylicBrush brush = this.rectangle.Fill as Microsoft.UI.Xaml.Media.AcrylicBrush;

brush.FallbackColor = ((SolidColorBrush)e.AddedItems.First()).Color;

}

#endregion

}

TestProject.zip

[C#/WINUI2.5] AcrylicBrush 엘리먼트 : 디폴트 배경 아크릴 브러시 사용하기

■ AcrylicBrush 엘리먼트를 사용해 디폴트 배경 아크릴 브러시를 만드는 방법을 보여준다. ▶ 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>
        <Grid
            HorizontalAlignment="Center"
            VerticalAlignment="Center"
            Width="400"
            Height="400">
            <Grid>
                <Rectangle
                    HorizontalAlignment="Left"
                    VerticalAlignment="Top"
                    Width="200"
                    Height="200"
                    Fill="Aqua" />
                <Ellipse
                    HorizontalAlignment="Center"
                    VerticalAlignment="Center"
                    Width="200"
                    Height="200"
                    Fill="Magenta" />
                <Rectangle
                    HorizontalAlignment="Right"
                    VerticalAlignment="Bottom"
                    Width="200"
                    Height="200"
                    Fill="Yellow" />
            </Grid>
            <Rectangle
                Margin="20"
                Fill="{ThemeResource SystemControlAcrylicWindowBrush}" />
        </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"

Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"

FontFamily="나눔고딕코딩"

FontSize="16">

<Grid>

<Grid

HorizontalAlignment="Center"

VerticalAlignment="Center"

Width="400"

Height="400">

<Grid>

<Rectangle

HorizontalAlignment="Left"

VerticalAlignment="Top"

Width="200"

Height="200"

Fill="Aqua" />

<Ellipse

HorizontalAlignment="Center"

VerticalAlignment="Center"

Width="200"

Height="200"

Fill="Magenta" />

<Rectangle

HorizontalAlignment="Right"

VerticalAlignment="Bottom"

Width="200"

Height="200"

Fill="Yellow" />

</Grid>

<Rectangle

Margin="20"

Fill="{ThemeResource SystemControlAcrylicWindowBrush}" />

</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 = "AcrylicBrush 엘리먼트 : 디폴트 배경 아크릴 브러시 사용하기";

            #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 = "AcrylicBrush 엘리먼트 : 디폴트 배경 아크릴 브러시 사용하기";

#endregion

}

#endregion

}

TestProject.zip

[C#/WINUI2.5] AcrylicBrush 엘리먼트 : 디폴트 인-앱 아크릴 브러시 사용하기

■ AcrylicBrush 엘리먼트를 사용해 디폴트 인-앱 아크릴 브러시를 만드는 방법을 보여준다. ▶ 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>
        <Grid
            HorizontalAlignment="Center"
            VerticalAlignment="Center"
            Width="400"
            Height="400">
            <Grid>
                <Rectangle
                    HorizontalAlignment="Left"
                    VerticalAlignment="Top"
                    Width="200"
                    Height="200"
                    Fill="Aqua" />
                <Ellipse
                    HorizontalAlignment="Center"
                    VerticalAlignment="Center"
                    Width="200"
                    Height="200"
                    Fill="Magenta" />
                <Rectangle
                    HorizontalAlignment="Right"
                    VerticalAlignment="Bottom"
                    Width="200"
                    Height="200"
                    Fill="Yellow" />
            </Grid>
            <Rectangle
                Margin="20"
                Fill="{ThemeResource SystemControlAcrylicElementBrush}" />
        </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"

Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"

FontFamily="나눔고딕코딩"

FontSize="16">

<Grid>

<Grid

HorizontalAlignment="Center"

VerticalAlignment="Center"

Width="400"

Height="400">

<Grid>

<Rectangle

HorizontalAlignment="Left"

VerticalAlignment="Top"

Width="200"

Height="200"

Fill="Aqua" />

<Ellipse

HorizontalAlignment="Center"

VerticalAlignment="Center"

Width="200"

Height="200"

Fill="Magenta" />

<Rectangle

HorizontalAlignment="Right"

VerticalAlignment="Bottom"

Width="200"

Height="200"

Fill="Yellow" />

</Grid>

<Rectangle

Margin="20"

Fill="{ThemeResource SystemControlAcrylicElementBrush}" />

</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 = "AcrylicBrush 엘리먼트 : 디폴트 인-앱 아크릴 브러시 사용하기";

            #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 = "AcrylicBrush 엘리먼트 : 디폴트 인-앱 아크릴 브러시 사용하기";

#endregion

}

#endregion

}

TestProject.zip

[C#/WINUI2.5] ToolTip 엘리먼트 : Placement/PlacementRect 속성 사용하기

■ ToolTip 엘리먼트의 Placement/PlacementRect 속성을 사용하는 방법을 보여준다. ▶ 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>
        <Image
            HorizontalAlignment="Center"
            VerticalAlignment="Center"
            Width="400"
            Height="266"
            Source="/IMAGE/cliff.jpg">
            <ToolTipService.ToolTip >
                <ToolTip
                    Placement="Right"
                    PlacementRect="0 0 400 266"
                    Content="샘플 이미지입니다." />
            </ToolTipService.ToolTip>
        </Image>
    </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>

<Image

HorizontalAlignment="Center"

VerticalAlignment="Center"

Width="400"

Height="266"

Source="/IMAGE/cliff.jpg">

<ToolTipService.ToolTip >

<ToolTip

Placement="Right"

PlacementRect="0 0 400 266"

Content="샘플 이미지입니다." />

</ToolTipService.ToolTip>

</Image>

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

            #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 = "ToolTip 엘리먼트 : Placement/PlacementRect 속성 사용하기";

#endregion

}

#endregion

}

TestProject.zip

[C#/WINUI2.5] ToolTip 엘리먼트 : HorizontalOffset/VerticalOffset 속성 사용하기

■ ToolTip 엘리먼트의 HorizontalOffset/VerticalOffset 속성을 사용하는 방법을 보여준다. ▶ 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>
        <TextBlock
            HorizontalAlignment="Center"
            VerticalAlignment="Center"
            Text="툴팁 오프셋을 갖는 텍스트 블럭입니다.">
            <ToolTipService.ToolTip>
                <ToolTip
                    HorizontalOffset="50"
                    VerticalOffset="-50"
                    Content="툴팁 오프셋" />
            </ToolTipService.ToolTip>
        </TextBlock>
    </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>

<TextBlock

HorizontalAlignment="Center"

VerticalAlignment="Center"

Text="툴팁 오프셋을 갖는 텍스트 블럭입니다.">

<ToolTipService.ToolTip>

<ToolTip

HorizontalOffset="50"

VerticalOffset="-50"

Content="툴팁 오프셋" />

</ToolTipService.ToolTip>

</TextBlock>

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

            #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 = "ToolTip 엘리먼트 : HorizontalOffset/VerticalOffset 속성 사용하기";

#endregion

}

#endregion

}

TestProject.zip

[C#/WINUI2.5] ToolTipService 엘리먼트 : ToolTip 첨부 속성 사용하기

■ ToolTipService 엘리먼트의 ToolTip 첨부 속성을 사용해 툴팁을 표시하는 방법을 보여준다. ▶ 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>
        <Button
            HorizontalAlignment="Center"
            Width="100"
            Height="30"
            ToolTipService.ToolTip="간단한 테스를 실행합니다."
            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>

<Button

HorizontalAlignment="Center"

Width="100"

Height="30"

ToolTipService.ToolTip="간단한 테스를 실행합니다."

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
    {
        //////////////////////////////////////////////////////////////////////////////////////////////////// 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 = "ToolTipService 엘리먼트 : ToolTip 첨부 속성 사용하기";

            #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 = "ToolTipService 엘리먼트 : ToolTip 첨부 속성 사용하기";

#endregion

}

#endregion

}

TestProject.zip

[C#/WINUI2.5] ProgressRing 엘리먼트 : IsIndeterminate/Value 속성 사용하기

■ ProgressRing 엘리먼트의 IsIndeterminate/Value 속성을 사용하는 방법을 보여준다. ▶ 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"
            Orientation="Horizontal">
            <muxc:ProgressRing Name="progressRing"
                Width="60"
                Height="60"
                IsIndeterminate="False" />
            <muxc:NumberBox
                VerticalAlignment="Center"
                Margin="50 0 0 0"
                SpinButtonPlacementMode="Inline"
                Minimum="0"
                Maximum="100"
                Value="0"
                Header="진행"
                ValueChanged="progressNumberBox_ValueChanged" />
        </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"

Orientation="Horizontal">

<muxc:ProgressRing Name="progressRing"

Width="60"

Height="60"

IsIndeterminate="False" />

<muxc:NumberBox

VerticalAlignment="Center"

Margin="50 0 0 0"

SpinButtonPlacementMode="Inline"

Minimum="0"

Maximum="100"

Value="0"

Header="진행"

ValueChanged="progressNumberBox_ValueChanged" />

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

            #endregion
        }

        #endregion

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

        #region 진행 넘버 박스 값 변경시 처리하기 - progressNumberBox_ValueChanged(numberBox, e)

        /// <summary>
        /// 진행 넘버 박스 값 변경시 처리하기
        /// </summary>
        /// <param name="numberBox">넘버 박스</param>
        /// <param name="e">이벤트 인자</param>
        private void progressNumberBox_ValueChanged(Microsoft.UI.Xaml.Controls.NumberBox numberBox, Microsoft.UI.Xaml.Controls.NumberBoxValueChangedEventArgs e)
        {
            if(!numberBox.Value.IsNAN())
            {
                this.progressRing.Value = numberBox.Value;
            }
            else
            {
                numberBox.Value = 0;
            }
        }

        #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 = "ProgressRing 엘리먼트 : IsIndeterminate/Value 속성 사용하기";

#endregion

}

#endregion

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

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

#region 진행 넘버 박스 값 변경시 처리하기 - progressNumberBox_ValueChanged(numberBox, e)

/// <summary>

/// 진행 넘버 박스 값 변경시 처리하기

/// </summary>

/// <param name="numberBox">넘버 박스</param>

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

private void progressNumberBox_ValueChanged(Microsoft.UI.Xaml.Controls.NumberBox numberBox, Microsoft.UI.Xaml.Controls.NumberBoxValueChangedEventArgs e)

{

if(!numberBox.Value.IsNAN())

{

this.progressRing.Value = numberBox.Value;

}

else

{

numberBox.Value = 0;

}

#endregion

}

TestProject.zip

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

■ ProgressRing 엘리먼트의 IsActive 속성을 사용하는 방법을 보여준다. ▶ 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 Margin="10">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*"    />
                <ColumnDefinition Width="50"   />
                <ColumnDefinition Width="Auto" />
            </Grid.ColumnDefinitions>
            <muxc:ProgressRing Grid.Column="0"
                Width="60"
                Height="60"
                IsActive="{x:Bind isActiveToggleSwitch.IsOn, Mode=OneWay}" />
            <ToggleSwitch Name="isActiveToggleSwitch" Grid.Column="2"
                Header="활성화 여부"
                OffContent="작업 시작"
                OnContent="작업중"
                IsOn="True" />
        </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.ColumnDefinitions>

</Grid.ColumnDefinitions>

<muxc:ProgressRing Grid.Column="0"

Width="60"

Height="60"

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

<ToggleSwitch Name="isActiveToggleSwitch" Grid.Column="2"

Header="활성화 여부"

OffContent="작업 시작"

OnContent="작업중"

IsOn="True" />

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

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

#endregion

}

#endregion

}

TestProject.zip

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

■ ProgressBar 엘리먼트의 Value 속성을 사용하는 방법을 보여준다. ▶ 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"
            Orientation="Horizontal">
            <muxc:ProgressBar Name="progressBar"
                Width="130" />
            <TextBlock
                VerticalAlignment="Center"
                Margin="50 0 10 0"
                Text="진행" />
            <muxc:NumberBox
                Minimum="0"
                Maximum="100"
                Value="0"
                SpinButtonPlacementMode="Inline"
                ValueChanged="progressNumberBox_ValueChanged" />
        </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"

Orientation="Horizontal">

<muxc:ProgressBar Name="progressBar"

Width="130" />

<TextBlock

VerticalAlignment="Center"

Margin="50 0 10 0"

Text="진행" />

<muxc:NumberBox

Minimum="0"

Maximum="100"

Value="0"

SpinButtonPlacementMode="Inline"

ValueChanged="progressNumberBox_ValueChanged" />

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

            #endregion
        }

        #endregion

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

        #region 진행 넘버 박스 값 변경시 처리하기 - progressNumberBox_ValueChanged(numberBox, e)

        /// <summary>
        /// 진행 넘버 박스 값 변경시 처리하기
        /// </summary>
        /// <param name="numberBox">넘버 박스</param>
        /// <param name="e">이벤트 인자</param>
        private void progressNumberBox_ValueChanged(Microsoft.UI.Xaml.Controls.NumberBox numberBox, Microsoft.UI.Xaml.Controls.NumberBoxValueChangedEventArgs e)
        {
            if(!numberBox.Value.IsNaN())
            {
                this.progressBar.Value = numberBox.Value;
            }
            else
            {
                numberBox.Value = 0;
            }
        }

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

#endregion

}

#endregion

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

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

#region 진행 넘버 박스 값 변경시 처리하기 - progressNumberBox_ValueChanged(numberBox, e)

/// <summary>

/// 진행 넘버 박스 값 변경시 처리하기

/// </summary>

/// <param name="numberBox">넘버 박스</param>

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

private void progressNumberBox_ValueChanged(Microsoft.UI.Xaml.Controls.NumberBox numberBox, Microsoft.UI.Xaml.Controls.NumberBoxValueChangedEventArgs e)

{

if(!numberBox.Value.IsNaN())

{

this.progressBar.Value = numberBox.Value;

}

else

{

numberBox.Value = 0;

}

#endregion

}

TestProject.zip

[C#/WINUI2.5] ProgressBar 엘리먼트 : ShowPaused/ShowError 속성 사용하기

■ ProgressBar 엘리먼트의 ShowPaused/ShowError 속성을 사용하는 방법을 보여준다. ▶ 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 Margin="10">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*"    />
                <ColumnDefinition Width="50"   />
                <ColumnDefinition Width="Auto" />
            </Grid.ColumnDefinitions>
            <muxc:ProgressBar Grid.Column="0"
                Width="130"
                IsIndeterminate="True"
                ShowPaused="{x:Bind showPausedRadioButton.IsChecked.Value, Mode=OneWay}"
                ShowError="{x:Bind showErrorRadioButton.IsChecked.Value, Mode=OneWay}" />
            <muxc:RadioButtons Grid.Column="2"
                VerticalAlignment="Center"
                Header="진행 상태">
                <RadioButton
                    Content="실행"
                    IsChecked="True" />
                <RadioButton Name="showPausedRadioButton"
                    Content="중지" />
                <RadioButton Name="showErrorRadioButton"
                    Content="에러" />
            </muxc:RadioButtons>
        </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.ColumnDefinitions>

</Grid.ColumnDefinitions>

<muxc:ProgressBar Grid.Column="0"

Width="130"

IsIndeterminate="True"

ShowPaused="{x:Bind showPausedRadioButton.IsChecked.Value, Mode=OneWay}"

ShowError="{x:Bind showErrorRadioButton.IsChecked.Value, Mode=OneWay}" />

<muxc:RadioButtons Grid.Column="2"

VerticalAlignment="Center"

Header="진행 상태">

<RadioButton

Content="실행"

IsChecked="True" />

<RadioButton Name="showPausedRadioButton"

Content="중지" />

<RadioButton Name="showErrorRadioButton"

Content="에러" />

</muxc:RadioButtons>

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

            #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 = "ProgressBar 엘리먼트 : ShowPaused/ShowError 속성 사용하기";

#endregion

}

#endregion

}

TestProject.zip

[C#/WINUI2.5] InfoBar 엘리먼트 : IsOpen/IsIconVisible/IsClosable 속성 사용하기

■ InfoBar 엘리먼트의 IsOpen/IsIconVisible/IsClosable 속성을 사용하는 방법을 보여준다. ▶ 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 Margin="10">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*"    />
                <ColumnDefinition Width="50"   />
                <ColumnDefinition Width="Auto" />
            </Grid.ColumnDefinitions>
            <muxc:InfoBar Name="infoBar" Grid.Column="0"
                VerticalAlignment="Center"
                IsOpen="True"
                IsIconVisible="True"
                IsClosable="True"
                Title="Title"
                Message="Essential app message for your users to be informed of, acknowledge, or take action on." />
            <StackPanel Grid.Column="2"
                VerticalAlignment="Center"
                Spacing="10">
                <CheckBox
                    Content="오픈 여부"
                    IsChecked="{x:Bind infoBar.IsOpen, Mode=TwoWay}" />
                <CheckBox
                    Content="아이콘 표시 여부"
                    IsChecked="{x:Bind infoBar.IsIconVisible, Mode=TwoWay}" />
                <CheckBox
                    Content="닫기 가능 여부"
                    IsChecked="{x:Bind infoBar.IsClosable, Mode=TwoWay}" />
            </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.ColumnDefinitions>

</Grid.ColumnDefinitions>

<muxc:InfoBar Name="infoBar" Grid.Column="0"

VerticalAlignment="Center"

IsOpen="True"

IsIconVisible="True"

IsClosable="True"

Title="Title"

Message="Essential app message for your users to be informed of, acknowledge, or take action on." />

<StackPanel Grid.Column="2"

VerticalAlignment="Center"

Spacing="10">

<CheckBox

Content="오픈 여부"

IsChecked="{x:Bind infoBar.IsOpen, Mode=TwoWay}" />

<CheckBox

Content="아이콘 표시 여부"

IsChecked="{x:Bind infoBar.IsIconVisible, Mode=TwoWay}" />

<CheckBox

Content="닫기 가능 여부"

IsChecked="{x:Bind infoBar.IsClosable, Mode=TwoWay}" />

</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 = "InfoBar 엘리먼트 : IsOpen/IsIconVisible/IsClosable 속성 사용하기";

            #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 = "InfoBar 엘리먼트 : IsOpen/IsIconVisible/IsClosable 속성 사용하기";

#endregion

}

#endregion

}

TestProject.zip

[C#/WINUI2.5] InfoBar 엘리먼트 : Message/ActionButton 속성 사용하기

■ InfoBar 엘리먼트의 Message/ActionButton 속성을 사용하는 방법을 보여준다. ▶ 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 Margin="10">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*"    />
                <ColumnDefinition Width="50"   />
                <ColumnDefinition Width="Auto" />
            </Grid.ColumnDefinitions>
            <muxc:InfoBar Name="infoBar" Grid.Column="0"
                VerticalAlignment="Center"
                IsOpen="True"
                Title="제목" />
            <StackPanel Grid.Column="2"
                VerticalAlignment="Center"
                Spacing="10">
                <CheckBox Name="IsOpenCheckBox2"
                    IsChecked="{x:Bind infoBar.IsOpen, Mode=TwoWay}"
                    Content="오픈 여부" />
                <ComboBox Name="messageComboBox"
                    Header="메시지 길이"
                    SelectionChanged="messageComboBox_SelectionChanged"
                    SelectedIndex="1">
                    <ComboBoxItem Content="Short" />
                    <ComboBoxItem Content="Long"  />
                </ComboBox>
                <ComboBox Name="actionButtonComboBox"
                    Header="액션 버튼"
                    SelectionChanged="actionButtonComboBox_SelectionChanged"
                    SelectedIndex="0">
                    <ComboBoxItem Content="None"      />
                    <ComboBoxItem Content="Button"    />
                    <ComboBoxItem Content="Hyperlink" />
                </ComboBox>
            </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.ColumnDefinitions>

</Grid.ColumnDefinitions>

<muxc:InfoBar Name="infoBar" Grid.Column="0"

VerticalAlignment="Center"

IsOpen="True"

Title="제목" />

<StackPanel Grid.Column="2"

VerticalAlignment="Center"

Spacing="10">

<CheckBox Name="IsOpenCheckBox2"

IsChecked="{x:Bind infoBar.IsOpen, Mode=TwoWay}"

Content="오픈 여부" />

<ComboBox Name="messageComboBox"

Header="메시지 길이"

SelectionChanged="messageComboBox_SelectionChanged"

SelectedIndex="1">

</ComboBox>

<ComboBox Name="actionButtonComboBox"

Header="액션 버튼"

SelectionChanged="actionButtonComboBox_SelectionChanged"

SelectedIndex="0">

</ComboBox>

</StackPanel>

</Grid>

</Page>

▶ MainPage.xaml.cs


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

namespace TestProject
{
    /// <summary>
    /// 메인 페이지
    /// </summary>
    public sealed partial class MainPage : Page
    {
        //////////////////////////////////////////////////////////////////////////////////////////////////// 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 = "InfoBar 엘리먼트 : Message/ActionButton 속성 사용하기";

            #endregion
        }

        #endregion

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

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

        /// <summary>
        /// 메시지 콤보 박스 선택 변경시 처리하기
        /// </summary>
        /// <param name="sender">이벤트 발생자</param>
        /// <param name="e">이벤트 인자</param>
        private void messageComboBox_SelectionChanged(object sender, SelectionChangedEventArgs e)
        {
            if(this.infoBar == null)
            {
                return;
            }

            if(this.messageComboBox.SelectedIndex == 0)
            {
                this.infoBar.Message = "A short essential app message.";
            }
            else if(this.messageComboBox.SelectedIndex == 1)
            {
                this.infoBar.Message = "A long essential app message for your users to be informed of, acknowledge, or take action on. " +
                                       "Lorem ipsum dolor sit amet, consectetur adipiscing elit. "                                       +
                                       "Proin dapibus dolor vitae justo rutrum, ut lobortis nibh mattis. "                               +
                                       "Aenean id elit commodo, semper felis nec.";
            }
        }

        #endregion
        #region 액션 버튼 콤보 박스 선택 변경시 처리하기 - actionButtonComboBox_SelectionChanged(sender, e)

        /// <summary>
        /// 액션 버튼 콤보 박스 선택 변경시 처리하기
        /// </summary>
        /// <param name="sender">이벤트 발생자</param>
        /// <param name="e">이벤트 인자</param>
        private void actionButtonComboBox_SelectionChanged(object sender, SelectionChangedEventArgs e)
        {
            if(this.infoBar == null)
            {
                return;
            }

            if(this.actionButtonComboBox.SelectedIndex == 0)
            {
                this.infoBar.ActionButton = null;
            }
            else if(this.actionButtonComboBox.SelectedIndex == 1)
            {
                Button button = new Button();

                button.Content = "액션";

                this.infoBar.ActionButton = button;
            }
            else if(this.actionButtonComboBox.SelectedIndex == 2)
            {
                HyperlinkButton hyperlinkButton = new HyperlinkButton();

                hyperlinkButton.NavigateUri = new Uri("http://www.microsoft.com/");
                hyperlinkButton.Content     = "정보 링크";

                this.infoBar.ActionButton = hyperlinkButton;
            }
        }

        #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

using System;

using Windows.Foundation;

using Windows.Graphics.Display;

using Windows.UI.ViewManagement;

using Windows.UI.Xaml;

using Windows.UI.Xaml.Controls;

namespace TestProject

{

/// <summary>

/// 메인 페이지

/// </summary>

public sealed partial class MainPage : Page

{

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

#endregion

}

#endregion

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

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

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

/// <summary>

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

/// </summary>

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

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

private void messageComboBox_SelectionChanged(object sender, SelectionChangedEventArgs e)

{

if(this.infoBar == null)

{

return;

}

if(this.messageComboBox.SelectedIndex == 0)

{

this.infoBar.Message = "A short essential app message.";

}

else if(this.messageComboBox.SelectedIndex == 1)

{

this.infoBar.Message = "A long essential app message for your users to be informed of, acknowledge, or take action on. " +

"Lorem ipsum dolor sit amet, consectetur adipiscing elit. " +

"Proin dapibus dolor vitae justo rutrum, ut lobortis nibh mattis. " +

"Aenean id elit commodo, semper felis nec.";

}

#endregion

#region 액션 버튼 콤보 박스 선택 변경시 처리하기 - actionButtonComboBox_SelectionChanged(sender, e)

/// <summary>

/// 액션 버튼 콤보 박스 선택 변경시 처리하기

/// </summary>

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

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

private void actionButtonComboBox_SelectionChanged(object sender, SelectionChangedEventArgs e)

{

if(this.infoBar == null)

{

return;

}

if(this.actionButtonComboBox.SelectedIndex == 0)

{

this.infoBar.ActionButton = null;

}

else if(this.actionButtonComboBox.SelectedIndex == 1)

{

Button button = new Button();

button.Content = "액션";

this.infoBar.ActionButton = button;

}

else if(this.actionButtonComboBox.SelectedIndex == 2)

{

HyperlinkButton hyperlinkButton = new HyperlinkButton();

hyperlinkButton.NavigateUri = new Uri("http://www.microsoft.com/");

hyperlinkButton.Content = "정보 링크";

this.infoBar.ActionButton = hyperlinkButton;

}

#endregion

}

TestProject.zip

[C#/WINUI2.5] InfoBar 엘리먼트 : IsOpen/Severity 속성 사용하기

■ InfoBar 엘리먼트의 IsOpen/Severity 속성을 사용하는 방법을 보여준다. ▶ 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 Margin="10">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*"    />
                <ColumnDefinition Width="50"   />
                <ColumnDefinition Width="Auto" />
            </Grid.ColumnDefinitions>
            <muxc:InfoBar Name="infoBar" Grid.Column="0"
                VerticalAlignment="Center"
                IsOpen="True"
                Severity="Informational"
                Title="Title"
                Message="사용자가 알림을 받거나, 확인하거나, 조치를 취해야 하는 필수 앱 메시지입니다." />
            <StackPanel Grid.Column="2"
                VerticalAlignment="Center"
                Spacing="10">
                <CheckBox
                    Content="오픈 여부"
                    IsChecked="{x:Bind infoBar.IsOpen, Mode=TwoWay}" />
                <ComboBox
                    Header="심각도"
                    SelectionChanged="severityComboBox_SelectionChanged"
                    SelectedValue="Informational">
                    <x:String>Informational</x:String>
                    <x:String>Success</x:String>
                    <x:String>Warning</x:String>
                    <x:String>Error</x:String>
                </ComboBox>
            </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.ColumnDefinitions>

</Grid.ColumnDefinitions>

<muxc:InfoBar Name="infoBar" Grid.Column="0"

VerticalAlignment="Center"

IsOpen="True"

Severity="Informational"

Title="Title"

Message="사용자가 알림을 받거나, 확인하거나, 조치를 취해야 하는 필수 앱 메시지입니다." />

<StackPanel Grid.Column="2"

VerticalAlignment="Center"

Spacing="10">

<CheckBox

Content="오픈 여부"

IsChecked="{x:Bind infoBar.IsOpen, Mode=TwoWay}" />

<ComboBox

Header="심각도"

SelectionChanged="severityComboBox_SelectionChanged"

SelectedValue="Informational">

<x:String>Informational</x:String>

<x:String>Success</x:String>

<x:String>Warning</x:String>

<x:String>Error</x:String>

</ComboBox>

</StackPanel>

</Grid>

</Page>

▶ MainPage.xaml.cs


using Microsoft.UI.Xaml.Controls;
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 = "InfoBar 엘리먼트 : IsOpen/Severity 속성 사용하기";

            #endregion
        }

        #endregion

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

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

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

            switch(severityString)
            {
                case "Error"         : this.infoBar.Severity = InfoBarSeverity.Error;         break;
                case "Warning"       : this.infoBar.Severity = InfoBarSeverity.Warning;       break;
                case "Success"       : this.infoBar.Severity = InfoBarSeverity.Success;       break;
                case "Informational" :
                default              : this.infoBar.Severity = InfoBarSeverity.Informational; break;
            }
        }

        #endregion
    }
}

using Microsoft.UI.Xaml.Controls;

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

#endregion

}

#endregion

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

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

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

/// <summary>

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

/// </summary>

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

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

private void severityComboBox_SelectionChanged(object sender, SelectionChangedEventArgs e)

{

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

switch(severityString)

{

case "Error" : this.infoBar.Severity = InfoBarSeverity.Error; break;

case "Warning" : this.infoBar.Severity = InfoBarSeverity.Warning; break;

case "Success" : this.infoBar.Severity = InfoBarSeverity.Success; break;

case "Informational" :

default : this.infoBar.Severity = InfoBarSeverity.Informational; break;

}

#endregion

}

TestProject.zip

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

■ SemanticZoom 엘리먼트를 사용하는 방법을 보여준다. ▶ ControlInfoDocumentLink.cs


namespace TestProject
{
    /// <summary>
    /// 컨트롤 정보 문서 링크
    /// </summary>
    public class ControlInfoDocumentLink
    {
        //////////////////////////////////////////////////////////////////////////////////////////////////// Property
        ////////////////////////////////////////////////////////////////////////////////////////// Public

        #region 제목 - Title

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

        #endregion
        #region URI - URI

        /// <summary>
        /// URI
        /// </summary>
        public string URI { get; private set; }

        #endregion

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

        #region 생성자 - ControlInfoDocumentLink(title, uri)

        /// <summary>
        /// 생성자
        /// </summary>
        /// <param name="title">제목</param>
        /// <param name="uri">URI</param>
        public ControlInfoDocumentLink(string title, string uri)
        {
            Title = title;
            URI   = uri;
        }

        #endregion
    }
}

namespace TestProject

{

/// <summary>

/// 컨트롤 정보 문서 링크

/// </summary>

public class ControlInfoDocumentLink

{

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

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

#region 제목 - Title

/// <summary>

/// 제목

/// </summary>

public string Title { get; private set; }

#endregion

#region URI - URI

/// <summary>

/// URI

/// </summary>

public string URI { get; private set; }

#endregion

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

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

#region 생성자 - ControlInfoDocumentLink(title, uri)

/// <summary>

/// 생성자

/// </summary>

/// <param name="title">제목</param>

/// <param name="uri">URI</param>

public ControlInfoDocumentLink(string title, string uri)

{

Title = title;

URI = uri;

}

#endregion

}

▶ ControlInfoDataItem.cs


using System.Collections.ObjectModel;

namespace TestProject
{
    /// <summary>
    /// 컨트롤 정보 데이터 항목
    /// </summary>
    public class ControlInfoDataItem
    {
        //////////////////////////////////////////////////////////////////////////////////////////////////// Property
        ////////////////////////////////////////////////////////////////////////////////////////// Public

        #region 고유 ID - UniqueID

        /// <summary>
        /// 고유 ID
        /// </summary>
        public string UniqueID { get; private set; }

        #endregion
        #region 제목 - Title

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

        #endregion
        #region 하위 제목 - Subtitle

        /// <summary>
        /// 하위 제목
        /// </summary>
        public string Subtitle { get; private set; }

        #endregion
        #region 설명 - Description

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

        #endregion
        #region 이미지 경로 - ImagePath

        /// <summary>
        /// 이미지 경로
        /// </summary>
        public string ImagePath { get; private set; }

        #endregion
        #region 배지 문자열 - BadgeString

        /// <summary>
        /// 배지 문자열
        /// </summary>
        public string BadgeString { get; private set; }

        #endregion
        #region 내용 - Content

        /// <summary>
        /// 내용
        /// </summary>
        public string Content { get; private set; }

        #endregion
        #region 신규 여부 - IsNew

        /// <summary>
        /// 신규 여부
        /// </summary>
        public bool IsNew { get; private set; }

        #endregion
        #region 업데이트 여부 - IsUpdated

        /// <summary>
        /// 업데이트 여부
        /// </summary>
        public bool IsUpdated { get; private set; }

        #endregion
        #region 미리보기 여부 - IsPreview

        /// <summary>
        /// 미리보기 여부
        /// </summary>
        public bool IsPreview { get; private set; }

        #endregion
        #region 문서 링크 컬렉션 - DocumentLinkCollection

        /// <summary>
        /// 문서 링크 컬렉션
        /// </summary>
        public ObservableCollection<ControlInfoDocumentLink> DocumentLinkCollection { get; private set; }

        #endregion
        #region 연결 컨트롤 컬렉션 - RelatedControlCollection

        /// <summary>
        /// 연결 컨트롤 컬렉션
        /// </summary>
        public ObservableCollection<string> RelatedControlCollection { get; private set; }

        #endregion

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

        #region 생성자 - ControlInfoDataItem(uniqueID, title, subtitle, imagePath, badgeString, description, content, isNew, isUpdated, isPreview)

        /// <summary>
        /// 생성자
        /// </summary>
        /// <param name="uniqueID">고유 ID</param>
        /// <param name="title">제목</param>
        /// <param name="subtitle">하위 제목</param>
        /// <param name="imagePath">이미지 경로</param>
        /// <param name="badgeString">배지 문자열</param>
        /// <param name="description">설명</param>
        /// <param name="content">내용</param>
        /// <param name="isNew">신규 여부</param>
        /// <param name="isUpdated">업데이트 여부</param>
        /// <param name="isPreview">미리보기 여부</param>
        public ControlInfoDataItem
        (
            string uniqueID,
            string title,
            string subtitle,
            string imagePath,
            string badgeString,
            string description,
            string content,
            bool   isNew,
            bool   isUpdated,
            bool   isPreview
        )
        {
            UniqueID                 = uniqueID;
            Title                    = title;
            Subtitle                 = subtitle;
            ImagePath                = imagePath;
            BadgeString              = badgeString;
            Description              = description;
            Content                  = content;
            IsNew                    = isNew;
            IsUpdated                = isUpdated;
            IsPreview                = isPreview;
            DocumentLinkCollection   = new ObservableCollection<ControlInfoDocumentLink>();
            RelatedControlCollection = new ObservableCollection<string>();
        }

        #endregion

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

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

        /// <summary>
        /// 문자열 구하기
        /// </summary>
        /// <returns>문자열</returns>
        public override string ToString()
        {
            return Title;
        }

        #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

using System.Collections.ObjectModel;

namespace TestProject

{

/// <summary>

/// 컨트롤 정보 데이터 항목

/// </summary>

public class ControlInfoDataItem

{

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

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

#region 고유 ID - UniqueID

/// <summary>

/// 고유 ID

/// </summary>

public string UniqueID { get; private set; }

#endregion

#region 제목 - Title

/// <summary>

/// 제목

/// </summary>

public string Title { get; private set; }

#endregion

#region 하위 제목 - Subtitle

/// <summary>

/// 하위 제목

/// </summary>

public string Subtitle { get; private set; }

#endregion

#region 설명 - Description

/// <summary>

/// 설명

/// </summary>

public string Description { get; private set; }

#endregion

#region 이미지 경로 - ImagePath

/// <summary>

/// 이미지 경로

/// </summary>

public string ImagePath { get; private set; }

#endregion

#region 배지 문자열 - BadgeString

/// <summary>

/// 배지 문자열

/// </summary>

public string BadgeString { get; private set; }

#endregion

#region 내용 - Content

/// <summary>

/// 내용

/// </summary>

public string Content { get; private set; }

#endregion

#region 신규 여부 - IsNew

/// <summary>

/// 신규 여부

/// </summary>

public bool IsNew { get; private set; }

#endregion

#region 업데이트 여부 - IsUpdated

/// <summary>

/// 업데이트 여부

/// </summary>

public bool IsUpdated { get; private set; }

#endregion

#region 미리보기 여부 - IsPreview

/// <summary>

/// 미리보기 여부

/// </summary>

public bool IsPreview { get; private set; }

#endregion

#region 문서 링크 컬렉션 - DocumentLinkCollection

/// <summary>

/// 문서 링크 컬렉션

/// </summary>

public ObservableCollection<ControlInfoDocumentLink> DocumentLinkCollection { get; private set; }

#endregion

#region 연결 컨트롤 컬렉션 - RelatedControlCollection

/// <summary>

/// 연결 컨트롤 컬렉션

/// </summary>

public ObservableCollection<string> RelatedControlCollection { get; private set; }

#endregion

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

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

#region 생성자 - ControlInfoDataItem(uniqueID, title, subtitle, imagePath, badgeString, description, content, isNew, isUpdated, isPreview)

/// <summary>

/// 생성자

/// </summary>

/// <param name="uniqueID">고유 ID</param>

/// <param name="title">제목</param>

/// <param name="subtitle">하위 제목</param>

/// <param name="imagePath">이미지 경로</param>

/// <param name="badgeString">배지 문자열</param>

/// <param name="description">설명</param>

/// <param name="content">내용</param>

/// <param name="isNew">신규 여부</param>

/// <param name="isUpdated">업데이트 여부</param>

/// <param name="isPreview">미리보기 여부</param>

public ControlInfoDataItem

(

string uniqueID,

string title,

string subtitle,

string imagePath,

string badgeString,

string description,

string content,

bool isNew,

bool isUpdated,

bool isPreview

)

{

UniqueID = uniqueID;

Title = title;

Subtitle = subtitle;

ImagePath = imagePath;

BadgeString = badgeString;

Description = description;

Content = content;

IsNew = isNew;

IsUpdated = isUpdated;

IsPreview = isPreview;

DocumentLinkCollection = new ObservableCollection<ControlInfoDocumentLink>();

RelatedControlCollection = new ObservableCollection<string>();

}

#endregion

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

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

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

/// <summary>

/// 문자열 구하기

/// </summary>

/// <returns>문자열</returns>

public override string ToString()

{

return Title;

}

#endregion

}

▶ ControlInfoDataGroup.cs


using System.Collections.ObjectModel;

namespace TestProject
{
    /// <summary>
    /// 컨트롤 정보 데이터 그룹
    /// </summary>
    public class ControlInfoDataGroup
    {
        //////////////////////////////////////////////////////////////////////////////////////////////////// Property
        ////////////////////////////////////////////////////////////////////////////////////////// Public

        #region 고유 ID - UniqueID

        /// <summary>
        /// 고유 ID
        /// </summary>
        public string UniqueID { get; private set; }

        #endregion
        #region 제목 - Title

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

        #endregion
        #region 하위 제목 - Subtitle

        /// <summary>
        /// 하위 제목
        /// </summary>
        public string Subtitle { get; private set; }

        #endregion
        #region 설명 - Description

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

        #endregion
        #region 이미지 경로 - ImagePath

        /// <summary>
        /// 이미지 경로
        /// </summary>
        public string ImagePath { get; private set; }

        #endregion
        #region 데이터 항목 컬렉션 - DataItemCollection

        /// <summary>
        /// 데이터 항목 컬렉션
        /// </summary>
        public ObservableCollection<ControlInfoDataItem> DataItemCollection { get; private set; }

        #endregion

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

        #region 생성자 - ControlInfoDataGroup(uniqueID, title, subtitle, imagePath, description)

        /// <summary>
        /// 생성자
        /// </summary>
        /// <param name="uniqueID">고유 ID</param>
        /// <param name="title">제목</param>
        /// <param name="subtitle">하위 제목</param>
        /// <param name="imagePath">이미지 경로</param>
        /// <param name="description">설명</param>
        public ControlInfoDataGroup(string uniqueID, string title, string subtitle, string imagePath, string description)
        {
            UniqueID           = uniqueID;
            Title              = title;
            Subtitle           = subtitle;
            Description        = description;
            ImagePath          = imagePath;
            DataItemCollection = new ObservableCollection<ControlInfoDataItem>();
        }

        #endregion

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

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

        /// <summary>
        /// 문자열 구하기
        /// </summary>
        /// <returns>문자열</returns>
        public override string ToString()
        {
            return Title;
        }

        #endregion
    }
}

100

101

102

103

104

105

using System.Collections.ObjectModel;

namespace TestProject

{

/// <summary>

/// 컨트롤 정보 데이터 그룹

/// </summary>

public class ControlInfoDataGroup

{

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

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

#region 고유 ID - UniqueID

/// <summary>

/// 고유 ID

/// </summary>

public string UniqueID { get; private set; }

#endregion

#region 제목 - Title

/// <summary>

/// 제목

/// </summary>

public string Title { get; private set; }

#endregion

#region 하위 제목 - Subtitle

/// <summary>

/// 하위 제목

/// </summary>

public string Subtitle { get; private set; }

#endregion

#region 설명 - Description

/// <summary>

/// 설명

/// </summary>

public string Description { get; private set; }

#endregion

#region 이미지 경로 - ImagePath

/// <summary>

/// 이미지 경로

/// </summary>

public string ImagePath { get; private set; }

#endregion

#region 데이터 항목 컬렉션 - DataItemCollection

/// <summary>

/// 데이터 항목 컬렉션

/// </summary>

public ObservableCollection<ControlInfoDataItem> DataItemCollection { get; private set; }

#endregion

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

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

#region 생성자 - ControlInfoDataGroup(uniqueID, title, subtitle, imagePath, description)

/// <summary>

/// 생성자

/// </summary>

/// <param name="uniqueID">고유 ID</param>

/// <param name="title">제목</param>

/// <param name="subtitle">하위 제목</param>

/// <param name="imagePath">이미지 경로</param>

/// <param name="description">설명</param>

public ControlInfoDataGroup(string uniqueID, string title, string subtitle, string imagePath, string description)

{

UniqueID = uniqueID;

Title = title;

Subtitle = subtitle;

Description = description;

ImagePath = imagePath;

DataItemCollection = new ObservableCollection<ControlInfoDataItem>();

}

#endregion

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

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

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

/// <summary>

/// 문자열 구하기

/// </summary>

/// <returns>문자열</returns>

public override string ToString()

{

return Title;

}

#endregion

}

▶ ControlInfoDataSource.cs


using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Windows.Data.Json;
using Windows.Storage;

namespace TestProject
{
    /// <summary>
    /// 컨트롤 정보 데이터 소스
    /// </summary>
    public sealed class ControlInfoDataSource
    {
        //////////////////////////////////////////////////////////////////////////////////////////////////// Field
        ////////////////////////////////////////////////////////////////////////////////////////// Static
        //////////////////////////////////////////////////////////////////////////////// Private

        #region Field

        /// <summary>
        /// 잠금 객체
        /// </summary>
        private static readonly object _lockObject = new object();

        /// <summary>
        /// 인스턴스
        /// </summary>
        private static ControlInfoDataSource _instance;

        #endregion

        ////////////////////////////////////////////////////////////////////////////////////////// Instance
        //////////////////////////////////////////////////////////////////////////////// Private

        #region Field

        /// <summary>
        /// 데이터 그룹 리스트
        /// </summary>
        private IList<ControlInfoDataGroup> dataGroupList = new List<ControlInfoDataGroup>();

        #endregion

        //////////////////////////////////////////////////////////////////////////////////////////////////// Property
        ////////////////////////////////////////////////////////////////////////////////////////// Static
        //////////////////////////////////////////////////////////////////////////////// Public

        #region 인스턴스 - Instance

        /// <summary>
        /// 인스턴스
        /// </summary>
        public static ControlInfoDataSource Instance
        {
            get
            {
                return _instance;
            }
        }

        #endregion

        ////////////////////////////////////////////////////////////////////////////////////////// Instance
        //////////////////////////////////////////////////////////////////////////////// Public

        #region 데이터 그룹 리스트 - DataGroupList

        /// <summary>
        /// 데이터 그룹 리스트
        /// </summary>
        public IList<ControlInfoDataGroup> DataGroupList
        {
            get
            {
                return this.dataGroupList;
            }
        }

        #endregion

        //////////////////////////////////////////////////////////////////////////////////////////////////// Constructor
        ////////////////////////////////////////////////////////////////////////////////////////// Static

        #region 생성자 - ControlInfoDataSource()

        /// <summary>
        /// 생성자
        /// </summary>
        static ControlInfoDataSource()
        {
            _instance = new ControlInfoDataSource();
        }

        #endregion

        ////////////////////////////////////////////////////////////////////////////////////////// Instance
        //////////////////////////////////////////////////////////////////////////////// Private

        #region 생성자 - ControlInfoDataSource()

        /// <summary>
        /// 생성자
        /// </summary>
        private ControlInfoDataSource()
        {
        }

        #endregion

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

        #region 데이터 그룹 열거 가능형 구하기 (비동기) - GetDataGroupEnumerableAsync()

        /// <summary>
        /// 데이터 그룹 열거 가능형 구하기 (비동기)
        /// </summary>
        /// <returns>데이터 그룹 열거 가능형</returns>
        public async Task<IEnumerable<ControlInfoDataGroup>> GetDataGroupEnumerableAsync()
        {
            await _instance.GetControlInfoDataAsync();

            return _instance.DataGroupList;
        }

        #endregion
        #region 데이터 그룹 구하기 (비동기) - GetDataGroupAsync(uniqueID)

        /// <summary>
        /// 데이터 그룹 구하기 (비동기)
        /// </summary>
        /// <param name="uniqueID">고유 ID</param>
        /// <returns>데이터 그룹 태스크</returns>
        public async Task<ControlInfoDataGroup> GetDataGroupAsync(string uniqueID)
        {
            await _instance.GetControlInfoDataAsync();

            IEnumerable<ControlInfoDataGroup> dataGroupEnumerable = _instance.DataGroupList.Where((group) => group.UniqueID.Equals(uniqueID));

            if(dataGroupEnumerable.Count() == 1)
            {
                return dataGroupEnumerable.First();
            }

            return null;
        }

        #endregion
        #region 데이터 항목 구하기 (비동기) - GetDataItemAsync(uniqueID)

        /// <summary>
        /// 데이터 항목 구하기 (비동기)
        /// </summary>
        /// <param name="uniqueID">고유 ID</param>
        /// <returns>데이터 항목 태스크</returns>
        public async Task<ControlInfoDataItem> GetDataItemAsync(string uniqueID)
        {
            await _instance.GetControlInfoDataAsync();

            IEnumerable<ControlInfoDataItem> dataItemEnumerable = _instance.DataGroupList.SelectMany(group => group.DataItemCollection)
                                                                                         .Where((item) => item.UniqueID.Equals(uniqueID));

            if(dataItemEnumerable.Count() > 0)
            {
                return dataItemEnumerable.First();
            }

            return null;
        }

        #endregion
        #region 항목에서 데이터 그룹 구하기 (비동기) - GetDataGroupFromItemAsync(uniqueID)

        /// <summary>
        /// 항목에서 데이터 그룹 구하기 (비동기)
        /// </summary>
        /// <param name="uniqueID">고유 ID</param>
        /// <returns>데이터 그룹 태스크</returns>
        public async Task<ControlInfoDataGroup> GetDataGroupFromItemAsync(string uniqueID)
        {
            await _instance.GetControlInfoDataAsync();

            IEnumerable<ControlInfoDataGroup> dataGroupEnumerable = _instance.DataGroupList.Where
            (
                (group) => group.DataItemCollection.FirstOrDefault(item => item.UniqueID.Equals(uniqueID)) != null
            );

            if(dataGroupEnumerable.Count() == 1)
            {
                return dataGroupEnumerable.First();
            }

            return null;
        }

        #endregion

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

        #region 컨트롤 정보 데이터 구하기 - GetControlInfoDataAsync()

        /// <summary>
        /// 컨트롤 정보 데이터 구하기
        /// </summary>
        /// <returns>태스크</returns>
        private async Task GetControlInfoDataAsync()
        {
            lock(_lockObject)
            {
                if(DataGroupList.Count() != 0)
                {
                    return;
                }
            }

            Uri dataURI = new Uri("ms-appx:///DATA/ControlInfoData.json");

            StorageFile storageFile = await StorageFile.GetFileFromApplicationUriAsync(dataURI);

            string json = await FileIO.ReadTextAsync(storageFile);

            JsonObject jsonObject = JsonObject.Parse(json);
            JsonArray  jsonArray  = jsonObject["Groups"].GetArray();

            lock(_lockObject)
            {
                foreach(JsonValue groupValue in jsonArray)
                {
                    JsonObject groupObject = groupValue.GetObject();

                    ControlInfoDataGroup group = new ControlInfoDataGroup
                    (
                        groupObject["UniqueId"   ].GetString(),
                        groupObject["Title"      ].GetString(),
                        groupObject["Subtitle"   ].GetString(),
                        groupObject["ImagePath"  ].GetString(),
                        groupObject["Description"].GetString()
                    );

                    foreach(JsonValue itemValue in groupObject["Items"].GetArray())
                    {
                        JsonObject itemObject = itemValue.GetObject();

                        string badgeString = null;

                        bool isNew     = itemObject.ContainsKey("IsNew"    ) ? itemObject["IsNew"    ].GetBoolean() : false;
                        bool isUpdated = itemObject.ContainsKey("IsUpdated") ? itemObject["IsUpdated"].GetBoolean() : false;
                        bool isPreview = itemObject.ContainsKey("IsPreview") ? itemObject["IsPreview"].GetBoolean() : false;

                        if(isNew)
                        {
                            badgeString = "New";
                        }
                        else if(isUpdated)
                        {
                            badgeString = "Updated";
                        }
                        else if(isPreview)
                        {
                            badgeString = "Preview";
                        }

                        ControlInfoDataItem item = new ControlInfoDataItem
                        (
                            itemObject["UniqueId"   ].GetString(),
                            itemObject["Title"      ].GetString(),
                            itemObject["Subtitle"   ].GetString(),
                            itemObject["ImagePath"  ].GetString(),
                            badgeString,
                            itemObject["Description"].GetString(),
                            itemObject["Content"    ].GetString(),
                            isNew,
                            isUpdated,
                            isPreview
                        );

                        if(itemObject.ContainsKey("Docs"))
                        {
                            foreach(JsonValue documentValue in itemObject["Docs"].GetArray())
                            {
                                JsonObject documentObject = documentValue.GetObject();

                                item.DocumentLinkCollection.Add
                                (
                                    new ControlInfoDocumentLink
                                    (
                                        documentObject["Title"].GetString(),
                                        documentObject["Uri"  ].GetString()
                                    )
                                );
                            }
                        }

                        if(itemObject.ContainsKey("RelatedControls"))
                        {
                            foreach(JsonValue relatedControlValue in itemObject["RelatedControls"].GetArray())
                            {
                                item.RelatedControlCollection.Add(relatedControlValue.GetString());
                            }
                        }

                        group.DataItemCollection.Add(item);
                    }

                    if(!DataGroupList.Any(g => g.Title == group.Title))
                    {
                        DataGroupList.Add(group);
                    }
                }
            }
        }

        #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

using System;

using System.Collections.Generic;

using System.Linq;

using System.Threading.Tasks;

using Windows.Data.Json;

using Windows.Storage;

namespace TestProject

{

/// <summary>

/// 컨트롤 정보 데이터 소스

/// </summary>

public sealed class ControlInfoDataSource

{

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

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

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

#region Field

/// <summary>

/// 잠금 객체

/// </summary>

private static readonly object _lockObject = new object();

/// <summary>

/// 인스턴스

/// </summary>

private static ControlInfoDataSource _instance;

#endregion

////////////////////////////////////////////////////////////////////////////////////////// Instance

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

#region Field

/// <summary>

/// 데이터 그룹 리스트

/// </summary>

private IList<ControlInfoDataGroup> dataGroupList = new List<ControlInfoDataGroup>();

#endregion

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

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

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

#region 인스턴스 - Instance

/// <summary>

/// 인스턴스

/// </summary>

public static ControlInfoDataSource Instance

{

get

{

return _instance;

}

#endregion

////////////////////////////////////////////////////////////////////////////////////////// Instance

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

#region 데이터 그룹 리스트 - DataGroupList

/// <summary>

/// 데이터 그룹 리스트

/// </summary>

public IList<ControlInfoDataGroup> DataGroupList

{

get

{

return this.dataGroupList;

}

#endregion

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

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

#region 생성자 - ControlInfoDataSource()

/// <summary>

/// 생성자

/// </summary>

static ControlInfoDataSource()

{

_instance = new ControlInfoDataSource();

}

#endregion

////////////////////////////////////////////////////////////////////////////////////////// Instance

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

#region 생성자 - ControlInfoDataSource()

/// <summary>

/// 생성자

/// </summary>

private ControlInfoDataSource()

{

}

#endregion

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

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

#region 데이터 그룹 열거 가능형 구하기 (비동기) - GetDataGroupEnumerableAsync()

/// <summary>

/// 데이터 그룹 열거 가능형 구하기 (비동기)

/// </summary>

/// <returns>데이터 그룹 열거 가능형</returns>

public async Task<IEnumerable<ControlInfoDataGroup>> GetDataGroupEnumerableAsync()

{

await _instance.GetControlInfoDataAsync();

return _instance.DataGroupList;

}

#endregion

#region 데이터 그룹 구하기 (비동기) - GetDataGroupAsync(uniqueID)

/// <summary>

/// 데이터 그룹 구하기 (비동기)

/// </summary>

/// <param name="uniqueID">고유 ID</param>

/// <returns>데이터 그룹 태스크</returns>

public async Task<ControlInfoDataGroup> GetDataGroupAsync(string uniqueID)

{

await _instance.GetControlInfoDataAsync();

IEnumerable<ControlInfoDataGroup> dataGroupEnumerable = _instance.DataGroupList.Where((group) => group.UniqueID.Equals(uniqueID));

if(dataGroupEnumerable.Count() == 1)

{

return dataGroupEnumerable.First();

}

return null;

}

#endregion

#region 데이터 항목 구하기 (비동기) - GetDataItemAsync(uniqueID)

/// <summary>

/// 데이터 항목 구하기 (비동기)

/// </summary>

/// <param name="uniqueID">고유 ID</param>

/// <returns>데이터 항목 태스크</returns>

public async Task<ControlInfoDataItem> GetDataItemAsync(string uniqueID)

{

await _instance.GetControlInfoDataAsync();

IEnumerable<ControlInfoDataItem> dataItemEnumerable = _instance.DataGroupList.SelectMany(group => group.DataItemCollection)

.Where((item) => item.UniqueID.Equals(uniqueID));

if(dataItemEnumerable.Count() > 0)

{

return dataItemEnumerable.First();

}

return null;

}

#endregion

#region 항목에서 데이터 그룹 구하기 (비동기) - GetDataGroupFromItemAsync(uniqueID)

/// <summary>

/// 항목에서 데이터 그룹 구하기 (비동기)

/// </summary>

/// <param name="uniqueID">고유 ID</param>

/// <returns>데이터 그룹 태스크</returns>

public async Task<ControlInfoDataGroup> GetDataGroupFromItemAsync(string uniqueID)

{

await _instance.GetControlInfoDataAsync();

IEnumerable<ControlInfoDataGroup> dataGroupEnumerable = _instance.DataGroupList.Where

(

(group) => group.DataItemCollection.FirstOrDefault(item => item.UniqueID.Equals(uniqueID)) != null

);

if(dataGroupEnumerable.Count() == 1)

{

return dataGroupEnumerable.First();

}

return null;

}

#endregion

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

#region 컨트롤 정보 데이터 구하기 - GetControlInfoDataAsync()

/// <summary>

/// 컨트롤 정보 데이터 구하기

/// </summary>

/// <returns>태스크</returns>

private async Task GetControlInfoDataAsync()

{

lock(_lockObject)

{

if(DataGroupList.Count() != 0)

{

return;

}

Uri dataURI = new Uri("ms-appx:///DATA/ControlInfoData.json");

StorageFile storageFile = await StorageFile.GetFileFromApplicationUriAsync(dataURI);

string json = await FileIO.ReadTextAsync(storageFile);

JsonObject jsonObject = JsonObject.Parse(json);

JsonArray jsonArray = jsonObject["Groups"].GetArray();

lock(_lockObject)

{

foreach(JsonValue groupValue in jsonArray)

{

JsonObject groupObject = groupValue.GetObject();

ControlInfoDataGroup group = new ControlInfoDataGroup

(

groupObject["UniqueId" ].GetString(),

groupObject["Title" ].GetString(),

groupObject["Subtitle" ].GetString(),

groupObject["ImagePath" ].GetString(),

groupObject["Description"].GetString()

);

foreach(JsonValue itemValue in groupObject["Items"].GetArray())

{

JsonObject itemObject = itemValue.GetObject();

string badgeString = null;

bool isNew = itemObject.ContainsKey("IsNew" ) ? itemObject["IsNew" ].GetBoolean() : false;

bool isUpdated = itemObject.ContainsKey("IsUpdated") ? itemObject["IsUpdated"].GetBoolean() : false;

bool isPreview = itemObject.ContainsKey("IsPreview") ? itemObject["IsPreview"].GetBoolean() : false;

if(isNew)

{

badgeString = "New";

}

else if(isUpdated)

{

badgeString = "Updated";

}

else if(isPreview)

{

badgeString = "Preview";

}

ControlInfoDataItem item = new ControlInfoDataItem

(

itemObject["UniqueId" ].GetString(),

itemObject["Title" ].GetString(),

itemObject["Subtitle" ].GetString(),

itemObject["ImagePath" ].GetString(),

badgeString,

itemObject["Description"].GetString(),

itemObject["Content" ].GetString(),

isNew,

isUpdated,

isPreview

);

if(itemObject.ContainsKey("Docs"))

{

foreach(JsonValue documentValue in itemObject["Docs"].GetArray())

{

JsonObject documentObject = documentValue.GetObject();

item.DocumentLinkCollection.Add

(

new ControlInfoDocumentLink

(

documentObject["Title"].GetString(),

documentObject["Uri" ].GetString()

)

);

}

if(itemObject.ContainsKey("RelatedControls"))

{

foreach(JsonValue relatedControlValue in itemObject["RelatedControls"].GetArray())

{

item.RelatedControlCollection.Add(relatedControlValue.GetString());

}

group.DataItemCollection.Add(item);

}

if(!DataGroupList.Any(g => g.Title == group.Title))

{

DataGroupList.Add(group);

}

#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:wuxdata="using:Windows.UI.Xaml.Data"
    xmlns:local="using:TestProject"
    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"
    FontFamily="나눔고딕코딩"
    FontSize="16">
    <Page.Resources>
        <CollectionViewSource x:Name="collectionViewSource"
            Source="{x:Bind DataGroupEnumerable}"
            IsSourceGrouped="True"
            ItemsPath="DataItemCollection" />
        <DataTemplate x:Key="ZoomInDataTemplateKey" x:DataType="local:ControlInfoDataItem">
            <StackPanel
                Margin="10 5 10 5"
                MinWidth="200"
                Orientation="Horizontal">
                <Image
                    Width="36"
                    Source="{x:Bind ImagePath}" />
                <StackPanel Margin="20 0 0 0">
                    <TextBlock
                        Style="{StaticResource BaseTextBlockStyle}"
                        Text="{x:Bind Title}" />
                    <TextBlock
                        Style="{StaticResource BodyTextBlockStyle}"
                        HorizontalAlignment="Left"
                        Width="300"
                        TextWrapping="Wrap"
                        Text="{x:Bind Subtitle}" />
                </StackPanel>
            </StackPanel>
        </DataTemplate>
        <DataTemplate x:Key="ZoomInGroupHeaderDataTemplateKey" x:DataType="local:ControlInfoDataGroup">
            <TextBlock
                Style="{StaticResource SubtitleTextBlockStyle}"
                Foreground="{ThemeResource ApplicationForegroundThemeBrush}"
                Text="{x:Bind Title}" />
        </DataTemplate>
        <DataTemplate x:Key="ZoomOutDataTemplateKey" x:DataType="wuxdata:ICollectionViewGroup">
            <TextBlock
                Style="{StaticResource SubtitleTextBlockStyle}"
                TextWrapping="Wrap"
                Text="{x:Bind ((local:ControlInfoDataGroup)Group).Title}" />
        </DataTemplate>
    </Page.Resources>
    <Grid>
        <SemanticZoom Name="semanticZoom">
            <SemanticZoom.ZoomedInView>
                <GridView
                    ItemTemplate="{StaticResource ZoomInDataTemplateKey}"
                    ScrollViewer.IsHorizontalScrollChainingEnabled="False"
                    SelectionMode="None"
                    ItemsSource="{x:Bind collectionViewSource.View}"
                    GotFocus="gridView_GotFocus">
                    <GridView.GroupStyle>
                        <GroupStyle HeaderTemplate="{StaticResource ZoomInGroupHeaderDataTemplateKey}" />
                    </GridView.GroupStyle>
                </GridView>
            </SemanticZoom.ZoomedInView>
            <SemanticZoom.ZoomedOutView>
                <ListView
                    ItemTemplate="{StaticResource ZoomOutDataTemplateKey}"
                    SelectionMode="None"
                    ItemsSource="{x:Bind collectionViewSource.View.CollectionGroups}"
                    GotFocus="gridView_GotFocus" />
            </SemanticZoom.ZoomedOutView>
        </SemanticZoom>
    </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:wuxdata="using:Windows.UI.Xaml.Data"

xmlns:local="using:TestProject"

Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"

FontFamily="나눔고딕코딩"

FontSize="16">

<Page.Resources>

<CollectionViewSource x:Name="collectionViewSource"

Source="{x:Bind DataGroupEnumerable}"

IsSourceGrouped="True"

ItemsPath="DataItemCollection" />

<StackPanel

Margin="10 5 10 5"

MinWidth="200"

Orientation="Horizontal">

<Image

Width="36"

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

<TextBlock

Style="{StaticResource BaseTextBlockStyle}"

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

<TextBlock

Style="{StaticResource BodyTextBlockStyle}"

HorizontalAlignment="Left"

Width="300"

TextWrapping="Wrap"

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

</StackPanel>

</DataTemplate>

<TextBlock

Style="{StaticResource SubtitleTextBlockStyle}"

Foreground="{ThemeResource ApplicationForegroundThemeBrush}"

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

</DataTemplate>

<TextBlock

Style="{StaticResource SubtitleTextBlockStyle}"

TextWrapping="Wrap"

Text="{x:Bind ((local:ControlInfoDataGroup)Group).Title}" />

</DataTemplate>

</Page.Resources>

<Grid>

<SemanticZoom.ZoomedInView>

<GridView

ItemTemplate="{StaticResource ZoomInDataTemplateKey}"

ScrollViewer.IsHorizontalScrollChainingEnabled="False"

SelectionMode="None"

ItemsSource="{x:Bind collectionViewSource.View}"

GotFocus="gridView_GotFocus">

<GridView.GroupStyle>

</GridView.GroupStyle>

</GridView>

</SemanticZoom.ZoomedInView>

<SemanticZoom.ZoomedOutView>

<ListView

ItemTemplate="{StaticResource ZoomOutDataTemplateKey}"

SelectionMode="None"

ItemsSource="{x:Bind collectionViewSource.View.CollectionGroups}"

GotFocus="gridView_GotFocus" />

</SemanticZoom.ZoomedOutView>

</SemanticZoom>

</Grid>

</Page>

▶

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

■ ScrollViewer 엘리먼트를 사용하는 기본적인 방법을 보여준다. ▶ 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 Margin="10">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*"    />
            <ColumnDefinition Width="50"   />
            <ColumnDefinition Width="Auto" />
        </Grid.ColumnDefinitions>
        <ScrollViewer Name="scrollViewer" Grid.Column="0"
            IsTabStop="True"
            ZoomMode="Disabled"
            IsVerticalScrollChainingEnabled="True"
            ManipulationCompleted="scrollViewer_ManipulationCompleted">
            <Image
                HorizontalAlignment="Left"
                VerticalAlignment="Top"
                Stretch="None"
                Source="ms-appx:///IMAGE/cliff.jpg" />
        </ScrollViewer>
        <Grid MinWidth="200" Grid.Column="2">
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto" />
                <RowDefinition Height="Auto" />
                <RowDefinition Height="Auto" />
                <RowDefinition Height="Auto" />
                <RowDefinition Height="Auto" />
                <RowDefinition Height="Auto" />
                <RowDefinition Height="Auto" />
                <RowDefinition Height="Auto" />
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto" />
                <ColumnDefinition Width="*"    />
            </Grid.ColumnDefinitions>
            <TextBlock Grid.Row="0" Grid.Column="0"
                VerticalAlignment="Center"
                Margin="0 0 10 0"
                Text="확대/축소 모드" />
            <ComboBox Grid.Row="0" Grid.Column="1"
                HorizontalAlignment="Stretch"
                SelectionChanged="zoomModeComboBox_SelectionChanged">
                <ComboBoxItem>Enabled</ComboBoxItem>
                <ComboBoxItem IsSelected="True">Disabled</ComboBoxItem>
            </ComboBox>
            <Slider Name="zoomSlider" Grid.Row="1" Grid.ColumnSpan="2"
                Margin="0 10 0 0"
                Header="확대/축소"
                IsEnabled="False"
                Minimum="{x:Bind scrollViewer.MinZoomFactor, Mode=OneWay}"
                Maximum="{x:Bind scrollViewer.MaxZoomFactor, Mode=OneWay}"
                Value="1"
                ValueChanged="zoomSlider_ValueChanged" />
            <TextBlock Grid.Row="2" Grid.Column="0" Grid.ColumnSpan="2"
                HorizontalAlignment="Center"
                Margin="0 10"
                Text="스크롤 모드" />
            <TextBlock Grid.Row="3" Grid.Column="0"
                VerticalAlignment="Center"
                Margin="0 0 10 0"
                Text="수평" />
            <ComboBox Grid.Row="3" Grid.Column="1"
                HorizontalAlignment="Stretch"
                SelectedIndex="1"
                SelectionChanged="horizontalScrollModeComboBox_SelectionChanged">
                <ComboBoxItem>Auto</ComboBoxItem>
                <ComboBoxItem>Enabled</ComboBoxItem>
                <ComboBoxItem>Disabled</ComboBoxItem>
            </ComboBox>
            <TextBlock Grid.Row="4" Grid.Column="0"
                VerticalAlignment="Center"
                Margin="0 10 10 0"
                Text="수직" />
            <ComboBox Grid.Row="4" Grid.Column="1"
                HorizontalAlignment="Stretch"
                Margin="0 10 0 0"
                SelectedIndex="1"
                SelectionChanged="verticalScrollModeComboBox_SelectionChanged">
                <ComboBoxItem>Auto</ComboBoxItem>
                <ComboBoxItem>Enabled</ComboBoxItem>
                <ComboBoxItem>Disabled</ComboBoxItem>
            </ComboBox>
            <TextBlock Grid.Row="5" Grid.Column="0" Grid.ColumnSpan="2"
                HorizontalAlignment="Center"
                Margin="0 20 0 10"
                Text="스크롤바 표시" />
            <TextBlock Grid.Row="6" Grid.Column="0"
                VerticalAlignment="Center"
                Margin="0 0 10 0"
                Text="수평" />
            <ComboBox Grid.Row="6" Grid.Column="1"
                HorizontalAlignment="Stretch"
                SelectedIndex="3"
                SelectionChanged="horizontalScrollBarVisibilityComboBox_SelectionChanged">
                <ComboBoxItem>Auto</ComboBoxItem>
                <ComboBoxItem>Visible</ComboBoxItem>
                <ComboBoxItem>Hidden</ComboBoxItem>
                <ComboBoxItem>Disabled</ComboBoxItem>
            </ComboBox>
            <TextBlock Grid.Row="7" Grid.Column="0"
                VerticalAlignment="Center"
                Margin="0 10 10 0"
                Text="수직" />
            <ComboBox Grid.Row="7" Grid.Column="1"
                HorizontalAlignment="Stretch"
                Margin="0 10 0 0"
                SelectedIndex="1"
                SelectionChanged="verticalScrollBarVisibilityComboBox_SelectionChanged">
                <ComboBoxItem>Auto</ComboBoxItem>
                <ComboBoxItem>Visible</ComboBoxItem>
                <ComboBoxItem>Hidden</ComboBoxItem>
                <ComboBoxItem>Disabled</ComboBoxItem>
            </ComboBox>
        </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

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

</Grid.ColumnDefinitions>

<ScrollViewer Name="scrollViewer" Grid.Column="0"

IsTabStop="True"

ZoomMode="Disabled"

IsVerticalScrollChainingEnabled="True"

ManipulationCompleted="scrollViewer_ManipulationCompleted">

<Image

HorizontalAlignment="Left"

VerticalAlignment="Top"

Stretch="None"

Source="ms-appx:///IMAGE/cliff.jpg" />

</ScrollViewer>

<Grid.RowDefinitions>

</Grid.RowDefinitions>

<Grid.ColumnDefinitions>

</Grid.ColumnDefinitions>

<TextBlock Grid.Row="0" Grid.Column="0"

VerticalAlignment="Center"

Margin="0 0 10 0"

Text="확대/축소 모드" />

<ComboBox Grid.Row="0" Grid.Column="1"

HorizontalAlignment="Stretch"

SelectionChanged="zoomModeComboBox_SelectionChanged">

<ComboBoxItem>Enabled</ComboBoxItem>

<ComboBoxItem IsSelected="True">Disabled</ComboBoxItem>

</ComboBox>

<Slider Name="zoomSlider" Grid.Row="1" Grid.ColumnSpan="2"

Margin="0 10 0 0"

Header="확대/축소"

IsEnabled="False"

Minimum="{x:Bind scrollViewer.MinZoomFactor, Mode=OneWay}"

Maximum="{x:Bind scrollViewer.MaxZoomFactor, Mode=OneWay}"

Value="1"

ValueChanged="zoomSlider_ValueChanged" />

<TextBlock Grid.Row="2" Grid.Column="0" Grid.ColumnSpan="2"

HorizontalAlignment="Center"

Margin="0 10"

Text="스크롤 모드" />

<TextBlock Grid.Row="3" Grid.Column="0"

VerticalAlignment="Center"

Margin="0 0 10 0"

Text="수평" />

<ComboBox Grid.Row="3" Grid.Column="1"

HorizontalAlignment="Stretch"

SelectedIndex="1"

SelectionChanged="horizontalScrollModeComboBox_SelectionChanged">

<ComboBoxItem>Enabled</ComboBoxItem>

<ComboBoxItem>Disabled</ComboBoxItem>

</ComboBox>

<TextBlock Grid.Row="4" Grid.Column="0"

VerticalAlignment="Center"

Margin="0 10 10 0"

Text="수직" />

<ComboBox Grid.Row="4" Grid.Column="1"

HorizontalAlignment="Stretch"

Margin="0 10 0 0"

SelectedIndex="1"

SelectionChanged="verticalScrollModeComboBox_SelectionChanged">

<ComboBoxItem>Enabled</ComboBoxItem>

<ComboBoxItem>Disabled</ComboBoxItem>

</ComboBox>

<TextBlock Grid.Row="5" Grid.Column="0" Grid.ColumnSpan="2"

HorizontalAlignment="Center"

Margin="0 20 0 10"

Text="스크롤바 표시" />

<TextBlock Grid.Row="6" Grid.Column="0"

VerticalAlignment="Center"

Margin="0 0 10 0"

Text="수평" />

<ComboBox Grid.Row="6" Grid.Column="1"

HorizontalAlignment="Stretch"

SelectedIndex="3"

SelectionChanged="horizontalScrollBarVisibilityComboBox_SelectionChanged">

<ComboBoxItem>Visible</ComboBoxItem>

<ComboBoxItem>Hidden</ComboBoxItem>

<ComboBoxItem>Disabled</ComboBoxItem>

</ComboBox>

<TextBlock Grid.Row="7" Grid.Column="0"

VerticalAlignment="Center"

Margin="0 10 10 0"

Text="수직" />

<ComboBox Grid.Row="7" Grid.Column="1"

HorizontalAlignment="Stretch"

Margin="0 10 0 0"

SelectedIndex="1"

SelectionChanged="verticalScrollBarVisibilityComboBox_SelectionChanged">

<ComboBoxItem>Visible</ComboBoxItem>

<ComboBoxItem>Hidden</ComboBoxItem>

<ComboBoxItem>Disabled</ComboBoxItem>

</ComboBox>

</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.Controls.Primitives;
using Windows.UI.Xaml.Input;

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

            #endregion
        }

        #endregion

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

        #region 스크롤 뷰어 조작 완료시 처리하기 - scrollViewer_ManipulationCompleted(sender, e)

        /// <summary>
        /// 스크롤 뷰어 조작 완료시 처리하기
        /// </summary>
        /// <param name="sender">이벤트 발생자</param>
        /// <param name="e">이벤트 인자</param>
        private void scrollViewer_ManipulationCompleted(object sender, ManipulationCompletedRoutedEventArgs e)
        {
            this.zoomSlider.Value = this.scrollViewer.ZoomFactor;
        }

        #endregion
        #region 확대/축소 모드 콤보 박스 선택 변경시 처리하기 - zoomModeComboBox_SelectionChanged(sender, e)

        /// <summary>
        /// 확대/축소 모드 콤보 박스 선택 변경시 처리하기
        /// </summary>
        /// <param name="sender">이벤트 발생자</param>
        /// <param name="e">이벤트 인자</param>
        private void zoomModeComboBox_SelectionChanged(object sender, SelectionChangedEventArgs e)
        {
            if(this.scrollViewer != null && this.zoomSlider != null)
            {
                if(sender is ComboBox comboBox)
                {
                    switch(comboBox.SelectedIndex)
                    {
                        case 0 : // Enabled

                            this.scrollViewer.ZoomMode = ZoomMode.Enabled;

                            this.zoomSlider.IsEnabled = true;

                            break;

                        case 1 : // Disabled
                        default : // Disabled

                            this.scrollViewer.ZoomMode = ZoomMode.Disabled;

                            this.scrollViewer.ChangeView(null, null, (float)1.0);

                            this.zoomSlider.Value     = 1;
                            this.zoomSlider.IsEnabled = false;

                            break;
                    }
                }
            }
        }

        #endregion
        #region 확대/축소 슬라이더 값 변경시 처리하기 - zoomSlider_ValueChanged(sender, e)

        /// <summary>
        /// 확대/축소 슬라이더 값 변경시 처리하기
        /// </summary>
        /// <param name="sender">이벤트 발생자</param>
        /// <param name="e">이벤트 인자</param>
        private void zoomSlider_ValueChanged(object sender, RangeBaseValueChangedEventArgs e)
        {
            if(this.scrollViewer != null)
            {
                this.scrollViewer.ChangeView(null, null, (float)e.NewValue);
            }
        }

        #endregion
        #region 수평 스크롤 모드 콤보 박스 선택 변경시 처리하기 - horizontalScrollModeComboBox_SelectionChanged(sender, e)

        /// <summary>
        /// 수평 스크롤 모드 콤보 박스 선택 변경시 처리하기
        /// </summary>
        /// <param name="sender">이벤트 발생자</param>
        /// <param name="e">이벤트 인자</param>
        private void horizontalScrollModeComboBox_SelectionChanged(object sender, SelectionChangedEventArgs e)
        {
            if(this.scrollViewer != null)
            {
                if(sender is ComboBox comboBox)
                {
                    switch(comboBox.SelectedIndex)
                    {
                        case 0  : this.scrollViewer.HorizontalScrollMode = ScrollMode.Auto;     break;
                        case 1  : this.scrollViewer.HorizontalScrollMode = ScrollMode.Enabled;  break;
                        case 2  : this.scrollViewer.HorizontalScrollMode = ScrollMode.Disabled; break;
                        default : this.scrollViewer.HorizontalScrollMode = ScrollMode.Enabled;  break;
                    }
                }
            }
        }

        #endregion
        #region 수직 스크롤 모드 콤보 박스 선택 변경시 처리하기 - verticalScrollModeComboBox_SelectionChanged(sender, e)

        /// <summary>
        /// 수직 스크롤 모드 콤보 박스 선택 변경시 처리하기
        /// </summary>
        /// <param name="sender">이벤트 발생자</param>
        /// <param name="e"></param>
        private void verticalScrollModeComboBox_SelectionChanged(object sender, SelectionChangedEventArgs e)
        {
            if(this.scrollViewer != null)
            {
                if(sender is ComboBox comboBox)
                {
                    switch(comboBox.SelectedIndex)
                    {
                        case 0  : this.scrollViewer.VerticalScrollMode = ScrollMode.Auto;     break;
                        case 1  : this.scrollViewer.VerticalScrollMode = ScrollMode.Enabled;  break;
                        case 2  : this.scrollViewer.VerticalScrollMode = ScrollMode.Disabled; break;
                        default : this.scrollViewer.VerticalScrollMode = ScrollMode.Enabled;  break;
                    }
                }
            }
        }

        #endregion
        #region 수평 스크롤바 표시 콤보 박스 선택 변경시 처리하기 - horizontalScrollBarVisibilityComboBox_SelectionChanged(sender, e)

        /// <summary>
        /// 수평 스크롤바 표시 콤보 박스 선택 변경시 처리하기
        /// </summary>
        /// <param name="sender">이벤트 발생자</param>
        /// <param name="e">이벤트 인자</param>
        private void horizontalScrollBarVisibilityComboBox_SelectionChanged(object sender, SelectionChangedEventArgs e)
        {
            if(this.scrollViewer != null)
            {
                if(sender is ComboBox comboBox)
                {
                    switch(comboBox.SelectedIndex)
                    {
                        case 0  : this.scrollViewer.HorizontalScrollBarVisibility = ScrollBarVisibility.Auto;     break;
                        case 1  : this.scrollViewer.HorizontalScrollBarVisibility = ScrollBarVisibility.Visible;  break;
                        case 2  : this.scrollViewer.HorizontalScrollBarVisibility = ScrollBarVisibility.Hidden;   break;
                        case 3  : this.scrollViewer.HorizontalScrollBarVisibility = ScrollBarVisibility.Disabled; break;
                        default : this.scrollViewer.HorizontalScrollBarVisibility = ScrollBarVisibility.Disabled; break;
                    }
                }
            }
        }

        #endregion
        #region 수직 스크롤바 표시 콤보 박스 선택 변경시 처리하기 - verticalScrollBarVisibilityComboBox_SelectionChanged(sender, e)

        /// <summary>
        /// 수직 스크롤바 표시 콤보 박스 선택 변경시 처리하기
        /// </summary>
        /// <param name="sender">이벤트 발생자</param>
        /// <param name="e">이벤트 인자</param>
        private void verticalScrollBarVisibilityComboBox_SelectionChanged(object sender, SelectionChangedEventArgs e)
        {
            if(this.scrollViewer != null)
            {
                if(sender is ComboBox comboBox)
                {
                    switch(comboBox.SelectedIndex)
                    {
                        case 0  : this.scrollViewer.VerticalScrollBarVisibility = ScrollBarVisibility.Auto;     break;
                        case 1  : this.scrollViewer.VerticalScrollBarVisibility = ScrollBarVisibility.Visible;  break;
                        case 2  : this.scrollViewer.VerticalScrollBarVisibility = ScrollBarVisibility.Hidden;   break;
                        case 3  : this.scrollViewer.VerticalScrollBarVisibility = ScrollBarVisibility.Disabled; break;
                        default : this.scrollViewer.VerticalScrollBarVisibility = ScrollBarVisibility.Visible;  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

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

using Windows.Foundation;

using Windows.Graphics.Display;

using Windows.UI.ViewManagement;

using Windows.UI.Xaml;

using Windows.UI.Xaml.Controls;

using Windows.UI.Xaml.Controls.Primitives;

using Windows.UI.Xaml.Input;

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

#endregion

}

#endregion

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

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

#region 스크롤 뷰어 조작 완료시 처리하기 - scrollViewer_ManipulationCompleted(sender, e)

/// <summary>

/// 스크롤 뷰어 조작 완료시 처리하기

/// </summary>

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

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

private void scrollViewer_ManipulationCompleted(object sender, ManipulationCompletedRoutedEventArgs e)

{

this.zoomSlider.Value = this.scrollViewer.ZoomFactor;

}

#endregion

#region 확대/축소 모드 콤보 박스 선택 변경시 처리하기 - zoomModeComboBox_SelectionChanged(sender, e)

/// <summary>

/// 확대/축소 모드 콤보 박스 선택 변경시 처리하기

/// </summary>

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

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

private void zoomModeComboBox_SelectionChanged(object sender, SelectionChangedEventArgs e)

{

if(this.scrollViewer != null && this.zoomSlider != null)

{

if(sender is ComboBox comboBox)

{

switch(comboBox.SelectedIndex)

{

case 0 : // Enabled

this.scrollViewer.ZoomMode = ZoomMode.Enabled;

this.zoomSlider.IsEnabled = true;

break;

case 1 : // Disabled

default : // Disabled

this.scrollViewer.ZoomMode = ZoomMode.Disabled;

this.scrollViewer.ChangeView(null, null, (float)1.0);

this.zoomSlider.Value = 1;

this.zoomSlider.IsEnabled = false;

break;

}

#endregion

#region 확대/축소 슬라이더 값 변경시 처리하기 - zoomSlider_ValueChanged(sender, e)

/// <summary>

/// 확대/축소 슬라이더 값 변경시 처리하기

/// </summary>

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

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

private void zoomSlider_ValueChanged(object sender, RangeBaseValueChangedEventArgs e)

{

if(this.scrollViewer != null)

{

this.scrollViewer.ChangeView(null, null, (float)e.NewValue);

}

#endregion

#region 수평 스크롤 모드 콤보 박스 선택 변경시 처리하기 - horizontalScrollModeComboBox_SelectionChanged(sender, e)

/// <summary>

/// 수평 스크롤 모드 콤보 박스 선택 변경시 처리하기

/// </summary>

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

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

private void horizontalScrollModeComboBox_SelectionChanged(object sender, SelectionChangedEventArgs e)

{

if(this.scrollViewer != null)

{

if(sender is ComboBox comboBox)

{

switch(comboBox.SelectedIndex)

{

case 0 : this.scrollViewer.HorizontalScrollMode = ScrollMode.Auto; break;

case 1 : this.scrollViewer.HorizontalScrollMode = ScrollMode.Enabled; break;

case 2 : this.scrollViewer.HorizontalScrollMode = ScrollMode.Disabled; break;

default : this.scrollViewer.HorizontalScrollMode = ScrollMode.Enabled; break;

}

#endregion

#region 수직 스크롤 모드 콤보 박스 선택 변경시 처리하기 - verticalScrollModeComboBox_SelectionChanged(sender, e)

/// <summary>

/// 수직 스크롤 모드 콤보 박스 선택 변경시 처리하기

/// </summary>

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

/// <param name="e"></param>

private void verticalScrollModeComboBox_SelectionChanged(object sender, SelectionChangedEventArgs e)

{

if(this.scrollViewer != null)

{

if(sender is ComboBox comboBox)

{

switch(comboBox.SelectedIndex)

{

case 0 : this.scrollViewer.VerticalScrollMode = ScrollMode.Auto; break;

case 1 : this.scrollViewer.VerticalScrollMode = ScrollMode.Enabled; break;

case 2 : this.scrollViewer.VerticalScrollMode = ScrollMode.Disabled; break;

default : this.scrollViewer.VerticalScrollMode = ScrollMode.Enabled; break;

}

#endregion

#region 수평 스크롤바 표시 콤보 박스 선택 변경시 처리하기 - horizontalScrollBarVisibilityComboBox_SelectionChanged(sender, e)

/// <summary>

/// 수평 스크롤바 표시 콤보 박스 선택 변경시 처리하기

/// </summary>

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

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

private void horizontalScrollBarVisibilityComboBox_SelectionChanged(object sender, SelectionChangedEventArgs e)

{

if(this.scrollViewer != null)

{

if(sender is ComboBox comboBox)

{

switch(comboBox.SelectedIndex)

{

case 0 : this.scrollViewer.HorizontalScrollBarVisibility = ScrollBarVisibility.Auto; break;

case 1 : this.scrollViewer.HorizontalScrollBarVisibility = ScrollBarVisibility.Visible; break;

case 2 : this.scrollViewer.HorizontalScrollBarVisibility = ScrollBarVisibility.Hidden; break;

case 3 : this.scrollViewer.HorizontalScrollBarVisibility = ScrollBarVisibility.Disabled; break;

default : this.scrollViewer.HorizontalScrollBarVisibility = ScrollBarVisibility.Disabled; break;

}

#endregion

#region 수직 스크롤바 표시 콤보 박스 선택 변경시 처리하기 - verticalScrollBarVisibilityComboBox_SelectionChanged(sender, e)

/// <summary>

/// 수직 스크롤바 표시 콤보 박스 선택 변경시 처리하기

/// </summary>

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

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

private void verticalScrollBarVisibilityComboBox_SelectionChanged(object sender, SelectionChangedEventArgs e)

{

if(this.scrollViewer != null)

{

if(sender is ComboBox comboBox)

{

switch(comboBox.SelectedIndex)

{

case 0 : this.scrollViewer.VerticalScrollBarVisibility = ScrollBarVisibility.Auto; break;

case 1 : this.scrollViewer.VerticalScrollBarVisibility = ScrollBarVisibility.Visible; break;

case 2 : this.scrollViewer.VerticalScrollBarVisibility = ScrollBarVisibility.Hidden; break;

case 3 : this.scrollViewer.VerticalScrollBarVisibility = ScrollBarVisibility.Disabled; break;

default : this.scrollViewer.VerticalScrollBarVisibility = ScrollBarVisibility.Visible; break;

}

#endregion

}

TestProject.zip

[C#/WINUI2.5] ApplicationViewSwitcher 클래스 : TryShowAsStandaloneAsync 정적 메소드를 사용해 신규 윈도우 표시하기

■ ApplicationViewSwitcher 클래스의 TryShowAsStandaloneAsync 정적 메소드를 사용해 신규 윈도우를 표시하는 방법을 보여준다. ▶ SamplePage.xaml


<Page x:Class="TestProject.SamplePage"
    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>
        <muxc:TabView
            TabWidthMode="SizeToContent"
            IsAddTabButtonVisible="False"
            SelectedIndex="0">
            <muxc:TabView.TabItems>
                <muxc:TabViewItem Header="CMD 프롬프트"
                    IsClosable="False">
                    <muxc:TabViewItem.IconSource>
                        <muxc:BitmapIconSource
                            ShowAsMonochrome="False"
                            UriSource="/IMAGE/cmd.png" />
                    </muxc:TabViewItem.IconSource>
                </muxc:TabViewItem>
                <muxc:TabViewItem Header="파워셸"
                    IsClosable="False">
                    <muxc:TabViewItem.IconSource>
                        <muxc:BitmapIconSource
                            ShowAsMonochrome="False"
                            UriSource="/IMAGE/powershell.png" />
                    </muxc:TabViewItem.IconSource>
                </muxc:TabViewItem>
                <muxc:TabViewItem Header="리눅스용 윈도우즈 하위 시스템"
                    IsClosable="False">
                    <muxc:TabViewItem.IconSource>
                        <muxc:BitmapIconSource
                            ShowAsMonochrome="False"
                            UriSource="/IMAGE/linux.png" />
                    </muxc:TabViewItem.IconSource>
                </muxc:TabViewItem>
            </muxc:TabView.TabItems>
        </muxc:TabView>
    </Grid>
</Page>

<Page x:Class="TestProject.SamplePage"

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>

<muxc:TabView

TabWidthMode="SizeToContent"

IsAddTabButtonVisible="False"

SelectedIndex="0">

<muxc:TabView.TabItems>

<muxc:TabViewItem Header="CMD 프롬프트"

IsClosable="False">

<muxc:TabViewItem.IconSource>

<muxc:BitmapIconSource

ShowAsMonochrome="False"

UriSource="/IMAGE/cmd.png" />

</muxc:TabViewItem.IconSource>

</muxc:TabViewItem>

<muxc:TabViewItem Header="파워셸"

IsClosable="False">

<muxc:TabViewItem.IconSource>

<muxc:BitmapIconSource

ShowAsMonochrome="False"

UriSource="/IMAGE/powershell.png" />

</muxc:TabViewItem.IconSource>

</muxc:TabViewItem>

<muxc:TabViewItem Header="리눅스용 윈도우즈 하위 시스템"

IsClosable="False">

<muxc:TabViewItem.IconSource>

<muxc:BitmapIconSource

ShowAsMonochrome="False"

UriSource="/IMAGE/linux.png" />

</muxc:TabViewItem.IconSource>

</muxc:TabViewItem>

</muxc:TabView.TabItems>

</muxc:TabView>

</Grid>

</Page>

▶ SamplePage.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 SamplePage : Page
    {
        //////////////////////////////////////////////////////////////////////////////////////////////////// Constructor
        ////////////////////////////////////////////////////////////////////////////////////////// Public

        #region 생성자 - SamplePage()

        /// <summary>
        /// 생성자
        /// </summary>
        public SamplePage()
        {
            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 = "샘플 페이지";

            #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 SamplePage : Page

{

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

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

#region 생성자 - SamplePage()

/// <summary>

/// 생성자

/// </summary>

public SamplePage()

{

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 = "샘플 페이지";

#endregion

}

#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>
        <Button
            HorizontalAlignment="Center"
            VerticalAlignment="Center"
            Width="150"
            Height="30"
            Content="신규 윈도우 표시"
            Click="showNewWindowButton_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>

<Button

HorizontalAlignment="Center"

VerticalAlignment="Center"

Width="150"

Height="30"

Content="신규 윈도우 표시"

Click="showNewWindowButton_Click" />

</Grid>

</Page>

▶

[C#/WINUI2.5] TabView 엘리먼트 : 강조 색상 탭 스트립 배경 사용하기

■ TabView 엘리먼트에서 강조 색상 탭 스트립 배경을 사용하는 방법을 보여준다. ▶ SamplePage1.xaml


<Page x:Class="TestProject.SamplePage1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <ScrollViewer>
        <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
            <Grid.Resources>
                <x:Double x:Key="TileHeightKey">150</x:Double>
            </Grid.Resources>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto" />
                <ColumnDefinition Width="*"    />
                <ColumnDefinition Width="*"    />
            </Grid.ColumnDefinitions>
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto" />
                <RowDefinition Height="Auto" />
                <RowDefinition Height="Auto" />
                <RowDefinition Height="*"    />
            </Grid.RowDefinitions>
            <Grid Grid.Row="1" Grid.Column="1" Margin="5" MinHeight="{StaticResource TileHeightKey}" Background="DarkGray"  />
            <Grid Grid.Row="1" Grid.Column="2" Margin="5" MinHeight="{StaticResource TileHeightKey}" Background="LightGray" />
            <Grid Grid.Row="2" Grid.Column="1" Margin="5" MinHeight="{StaticResource TileHeightKey}" Background="LightGray" />
            <Grid Grid.Row="2" Grid.Column="2" Margin="5" MinHeight="{StaticResource TileHeightKey}" Background="DarkGray"  />
            <Grid Name="sourceGrid" Grid.Row="1" Grid.Column="0" Grid.RowSpan="2"
                Margin="5"
                MinWidth="250"
                MinHeight="{StaticResource TileHeightKey}"
                Background="{ThemeResource SystemAccentColor}" />
            <Grid Grid.Row="3" Grid.ColumnSpan="3"
                Margin="5 10">
                <TextBlock
                    TextWrapping="WrapWholeWords"
                    Style="{ThemeResource BodyTextBlockStyle}">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                </TextBlock>
            </Grid>
        </Grid>
    </ScrollViewer>
</Page>

<Page x:Class="TestProject.SamplePage1"

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

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

<Grid.Resources>

<x:Double x:Key="TileHeightKey">150</x:Double>

</Grid.Resources>

<Grid.ColumnDefinitions>

</Grid.ColumnDefinitions>

<Grid.RowDefinitions>

</Grid.RowDefinitions>

<Grid Name="sourceGrid" Grid.Row="1" Grid.Column="0" Grid.RowSpan="2"

Margin="5"

MinWidth="250"

MinHeight="{StaticResource TileHeightKey}"

Background="{ThemeResource SystemAccentColor}" />

<Grid Grid.Row="3" Grid.ColumnSpan="3"

Margin="5 10">

<TextBlock

TextWrapping="WrapWholeWords"

Style="{ThemeResource BodyTextBlockStyle}">

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

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

</TextBlock>

</Grid>

</ScrollViewer>

</Page>

▶ SamplePage1.xaml.cs


using Windows.Foundation.Metadata;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Media.Animation;
using Windows.UI.Xaml.Navigation;

namespace TestProject
{
    /// <summary>
    /// 샘플 페이지 1
    /// </summary>
    public sealed partial class SamplePage1 : Page
    {
        //////////////////////////////////////////////////////////////////////////////////////////////////// Constructor
        ////////////////////////////////////////////////////////////////////////////////////////// Public

        #region 생성자 - SamplePage1()

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

        #endregion

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

        #region 연결 애니메이션 준비하기 - PrepareConnectedAnimation(configuration)

        /// <summary>
        /// 연결 애니메이션 준비하기
        /// </summary>
        /// <param name="configuration">연결 애니메이션 구성</param>
        public void PrepareConnectedAnimation(ConnectedAnimationConfiguration configuration)
        {
            ConnectedAnimation animation = ConnectedAnimationService.GetForCurrentView().PrepareToAnimate("ForwardConnectedAnimation", this.sourceGrid);

            if(configuration != null && ApiInformation.IsApiContractPresent("Windows.Foundation.UniversalApiContract", 7))
            {
                animation.Configuration = configuration;
            }
        }

        #endregion

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

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

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

            ConnectedAnimation animation = ConnectedAnimationService.GetForCurrentView().GetAnimation("BackwardAnimation");

            if(animation != null)
            {
                animation.TryStart(this.sourceGrid);
            }
        }

        #endregion
    }
}

using Windows.Foundation.Metadata;

using Windows.UI.Xaml.Controls;

using Windows.UI.Xaml.Media.Animation;

using Windows.UI.Xaml.Navigation;

namespace TestProject

{

/// <summary>

/// 샘플 페이지 1

/// </summary>

public sealed partial class SamplePage1 : Page

{

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

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

#region 생성자 - SamplePage1()

/// <summary>

/// 생성자

/// </summary>

public SamplePage1()

{

InitializeComponent();

}

#endregion

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

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

#region 연결 애니메이션 준비하기 - PrepareConnectedAnimation(configuration)

/// <summary>

/// 연결 애니메이션 준비하기

/// </summary>

/// <param name="configuration">연결 애니메이션 구성</param>

public void PrepareConnectedAnimation(ConnectedAnimationConfiguration configuration)

{

ConnectedAnimation animation = ConnectedAnimationService.GetForCurrentView().PrepareToAnimate("ForwardConnectedAnimation", this.sourceGrid);

if(configuration != null && ApiInformation.IsApiContractPresent("Windows.Foundation.UniversalApiContract", 7))

{

animation.Configuration = configuration;

}

#endregion

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

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

/// <summary>

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

/// </summary>

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

protected override void OnNavigatedTo(NavigationEventArgs e)

{

base.OnNavigatedTo(e);

ConnectedAnimation animation = ConnectedAnimationService.GetForCurrentView().GetAnimation("BackwardAnimation");

if(animation != null)

{

animation.TryStart(this.sourceGrid);

}

#endregion

}

▶ SamplePage2.xaml


<Page x:Class="TestProject.SamplePage2"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <ScrollViewer>
        <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
            <Grid.Resources>
                <x:Double x:Key="TileHeightKey">150</x:Double>
            </Grid.Resources>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto" />
                <ColumnDefinition Width="*"    />
            </Grid.ColumnDefinitions>
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto" />
                <RowDefinition Height="Auto" />
            </Grid.RowDefinitions>
            <Grid Name="targetGrid" Grid.Row="1" Grid.Column="0"
                VerticalAlignment="Top"
                Margin="10"
                Width="150"
                MinHeight="{StaticResource TileHeightKey}"
                Height="200"
                Background="{ThemeResource SystemAccentColor}" />
            <StackPanel Name="contentStackPanel" Grid.Row="1" Grid.Column="1"
                Margin="10"
                MinHeight="200">
                <TextBlock
                    Style="{ThemeResource TitleTextBlockStyle}"
                    Margin="0 0 0 10"
                    TextWrapping="WrapWholeWords"
                    Text="Lorem ipsum dolor sit amet, consectetur adipiscing elit" />
                <TextBlock TextWrapping="WrapWholeWords">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                 </TextBlock>
            </StackPanel>
        </Grid>
    </ScrollViewer>
</Page>

<Page x:Class="TestProject.SamplePage2"

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

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

<Grid.Resources>

<x:Double x:Key="TileHeightKey">150</x:Double>

</Grid.Resources>

<Grid.ColumnDefinitions>

</Grid.ColumnDefinitions>

<Grid.RowDefinitions>

</Grid.RowDefinitions>

<Grid Name="targetGrid" Grid.Row="1" Grid.Column="0"

VerticalAlignment="Top"

Margin="10"

Width="150"

MinHeight="{StaticResource TileHeightKey}"

Height="200"

Background="{ThemeResource SystemAccentColor}" />

<StackPanel Name="contentStackPanel" Grid.Row="1" Grid.Column="1"

Margin="10"

MinHeight="200">

<TextBlock

Style="{ThemeResource TitleTextBlockStyle}"

Margin="0 0 0 10"

TextWrapping="WrapWholeWords"

Text="Lorem ipsum dolor sit amet, consectetur adipiscing elit" />

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

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

</TextBlock>

</StackPanel>

</Grid>

</ScrollViewer>

</Page>

▶ SamplePage2.xaml.cs

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

■ TabViewItem 엘리먼트의 IconSource 속성을 사용하는 방법을 보여준다. ▶ 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>
        <muxc:TabView
            TabWidthMode="SizeToContent"
            IsAddTabButtonVisible="False"
            SelectedIndex="0">
            <muxc:TabView.TabItems>
                <muxc:TabViewItem Header="CMD 프롬프트"
                    IsClosable="False">
                    <muxc:TabViewItem.IconSource>
                        <muxc:BitmapIconSource
                            ShowAsMonochrome="False"
                            UriSource="/IMAGE/cmd.png" />
                    </muxc:TabViewItem.IconSource>
                </muxc:TabViewItem>
                <muxc:TabViewItem Header="파워셸"
                    IsClosable="False">
                    <muxc:TabViewItem.IconSource>
                        <muxc:BitmapIconSource
                            ShowAsMonochrome="False"
                            UriSource="/IMAGE/powershell.png" />
                    </muxc:TabViewItem.IconSource>
                </muxc:TabViewItem>
                <muxc:TabViewItem Header="리눅스용 윈도우즈 하위 시스템"
                    IsClosable="False">
                    <muxc:TabViewItem.IconSource>
                        <muxc:BitmapIconSource
                            ShowAsMonochrome="False"
                            UriSource="/IMAGE/linux.png" />
                    </muxc:TabViewItem.IconSource>
                </muxc:TabViewItem>
            </muxc:TabView.TabItems>
        </muxc:TabView>
    </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>

<muxc:TabView

TabWidthMode="SizeToContent"

IsAddTabButtonVisible="False"

SelectedIndex="0">

<muxc:TabView.TabItems>

<muxc:TabViewItem Header="CMD 프롬프트"

IsClosable="False">

<muxc:TabViewItem.IconSource>

<muxc:BitmapIconSource

ShowAsMonochrome="False"

UriSource="/IMAGE/cmd.png" />

</muxc:TabViewItem.IconSource>

</muxc:TabViewItem>

<muxc:TabViewItem Header="파워셸"

IsClosable="False">

<muxc:TabViewItem.IconSource>

<muxc:BitmapIconSource

ShowAsMonochrome="False"

UriSource="/IMAGE/powershell.png" />

</muxc:TabViewItem.IconSource>

</muxc:TabViewItem>

<muxc:TabViewItem Header="리눅스용 윈도우즈 하위 시스템"

IsClosable="False">

<muxc:TabViewItem.IconSource>

<muxc:BitmapIconSource

ShowAsMonochrome="False"

UriSource="/IMAGE/linux.png" />

</muxc:TabViewItem.IconSource>

</muxc:TabViewItem>

</muxc:TabView.TabItems>

</muxc:TabView>

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

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

#endregion

}

#endregion

}

TestProject.zip

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

■ TabView 엘리먼트의 CloseButtonOverlayMode 속성을 사용하는 방법을 보여준다. ▶ SamplePage1.xaml


<Page x:Class="TestProject.SamplePage1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <ScrollViewer>
        <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
            <Grid.Resources>
                <x:Double x:Key="TileHeightKey">150</x:Double>
            </Grid.Resources>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto" />
                <ColumnDefinition Width="*"    />
                <ColumnDefinition Width="*"    />
            </Grid.ColumnDefinitions>
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto" />
                <RowDefinition Height="Auto" />
                <RowDefinition Height="Auto" />
                <RowDefinition Height="*"    />
            </Grid.RowDefinitions>
            <Grid Grid.Row="1" Grid.Column="1" Margin="5" MinHeight="{StaticResource TileHeightKey}" Background="DarkGray"  />
            <Grid Grid.Row="1" Grid.Column="2" Margin="5" MinHeight="{StaticResource TileHeightKey}" Background="LightGray" />
            <Grid Grid.Row="2" Grid.Column="1" Margin="5" MinHeight="{StaticResource TileHeightKey}" Background="LightGray" />
            <Grid Grid.Row="2" Grid.Column="2" Margin="5" MinHeight="{StaticResource TileHeightKey}" Background="DarkGray"  />
            <Grid Name="sourceGrid" Grid.Row="1" Grid.Column="0" Grid.RowSpan="2"
                Margin="5"
                MinWidth="250"
                MinHeight="{StaticResource TileHeightKey}"
                Background="{ThemeResource SystemAccentColor}" />
            <Grid Grid.Row="3" Grid.ColumnSpan="3"
                Margin="5 10">
                <TextBlock
                    TextWrapping="WrapWholeWords"
                    Style="{ThemeResource BodyTextBlockStyle}">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                </TextBlock>
            </Grid>
        </Grid>
    </ScrollViewer>
</Page>

<Page x:Class="TestProject.SamplePage1"

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

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

<Grid.Resources>

<x:Double x:Key="TileHeightKey">150</x:Double>

</Grid.Resources>

<Grid.ColumnDefinitions>

</Grid.ColumnDefinitions>

<Grid.RowDefinitions>

</Grid.RowDefinitions>

<Grid Name="sourceGrid" Grid.Row="1" Grid.Column="0" Grid.RowSpan="2"

Margin="5"

MinWidth="250"

MinHeight="{StaticResource TileHeightKey}"

Background="{ThemeResource SystemAccentColor}" />

<Grid Grid.Row="3" Grid.ColumnSpan="3"

Margin="5 10">

<TextBlock

TextWrapping="WrapWholeWords"

Style="{ThemeResource BodyTextBlockStyle}">

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

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

</TextBlock>

</Grid>

</ScrollViewer>

</Page>

▶ SamplePage1.xaml.cs


using Windows.Foundation.Metadata;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Media.Animation;
using Windows.UI.Xaml.Navigation;

namespace TestProject
{
    /// <summary>
    /// 샘플 페이지 1
    /// </summary>
    public sealed partial class SamplePage1 : Page
    {
        //////////////////////////////////////////////////////////////////////////////////////////////////// Constructor
        ////////////////////////////////////////////////////////////////////////////////////////// Public

        #region 생성자 - SamplePage1()

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

        #endregion

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

        #region 연결 애니메이션 준비하기 - PrepareConnectedAnimation(configuration)

        /// <summary>
        /// 연결 애니메이션 준비하기
        /// </summary>
        /// <param name="configuration">연결 애니메이션 구성</param>
        public void PrepareConnectedAnimation(ConnectedAnimationConfiguration configuration)
        {
            ConnectedAnimation animation = ConnectedAnimationService.GetForCurrentView().PrepareToAnimate("ForwardConnectedAnimation", this.sourceGrid);

            if(configuration != null && ApiInformation.IsApiContractPresent("Windows.Foundation.UniversalApiContract", 7))
            {
                animation.Configuration = configuration;
            }
        }

        #endregion

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

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

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

            ConnectedAnimation animation = ConnectedAnimationService.GetForCurrentView().GetAnimation("BackwardAnimation");

            if(animation != null)
            {
                animation.TryStart(this.sourceGrid);
            }
        }

        #endregion
    }
}

using Windows.Foundation.Metadata;

using Windows.UI.Xaml.Controls;

using Windows.UI.Xaml.Media.Animation;

using Windows.UI.Xaml.Navigation;

namespace TestProject

{

/// <summary>

/// 샘플 페이지 1

/// </summary>

public sealed partial class SamplePage1 : Page

{

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

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

#region 생성자 - SamplePage1()

/// <summary>

/// 생성자

/// </summary>

public SamplePage1()

{

InitializeComponent();

}

#endregion

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

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

#region 연결 애니메이션 준비하기 - PrepareConnectedAnimation(configuration)

/// <summary>

/// 연결 애니메이션 준비하기

/// </summary>

/// <param name="configuration">연결 애니메이션 구성</param>

public void PrepareConnectedAnimation(ConnectedAnimationConfiguration configuration)

{

ConnectedAnimation animation = ConnectedAnimationService.GetForCurrentView().PrepareToAnimate("ForwardConnectedAnimation", this.sourceGrid);

if(configuration != null && ApiInformation.IsApiContractPresent("Windows.Foundation.UniversalApiContract", 7))

{

animation.Configuration = configuration;

}

#endregion

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

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

/// <summary>

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

/// </summary>

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

protected override void OnNavigatedTo(NavigationEventArgs e)

{

base.OnNavigatedTo(e);

ConnectedAnimation animation = ConnectedAnimationService.GetForCurrentView().GetAnimation("BackwardAnimation");

if(animation != null)

{

animation.TryStart(this.sourceGrid);

}

#endregion

}

▶ SamplePage2.xaml


<Page x:Class="TestProject.SamplePage2"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <ScrollViewer>
        <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
            <Grid.Resources>
                <x:Double x:Key="TileHeightKey">150</x:Double>
            </Grid.Resources>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto" />
                <ColumnDefinition Width="*"    />
            </Grid.ColumnDefinitions>
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto" />
                <RowDefinition Height="Auto" />
            </Grid.RowDefinitions>
            <Grid Name="targetGrid" Grid.Row="1" Grid.Column="0"
                VerticalAlignment="Top"
                Margin="10"
                Width="150"
                MinHeight="{StaticResource TileHeightKey}"
                Height="200"
                Background="{ThemeResource SystemAccentColor}" />
            <StackPanel Name="contentStackPanel" Grid.Row="1" Grid.Column="1"
                Margin="10"
                MinHeight="200">
                <TextBlock
                    Style="{ThemeResource TitleTextBlockStyle}"
                    Margin="0 0 0 10"
                    TextWrapping="WrapWholeWords"
                    Text="Lorem ipsum dolor sit amet, consectetur adipiscing elit" />
                <TextBlock TextWrapping="WrapWholeWords">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                 </TextBlock>
            </StackPanel>
        </Grid>
    </ScrollViewer>
</Page>

<Page x:Class="TestProject.SamplePage2"

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

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

<Grid.Resources>

<x:Double x:Key="TileHeightKey">150</x:Double>

</Grid.Resources>

<Grid.ColumnDefinitions>

</Grid.ColumnDefinitions>

<Grid.RowDefinitions>

</Grid.RowDefinitions>

<Grid Name="targetGrid" Grid.Row="1" Grid.Column="0"

VerticalAlignment="Top"

Margin="10"

Width="150"

MinHeight="{StaticResource TileHeightKey}"

Height="200"

Background="{ThemeResource SystemAccentColor}" />

<StackPanel Name="contentStackPanel" Grid.Row="1" Grid.Column="1"

Margin="10"

MinHeight="200">

<TextBlock

Style="{ThemeResource TitleTextBlockStyle}"

Margin="0 0 0 10"

TextWrapping="WrapWholeWords"

Text="Lorem ipsum dolor sit amet, consectetur adipiscing elit" />

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

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

</TextBlock>

</StackPanel>

</Grid>

</ScrollViewer>

</Page>

▶ SamplePage2.xaml.cs


using Windows.Foundation.Metadata;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Media.Animation;
using Windows.UI.Xaml.Navigation;

namespace TestProject
{
    /// <summary>
    /// 샘플 페이지 2
    /// </summary>
    public sealed partial class SamplePage2 : Page
    {
        //////////////////////////////////////////////////////////////////////////////////////////////////// Constructor
        ////////////////////////////////////////////////////////////////////////////////////////// Public

        #region 생성자 - SamplePage2()

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

        #endregion

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

        #region 연결 애니메이션 준비하기 - PrepareConnectedAnimation(configuration)

        /// <summary>
        /// 연결 애니메이션 준비하기
        /// </summary>
        /// <param name="configuration">연결 애니메이션 구성</param>
        public void PrepareConnectedAnimation(ConnectedAnimationConfiguration configuration)
        {
            ConnectedAnimation animation = ConnectedAnimationService.GetForCurrentView().PrepareToAnimate("BackwardAnimation", this.targetGrid);

            if(configuration != null && ApiInformation.IsApiContractPresent("Windows.Foundation.UniversalApiContract", 7))
            {
                animation.Configuration = configuration;
            }
        }

        #endregion

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

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

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

            ConnectedAnimation animation = ConnectedAnimationService.GetForCurrentView().GetAnimation("ForwardAnimation");

            if(animation != null)
            {
                SetContentStackPanelTransitionCollection();

                animation.TryStart(this.targetGrid);
            }
        }

        #endregion

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

        #region 컨텐트 스택 패널 전이 컬렉션 설정하기 - SetContentStackPanelTransitionCollection()

        /// <summary>
        /// 컨텐트 스택 패널 전이 컬렉션 설정하기
        /// </summary>
        private void SetContentStackPanelTransitionCollection()
        {
            this.contentStackPanel.Transitions = new TransitionCollection { new EntranceThemeTransition() };
        }

        #endregion
    }
}

using Windows.Foundation.Metadata;

using Windows.UI.Xaml.Controls;

using Windows.UI.Xaml.Media.Animation;

using Windows.UI.Xaml.Navigation;

namespace TestProject

{

/// <summary>

/// 샘플 페이지 2

/// </summary>

public sealed partial class SamplePage2 : Page

{

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

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

#region 생성자 - SamplePage2()

/// <summary>

/// 생성자

/// </summary>

public SamplePage2()

{

InitializeComponent();

}

#endregion

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

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

#region 연결 애니메이션 준비하기 - PrepareConnectedAnimation(configuration)

/// <summary>

/// 연결 애니메이션 준비하기

/// </summary>

/// <param name="configuration">연결 애니메이션 구성</param>

public void PrepareConnectedAnimation(ConnectedAnimationConfiguration configuration)

{

ConnectedAnimation animation = ConnectedAnimationService.GetForCurrentView().PrepareToAnimate("BackwardAnimation", this.targetGrid);

if(configuration != null && ApiInformation.IsApiContractPresent("Windows.Foundation.UniversalApiContract", 7))

{

animation.Configuration = configuration;

}

#endregion

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

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

/// <summary>

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

/// </summary>

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

protected override void OnNavigatedTo(NavigationEventArgs e)

{

base.OnNavigatedTo(e);

ConnectedAnimation animation = ConnectedAnimationService.GetForCurrentView().GetAnimation("ForwardAnimation");

if(animation != null)

{

SetContentStackPanelTransitionCollection();

animation.TryStart(this.targetGrid);

}

#endregion

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

#region 컨텐트 스택 패널 전이 컬렉션 설정하기 - SetContentStackPanelTransitionCollection()

/// <summary>

/// 컨텐트 스택 패널 전이 컬렉션 설정하기

/// </summary>

private void SetContentStackPanelTransitionCollection()

{

this.contentStackPanel.Transitions = new TransitionCollection { new EntranceThemeTransition() };

}

#endregion

}

▶ SamplePage3.xaml

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

■ TabView 엘리먼트의 TabWidthMode 속성을 사용하는 방법을 보여준다. ▶ SamplePage1.xaml


<Page x:Class="TestProject.SamplePage1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <ScrollViewer>
        <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
            <Grid.Resources>
                <x:Double x:Key="TileHeightKey">150</x:Double>
            </Grid.Resources>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto" />
                <ColumnDefinition Width="*"    />
                <ColumnDefinition Width="*"    />
            </Grid.ColumnDefinitions>
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto" />
                <RowDefinition Height="Auto" />
                <RowDefinition Height="Auto" />
                <RowDefinition Height="*"    />
            </Grid.RowDefinitions>
            <Grid Grid.Row="1" Grid.Column="1" Margin="5" MinHeight="{StaticResource TileHeightKey}" Background="DarkGray"  />
            <Grid Grid.Row="1" Grid.Column="2" Margin="5" MinHeight="{StaticResource TileHeightKey}" Background="LightGray" />
            <Grid Grid.Row="2" Grid.Column="1" Margin="5" MinHeight="{StaticResource TileHeightKey}" Background="LightGray" />
            <Grid Grid.Row="2" Grid.Column="2" Margin="5" MinHeight="{StaticResource TileHeightKey}" Background="DarkGray"  />
            <Grid Name="sourceGrid" Grid.Row="1" Grid.Column="0" Grid.RowSpan="2"
                Margin="5"
                MinWidth="250"
                MinHeight="{StaticResource TileHeightKey}"
                Background="{ThemeResource SystemAccentColor}" />
            <Grid Grid.Row="3" Grid.ColumnSpan="3"
                Margin="5 10">
                <TextBlock
                    TextWrapping="WrapWholeWords"
                    Style="{ThemeResource BodyTextBlockStyle}">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                </TextBlock>
            </Grid>
        </Grid>
    </ScrollViewer>
</Page>

<Page x:Class="TestProject.SamplePage1"

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

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

<Grid.Resources>

<x:Double x:Key="TileHeightKey">150</x:Double>

</Grid.Resources>

<Grid.ColumnDefinitions>

</Grid.ColumnDefinitions>

<Grid.RowDefinitions>

</Grid.RowDefinitions>

<Grid Name="sourceGrid" Grid.Row="1" Grid.Column="0" Grid.RowSpan="2"

Margin="5"

MinWidth="250"

MinHeight="{StaticResource TileHeightKey}"

Background="{ThemeResource SystemAccentColor}" />

<Grid Grid.Row="3" Grid.ColumnSpan="3"

Margin="5 10">

<TextBlock

TextWrapping="WrapWholeWords"

Style="{ThemeResource BodyTextBlockStyle}">

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

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

</TextBlock>

</Grid>

</ScrollViewer>

</Page>

▶ SamplePage1.xaml.cs


using Windows.Foundation.Metadata;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Media.Animation;
using Windows.UI.Xaml.Navigation;

namespace TestProject
{
    /// <summary>
    /// 샘플 페이지 1
    /// </summary>
    public sealed partial class SamplePage1 : Page
    {
        //////////////////////////////////////////////////////////////////////////////////////////////////// Constructor
        ////////////////////////////////////////////////////////////////////////////////////////// Public

        #region 생성자 - SamplePage1()

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

        #endregion

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

        #region 연결 애니메이션 준비하기 - PrepareConnectedAnimation(configuration)

        /// <summary>
        /// 연결 애니메이션 준비하기
        /// </summary>
        /// <param name="configuration">연결 애니메이션 구성</param>
        public void PrepareConnectedAnimation(ConnectedAnimationConfiguration configuration)
        {
            ConnectedAnimation animation = ConnectedAnimationService.GetForCurrentView().PrepareToAnimate("ForwardConnectedAnimation", this.sourceGrid);

            if(configuration != null && ApiInformation.IsApiContractPresent("Windows.Foundation.UniversalApiContract", 7))
            {
                animation.Configuration = configuration;
            }
        }

        #endregion

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

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

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

            ConnectedAnimation animation = ConnectedAnimationService.GetForCurrentView().GetAnimation("BackwardAnimation");

            if(animation != null)
            {
                animation.TryStart(this.sourceGrid);
            }
        }

        #endregion
    }
}

using Windows.Foundation.Metadata;

using Windows.UI.Xaml.Controls;

using Windows.UI.Xaml.Media.Animation;

using Windows.UI.Xaml.Navigation;

namespace TestProject

{

/// <summary>

/// 샘플 페이지 1

/// </summary>

public sealed partial class SamplePage1 : Page

{

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

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

#region 생성자 - SamplePage1()

/// <summary>

/// 생성자

/// </summary>

public SamplePage1()

{

InitializeComponent();

}

#endregion

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

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

#region 연결 애니메이션 준비하기 - PrepareConnectedAnimation(configuration)

/// <summary>

/// 연결 애니메이션 준비하기

/// </summary>

/// <param name="configuration">연결 애니메이션 구성</param>

public void PrepareConnectedAnimation(ConnectedAnimationConfiguration configuration)

{

ConnectedAnimation animation = ConnectedAnimationService.GetForCurrentView().PrepareToAnimate("ForwardConnectedAnimation", this.sourceGrid);

if(configuration != null && ApiInformation.IsApiContractPresent("Windows.Foundation.UniversalApiContract", 7))

{

animation.Configuration = configuration;

}

#endregion

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

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

/// <summary>

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

/// </summary>

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

protected override void OnNavigatedTo(NavigationEventArgs e)

{

base.OnNavigatedTo(e);

ConnectedAnimation animation = ConnectedAnimationService.GetForCurrentView().GetAnimation("BackwardAnimation");

if(animation != null)

{

animation.TryStart(this.sourceGrid);

}

#endregion

}

▶ SamplePage2.xaml


<Page x:Class="TestProject.SamplePage2"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <ScrollViewer>
        <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
            <Grid.Resources>
                <x:Double x:Key="TileHeightKey">150</x:Double>
            </Grid.Resources>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto" />
                <ColumnDefinition Width="*"    />
            </Grid.ColumnDefinitions>
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto" />
                <RowDefinition Height="Auto" />
            </Grid.RowDefinitions>
            <Grid Name="targetGrid" Grid.Row="1" Grid.Column="0"
                VerticalAlignment="Top"
                Margin="10"
                Width="150"
                MinHeight="{StaticResource TileHeightKey}"
                Height="200"
                Background="{ThemeResource SystemAccentColor}" />
            <StackPanel Name="contentStackPanel" Grid.Row="1" Grid.Column="1"
                Margin="10"
                MinHeight="200">
                <TextBlock
                    Style="{ThemeResource TitleTextBlockStyle}"
                    Margin="0 0 0 10"
                    TextWrapping="WrapWholeWords"
                    Text="Lorem ipsum dolor sit amet, consectetur adipiscing elit" />
                <TextBlock TextWrapping="WrapWholeWords">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                 </TextBlock>
            </StackPanel>
        </Grid>
    </ScrollViewer>
</Page>

<Page x:Class="TestProject.SamplePage2"

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

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

<Grid.Resources>

<x:Double x:Key="TileHeightKey">150</x:Double>

</Grid.Resources>

<Grid.ColumnDefinitions>

</Grid.ColumnDefinitions>

<Grid.RowDefinitions>

</Grid.RowDefinitions>

<Grid Name="targetGrid" Grid.Row="1" Grid.Column="0"

VerticalAlignment="Top"

Margin="10"

Width="150"

MinHeight="{StaticResource TileHeightKey}"

Height="200"

Background="{ThemeResource SystemAccentColor}" />

<StackPanel Name="contentStackPanel" Grid.Row="1" Grid.Column="1"

Margin="10"

MinHeight="200">

<TextBlock

Style="{ThemeResource TitleTextBlockStyle}"

Margin="0 0 0 10"

TextWrapping="WrapWholeWords"

Text="Lorem ipsum dolor sit amet, consectetur adipiscing elit" />

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

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

</TextBlock>

</StackPanel>

</Grid>

</ScrollViewer>

</Page>

▶ SamplePage2.xaml.cs


using Windows.Foundation.Metadata;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Media.Animation;
using Windows.UI.Xaml.Navigation;

namespace TestProject
{
    /// <summary>
    /// 샘플 페이지 2
    /// </summary>
    public sealed partial class SamplePage2 : Page
    {
        //////////////////////////////////////////////////////////////////////////////////////////////////// Constructor
        ////////////////////////////////////////////////////////////////////////////////////////// Public

        #region 생성자 - SamplePage2()

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

        #endregion

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

        #region 연결 애니메이션 준비하기 - PrepareConnectedAnimation(configuration)

        /// <summary>
        /// 연결 애니메이션 준비하기
        /// </summary>
        /// <param name="configuration">연결 애니메이션 구성</param>
        public void PrepareConnectedAnimation(ConnectedAnimationConfiguration configuration)
        {
            ConnectedAnimation animation = ConnectedAnimationService.GetForCurrentView().PrepareToAnimate("BackwardAnimation", this.targetGrid);

            if(configuration != null && ApiInformation.IsApiContractPresent("Windows.Foundation.UniversalApiContract", 7))
            {
                animation.Configuration = configuration;
            }
        }

        #endregion

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

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

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

            ConnectedAnimation animation = ConnectedAnimationService.GetForCurrentView().GetAnimation("ForwardAnimation");

            if(animation != null)
            {
                SetContentStackPanelTransitionCollection();

                animation.TryStart(this.targetGrid);
            }
        }

        #endregion

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

        #region 컨텐트 스택 패널 전이 컬렉션 설정하기 - SetContentStackPanelTransitionCollection()

        /// <summary>
        /// 컨텐트 스택 패널 전이 컬렉션 설정하기
        /// </summary>
        private void SetContentStackPanelTransitionCollection()
        {
            this.contentStackPanel.Transitions = new TransitionCollection { new EntranceThemeTransition() };
        }

        #endregion
    }
}

using Windows.Foundation.Metadata;

using Windows.UI.Xaml.Controls;

using Windows.UI.Xaml.Media.Animation;

using Windows.UI.Xaml.Navigation;

namespace TestProject

{

/// <summary>

/// 샘플 페이지 2

/// </summary>

public sealed partial class SamplePage2 : Page

{

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

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

#region 생성자 - SamplePage2()

/// <summary>

/// 생성자

/// </summary>

public SamplePage2()

{

InitializeComponent();

}

#endregion

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

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

#region 연결 애니메이션 준비하기 - PrepareConnectedAnimation(configuration)

/// <summary>

/// 연결 애니메이션 준비하기

/// </summary>

/// <param name="configuration">연결 애니메이션 구성</param>

public void PrepareConnectedAnimation(ConnectedAnimationConfiguration configuration)

{

ConnectedAnimation animation = ConnectedAnimationService.GetForCurrentView().PrepareToAnimate("BackwardAnimation", this.targetGrid);

if(configuration != null && ApiInformation.IsApiContractPresent("Windows.Foundation.UniversalApiContract", 7))

{

animation.Configuration = configuration;

}

#endregion

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

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

/// <summary>

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

/// </summary>

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

protected override void OnNavigatedTo(NavigationEventArgs e)

{

base.OnNavigatedTo(e);

ConnectedAnimation animation = ConnectedAnimationService.GetForCurrentView().GetAnimation("ForwardAnimation");

if(animation != null)

{

SetContentStackPanelTransitionCollection();

animation.TryStart(this.targetGrid);

}

#endregion

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

#region 컨텐트 스택 패널 전이 컬렉션 설정하기 - SetContentStackPanelTransitionCollection()

/// <summary>

/// 컨텐트 스택 패널 전이 컬렉션 설정하기

/// </summary>

private void SetContentStackPanelTransitionCollection()

{

this.contentStackPanel.Transitions = new TransitionCollection { new EntranceThemeTransition() };

}

#endregion

}

▶ SamplePage3.xaml

[C#/WINUI2.5] TabView 엘리먼트 : TabStripHeader/TabStripFooter 속성 사용하기

■ TabView 엘리먼트의 TabStripHeader/TabStripFooter 속성을 사용하는 방법을 보여준다. ▶ SamplePage1.xaml


<Page x:Class="TestProject.SamplePage1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <ScrollViewer>
        <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
            <Grid.Resources>
                <x:Double x:Key="TileHeightKey">150</x:Double>
            </Grid.Resources>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto" />
                <ColumnDefinition Width="*"    />
                <ColumnDefinition Width="*"    />
            </Grid.ColumnDefinitions>
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto" />
                <RowDefinition Height="Auto" />
                <RowDefinition Height="Auto" />
                <RowDefinition Height="*"    />
            </Grid.RowDefinitions>
            <Grid Grid.Row="1" Grid.Column="1" Margin="5" MinHeight="{StaticResource TileHeightKey}" Background="DarkGray"  />
            <Grid Grid.Row="1" Grid.Column="2" Margin="5" MinHeight="{StaticResource TileHeightKey}" Background="LightGray" />
            <Grid Grid.Row="2" Grid.Column="1" Margin="5" MinHeight="{StaticResource TileHeightKey}" Background="LightGray" />
            <Grid Grid.Row="2" Grid.Column="2" Margin="5" MinHeight="{StaticResource TileHeightKey}" Background="DarkGray"  />
            <Grid Name="sourceGrid" Grid.Row="1" Grid.Column="0" Grid.RowSpan="2"
                Margin="5"
                MinWidth="250"
                MinHeight="{StaticResource TileHeightKey}"
                Background="{ThemeResource SystemAccentColor}" />
            <Grid Grid.Row="3" Grid.ColumnSpan="3"
                Margin="5 10">
                <TextBlock
                    TextWrapping="WrapWholeWords"
                    Style="{ThemeResource BodyTextBlockStyle}">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                </TextBlock>
            </Grid>
        </Grid>
    </ScrollViewer>
</Page>

<Page x:Class="TestProject.SamplePage1"

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

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

<Grid.Resources>

<x:Double x:Key="TileHeightKey">150</x:Double>

</Grid.Resources>

<Grid.ColumnDefinitions>

</Grid.ColumnDefinitions>

<Grid.RowDefinitions>

</Grid.RowDefinitions>

<Grid Name="sourceGrid" Grid.Row="1" Grid.Column="0" Grid.RowSpan="2"

Margin="5"

MinWidth="250"

MinHeight="{StaticResource TileHeightKey}"

Background="{ThemeResource SystemAccentColor}" />

<Grid Grid.Row="3" Grid.ColumnSpan="3"

Margin="5 10">

<TextBlock

TextWrapping="WrapWholeWords"

Style="{ThemeResource BodyTextBlockStyle}">

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

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

</TextBlock>

</Grid>

</ScrollViewer>

</Page>

▶ SamplePage1.xaml.cs


using Windows.Foundation.Metadata;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Media.Animation;
using Windows.UI.Xaml.Navigation;

namespace TestProject
{
    /// <summary>
    /// 샘플 페이지 1
    /// </summary>
    public sealed partial class SamplePage1 : Page
    {
        //////////////////////////////////////////////////////////////////////////////////////////////////// Constructor
        ////////////////////////////////////////////////////////////////////////////////////////// Public

        #region 생성자 - SamplePage1()

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

        #endregion

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

        #region 연결 애니메이션 준비하기 - PrepareConnectedAnimation(configuration)

        /// <summary>
        /// 연결 애니메이션 준비하기
        /// </summary>
        /// <param name="configuration">연결 애니메이션 구성</param>
        public void PrepareConnectedAnimation(ConnectedAnimationConfiguration configuration)
        {
            ConnectedAnimation animation = ConnectedAnimationService.GetForCurrentView().PrepareToAnimate("ForwardConnectedAnimation", this.sourceGrid);

            if(configuration != null && ApiInformation.IsApiContractPresent("Windows.Foundation.UniversalApiContract", 7))
            {
                animation.Configuration = configuration;
            }
        }

        #endregion

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

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

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

            ConnectedAnimation animation = ConnectedAnimationService.GetForCurrentView().GetAnimation("BackwardAnimation");

            if(animation != null)
            {
                animation.TryStart(this.sourceGrid);
            }
        }

        #endregion
    }
}

using Windows.Foundation.Metadata;

using Windows.UI.Xaml.Controls;

using Windows.UI.Xaml.Media.Animation;

using Windows.UI.Xaml.Navigation;

namespace TestProject

{

/// <summary>

/// 샘플 페이지 1

/// </summary>

public sealed partial class SamplePage1 : Page

{

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

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

#region 생성자 - SamplePage1()

/// <summary>

/// 생성자

/// </summary>

public SamplePage1()

{

InitializeComponent();

}

#endregion

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

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

#region 연결 애니메이션 준비하기 - PrepareConnectedAnimation(configuration)

/// <summary>

/// 연결 애니메이션 준비하기

/// </summary>

/// <param name="configuration">연결 애니메이션 구성</param>

public void PrepareConnectedAnimation(ConnectedAnimationConfiguration configuration)

{

ConnectedAnimation animation = ConnectedAnimationService.GetForCurrentView().PrepareToAnimate("ForwardConnectedAnimation", this.sourceGrid);

if(configuration != null && ApiInformation.IsApiContractPresent("Windows.Foundation.UniversalApiContract", 7))

{

animation.Configuration = configuration;

}

#endregion

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

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

/// <summary>

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

/// </summary>

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

protected override void OnNavigatedTo(NavigationEventArgs e)

{

base.OnNavigatedTo(e);

ConnectedAnimation animation = ConnectedAnimationService.GetForCurrentView().GetAnimation("BackwardAnimation");

if(animation != null)

{

animation.TryStart(this.sourceGrid);

}

#endregion

}

▶ SamplePage2.xaml


<Page x:Class="TestProject.SamplePage2"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <ScrollViewer>
        <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
            <Grid.Resources>
                <x:Double x:Key="TileHeightKey">150</x:Double>
            </Grid.Resources>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto" />
                <ColumnDefinition Width="*"    />
            </Grid.ColumnDefinitions>
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto" />
                <RowDefinition Height="Auto" />
            </Grid.RowDefinitions>
            <Grid Name="targetGrid" Grid.Row="1" Grid.Column="0"
                VerticalAlignment="Top"
                Margin="10"
                Width="150"
                MinHeight="{StaticResource TileHeightKey}"
                Height="200"
                Background="{ThemeResource SystemAccentColor}" />
            <StackPanel Name="contentStackPanel" Grid.Row="1" Grid.Column="1"
                Margin="10"
                MinHeight="200">
                <TextBlock
                    Style="{ThemeResource TitleTextBlockStyle}"
                    Margin="0 0 0 10"
                    TextWrapping="WrapWholeWords"
                    Text="Lorem ipsum dolor sit amet, consectetur adipiscing elit" />
                <TextBlock TextWrapping="WrapWholeWords">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                 </TextBlock>
            </StackPanel>
        </Grid>
    </ScrollViewer>
</Page>

<Page x:Class="TestProject.SamplePage2"

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

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

<Grid.Resources>

<x:Double x:Key="TileHeightKey">150</x:Double>

</Grid.Resources>

<Grid.ColumnDefinitions>

</Grid.ColumnDefinitions>

<Grid.RowDefinitions>

</Grid.RowDefinitions>

<Grid Name="targetGrid" Grid.Row="1" Grid.Column="0"

VerticalAlignment="Top"

Margin="10"

Width="150"

MinHeight="{StaticResource TileHeightKey}"

Height="200"

Background="{ThemeResource SystemAccentColor}" />

<StackPanel Name="contentStackPanel" Grid.Row="1" Grid.Column="1"

Margin="10"

MinHeight="200">

<TextBlock

Style="{ThemeResource TitleTextBlockStyle}"

Margin="0 0 0 10"

TextWrapping="WrapWholeWords"

Text="Lorem ipsum dolor sit amet, consectetur adipiscing elit" />

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

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

</TextBlock>

</StackPanel>

</Grid>

</ScrollViewer>

</Page>

▶ SamplePage2.xaml.cs


using Windows.Foundation.Metadata;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Media.Animation;
using Windows.UI.Xaml.Navigation;

namespace TestProject
{
    /// <summary>
    /// 샘플 페이지 2
    /// </summary>
    public sealed partial class SamplePage2 : Page
    {
        //////////////////////////////////////////////////////////////////////////////////////////////////// Constructor
        ////////////////////////////////////////////////////////////////////////////////////////// Public

        #region 생성자 - SamplePage2()

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

        #endregion

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

        #region 연결 애니메이션 준비하기 - PrepareConnectedAnimation(configuration)

        /// <summary>
        /// 연결 애니메이션 준비하기
        /// </summary>
        /// <param name="configuration">연결 애니메이션 구성</param>
        public void PrepareConnectedAnimation(ConnectedAnimationConfiguration configuration)
        {
            ConnectedAnimation animation = ConnectedAnimationService.GetForCurrentView().PrepareToAnimate("BackwardAnimation", this.targetGrid);

            if(configuration != null && ApiInformation.IsApiContractPresent("Windows.Foundation.UniversalApiContract", 7))
            {
                animation.Configuration = configuration;
            }
        }

        #endregion

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

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

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

            ConnectedAnimation animation = ConnectedAnimationService.GetForCurrentView().GetAnimation("ForwardAnimation");

            if(animation != null)
            {
                SetContentStackPanelTransitionCollection();

                animation.TryStart(this.targetGrid);
            }
        }

        #endregion

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

        #region 컨텐트 스택 패널 전이 컬렉션 설정하기 - SetContentStackPanelTransitionCollection()

        /// <summary>
        /// 컨텐트 스택 패널 전이 컬렉션 설정하기
        /// </summary>
        private void SetContentStackPanelTransitionCollection()
        {
            this.contentStackPanel.Transitions = new TransitionCollection { new EntranceThemeTransition() };
        }

        #endregion
    }
}

using Windows.Foundation.Metadata;

using Windows.UI.Xaml.Controls;

using Windows.UI.Xaml.Media.Animation;

using Windows.UI.Xaml.Navigation;

namespace TestProject

{

/// <summary>

/// 샘플 페이지 2

/// </summary>

public sealed partial class SamplePage2 : Page

{

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

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

#region 생성자 - SamplePage2()

/// <summary>

/// 생성자

/// </summary>

public SamplePage2()

{

InitializeComponent();

}

#endregion

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

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

#region 연결 애니메이션 준비하기 - PrepareConnectedAnimation(configuration)

/// <summary>

/// 연결 애니메이션 준비하기

/// </summary>

/// <param name="configuration">연결 애니메이션 구성</param>

public void PrepareConnectedAnimation(ConnectedAnimationConfiguration configuration)

{

ConnectedAnimation animation = ConnectedAnimationService.GetForCurrentView().PrepareToAnimate("BackwardAnimation", this.targetGrid);

if(configuration != null && ApiInformation.IsApiContractPresent("Windows.Foundation.UniversalApiContract", 7))

{

animation.Configuration = configuration;

}

#endregion

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

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

/// <summary>

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

/// </summary>

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

protected override void OnNavigatedTo(NavigationEventArgs e)

{

base.OnNavigatedTo(e);

ConnectedAnimation animation = ConnectedAnimationService.GetForCurrentView().GetAnimation("ForwardAnimation");

if(animation != null)

{

SetContentStackPanelTransitionCollection();

animation.TryStart(this.targetGrid);

}

#endregion

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

#region 컨텐트 스택 패널 전이 컬렉션 설정하기 - SetContentStackPanelTransitionCollection()

/// <summary>

/// 컨텐트 스택 패널 전이 컬렉션 설정하기

/// </summary>

private void SetContentStackPanelTransitionCollection()

{

this.contentStackPanel.Transitions = new TransitionCollection { new EntranceThemeTransition() };

}

#endregion

}

▶ SamplePage3.xaml

[C#/WINUI2.5] TabView 엘리먼트 : KeyboardAccelerators 속성을 사용해 키보드 가속기 사용하기

■ TabView 엘리먼트의 KeyboardAccelerators 속성을 사용해 키보드 가속기를 사용하는 방법을 보여준다. ▶ SamplePage1.xaml


<Page x:Class="TestProject.SamplePage1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <ScrollViewer>
        <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
            <Grid.Resources>
                <x:Double x:Key="TileHeightKey">150</x:Double>
            </Grid.Resources>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto" />
                <ColumnDefinition Width="*"    />
                <ColumnDefinition Width="*"    />
            </Grid.ColumnDefinitions>
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto" />
                <RowDefinition Height="Auto" />
                <RowDefinition Height="Auto" />
                <RowDefinition Height="*"    />
            </Grid.RowDefinitions>
            <Grid Grid.Row="1" Grid.Column="1" Margin="5" MinHeight="{StaticResource TileHeightKey}" Background="DarkGray"  />
            <Grid Grid.Row="1" Grid.Column="2" Margin="5" MinHeight="{StaticResource TileHeightKey}" Background="LightGray" />
            <Grid Grid.Row="2" Grid.Column="1" Margin="5" MinHeight="{StaticResource TileHeightKey}" Background="LightGray" />
            <Grid Grid.Row="2" Grid.Column="2" Margin="5" MinHeight="{StaticResource TileHeightKey}" Background="DarkGray"  />
            <Grid Name="sourceGrid" Grid.Row="1" Grid.Column="0" Grid.RowSpan="2"
                Margin="5"
                MinWidth="250"
                MinHeight="{StaticResource TileHeightKey}"
                Background="{ThemeResource SystemAccentColor}" />
            <Grid Grid.Row="3" Grid.ColumnSpan="3"
                Margin="5 10">
                <TextBlock
                    TextWrapping="WrapWholeWords"
                    Style="{ThemeResource BodyTextBlockStyle}">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                </TextBlock>
            </Grid>
        </Grid>
    </ScrollViewer>
</Page>

<Page x:Class="TestProject.SamplePage1"

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

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

<Grid.Resources>

<x:Double x:Key="TileHeightKey">150</x:Double>

</Grid.Resources>

<Grid.ColumnDefinitions>

</Grid.ColumnDefinitions>

<Grid.RowDefinitions>

</Grid.RowDefinitions>

<Grid Name="sourceGrid" Grid.Row="1" Grid.Column="0" Grid.RowSpan="2"

Margin="5"

MinWidth="250"

MinHeight="{StaticResource TileHeightKey}"

Background="{ThemeResource SystemAccentColor}" />

<Grid Grid.Row="3" Grid.ColumnSpan="3"

Margin="5 10">

<TextBlock

TextWrapping="WrapWholeWords"

Style="{ThemeResource BodyTextBlockStyle}">

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

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

</TextBlock>

</Grid>

</ScrollViewer>

</Page>

▶ SamplePage1.xaml.cs


using Windows.Foundation.Metadata;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Media.Animation;
using Windows.UI.Xaml.Navigation;

namespace TestProject
{
    /// <summary>
    /// 샘플 페이지 1
    /// </summary>
    public sealed partial class SamplePage1 : Page
    {
        //////////////////////////////////////////////////////////////////////////////////////////////////// Constructor
        ////////////////////////////////////////////////////////////////////////////////////////// Public

        #region 생성자 - SamplePage1()

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

        #endregion

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

        #region 연결 애니메이션 준비하기 - PrepareConnectedAnimation(configuration)

        /// <summary>
        /// 연결 애니메이션 준비하기
        /// </summary>
        /// <param name="configuration">연결 애니메이션 구성</param>
        public void PrepareConnectedAnimation(ConnectedAnimationConfiguration configuration)
        {
            ConnectedAnimation animation = ConnectedAnimationService.GetForCurrentView().PrepareToAnimate("ForwardConnectedAnimation", this.sourceGrid);

            if(configuration != null && ApiInformation.IsApiContractPresent("Windows.Foundation.UniversalApiContract", 7))
            {
                animation.Configuration = configuration;
            }
        }

        #endregion

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

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

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

            ConnectedAnimation animation = ConnectedAnimationService.GetForCurrentView().GetAnimation("BackwardAnimation");

            if(animation != null)
            {
                animation.TryStart(this.sourceGrid);
            }
        }

        #endregion
    }
}

using Windows.Foundation.Metadata;

using Windows.UI.Xaml.Controls;

using Windows.UI.Xaml.Media.Animation;

using Windows.UI.Xaml.Navigation;

namespace TestProject

{

/// <summary>

/// 샘플 페이지 1

/// </summary>

public sealed partial class SamplePage1 : Page

{

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

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

#region 생성자 - SamplePage1()

/// <summary>

/// 생성자

/// </summary>

public SamplePage1()

{

InitializeComponent();

}

#endregion

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

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

#region 연결 애니메이션 준비하기 - PrepareConnectedAnimation(configuration)

/// <summary>

/// 연결 애니메이션 준비하기

/// </summary>

/// <param name="configuration">연결 애니메이션 구성</param>

public void PrepareConnectedAnimation(ConnectedAnimationConfiguration configuration)

{

ConnectedAnimation animation = ConnectedAnimationService.GetForCurrentView().PrepareToAnimate("ForwardConnectedAnimation", this.sourceGrid);

if(configuration != null && ApiInformation.IsApiContractPresent("Windows.Foundation.UniversalApiContract", 7))

{

animation.Configuration = configuration;

}

#endregion

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

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

/// <summary>

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

/// </summary>

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

protected override void OnNavigatedTo(NavigationEventArgs e)

{

base.OnNavigatedTo(e);

ConnectedAnimation animation = ConnectedAnimationService.GetForCurrentView().GetAnimation("BackwardAnimation");

if(animation != null)

{

animation.TryStart(this.sourceGrid);

}

#endregion

}

▶ SamplePage2.xaml


<Page x:Class="TestProject.SamplePage2"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <ScrollViewer>
        <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
            <Grid.Resources>
                <x:Double x:Key="TileHeightKey">150</x:Double>
            </Grid.Resources>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto" />
                <ColumnDefinition Width="*"    />
            </Grid.ColumnDefinitions>
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto" />
                <RowDefinition Height="Auto" />
            </Grid.RowDefinitions>
            <Grid Name="targetGrid" Grid.Row="1" Grid.Column="0"
                VerticalAlignment="Top"
                Margin="10"
                Width="150"
                MinHeight="{StaticResource TileHeightKey}"
                Height="200"
                Background="{ThemeResource SystemAccentColor}" />
            <StackPanel Name="contentStackPanel" Grid.Row="1" Grid.Column="1"
                Margin="10"
                MinHeight="200">
                <TextBlock
                    Style="{ThemeResource TitleTextBlockStyle}"
                    Margin="0 0 0 10"
                    TextWrapping="WrapWholeWords"
                    Text="Lorem ipsum dolor sit amet, consectetur adipiscing elit" />
                <TextBlock TextWrapping="WrapWholeWords">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                 </TextBlock>
            </StackPanel>
        </Grid>
    </ScrollViewer>
</Page>

<Page x:Class="TestProject.SamplePage2"

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

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

<Grid.Resources>

<x:Double x:Key="TileHeightKey">150</x:Double>

</Grid.Resources>

<Grid.ColumnDefinitions>

</Grid.ColumnDefinitions>

<Grid.RowDefinitions>

</Grid.RowDefinitions>

<Grid Name="targetGrid" Grid.Row="1" Grid.Column="0"

VerticalAlignment="Top"

Margin="10"

Width="150"

MinHeight="{StaticResource TileHeightKey}"

Height="200"

Background="{ThemeResource SystemAccentColor}" />

<StackPanel Name="contentStackPanel" Grid.Row="1" Grid.Column="1"

Margin="10"

MinHeight="200">

<TextBlock

Style="{ThemeResource TitleTextBlockStyle}"

Margin="0 0 0 10"

TextWrapping="WrapWholeWords"

Text="Lorem ipsum dolor sit amet, consectetur adipiscing elit" />

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

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

</TextBlock>

</StackPanel>

</Grid>

</ScrollViewer>

</Page>

▶ SamplePage2.xaml.cs

[C#/WINUI2.5] TabView 엘리먼트 : TabItemsSource 속성을 사용해 데이터 바인딩하기

■ TabView 엘리먼트의 TabItemsSource 속성을 사용해 데이터를 바인딩하는 방법을 보여준다. ▶ CustomItem.cs


using Microsoft.UI.Xaml.Controls;

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

        #region 데이터 헤더 - DataHeader

        /// <summary>
        /// 데이터 헤더
        /// </summary>
        public string DataHeader { get; set; }

        #endregion
        #region 데이터 아이콘 소스 - DataIconSource

        /// <summary>
        /// 데이터 아이콘 소스
        /// </summary>
        public IconSource DataIconSource { get; set; }

        #endregion
        #region 데이터 컨텐트 - DataContent

        /// <summary>
        /// 데이터 컨텐트
        /// </summary>
        public object DataContent { get; set; }

        #endregion
    }
}

using Microsoft.UI.Xaml.Controls;

namespace TestProject

{

/// <summary>

/// 커스텀 항목

/// </summary>

public class CustomItem

{

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

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

#region 데이터 헤더 - DataHeader

/// <summary>

/// 데이터 헤더

/// </summary>

public string DataHeader { get; set; }

#endregion

#region 데이터 아이콘 소스 - DataIconSource

/// <summary>

/// 데이터 아이콘 소스

/// </summary>

public IconSource DataIconSource { get; set; }

#endregion

#region 데이터 컨텐트 - DataContent

/// <summary>

/// 데이터 컨텐트

/// </summary>

public object DataContent { get; set; }

#endregion

}

▶ SamplePage1.xaml


<Page x:Class="TestProject.SamplePage1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <ScrollViewer>
        <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
            <Grid.Resources>
                <x:Double x:Key="TileHeightKey">150</x:Double>
            </Grid.Resources>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto" />
                <ColumnDefinition Width="*"    />
                <ColumnDefinition Width="*"    />
            </Grid.ColumnDefinitions>
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto" />
                <RowDefinition Height="Auto" />
                <RowDefinition Height="Auto" />
                <RowDefinition Height="*"    />
            </Grid.RowDefinitions>
            <Grid Grid.Row="1" Grid.Column="1" Margin="5" MinHeight="{StaticResource TileHeightKey}" Background="DarkGray"  />
            <Grid Grid.Row="1" Grid.Column="2" Margin="5" MinHeight="{StaticResource TileHeightKey}" Background="LightGray" />
            <Grid Grid.Row="2" Grid.Column="1" Margin="5" MinHeight="{StaticResource TileHeightKey}" Background="LightGray" />
            <Grid Grid.Row="2" Grid.Column="2" Margin="5" MinHeight="{StaticResource TileHeightKey}" Background="DarkGray"  />
            <Grid Name="sourceGrid" Grid.Row="1" Grid.Column="0" Grid.RowSpan="2"
                Margin="5"
                MinWidth="250"
                MinHeight="{StaticResource TileHeightKey}"
                Background="{ThemeResource SystemAccentColor}" />
            <Grid Grid.Row="3" Grid.ColumnSpan="3"
                Margin="5 10">
                <TextBlock
                    TextWrapping="WrapWholeWords"
                    Style="{ThemeResource BodyTextBlockStyle}">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                </TextBlock>
            </Grid>
        </Grid>
    </ScrollViewer>
</Page>

<Page x:Class="TestProject.SamplePage1"

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

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

<Grid.Resources>

<x:Double x:Key="TileHeightKey">150</x:Double>

</Grid.Resources>

<Grid.ColumnDefinitions>

</Grid.ColumnDefinitions>

<Grid.RowDefinitions>

</Grid.RowDefinitions>

<Grid Name="sourceGrid" Grid.Row="1" Grid.Column="0" Grid.RowSpan="2"

Margin="5"

MinWidth="250"

MinHeight="{StaticResource TileHeightKey}"

Background="{ThemeResource SystemAccentColor}" />

<Grid Grid.Row="3" Grid.ColumnSpan="3"

Margin="5 10">

<TextBlock

TextWrapping="WrapWholeWords"

Style="{ThemeResource BodyTextBlockStyle}">

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

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

</TextBlock>

</Grid>

</ScrollViewer>

</Page>

▶ SamplePage1.xaml.cs


using Windows.Foundation.Metadata;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Media.Animation;
using Windows.UI.Xaml.Navigation;

namespace TestProject
{
    /// <summary>
    /// 샘플 페이지 1
    /// </summary>
    public sealed partial class SamplePage1 : Page
    {
        //////////////////////////////////////////////////////////////////////////////////////////////////// Constructor
        ////////////////////////////////////////////////////////////////////////////////////////// Public

        #region 생성자 - SamplePage1()

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

        #endregion

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

        #region 연결 애니메이션 준비하기 - PrepareConnectedAnimation(configuration)

        /// <summary>
        /// 연결 애니메이션 준비하기
        /// </summary>
        /// <param name="configuration">연결 애니메이션 구성</param>
        public void PrepareConnectedAnimation(ConnectedAnimationConfiguration configuration)
        {
            ConnectedAnimation animation = ConnectedAnimationService.GetForCurrentView().PrepareToAnimate("ForwardConnectedAnimation", this.sourceGrid);

            if(configuration != null && ApiInformation.IsApiContractPresent("Windows.Foundation.UniversalApiContract", 7))
            {
                animation.Configuration = configuration;
            }
        }

        #endregion

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

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

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

            ConnectedAnimation animation = ConnectedAnimationService.GetForCurrentView().GetAnimation("BackwardAnimation");

            if(animation != null)
            {
                animation.TryStart(this.sourceGrid);
            }
        }

        #endregion
    }
}

using Windows.Foundation.Metadata;

using Windows.UI.Xaml.Controls;

using Windows.UI.Xaml.Media.Animation;

using Windows.UI.Xaml.Navigation;

namespace TestProject

{

/// <summary>

/// 샘플 페이지 1

/// </summary>

public sealed partial class SamplePage1 : Page

{

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

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

#region 생성자 - SamplePage1()

/// <summary>

/// 생성자

/// </summary>

public SamplePage1()

{

InitializeComponent();

}

#endregion

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

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

#region 연결 애니메이션 준비하기 - PrepareConnectedAnimation(configuration)

/// <summary>

/// 연결 애니메이션 준비하기

/// </summary>

/// <param name="configuration">연결 애니메이션 구성</param>

public void PrepareConnectedAnimation(ConnectedAnimationConfiguration configuration)

{

ConnectedAnimation animation = ConnectedAnimationService.GetForCurrentView().PrepareToAnimate("ForwardConnectedAnimation", this.sourceGrid);

if(configuration != null && ApiInformation.IsApiContractPresent("Windows.Foundation.UniversalApiContract", 7))

{

animation.Configuration = configuration;

}

#endregion

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

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

/// <summary>

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

/// </summary>

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

protected override void OnNavigatedTo(NavigationEventArgs e)

{

base.OnNavigatedTo(e);

ConnectedAnimation animation = ConnectedAnimationService.GetForCurrentView().GetAnimation("BackwardAnimation");

if(animation != null)

{

animation.TryStart(this.sourceGrid);

}

#endregion

}

▶ SamplePage2.xaml


<Page x:Class="TestProject.SamplePage2"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <ScrollViewer>
        <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
            <Grid.Resources>
                <x:Double x:Key="TileHeightKey">150</x:Double>
            </Grid.Resources>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto" />
                <ColumnDefinition Width="*"    />
            </Grid.ColumnDefinitions>
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto" />
                <RowDefinition Height="Auto" />
            </Grid.RowDefinitions>
            <Grid Name="targetGrid" Grid.Row="1" Grid.Column="0"
                VerticalAlignment="Top"
                Margin="10"
                Width="150"
                MinHeight="{StaticResource TileHeightKey}"
                Height="200"
                Background="{ThemeResource SystemAccentColor}" />
            <StackPanel Name="contentStackPanel" Grid.Row="1" Grid.Column="1"
                Margin="10"
                MinHeight="200">
                <TextBlock
                    Style="{ThemeResource TitleTextBlockStyle}"
                    Margin="0 0 0 10"
                    TextWrapping="WrapWholeWords"
                    Text="Lorem ipsum dolor sit amet, consectetur adipiscing elit" />
                <TextBlock TextWrapping="WrapWholeWords">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                 </TextBlock>
            </StackPanel>
        </Grid>
    </ScrollViewer>
</Page>

<Page x:Class="TestProject.SamplePage2"

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

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

<Grid.Resources>

<x:Double x:Key="TileHeightKey">150</x:Double>

</Grid.Resources>

<Grid.ColumnDefinitions>

</Grid.ColumnDefinitions>

<Grid.RowDefinitions>

</Grid.RowDefinitions>

<Grid Name="targetGrid" Grid.Row="1" Grid.Column="0"

VerticalAlignment="Top"

Margin="10"

Width="150"

MinHeight="{StaticResource TileHeightKey}"

Height="200"

Background="{ThemeResource SystemAccentColor}" />

<StackPanel Name="contentStackPanel" Grid.Row="1" Grid.Column="1"

Margin="10"

MinHeight="200">

<TextBlock

Style="{ThemeResource TitleTextBlockStyle}"

Margin="0 0 0 10"

TextWrapping="WrapWholeWords"

Text="Lorem ipsum dolor sit amet, consectetur adipiscing elit" />

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

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

</TextBlock>

</StackPanel>

</Grid>

</ScrollViewer>

</Page>

[C#/WINUI2.5] TabView 엘리먼트 : XAML로 정의한 TabViewItem 엘리먼트 사용하기

■ TabView 엘리먼트에서 XAML로 정의한 TabViewItem 엘리먼트를 사용하는 방법을 보여준다. ▶ SamplePage1.xaml


<Page x:Class="TestProject.SamplePage1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <ScrollViewer>
        <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
            <Grid.Resources>
                <x:Double x:Key="TileHeightKey">150</x:Double>
            </Grid.Resources>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto" />
                <ColumnDefinition Width="*"    />
                <ColumnDefinition Width="*"    />
            </Grid.ColumnDefinitions>
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto" />
                <RowDefinition Height="Auto" />
                <RowDefinition Height="Auto" />
                <RowDefinition Height="*"    />
            </Grid.RowDefinitions>
            <Grid Grid.Row="1" Grid.Column="1" Margin="5" MinHeight="{StaticResource TileHeightKey}" Background="DarkGray"  />
            <Grid Grid.Row="1" Grid.Column="2" Margin="5" MinHeight="{StaticResource TileHeightKey}" Background="LightGray" />
            <Grid Grid.Row="2" Grid.Column="1" Margin="5" MinHeight="{StaticResource TileHeightKey}" Background="LightGray" />
            <Grid Grid.Row="2" Grid.Column="2" Margin="5" MinHeight="{StaticResource TileHeightKey}" Background="DarkGray"  />
            <Grid Name="sourceGrid" Grid.Row="1" Grid.Column="0" Grid.RowSpan="2"
                Margin="5"
                MinWidth="250"
                MinHeight="{StaticResource TileHeightKey}"
                Background="{ThemeResource SystemAccentColor}" />
            <Grid Grid.Row="3" Grid.ColumnSpan="3"
                Margin="5 10">
                <TextBlock
                    TextWrapping="WrapWholeWords"
                    Style="{ThemeResource BodyTextBlockStyle}">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                </TextBlock>
            </Grid>
        </Grid>
    </ScrollViewer>
</Page>

<Page x:Class="TestProject.SamplePage1"

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

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

<Grid.Resources>

<x:Double x:Key="TileHeightKey">150</x:Double>

</Grid.Resources>

<Grid.ColumnDefinitions>

</Grid.ColumnDefinitions>

<Grid.RowDefinitions>

</Grid.RowDefinitions>

<Grid Name="sourceGrid" Grid.Row="1" Grid.Column="0" Grid.RowSpan="2"

Margin="5"

MinWidth="250"

MinHeight="{StaticResource TileHeightKey}"

Background="{ThemeResource SystemAccentColor}" />

<Grid Grid.Row="3" Grid.ColumnSpan="3"

Margin="5 10">

<TextBlock

TextWrapping="WrapWholeWords"

Style="{ThemeResource BodyTextBlockStyle}">

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

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

</TextBlock>

</Grid>

</ScrollViewer>

</Page>

▶ SamplePage1.xaml.cs


using Windows.Foundation.Metadata;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Media.Animation;
using Windows.UI.Xaml.Navigation;

namespace TestProject
{
    /// <summary>
    /// 샘플 페이지 1
    /// </summary>
    public sealed partial class SamplePage1 : Page
    {
        //////////////////////////////////////////////////////////////////////////////////////////////////// Constructor
        ////////////////////////////////////////////////////////////////////////////////////////// Public

        #region 생성자 - SamplePage1()

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

        #endregion

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

        #region 연결 애니메이션 준비하기 - PrepareConnectedAnimation(configuration)

        /// <summary>
        /// 연결 애니메이션 준비하기
        /// </summary>
        /// <param name="configuration">연결 애니메이션 구성</param>
        public void PrepareConnectedAnimation(ConnectedAnimationConfiguration configuration)
        {
            ConnectedAnimation animation = ConnectedAnimationService.GetForCurrentView().PrepareToAnimate("ForwardConnectedAnimation", this.sourceGrid);

            if(configuration != null && ApiInformation.IsApiContractPresent("Windows.Foundation.UniversalApiContract", 7))
            {
                animation.Configuration = configuration;
            }
        }

        #endregion

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

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

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

            ConnectedAnimation animation = ConnectedAnimationService.GetForCurrentView().GetAnimation("BackwardAnimation");

            if(animation != null)
            {
                animation.TryStart(this.sourceGrid);
            }
        }

        #endregion
    }
}

using Windows.Foundation.Metadata;

using Windows.UI.Xaml.Controls;

using Windows.UI.Xaml.Media.Animation;

using Windows.UI.Xaml.Navigation;

namespace TestProject

{

/// <summary>

/// 샘플 페이지 1

/// </summary>

public sealed partial class SamplePage1 : Page

{

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

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

#region 생성자 - SamplePage1()

/// <summary>

/// 생성자

/// </summary>

public SamplePage1()

{

InitializeComponent();

}

#endregion

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

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

#region 연결 애니메이션 준비하기 - PrepareConnectedAnimation(configuration)

/// <summary>

/// 연결 애니메이션 준비하기

/// </summary>

/// <param name="configuration">연결 애니메이션 구성</param>

public void PrepareConnectedAnimation(ConnectedAnimationConfiguration configuration)

{

ConnectedAnimation animation = ConnectedAnimationService.GetForCurrentView().PrepareToAnimate("ForwardConnectedAnimation", this.sourceGrid);

if(configuration != null && ApiInformation.IsApiContractPresent("Windows.Foundation.UniversalApiContract", 7))

{

animation.Configuration = configuration;

}

#endregion

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

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

/// <summary>

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

/// </summary>

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

protected override void OnNavigatedTo(NavigationEventArgs e)

{

base.OnNavigatedTo(e);

ConnectedAnimation animation = ConnectedAnimationService.GetForCurrentView().GetAnimation("BackwardAnimation");

if(animation != null)

{

animation.TryStart(this.sourceGrid);

}

#endregion

}

▶ SamplePage2.xaml


<Page x:Class="TestProject.SamplePage2"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <ScrollViewer>
        <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
            <Grid.Resources>
                <x:Double x:Key="TileHeightKey">150</x:Double>
            </Grid.Resources>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto" />
                <ColumnDefinition Width="*"    />
            </Grid.ColumnDefinitions>
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto" />
                <RowDefinition Height="Auto" />
            </Grid.RowDefinitions>
            <Grid Name="targetGrid" Grid.Row="1" Grid.Column="0"
                VerticalAlignment="Top"
                Margin="10"
                Width="150"
                MinHeight="{StaticResource TileHeightKey}"
                Height="200"
                Background="{ThemeResource SystemAccentColor}" />
            <StackPanel Name="contentStackPanel" Grid.Row="1" Grid.Column="1"
                Margin="10"
                MinHeight="200">
                <TextBlock
                    Style="{ThemeResource TitleTextBlockStyle}"
                    Margin="0 0 0 10"
                    TextWrapping="WrapWholeWords"
                    Text="Lorem ipsum dolor sit amet, consectetur adipiscing elit" />
                <TextBlock TextWrapping="WrapWholeWords">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                 </TextBlock>
            </StackPanel>
        </Grid>
    </ScrollViewer>
</Page>

<Page x:Class="TestProject.SamplePage2"

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

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

<Grid.Resources>

<x:Double x:Key="TileHeightKey">150</x:Double>

</Grid.Resources>

<Grid.ColumnDefinitions>

</Grid.ColumnDefinitions>

<Grid.RowDefinitions>

</Grid.RowDefinitions>

<Grid Name="targetGrid" Grid.Row="1" Grid.Column="0"

VerticalAlignment="Top"

Margin="10"

Width="150"

MinHeight="{StaticResource TileHeightKey}"

Height="200"

Background="{ThemeResource SystemAccentColor}" />

<StackPanel Name="contentStackPanel" Grid.Row="1" Grid.Column="1"

Margin="10"

MinHeight="200">

<TextBlock

Style="{ThemeResource TitleTextBlockStyle}"

Margin="0 0 0 10"

TextWrapping="WrapWholeWords"

Text="Lorem ipsum dolor sit amet, consectetur adipiscing elit" />

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

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

</TextBlock>

</StackPanel>

</Grid>

</ScrollViewer>

</Page>

▶ SamplePage2.xaml.cs


using Windows.Foundation.Metadata;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Media.Animation;
using Windows.UI.Xaml.Navigation;

namespace TestProject
{
    /// <summary>
    /// 샘플 페이지 2
    /// </summary>
    public sealed partial class SamplePage2 : Page
    {
        //////////////////////////////////////////////////////////////////////////////////////////////////// Constructor
        ////////////////////////////////////////////////////////////////////////////////////////// Public

        #region 생성자 - SamplePage2()

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

        #endregion

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

        #region 연결 애니메이션 준비하기 - PrepareConnectedAnimation(configuration)

        /// <summary>
        /// 연결 애니메이션 준비하기
        /// </summary>
        /// <param name="configuration">연결 애니메이션 구성</param>
        public void PrepareConnectedAnimation(ConnectedAnimationConfiguration configuration)
        {
            ConnectedAnimation animation = ConnectedAnimationService.GetForCurrentView().PrepareToAnimate("BackwardAnimation", this.targetGrid);

            if(configuration != null && ApiInformation.IsApiContractPresent("Windows.Foundation.UniversalApiContract", 7))
            {
                animation.Configuration = configuration;
            }
        }

        #endregion

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

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

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

            ConnectedAnimation animation = ConnectedAnimationService.GetForCurrentView().GetAnimation("ForwardAnimation");

            if(animation != null)
            {
                SetContentStackPanelTransitionCollection();

                animation.TryStart(this.targetGrid);
            }
        }

        #endregion

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

        #region 컨텐트 스택 패널 전이 컬렉션 설정하기 - SetContentStackPanelTransitionCollection()

        /// <summary>
        /// 컨텐트 스택 패널 전이 컬렉션 설정하기
        /// </summary>
        private void SetContentStackPanelTransitionCollection()
        {
            this.contentStackPanel.Transitions = new TransitionCollection { new EntranceThemeTransition() };
        }

        #endregion
    }
}

using Windows.Foundation.Metadata;

using Windows.UI.Xaml.Controls;

using Windows.UI.Xaml.Media.Animation;

using Windows.UI.Xaml.Navigation;

namespace TestProject

{

/// <summary>

/// 샘플 페이지 2

/// </summary>

public sealed partial class SamplePage2 : Page

{

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

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

#region 생성자 - SamplePage2()

/// <summary>

/// 생성자

/// </summary>

public SamplePage2()

{

InitializeComponent();

}

#endregion

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

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

#region 연결 애니메이션 준비하기 - PrepareConnectedAnimation(configuration)

/// <summary>

/// 연결 애니메이션 준비하기

/// </summary>

/// <param name="configuration">연결 애니메이션 구성</param>

public void PrepareConnectedAnimation(ConnectedAnimationConfiguration configuration)

{

ConnectedAnimation animation = ConnectedAnimationService.GetForCurrentView().PrepareToAnimate("BackwardAnimation", this.targetGrid);

if(configuration != null && ApiInformation.IsApiContractPresent("Windows.Foundation.UniversalApiContract", 7))

{

animation.Configuration = configuration;

}

#endregion

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

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

/// <summary>

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

/// </summary>

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

protected override void OnNavigatedTo(NavigationEventArgs e)

{

base.OnNavigatedTo(e);

ConnectedAnimation animation = ConnectedAnimationService.GetForCurrentView().GetAnimation("ForwardAnimation");

if(animation != null)

{

SetContentStackPanelTransitionCollection();

animation.TryStart(this.targetGrid);

}

#endregion

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

#region 컨텐트 스택 패널 전이 컬렉션 설정하기 - SetContentStackPanelTransitionCollection()

/// <summary>

/// 컨텐트 스택 패널 전이 컬렉션 설정하기

/// </summary>

private void SetContentStackPanelTransitionCollection()

{

this.contentStackPanel.Transitions = new TransitionCollection { new EntranceThemeTransition() };

}

#endregion

}