10월 2023 - icodebroker

[C#/WINUI3/.NET6] CommandBar 엘리먼트 사용하기

■ CommandBar 엘리먼트를 사용하는 방법을 보여준다. ▶ MainPage.xaml


<?xml version="1.0" encoding="utf-8"?>
<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}">
    <Grid Margin="10">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*"    />
            <ColumnDefinition Width="Auto" />
        </Grid.ColumnDefinitions>
        <StackPanel Grid.Column="0">
            <CommandBar Name="commandBar"
                DefaultLabelPosition="Right"
                IsOpen="False">
                <AppBarButton Name="addAppBarButton"
                    Icon="Add"
                    Label="Add" />
                <AppBarButton Name="editAppBarButton"
                    Icon="Edit"
                    Label="Edit" />
                <AppBarButton Name="shareAppBarButton"
                    Icon="Share"
                    Label="Share" />
                <CommandBar.SecondaryCommands>
                    <AppBarButton Name="settingsAppBarButton"
                        Icon="Setting"
                        Label="Settings">
                        <AppBarButton.KeyboardAccelerators>
                            <KeyboardAccelerator Modifiers="Control" Key="I" />
                        </AppBarButton.KeyboardAccelerators>
                    </AppBarButton>
                </CommandBar.SecondaryCommands>
            </CommandBar>
            <TextBlock Name="textBlock"
                Padding="0 10 0 0" />
        </StackPanel>
        <StackPanel Grid.Column="1"
            HorizontalAlignment="Center"
            VerticalAlignment="Center"
            Margin="30 0 0 0">
            <TextBlock Text="Show or hide" />
            <Button Name="openCommandBarButton"
                Margin="0 10 0 0"
                Content="Open command bar" />
            <Button Name="closeCommandBarButton"
                Margin="0 10 0 0"
                Content="Close command bar" />
            <TextBlock
                Margin="0 15 0 0"
                Text="Modify content" />
            <Button Name="addSecondaryCommandsButton"
                Margin="0 10 0 0"
                Content="Add secondary commands" />
            <Button Name="removeSecondaryCommandsButton"
                Margin="0 10 0 0"
                Content="Remove secondary commands" />
        </StackPanel>
    </Grid>
</Page>

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

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

<Grid.ColumnDefinitions>

</Grid.ColumnDefinitions>

<CommandBar Name="commandBar"

DefaultLabelPosition="Right"

IsOpen="False">

<AppBarButton Name="addAppBarButton"

Icon="Add"

Label="Add" />

<AppBarButton Name="editAppBarButton"

Icon="Edit"

Label="Edit" />

<AppBarButton Name="shareAppBarButton"

Icon="Share"

Label="Share" />

<CommandBar.SecondaryCommands>

<AppBarButton Name="settingsAppBarButton"

Icon="Setting"

Label="Settings">

<AppBarButton.KeyboardAccelerators>

</AppBarButton.KeyboardAccelerators>

</AppBarButton>

</CommandBar.SecondaryCommands>

</CommandBar>

<TextBlock Name="textBlock"

Padding="0 10 0 0" />

</StackPanel>

<StackPanel Grid.Column="1"

HorizontalAlignment="Center"

VerticalAlignment="Center"

Margin="30 0 0 0">

<Button Name="openCommandBarButton"

Margin="0 10 0 0"

Content="Open command bar" />

<Button Name="closeCommandBarButton"

Margin="0 10 0 0"

Content="Close command bar" />

<TextBlock

Margin="0 15 0 0"

Text="Modify content" />

<Button Name="addSecondaryCommandsButton"

Margin="0 10 0 0"

Content="Add secondary commands" />

<Button Name="removeSecondaryCommandsButton"

Margin="0 10 0 0"

Content="Remove secondary commands" />

</StackPanel>

</Grid>

</Page>

▶ MainPage.xaml.cs


using Windows.System;

using Microsoft.UI.Xaml;
using Microsoft.UI.Xaml.Controls;
using Microsoft.UI.Xaml.Input;
using Microsoft.UI.Xaml.Navigation;

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

        #region 생성자 - MainPage()

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

            this.addAppBarButton.Click               += appBarButton_Click;
            this.editAppBarButton.Click              += appBarButton_Click;
            this.shareAppBarButton.Click             += appBarButton_Click;
            this.settingsAppBarButton.Click          += appBarButton_Click;
            this.openCommandBarButton.Click          += openCommandBarButton_Click;
            this.closeCommandBarButton.Click         += closeCommandBarButton_Click;
            this.addSecondaryCommandsButton.Click    += addSecondaryCommandsButton_Click;
            this.removeSecondaryCommandsButton.Click += removeSecondaryCommandsButton_Click;

            AddKeyboardAccelerators();
        }

        #endregion

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

        #region 탐색을 종료할 경우 처리하기 - OnNavigatingFrom(e)

        /// <summary>
        /// 탐색을 종료할 경우 처리하기
        /// </summary>
        /// <param name="e">이벤트 인자</param>
        protected override void OnNavigatingFrom(NavigatingCancelEventArgs e)
        {
            RemoveSecondaryCommands();

            base.OnNavigatingFrom(e);
        }

        #endregion

        ////////////////////////////////////////////////////////////////////////////////////////// Private
        //////////////////////////////////////////////////////////////////////////////// Event

        #region 앱바 버튼 클릭시 처리하기 - appBarButton_Click(sender, e)

        /// <summary>
        /// 앱바 버튼 클릭시 처리하기
        /// </summary>
        /// <param name="sender">이벤트 발생자</param>
        /// <param name="e">이벤트 인자</param>
        private void appBarButton_Click(object sender, RoutedEventArgs e)
        {
            this.textBlock.Text = "You clicked : " + (sender as AppBarButton).Label;
        }

        #endregion
        #region Open command bar 버튼 클릭시 처리하기 - openCommandBarButton_Click(sender, e)

        /// <summary>
        /// Open command bar 버튼 클릭시 처리하기
        /// </summary>
        /// <param name="sender">이벤트 발생자</param>
        /// <param name="e">이벤트 인자</param>
        private void openCommandBarButton_Click(object sender, RoutedEventArgs e)
        {
            this.commandBar.IsOpen   = true;
            this.commandBar.IsSticky = true;
        }

        #endregion
        #region Close command bar 버튼 클릭시 처리하기 - closeCommandBarButton_Click(sender, e)

        /// <summary>
        /// Close command bar 버튼 클릭시 처리하기
        /// </summary>
        /// <param name="sender">이벤트 발생자</param>
        /// <param name="e">이벤트 인자</param>
        private void closeCommandBarButton_Click(object sender, RoutedEventArgs e)
        {
            this.commandBar.IsOpen   = false;
            this.commandBar.IsSticky = false;
        }

        #endregion
        #region Add secondary commands 버튼 클릭시 처리하기 - addSecondaryCommandsButton_Click(sender, e)

        /// <summary>
        /// Add secondary commands 버튼 클릭시 처리하기
        /// </summary>
        /// <param name="sender">이벤트 발생자</param>
        /// <param name="e">이벤트 인자</param>
        private void addSecondaryCommandsButton_Click(object sender, RoutedEventArgs e)
        {
            if(this.commandBar.SecondaryCommands.Count == 1)
            {
                AppBarButton appBarButton = new AppBarButton();

                appBarButton.Icon  = new SymbolIcon(Symbol.Add);
                appBarButton.Label = "Button 1";

                appBarButton.KeyboardAccelerators.Add
                (
                    new KeyboardAccelerator()
                    {
                        Key       = VirtualKey.N,
                        Modifiers = VirtualKeyModifiers.Control
                    }
                );

                this.commandBar.SecondaryCommands.Add(appBarButton);

                appBarButton = new AppBarButton
                {
                    Icon  = new SymbolIcon(Symbol.Delete),
                    Label = "Button 2"
                };

                this.commandBar.SecondaryCommands.Add(appBarButton);

                appBarButton.KeyboardAccelerators.Add
                (
                    new KeyboardAccelerator()
                    {
                        Key = VirtualKey.Delete
                    }
                );

                this.commandBar.SecondaryCommands.Add(new AppBarSeparator());

                appBarButton = new AppBarButton();

                appBarButton.Icon  = new SymbolIcon(Symbol.FontDecrease);
                appBarButton.Label = "Button 3";

                appBarButton.KeyboardAccelerators.Add
                (
                    new KeyboardAccelerator()
                    {
                        Key       = VirtualKey.Subtract,
                        Modifiers = VirtualKeyModifiers.Control
                    }
                );

                this.commandBar.SecondaryCommands.Add(appBarButton);

                appBarButton = new AppBarButton();

                appBarButton.Icon  = new SymbolIcon(Symbol.FontIncrease);
                appBarButton.Label = "Button 4";

                appBarButton.KeyboardAccelerators.Add
                (
                    new KeyboardAccelerator()
                    {
                        Key       = VirtualKey.Add,
                        Modifiers = VirtualKeyModifiers.Control
                    }
                );

                this.commandBar.SecondaryCommands.Add(appBarButton);
            }
        }

        #endregion
        #region Remove secondary commands 버튼 클릭시 처리하기 - removeSecondaryCommandsButton_Click(sender, e)

        /// <summary>
        /// Remove secondary commands 버튼 클릭시 처리하기
        /// </summary>
        /// <param name="sender">이벤트 발생자</param>
        /// <param name="e">이벤트 인자</param>
        private void removeSecondaryCommandsButton_Click(object sender, RoutedEventArgs e)
        {
            RemoveSecondaryCommands();
        }

        #endregion

        #region 키보드 가속기 추가하기 - AddKeyboardAccelerators()

        /// <summary>
        /// 키보드 가속기 추가하기
        /// </summary>
        private void AddKeyboardAccelerators()
        {
            this.editAppBarButton.KeyboardAccelerators.Add
            (
                new KeyboardAccelerator()
                {
                    Key       = VirtualKey.E,
                    Modifiers = VirtualKeyModifiers.Control
                }
            );

            this.shareAppBarButton.KeyboardAccelerators.Add
            (
                new KeyboardAccelerator()
                {
                    Key = VirtualKey.F4
                }
            );

            this.addAppBarButton.KeyboardAccelerators.Add
            (
                new KeyboardAccelerator()
                {
                    Key       = VirtualKey.A,
                    Modifiers = VirtualKeyModifiers.Control
                }
            );
        }

        #endregion

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

        #region 보조 명령 제거하기 - RemoveSecondaryCommands()

        /// <summary>
        /// 보조 명령 제거하기
        /// </summary>
        private void RemoveSecondaryCommands()
        {
            while(this.commandBar.SecondaryCommands.Count > 1)
            {
                this.commandBar.SecondaryCommands.RemoveAt(this.commandBar.SecondaryCommands.Count - 1);
            }
        }

        #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

using Windows.System;

using Microsoft.UI.Xaml;

using Microsoft.UI.Xaml.Controls;

using Microsoft.UI.Xaml.Input;

using Microsoft.UI.Xaml.Navigation;

namespace TestProject

{

/// <summary>

/// 메인 페이지

/// </summary>

public sealed partial class MainPage : Page

{

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

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

#region 생성자 - MainPage()

/// <summary>

/// 생성자

/// </summary>

public MainPage()

{

InitializeComponent();

this.addAppBarButton.Click += appBarButton_Click;

this.editAppBarButton.Click += appBarButton_Click;

this.shareAppBarButton.Click += appBarButton_Click;

this.settingsAppBarButton.Click += appBarButton_Click;

this.openCommandBarButton.Click += openCommandBarButton_Click;

this.closeCommandBarButton.Click += closeCommandBarButton_Click;

this.addSecondaryCommandsButton.Click += addSecondaryCommandsButton_Click;

this.removeSecondaryCommandsButton.Click += removeSecondaryCommandsButton_Click;

AddKeyboardAccelerators();

}

#endregion

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

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

#region 탐색을 종료할 경우 처리하기 - OnNavigatingFrom(e)

/// <summary>

/// 탐색을 종료할 경우 처리하기

/// </summary>

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

protected override void OnNavigatingFrom(NavigatingCancelEventArgs e)

{

RemoveSecondaryCommands();

base.OnNavigatingFrom(e);

}

#endregion

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

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

#region 앱바 버튼 클릭시 처리하기 - appBarButton_Click(sender, e)

/// <summary>

/// 앱바 버튼 클릭시 처리하기

/// </summary>

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

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

private void appBarButton_Click(object sender, RoutedEventArgs e)

{

this.textBlock.Text = "You clicked : " + (sender as AppBarButton).Label;

}

#endregion

#region Open command bar 버튼 클릭시 처리하기 - openCommandBarButton_Click(sender, e)

/// <summary>

/// Open command bar 버튼 클릭시 처리하기

/// </summary>

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

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

private void openCommandBarButton_Click(object sender, RoutedEventArgs e)

{

this.commandBar.IsOpen = true;

this.commandBar.IsSticky = true;

}

#endregion

#region Close command bar 버튼 클릭시 처리하기 - closeCommandBarButton_Click(sender, e)

/// <summary>

/// Close command bar 버튼 클릭시 처리하기

/// </summary>

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

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

private void closeCommandBarButton_Click(object sender, RoutedEventArgs e)

{

this.commandBar.IsOpen = false;

this.commandBar.IsSticky = false;

}

#endregion

#region Add secondary commands 버튼 클릭시 처리하기 - addSecondaryCommandsButton_Click(sender, e)

/// <summary>

/// Add secondary commands 버튼 클릭시 처리하기

/// </summary>

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

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

private void addSecondaryCommandsButton_Click(object sender, RoutedEventArgs e)

{

if(this.commandBar.SecondaryCommands.Count == 1)

{

AppBarButton appBarButton = new AppBarButton();

appBarButton.Icon = new SymbolIcon(Symbol.Add);

appBarButton.Label = "Button 1";

appBarButton.KeyboardAccelerators.Add

(

new KeyboardAccelerator()

{

Key = VirtualKey.N,

Modifiers = VirtualKeyModifiers.Control

}

);

this.commandBar.SecondaryCommands.Add(appBarButton);

appBarButton = new AppBarButton

{

Icon = new SymbolIcon(Symbol.Delete),

Label = "Button 2"

};

this.commandBar.SecondaryCommands.Add(appBarButton);

appBarButton.KeyboardAccelerators.Add

(

new KeyboardAccelerator()

{

Key = VirtualKey.Delete

}

);

this.commandBar.SecondaryCommands.Add(new AppBarSeparator());

appBarButton = new AppBarButton();

appBarButton.Icon = new SymbolIcon(Symbol.FontDecrease);

appBarButton.Label = "Button 3";

appBarButton.KeyboardAccelerators.Add

(

new KeyboardAccelerator()

{

Key = VirtualKey.Subtract,

Modifiers = VirtualKeyModifiers.Control

}

);

this.commandBar.SecondaryCommands.Add(appBarButton);

appBarButton = new AppBarButton();

appBarButton.Icon = new SymbolIcon(Symbol.FontIncrease);

appBarButton.Label = "Button 4";

appBarButton.KeyboardAccelerators.Add

(

new KeyboardAccelerator()

{

Key = VirtualKey.Add,

Modifiers = VirtualKeyModifiers.Control

}

);

this.commandBar.SecondaryCommands.Add(appBarButton);

}

#endregion

#region Remove secondary commands 버튼 클릭시 처리하기 - removeSecondaryCommandsButton_Click(sender, e)

/// <summary>

/// Remove secondary commands 버튼 클릭시 처리하기

/// </summary>

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

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

private void removeSecondaryCommandsButton_Click(object sender, RoutedEventArgs e)

{

RemoveSecondaryCommands();

}

#endregion

#region 키보드 가속기 추가하기 - AddKeyboardAccelerators()

/// <summary>

/// 키보드 가속기 추가하기

/// </summary>

private void AddKeyboardAccelerators()

{

this.editAppBarButton.KeyboardAccelerators.Add

(

new KeyboardAccelerator()

{

Key = VirtualKey.E,

Modifiers = VirtualKeyModifiers.Control

}

);

this.shareAppBarButton.KeyboardAccelerators.Add

(

new KeyboardAccelerator()

{

Key = VirtualKey.F4

}

);

this.addAppBarButton.KeyboardAccelerators.Add

(

new KeyboardAccelerator()

{

Key = VirtualKey.A,

Modifiers = VirtualKeyModifiers.Control

}

);

}

#endregion

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

#region 보조 명령 제거하기 - RemoveSecondaryCommands()

/// <summary>

/// 보조 명령 제거하기

/// </summary>

private void RemoveSecondaryCommands()

{

while(this.commandBar.SecondaryCommands.Count > 1)

{

this.commandBar.SecondaryCommands.RemoveAt(this.commandBar.SecondaryCommands.Count - 1);

}

#endregion

}

TestProject.zip

[C#/WINUI3/.NET6] AppBarToggleButton 엘리먼트 : Icon/Label/Content/IsThreeState 속성 사용하기

■ AppBarToggleButton 엘리먼트의 Icon/Label/Content/IsThreeState 속성을 사용하는 방법을 보여준다. ▶ MainPage.xaml


<?xml version="1.0" encoding="utf-8"?>
<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}">
    <StackPanel
        VerticalAlignment="Center"
        Width="400">
        <StackPanel Orientation="Horizontal">
            <AppBarToggleButton Name="appBarToggleButton1"
                IsTabStop="False"
                Icon="Shuffle"
                Label="SymbolIcon" />
            <TextBlock Name="textBlock1"
                VerticalAlignment="Center"
                Margin="10 0 0 0" />
        </StackPanel>
        <StackPanel
            Margin="0 10 0 0"
            Orientation="Horizontal">
            <AppBarToggleButton Name="appBarToggleButton2"
                IsTabStop="False"
                Label="BitmapIcon">
                <AppBarToggleButton.Icon>
                    <BitmapIcon UriSource="ms-appx:///IMAGE/Slices.png" />
                </AppBarToggleButton.Icon>
            </AppBarToggleButton>
            <TextBlock Name="textBlock2"
                VerticalAlignment="Center"
                Margin="10 0 0 0" />
        </StackPanel>
        <StackPanel
            Margin="0 10 0 0"
            Orientation="Horizontal">
            <AppBarToggleButton Name="appBarToggleButton3"
                IsTabStop="False"
                Label="FontIcon">
                <AppBarToggleButton.Icon>
                    <FontIcon FontFamily="Candara" Glyph="&#x03a3;" />
                </AppBarToggleButton.Icon>
            </AppBarToggleButton>
            <TextBlock Name="textBlock3"
                VerticalAlignment="Center"
                Margin="10 0 0 0" />
        </StackPanel>
        <StackPanel
            Margin="0 10 0 0"
            Orientation="Horizontal">
            <AppBarToggleButton Name="appBarToggleButton4"
                IsTabStop="False"
                Label="PathIcon"
                IsThreeState="True">
                <AppBarToggleButton.Content>
                    <Viewbox>
                        <PathIcon Data="F 1 M 20 20 L 24 10 L 24 24 L 5 24" />
                    </Viewbox>
                </AppBarToggleButton.Content>
            </AppBarToggleButton>
            <TextBlock Name="textBlock4"
                VerticalAlignment="Center"
                Margin="10 0 0 0" />
        </StackPanel>
    </StackPanel>
</Page>

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

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

<StackPanel

VerticalAlignment="Center"

Width="400">

<AppBarToggleButton Name="appBarToggleButton1"

IsTabStop="False"

Icon="Shuffle"

Label="SymbolIcon" />

<TextBlock Name="textBlock1"

VerticalAlignment="Center"

Margin="10 0 0 0" />

</StackPanel>

<StackPanel

Margin="0 10 0 0"

Orientation="Horizontal">

<AppBarToggleButton Name="appBarToggleButton2"

IsTabStop="False"

Label="BitmapIcon">

<AppBarToggleButton.Icon>

</AppBarToggleButton.Icon>

</AppBarToggleButton>

<TextBlock Name="textBlock2"

VerticalAlignment="Center"

Margin="10 0 0 0" />

</StackPanel>

<StackPanel

Margin="0 10 0 0"

Orientation="Horizontal">

<AppBarToggleButton Name="appBarToggleButton3"

IsTabStop="False"

Label="FontIcon">

<AppBarToggleButton.Icon>

</AppBarToggleButton.Icon>

</AppBarToggleButton>

<TextBlock Name="textBlock3"

VerticalAlignment="Center"

Margin="10 0 0 0" />

</StackPanel>

<StackPanel

Margin="0 10 0 0"

Orientation="Horizontal">

<AppBarToggleButton Name="appBarToggleButton4"

IsTabStop="False"

Label="PathIcon"

IsThreeState="True">

<AppBarToggleButton.Content>

</Viewbox>

</AppBarToggleButton.Content>

</AppBarToggleButton>

<TextBlock Name="textBlock4"

VerticalAlignment="Center"

Margin="10 0 0 0" />

</StackPanel>

</Page>

▶ MainPage.xaml.cs


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

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

        #region 생성자 - MainPage()

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

            this.appBarToggleButton1.Click += appBarToggleButton_Click;
            this.appBarToggleButton2.Click += appBarToggleButton_Click;
            this.appBarToggleButton3.Click += appBarToggleButton_Click;
            this.appBarToggleButton4.Click += appBarToggleButton_Click;
        }

        #endregion

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

        #region 앱바 토글 버튼 클릭시 처리하기 - appBarToggleButton_Click(sender, e)

        /// <summary>
        /// 앱바 토글 버튼 클릭시 처리하기
        /// </summary>
        /// <param name="sender">이벤트 발생자</param>
        /// <param name="e">이벤트 인자</param>
        private void appBarToggleButton_Click(object sender, RoutedEventArgs e)
        {
            if(sender is AppBarToggleButton button)
            {
                string name = button.Name;

                switch(name)
                {
                    case "appBarToggleButton1" : this.textBlock1.Text = "IsChecked = " + button.IsChecked.ToString(); break;
                    case "appBarToggleButton2" : this.textBlock2.Text = "IsChecked = " + button.IsChecked.ToString(); break;
                    case "appBarToggleButton3" : this.textBlock3.Text = "IsChecked = " + button.IsChecked.ToString(); break;
                    case "appBarToggleButton4" : this.textBlock4.Text = "IsChecked = " + button.IsChecked.ToString(); break;
                }
            }
        }

        #endregion
    }
}

using Microsoft.UI.Xaml;

using Microsoft.UI.Xaml.Controls;

namespace TestProject

{

/// <summary>

/// 메인 페이지

/// </summary>

public sealed partial class MainPage : Page

{

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

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

#region 생성자 - MainPage()

/// <summary>

/// 생성자

/// </summary>

public MainPage()

{

InitializeComponent();

this.appBarToggleButton1.Click += appBarToggleButton_Click;

this.appBarToggleButton2.Click += appBarToggleButton_Click;

this.appBarToggleButton3.Click += appBarToggleButton_Click;

this.appBarToggleButton4.Click += appBarToggleButton_Click;

}

#endregion

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

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

#region 앱바 토글 버튼 클릭시 처리하기 - appBarToggleButton_Click(sender, e)

/// <summary>

/// 앱바 토글 버튼 클릭시 처리하기

/// </summary>

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

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

private void appBarToggleButton_Click(object sender, RoutedEventArgs e)

{

if(sender is AppBarToggleButton button)

{

string name = button.Name;

switch(name)

{

case "appBarToggleButton1" : this.textBlock1.Text = "IsChecked = " + button.IsChecked.ToString(); break;

case "appBarToggleButton2" : this.textBlock2.Text = "IsChecked = " + button.IsChecked.ToString(); break;

case "appBarToggleButton3" : this.textBlock3.Text = "IsChecked = " + button.IsChecked.ToString(); break;

case "appBarToggleButton4" : this.textBlock4.Text = "IsChecked = " + button.IsChecked.ToString(); break;

}

#endregion

}

TestProject.zip

[C#/WINUI3/.NET6] AppBarSeparator 엘리먼트 사용하기

■ AppBarSeparator 엘리먼트를 사용하는 방법을 보여준다. ▶ MainPage.xaml


<?xml version="1.0" encoding="utf-8"?>
<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}">
    <ScrollViewer
        HorizontalScrollMode="Auto"
        HorizontalScrollBarVisibility="Hidden"
        VerticalScrollMode="Disabled"
        VerticalScrollBarVisibility="Hidden">
        <CommandBar>
            <CommandBar.PrimaryCommands>
                <AppBarButton Icon="AttachCamera" Label="Attach Camera" />
                <AppBarSeparator />
                <AppBarButton Icon="Like"         Label="Like"          />
                <AppBarButton Icon="Dislike"      Label="Dislike"       />
                <AppBarSeparator />
                <AppBarButton Icon="Orientation"  Label="Orientation"   />
            </CommandBar.PrimaryCommands>
        </CommandBar>
    </ScrollViewer>
</Page>

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

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

<ScrollViewer

HorizontalScrollMode="Auto"

HorizontalScrollBarVisibility="Hidden"

VerticalScrollMode="Disabled"

VerticalScrollBarVisibility="Hidden">

<CommandBar.PrimaryCommands>

</CommandBar.PrimaryCommands>

</CommandBar>

</ScrollViewer>

</Page>

TestProject.zip

[C#/WINUI3/.NET6] AppBarButton 엘리먼트 : Icon/Content/KeyboardAccelerators 속성 사용하기

■ AppBarButton 엘리먼트의 Icon/Content/KeyboardAccelerators 속성을 사용하는 방법을 보여준다. ▶ MainPage.xaml


<?xml version="1.0" encoding="utf-8"?>
<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}">
    <StackPanel
        VerticalAlignment="Center"
        Width="400">
        <StackPanel Orientation="Horizontal">
            <AppBarButton Name="appBarButton1"
                Icon="Like"
                Label="SymbolIcon" />
            <TextBlock Name="textBlock1"
                VerticalAlignment="Center"
                Margin="10 0 0 0" />
        </StackPanel>
        <StackPanel
            Margin="0 10 0 0"
            Orientation="Horizontal">
            <AppBarButton Name="appBarButton2"
                Label="BitmapIcon">
                <AppBarButton.Icon>
                    <BitmapIcon UriSource="ms-appx:///IMAGE/Slices.png" />
                </AppBarButton.Icon>
            </AppBarButton>
            <TextBlock Name="textBlock2"
                VerticalAlignment="Center"
                Margin="10 0 0 0" />
        </StackPanel>
        <StackPanel
            Margin="0 10 0 0"
            Orientation="Horizontal">
            <AppBarButton Name="appBarButton3"
                Label="FontIcon">
                <AppBarButton.Icon>
                    <FontIcon
                        FontFamily="Candara"
                        Glyph="&#x03A3;" />
                </AppBarButton.Icon>
            </AppBarButton>
            <TextBlock Name="textBlock3"
                VerticalAlignment="Center"
                Margin="10 0 0 0" />
        </StackPanel>
        <StackPanel
            Margin="0 10 0 0"
            Orientation="Horizontal">
            <AppBarButton Name="appBarButton4"
                Label="PathIcon">
                <AppBarButton.Content>
                    <Viewbox Stretch="Uniform">
                        <PathIcon Data="F 1 M 20 20 L 24 10 L 24 24 L 5 24" />
                    </Viewbox>
                </AppBarButton.Content>
            </AppBarButton>
            <TextBlock Name="textBlock4"
                VerticalAlignment="Center"
                Margin="10 0 0 0" />
        </StackPanel>
        <StackPanel
            Margin="0 10 0 0"
            Orientation="Horizontal">
            <AppBarButton Name="appBarButton5"
                Icon="Save"
                Label="Save">
                <AppBarButton.KeyboardAccelerators>
                    <KeyboardAccelerator Modifiers="Control" Key="S"/>
                </AppBarButton.KeyboardAccelerators>
            </AppBarButton>
            <TextBlock Name="textBlock5"
                VerticalAlignment="Center"
                Margin="10 0 0 0" />
        </StackPanel>
    </StackPanel>
</Page>

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

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

<StackPanel

VerticalAlignment="Center"

Width="400">

<AppBarButton Name="appBarButton1"

Icon="Like"

Label="SymbolIcon" />

<TextBlock Name="textBlock1"

VerticalAlignment="Center"

Margin="10 0 0 0" />

</StackPanel>

<StackPanel

Margin="0 10 0 0"

Orientation="Horizontal">

<AppBarButton Name="appBarButton2"

Label="BitmapIcon">

<AppBarButton.Icon>

</AppBarButton.Icon>

</AppBarButton>

<TextBlock Name="textBlock2"

VerticalAlignment="Center"

Margin="10 0 0 0" />

</StackPanel>

<StackPanel

Margin="0 10 0 0"

Orientation="Horizontal">

<AppBarButton Name="appBarButton3"

Label="FontIcon">

<AppBarButton.Icon>

<FontIcon

FontFamily="Candara"

Glyph="Σ" />

</AppBarButton.Icon>

</AppBarButton>

<TextBlock Name="textBlock3"

VerticalAlignment="Center"

Margin="10 0 0 0" />

</StackPanel>

<StackPanel

Margin="0 10 0 0"

Orientation="Horizontal">

<AppBarButton Name="appBarButton4"

Label="PathIcon">

<AppBarButton.Content>

</Viewbox>

</AppBarButton.Content>

</AppBarButton>

<TextBlock Name="textBlock4"

VerticalAlignment="Center"

Margin="10 0 0 0" />

</StackPanel>

<StackPanel

Margin="0 10 0 0"

Orientation="Horizontal">

<AppBarButton Name="appBarButton5"

Icon="Save"

Label="Save">

<AppBarButton.KeyboardAccelerators>

</AppBarButton.KeyboardAccelerators>

</AppBarButton>

<TextBlock Name="textBlock5"

VerticalAlignment="Center"

Margin="10 0 0 0" />

</StackPanel>

</Page>

▶ MainPage.xaml.cs


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

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

        #region 생성자 - MainPage()

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

            this.appBarButton1.Click += appBarButton_Click;
            this.appBarButton2.Click += appBarButton_Click;
            this.appBarButton3.Click += appBarButton_Click;
            this.appBarButton4.Click += appBarButton_Click;
            this.appBarButton5.Click += appBarButton_Click;
        }

        #endregion

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

        #region 앱바 버튼 클릭시 처리하기 - appBarButton_Click(sender, e)

        /// <summary>
        /// 앱바 버튼 클릭시 처리하기
        /// </summary>
        /// <param name="sender">이벤트 발생자</param>
        /// <param name="e">이벤트 인자</param>
        private void appBarButton_Click(object sender, RoutedEventArgs e)
        {
            if(sender is Button button)
            {
                string name = button.Name;

                switch(name)
                {
                    case "appBarButton1" : this.textBlock1.Text = "You clicked : " + name; break;
                    case "appBarButton2" : this.textBlock2.Text = "You clicked : " + name; break;
                    case "appBarButton3" : this.textBlock3.Text = "You clicked : " + name; break;
                    case "appBarButton4" : this.textBlock4.Text = "You clicked : " + name; break;
                    case "appBarButton5" : this.textBlock5.Text = "You clicked : " + name; break;
                }
            }
        }

        #endregion
    }
}

using Microsoft.UI.Xaml;

using Microsoft.UI.Xaml.Controls;

namespace TestProject

{

/// <summary>

/// 메인 페이지

/// </summary>

public sealed partial class MainPage : Page

{

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

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

#region 생성자 - MainPage()

/// <summary>

/// 생성자

/// </summary>

public MainPage()

{

InitializeComponent();

this.appBarButton1.Click += appBarButton_Click;

this.appBarButton2.Click += appBarButton_Click;

this.appBarButton3.Click += appBarButton_Click;

this.appBarButton4.Click += appBarButton_Click;

this.appBarButton5.Click += appBarButton_Click;

}

#endregion

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

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

#region 앱바 버튼 클릭시 처리하기 - appBarButton_Click(sender, e)

/// <summary>

/// 앱바 버튼 클릭시 처리하기

/// </summary>

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

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

private void appBarButton_Click(object sender, RoutedEventArgs e)

{

if(sender is Button button)

{

string name = button.Name;

switch(name)

{

case "appBarButton1" : this.textBlock1.Text = "You clicked : " + name; break;

case "appBarButton2" : this.textBlock2.Text = "You clicked : " + name; break;

case "appBarButton3" : this.textBlock3.Text = "You clicked : " + name; break;

case "appBarButton4" : this.textBlock4.Text = "You clicked : " + name; break;

case "appBarButton5" : this.textBlock5.Text = "You clicked : " + name; break;

}

#endregion

}

TestProject.zip

[C#/WINUI3/.NET6] StandardUICommand 클래스 : ExecuteRequested 이벤트를 사용해 명령 실행하기

■ StandardUICommand 클래스의 ExecuteRequested 이벤트를 사용해 명령을 실행하는 방법을 보여준다. ▶ ListItemData.cs


using System.Windows.Input;

namespace TestProject
{
    /// <summary>
    /// 리스트 항목 데이터
    /// </summary>
    public class ListItemData
    {
        //////////////////////////////////////////////////////////////////////////////////////////////////// Property
        ////////////////////////////////////////////////////////////////////////////////////////// Public

        #region 텍스트 - Text

        /// <summary>
        /// 텍스트
        /// </summary>
        public string Text { get; set; }

        #endregion
        #region 명령 - Command

        /// <summary>
        /// 명령
        /// </summary>
        public ICommand Command { get; set; }

        #endregion

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

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

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

        #endregion
    }
}

using System.Windows.Input;

namespace TestProject

{

/// <summary>

/// 리스트 항목 데이터

/// </summary>

public class ListItemData

{

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

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

#region 텍스트 - Text

/// <summary>

/// 텍스트

/// </summary>

public string Text { get; set; }

#endregion

#region 명령 - Command

/// <summary>

/// 명령

/// </summary>

public ICommand Command { get; set; }

#endregion

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

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

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

/// <summary>

/// 문자열 구하기

/// </summary>

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

public override string ToString()

{

return Text;

}

#endregion

}

▶ MainPage.xaml


<?xml version="1.0" encoding="utf-8"?>
<Page x:Class="TestProject.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:TestProject"
    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <Page.Resources>
        <Style x:Key="HorizontalSwipe" TargetType="ListViewItem" BasedOn="{StaticResource DefaultListViewItemStyle}">
            <Setter Property="Height"                     Value="60"      />
            <Setter Property="BorderThickness"            Value="0"       />
            <Setter Property="Padding"                    Value="0"       />
            <Setter Property="HorizontalContentAlignment" Value="Stretch" />
            <Setter Property="VerticalContentAlignment"   Value="Stretch" />
        </Style>
    </Page.Resources>
    <Grid Name="rootGrid"
        Margin="10">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="*"    />
        </Grid.RowDefinitions>
        <MenuBar Grid.Row="0">
            <MenuBarItem Title="File">
                <MenuFlyoutItem Text="New"     />
                <MenuFlyoutItem Text="Open..." />
                <MenuFlyoutItem Text="Save"    />
                <MenuFlyoutItem Text="Exit"    />
            </MenuBarItem>
            <MenuBarItem Title="Edit">
                <MenuFlyoutItem Name="deleteFlyoutItem" />
            </MenuBarItem>
            <MenuBarItem Title="Help">
                <MenuFlyoutItem Text="About" />
            </MenuBarItem>
        </MenuBar>
        <ListView Name="listView" Grid.Row="1"
            ItemContainerStyle="{StaticResource HorizontalSwipe}"
            Height="500"
            IsItemClickEnabled="True"
            SelectionMode="Single">
            <ListView.ItemTemplate>
                <DataTemplate x:DataType="local:ListItemData">
                    <UserControl
                        PointerEntered="listViewItemControl_PointerEntered"
                        PointerExited="listViewItemControl_PointerExited">
                        <Grid>
                            <VisualStateManager.VisualStateGroups>
                                <VisualStateGroup x:Name="HoveringStates">
                                    <VisualState x:Name="HoverButtonsHidden" />
                                    <VisualState x:Name="HoverButtonsShown">
                                        <VisualState.Setters>
                                            <Setter Target="hoverButton.Visibility" Value="Visible" />
                                        </VisualState.Setters>
                                    </VisualState>
                                </VisualStateGroup>
                            </VisualStateManager.VisualStateGroups>
                            <SwipeControl>
                                <SwipeControl.RightItems>
                                    <SwipeItems Mode="Execute">
                                        <SwipeItem
                                            Command="{x:Bind Command}"
                                            CommandParameter="{x:Bind Text}" />
                                    </SwipeItems>
                                </SwipeControl.RightItems>
                                <Grid VerticalAlignment="Center">
                                    <TextBlock
                                        HorizontalAlignment="Left"
                                        VerticalAlignment="Center"
                                        Margin="10"
                                        FontSize="18"
                                        Text="{x:Bind Text}" />
                                    <AppBarButton x:Name="hoverButton"
                                        HorizontalAlignment="Right"
                                        IsTabStop="False"
                                        Command="{x:Bind Command}"
                                        CommandParameter="{x:Bind Text}"
                                        Visibility="Collapsed" />
                                </Grid>
                            </SwipeControl>
                        </Grid>
                    </UserControl>
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>
    </Grid>
</Page>

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

<Page x:Class="TestProject.MainPage"

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

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

xmlns:local="using:TestProject"

Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">

<Page.Resources>

</Style>

</Page.Resources>

<Grid Name="rootGrid"

Margin="10">

<Grid.RowDefinitions>

</Grid.RowDefinitions>

</MenuBarItem>

</MenuBarItem>

</MenuBarItem>

</MenuBar>

<ListView Name="listView" Grid.Row="1"

ItemContainerStyle="{StaticResource HorizontalSwipe}"

Height="500"

IsItemClickEnabled="True"

SelectionMode="Single">

<ListView.ItemTemplate>

<UserControl

PointerEntered="listViewItemControl_PointerEntered"

PointerExited="listViewItemControl_PointerExited">

<Grid>

<VisualStateManager.VisualStateGroups>

<VisualState.Setters>

</VisualState.Setters>

</VisualState>

</VisualStateGroup>

</VisualStateManager.VisualStateGroups>

<SwipeControl.RightItems>

<SwipeItem

Command="{x:Bind Command}"

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

</SwipeItems>

</SwipeControl.RightItems>

<TextBlock

HorizontalAlignment="Left"

VerticalAlignment="Center"

Margin="10"

FontSize="18"

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

<AppBarButton x:Name="hoverButton"

HorizontalAlignment="Right"

IsTabStop="False"

Command="{x:Bind Command}"

CommandParameter="{x:Bind Text}"

Visibility="Collapsed" />

</Grid>

</SwipeControl>

</Grid>

</UserControl>

</DataTemplate>

</ListView.ItemTemplate>

</ListView>

</Grid>

</Page>

▶ MainPage.xaml.cs


using System.Collections.ObjectModel;

using Windows.Foundation.Metadata;

using Microsoft.UI.Xaml;
using Microsoft.UI.Xaml.Controls;
using Microsoft.UI.Xaml.Input;
using Microsoft.UI.Input;

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

        #region Field

        /// <summary>
        /// 컬렉션
        /// </summary>
        private ObservableCollection<ListItemData> collection = new ObservableCollection<ListItemData>();

        #endregion

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

        #region 생성자 - MainPage()

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

            Loaded += Page_Loaded;

            this.listView.Loaded                   += listView_Loaded;
            this.listView.ContainerContentChanging += listView_ContainerContentChanging;
        }

        #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)
        {
            if(ApiInformation.IsApiContractPresent("Windows.Foundation.UniversalApiContract", 7))
            {
                StandardUICommand deleteCommand = new StandardUICommand(StandardUICommandKind.Delete);

                deleteCommand.ExecuteRequested += deleteCommand_ExecuteRequested;

                this.deleteFlyoutItem.Command = deleteCommand;

                for(int i = 0; i < 15; i++)
                {
                    this.collection.Add
                    (
                        new ListItemData
                        {
                            Text    = "List item " + i.ToString(),
                            Command = deleteCommand
                        }
                    );
                }
            }
            else
            {
                for(int i = 0; i < 15; i++)
                {
                    this.collection.Add
                    (
                        new ListItemData
                        {
                            Text    = "List item " + i.ToString(),
                            Command = null
                        }
                    );
                }
            }
        }

        #endregion
        #region 리스트 뷰 로드시 처리하기 - listView_Loaded(sender, e)

        /// <summary>
        /// 리스트 뷰 로드시 처리하기
        /// </summary>
        /// <param name="sender">이벤트 발생자</param>
        /// <param name="e">이벤트 인자</param>
        private void listView_Loaded(object sender, RoutedEventArgs e)
        {
            ListView listView = sender as ListView;

            listView.ItemsSource = this.collection;
        }

        #endregion
        #region 리스트 뷰 컨테이너 컨텐트 변경시 처리하기 - listView_ContainerContentChanging(sender, e)

        /// <summary>
        /// 리스트 뷰 컨테이너 컨텐트 변경시 처리하기
        /// </summary>
        /// <param name="sender">이벤트 발생자</param>
        /// <param name="e">이벤트 인자</param>
        private void listView_ContainerContentChanging(ListViewBase sender, ContainerContentChangingEventArgs e)
        {
            ListItemData listItemData = e.Item as ListItemData;

            MenuFlyoutItem menuFlyoutItem = new MenuFlyoutItem() { Command = listItemData.Command };

            MenuFlyout menuFlyout = new MenuFlyout();

            menuFlyout.Items.Add(menuFlyoutItem);

            menuFlyout.Opened += menuFlyout_Opened;

            e.ItemContainer.ContextFlyout = menuFlyout;
        }

        #endregion

        #region 삭제 명령 실행 요청시 처리하기 - deleteCommand_ExecuteRequested(sender, e)

        /// <summary>
        /// 삭제 명령 실행 요청시 처리하기
        /// </summary>
        /// <param name="sender">이벤트 발생자</param>
        /// <param name="e">이벤트 인자</param>
        private void deleteCommand_ExecuteRequested(XamlUICommand sender, ExecuteRequestedEventArgs e)
        {
            if(e.Parameter != null)
            {
                foreach(ListItemData listItemData in this.collection)
                {
                    if(listItemData.Text == (e.Parameter as string))
                    {
                        this.collection.Remove(listItemData);

                        return;
                    }
                }
            }

            if(this.listView.SelectedIndex != -1)
            {
                this.collection.RemoveAt(this.listView.SelectedIndex);
            }
        }

        #endregion
        #region 메뉴 플라이아웃 오픈시 처리하기 - menuFlyout_Opened(sender, e)

        /// <summary>
        /// 메뉴 플라이아웃 오픈시 처리하기
        /// </summary>
        /// <param name="sender">이벤트 발생자</param>
        /// <param name="e">이벤트 인자</param>
        private void menuFlyout_Opened(object sender, object e)
        {
            MenuFlyout menuFlyout = sender as MenuFlyout;

            ListViewItem listViewItem = menuFlyout.Target as ListViewItem;

            listViewItem.IsSelected = true;
        }

        #endregion

        #region 리스트 뷰 항목 컨트롤 포인터 진입시 처리하기 - listViewItemControl_PointerEntered(sender, e)

        /// <summary>
        /// 리스트 뷰 항목 컨트롤 포인트 진입시 처리하기
        /// </summary>
        /// <param name="sender">이벤트 발생자</param>
        /// <param name="e">이벤트 인자</param>
        private void listViewItemControl_PointerEntered(object sender, PointerRoutedEventArgs e)
        {
            if(e.Pointer.PointerDeviceType == PointerDeviceType.Mouse || e.Pointer.PointerDeviceType == PointerDeviceType.Pen)
            {
                VisualStateManager.GoToState(sender as Control, "HoverButtonsShown", true);
            }
        }

        #endregion
        #region 리스트 뷰 항목 컨트롤 포인터 이탈시 처리하기 - listViewItemControl_PointerExited(sender, e)

        /// <summary>
        /// 리스트 뷰 항목 컨트롤 포인터 이탈시 처리하기
        /// </summary>
        /// <param name="sender">이벤트 발생자</param>
        /// <param name="e">이벤트 인자</param>
        private void listViewItemControl_PointerExited(object sender, PointerRoutedEventArgs e)
        {
            VisualStateManager.GoToState(sender as Control, "HoverButtonsHidden", true);
        }

        #endregion
    }
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

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

using System.Collections.ObjectModel;

using Windows.Foundation.Metadata;

using Microsoft.UI.Xaml;

using Microsoft.UI.Xaml.Controls;

using Microsoft.UI.Xaml.Input;

using Microsoft.UI.Input;

namespace TestProject

{

/// <summary>

/// 메인 페이지

/// </summary>

public sealed partial class MainPage : Page

{

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

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

#region Field

/// <summary>

/// 컬렉션

/// </summary>

private ObservableCollection<ListItemData> collection = new ObservableCollection<ListItemData>();

#endregion

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

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

#region 생성자 - MainPage()

/// <summary>

/// 생성자

/// </summary>

public MainPage()

{

InitializeComponent();

Loaded += Page_Loaded;

this.listView.Loaded += listView_Loaded;

this.listView.ContainerContentChanging += listView_ContainerContentChanging;

}

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

{

if(ApiInformation.IsApiContractPresent("Windows.Foundation.UniversalApiContract", 7))

{

StandardUICommand deleteCommand = new StandardUICommand(StandardUICommandKind.Delete);

deleteCommand.ExecuteRequested += deleteCommand_ExecuteRequested;

this.deleteFlyoutItem.Command = deleteCommand;

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

{

this.collection.Add

(

new ListItemData

{

Text = "List item " + i.ToString(),

Command = deleteCommand

}

);

}

else

{

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

{

this.collection.Add

(

new ListItemData

{

Text = "List item " + i.ToString(),

Command = null

}

);

}

#endregion

#region 리스트 뷰 로드시 처리하기 - listView_Loaded(sender, e)

/// <summary>

/// 리스트 뷰 로드시 처리하기

/// </summary>

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

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

private void listView_Loaded(object sender, RoutedEventArgs e)

{

ListView listView = sender as ListView;

listView.ItemsSource = this.collection;

}

#endregion

#region 리스트 뷰 컨테이너 컨텐트 변경시 처리하기 - listView_ContainerContentChanging(sender, e)

/// <summary>

/// 리스트 뷰 컨테이너 컨텐트 변경시 처리하기

/// </summary>

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

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

private void listView_ContainerContentChanging(ListViewBase sender, ContainerContentChangingEventArgs e)

{

ListItemData listItemData = e.Item as ListItemData;

MenuFlyoutItem menuFlyoutItem = new MenuFlyoutItem() { Command = listItemData.Command };

MenuFlyout menuFlyout = new MenuFlyout();

menuFlyout.Items.Add(menuFlyoutItem);

menuFlyout.Opened += menuFlyout_Opened;

e.ItemContainer.ContextFlyout = menuFlyout;

}

#endregion

#region 삭제 명령 실행 요청시 처리하기 - deleteCommand_ExecuteRequested(sender, e)

/// <summary>

/// 삭제 명령 실행 요청시 처리하기

/// </summary>

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

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

private void deleteCommand_ExecuteRequested(XamlUICommand sender, ExecuteRequestedEventArgs e)

{

if(e.Parameter != null)

{

foreach(ListItemData listItemData in this.collection)

{

if(listItemData.Text == (e.Parameter as string))

{

this.collection.Remove(listItemData);

return;

}

if(this.listView.SelectedIndex != -1)

{

this.collection.RemoveAt(this.listView.SelectedIndex);

}

#endregion

#region 메뉴 플라이아웃 오픈시 처리하기 - menuFlyout_Opened(sender, e)

/// <summary>

/// 메뉴 플라이아웃 오픈시 처리하기

/// </summary>

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

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

private void menuFlyout_Opened(object sender, object e)

{

MenuFlyout menuFlyout = sender as MenuFlyout;

ListViewItem listViewItem = menuFlyout.Target as ListViewItem;

listViewItem.IsSelected = true;

}

#endregion

#region 리스트 뷰 항목 컨트롤 포인터 진입시 처리하기 - listViewItemControl_PointerEntered(sender, e)

/// <summary>

/// 리스트 뷰 항목 컨트롤 포인트 진입시 처리하기

/// </summary>

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

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

private void listViewItemControl_PointerEntered(object sender, PointerRoutedEventArgs e)

{

if(e.Pointer.PointerDeviceType == PointerDeviceType.Mouse || e.Pointer.PointerDeviceType == PointerDeviceType.Pen)

{

VisualStateManager.GoToState(sender as Control, "HoverButtonsShown", true);

}

#endregion

#region 리스트 뷰 항목 컨트롤 포인터 이탈시 처리하기 - listViewItemControl_PointerExited(sender, e)

/// <summary>

/// 리스트 뷰 항목 컨트롤 포인터 이탈시 처리하기

/// </summary>

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

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

private void listViewItemControl_PointerExited(object sender, PointerRoutedEventArgs e)

{

VisualStateManager.GoToState(sender as Control, "HoverButtonsHidden", true);

}

#endregion

}

TestProject.zip

[C#/WINUI3/.NET6] XamlUICommand 클래스 : ExecuteRequested 이벤트를 사용해 명령 실행하기

■ XamlUICommand 클래스의 ExecuteRequested 이벤트를 사용해 명령을 실행하는 방법을 보여준다. ▶ MainPage.xaml


<?xml version="1.0" encoding="utf-8"?>
<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}">
    <Page.Resources>
        <XamlUICommand x:Name="customXamlUICommand"
            Label="Custom XamlUICommand"
            Description="This is a custom command">
            <XamlUICommand.IconSource>
                <SymbolIconSource Symbol="Favorite" />
            </XamlUICommand.IconSource>
            <XamlUICommand.KeyboardAccelerators>
                <KeyboardAccelerator Key="D" Modifiers="Control" />
            </XamlUICommand.KeyboardAccelerators>
        </XamlUICommand>
    </Page.Resources>
    <RelativePanel
        HorizontalAlignment="Center"
        VerticalAlignment="Center">
        <AppBarButton Name="CustomButton"
            Command="{StaticResource customXamlUICommand}" />
        <TextBlock Name="textBock"
            RelativePanel.RightOf="CustomButton"
            RelativePanel.AlignVerticalCenterWith="CustomButton"
            Margin="10 0 0 0"
            FontFamily="Global User Interface" />
    </RelativePanel>
</Page>

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

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

<Page.Resources>

<XamlUICommand x:Name="customXamlUICommand"

Label="Custom XamlUICommand"

Description="This is a custom command">

<XamlUICommand.IconSource>

</XamlUICommand.IconSource>

<XamlUICommand.KeyboardAccelerators>

</XamlUICommand.KeyboardAccelerators>

</XamlUICommand>

</Page.Resources>

<RelativePanel

HorizontalAlignment="Center"

VerticalAlignment="Center">

<AppBarButton Name="CustomButton"

Command="{StaticResource customXamlUICommand}" />

<TextBlock Name="textBock"

RelativePanel.RightOf="CustomButton"

RelativePanel.AlignVerticalCenterWith="CustomButton"

Margin="10 0 0 0"

FontFamily="Global User Interface" />

</RelativePanel>

</Page>

▶ MainPage.xaml.cs


using Microsoft.UI.Xaml.Controls;
using Microsoft.UI.Xaml.Input;

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

        #region 생성자 - MainPage()

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

            this.customXamlUICommand.ExecuteRequested += customXamlUICommand_ExecuteRequested;
        }

        #endregion

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

        #region 커스텀 XAML UI 명령 실행 요청시 처리하기 - customXamlUICommand_ExecuteRequested(sender, e)

        /// <summary>
        /// 커스텀 XAML UI 명령 실행 요청시 처리하기
        /// </summary>
        /// <param name="sender">이벤트 발생자</param>
        /// <param name="e">이벤트 인자</param>
        private void customXamlUICommand_ExecuteRequested(XamlUICommand sender, ExecuteRequestedEventArgs e)
        {
            this.textBock.Text = "You fired the custom command";
        }

        #endregion
    }
}

using Microsoft.UI.Xaml.Controls;

using Microsoft.UI.Xaml.Input;

namespace TestProject

{

/// <summary>

/// 메인 페이지

/// </summary>

public sealed partial class MainPage : Page

{

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

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

#region 생성자 - MainPage()

/// <summary>

/// 생성자

/// </summary>

public MainPage()

{

InitializeComponent();

this.customXamlUICommand.ExecuteRequested += customXamlUICommand_ExecuteRequested;

}

#endregion

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

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

#region 커스텀 XAML UI 명령 실행 요청시 처리하기 - customXamlUICommand_ExecuteRequested(sender, e)

/// <summary>

/// 커스텀 XAML UI 명령 실행 요청시 처리하기

/// </summary>

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

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

private void customXamlUICommand_ExecuteRequested(XamlUICommand sender, ExecuteRequestedEventArgs e)

{

this.textBock.Text = "You fired the custom command";

}

#endregion

}

TestProject.zip

[BLENDER] Object Mode에서 Object 조작하기

■ Object Mode에서 Object를 조작하는 방법을 보여준다. 카테고리 : SOFTWARE/BLENDER 태그 : BLENDER,OBJECT • Object Mode와 Edit Mode가 있다. • Object Mode는

[BLENDER] Viewport 조작하기

■ Viewport를 조작하는 방법을 보여준다. 카테고리 : SOFTWARE/BLENDER 태그 : BLENDER,VIEWPORT • 마우스 휠을 클릭한 상태에서 마우스를 움직이면 시야를 돌리면서 원하는 각도에서

[C#/WINUI3/.NET6] WebView2 엘리먼트 : Source 속성 사용하기

■ WebView2 엘리먼트 : Source 속성 사용하기 ▶ MainPage.xaml


<?xml version="1.0" encoding="utf-8"?>
<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}">
    <WebView2 Source="https://learn.microsoft.com/en-us/windows/apps/winui/winui3/" />
</Page>

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

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

</Page>

TestProject.zip

[C#/WINUI3/.NET6] ElementSoundPlayer 클래스 : State/SpatialAudioMode 정적 속성과 Play 정적 메소드 사용하기

■ ElementSoundPlayer 클래스의 State/SpatialAudioMode 정적 속성과 Play 정적 메소드를 사용하는 방법을 보여준다. ▶ MainPage.xaml


<?xml version="1.0" encoding="utf-8"?>
<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}">
    <StackPanel
        HorizontalAlignment="Center"
        VerticalAlignment="Center">
        <ToggleSwitch Name="soundToggleSwitch"
            HorizontalAlignment="Center"
            OffContent="Sound Off"
            OnContent="Sound On" />
        <StackPanel
            Margin="0 30 0 0"
            Orientation="Vertical">
            <CheckBox Name="spatialAudioCheckBox"
                IsEnabled="False"
                Content="Enable Spatial Audio" />
            <TextBlock
                Margin="0 10 0 0"
                Text="Can only enable spatial audio when sound is on!"
                Foreground="{ThemeResource SystemColorHotlightColor}"
                Style="{ThemeResource CaptionTextBlockStyle}"
                FontStyle="Italic" />
        </StackPanel>
        <Grid Margin="0 30 0 0">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto" />
                <ColumnDefinition Width="*"    />
            </Grid.ColumnDefinitions>
            <Button Name="playSoundButton" Grid.Column="0"
                Content="Play Sound"
                ElementSoundMode="Off"
                HorizontalAlignment="Left" />
            <ComboBox Name="soundSelectionComboBox" Grid.Column="1"
                Header="Pick Custom Sound"
                SelectedIndex="1"
                HorizontalAlignment="Right"
                Margin="50 0 0 0">
                <ComboBoxItem>Focus</ComboBoxItem>
                <ComboBoxItem>Invoke</ComboBoxItem>
                <ComboBoxItem>Show</ComboBoxItem>
                <ComboBoxItem>Hide</ComboBoxItem>
                <ComboBoxItem>MoveNext</ComboBoxItem>
                <ComboBoxItem>MovePrevious</ComboBoxItem>
                <ComboBoxItem>GoBack</ComboBoxItem>
            </ComboBox>
        </Grid>
    </StackPanel>
</Page>

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

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

<StackPanel

HorizontalAlignment="Center"

VerticalAlignment="Center">

<ToggleSwitch Name="soundToggleSwitch"

HorizontalAlignment="Center"

OffContent="Sound Off"

OnContent="Sound On" />

<StackPanel

Margin="0 30 0 0"

Orientation="Vertical">

<CheckBox Name="spatialAudioCheckBox"

IsEnabled="False"

Content="Enable Spatial Audio" />

<TextBlock

Margin="0 10 0 0"

Text="Can only enable spatial audio when sound is on!"

Foreground="{ThemeResource SystemColorHotlightColor}"

Style="{ThemeResource CaptionTextBlockStyle}"

FontStyle="Italic" />

</StackPanel>

<Grid.ColumnDefinitions>

</Grid.ColumnDefinitions>

<Button Name="playSoundButton" Grid.Column="0"

Content="Play Sound"

ElementSoundMode="Off"

HorizontalAlignment="Left" />

<ComboBox Name="soundSelectionComboBox" Grid.Column="1"

Header="Pick Custom Sound"

SelectedIndex="1"

HorizontalAlignment="Right"

Margin="50 0 0 0">

<ComboBoxItem>Focus</ComboBoxItem>

<ComboBoxItem>Invoke</ComboBoxItem>

<ComboBoxItem>MoveNext</ComboBoxItem>

<ComboBoxItem>MovePrevious</ComboBoxItem>

<ComboBoxItem>GoBack</ComboBoxItem>

</ComboBox>

</Grid>

</StackPanel>

</Page>

▶ MainPage.xaml.cs


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

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

        #region 생성자 - MainPage()

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

            this.soundToggleSwitch.Toggled      += soundToggleSwitch_Toggled;
            this.spatialAudioCheckBox.Checked   += enableSpatialAudioCheckBox_Checked;
            this.spatialAudioCheckBox.Unchecked += spatialAudioCheckBox_Unchecked;
            this.playSoundButton.Click          += playSoundButton_Click;

            if(ElementSoundPlayer.State == ElementSoundPlayerState.On)
            {
                this.soundToggleSwitch.IsOn = true;
            }

            if(ElementSoundPlayer.SpatialAudioMode == ElementSpatialAudioMode.On && soundToggleSwitch.IsOn == true)
            {
                this.spatialAudioCheckBox.IsChecked = true;
            }
        }

        #endregion

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

        #region Sound 토글 스위치 토글시 처리하기 - soundToggleSwitch_Toggled(sender, e)

        /// <summary>
        /// Sound 토글 스위치 토글시 처리하기
        /// </summary>
        /// <param name="sender">이벤트 발생자</param>
        /// <param name="e">이벤트 인자</param>
        private void soundToggleSwitch_Toggled(object sender, RoutedEventArgs e)
        {
            if(this.soundToggleSwitch.IsOn == true)
            {
                this.spatialAudioCheckBox.IsEnabled = true;

                ElementSoundPlayer.State = ElementSoundPlayerState.On;
            }
            else
            {
                this.spatialAudioCheckBox.IsEnabled = false;
                this.spatialAudioCheckBox.IsChecked = false;

                ElementSoundPlayer.State            = ElementSoundPlayerState.Off;
                ElementSoundPlayer.SpatialAudioMode = ElementSpatialAudioMode.Off;
            }
        }

        #endregion
        #region Enable Spatial Audio 체크 박스 체크시 처리하기 - enableSpatialAudioCheckBox_Checked(sender, e)

        /// <summary>
        /// Enable Spatial Audio 체크 박스 체크시 처리하기
        /// </summary>
        /// <param name="sender">이벤트 발생자</param>
        /// <param name="e">이벤트 인자</param>
        private void enableSpatialAudioCheckBox_Checked(object sender, RoutedEventArgs e)
        {
            if(this.soundToggleSwitch.IsOn == true)
            {
                ElementSoundPlayer.SpatialAudioMode = ElementSpatialAudioMode.On;
            }
        }

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

        /// <summary>
        /// Enable Spatial Audio 체크 박스 체크 해제시 처리하기
        /// </summary>
        /// <param name="sender">이벤트 발생자</param>
        /// <param name="e">이벤트 인자</param>
        private void spatialAudioCheckBox_Unchecked(object sender, RoutedEventArgs e)
        {
            if(this.soundToggleSwitch.IsOn == true)
            {
                ElementSoundPlayer.SpatialAudioMode = ElementSpatialAudioMode.Off;
            }
        }

        #endregion
        #region Play Sound 버튼 클릭시 처리하기 - playSoundButton_Click(sender, e)

        /// <summary>
        /// Play Sound 버튼 클릭시 처리하기
        /// </summary>
        /// <param name="sender">이벤트 발생자</param>
        /// <param name="e">이벤트 인자</param>
        private void playSoundButton_Click(object sender, RoutedEventArgs e)
        {
            ElementSoundPlayer.Play((ElementSoundKind)this.soundSelectionComboBox.SelectedIndex);
        }

        #endregion
    }
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

using Microsoft.UI.Xaml;

using Microsoft.UI.Xaml.Controls;

namespace TestProject

{

/// <summary>

/// 메인 페이지

/// </summary>

public sealed partial class MainPage : Page

{

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

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

#region 생성자 - MainPage()

/// <summary>

/// 생성자

/// </summary>

public MainPage()

{

InitializeComponent();

this.soundToggleSwitch.Toggled += soundToggleSwitch_Toggled;

this.spatialAudioCheckBox.Checked += enableSpatialAudioCheckBox_Checked;

this.spatialAudioCheckBox.Unchecked += spatialAudioCheckBox_Unchecked;

this.playSoundButton.Click += playSoundButton_Click;

if(ElementSoundPlayer.State == ElementSoundPlayerState.On)

{

this.soundToggleSwitch.IsOn = true;

}

if(ElementSoundPlayer.SpatialAudioMode == ElementSpatialAudioMode.On && soundToggleSwitch.IsOn == true)

{

this.spatialAudioCheckBox.IsChecked = true;

}

#endregion

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

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

#region Sound 토글 스위치 토글시 처리하기 - soundToggleSwitch_Toggled(sender, e)

/// <summary>

/// Sound 토글 스위치 토글시 처리하기

/// </summary>

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

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

private void soundToggleSwitch_Toggled(object sender, RoutedEventArgs e)

{

if(this.soundToggleSwitch.IsOn == true)

{

this.spatialAudioCheckBox.IsEnabled = true;

ElementSoundPlayer.State = ElementSoundPlayerState.On;

}

else

{

this.spatialAudioCheckBox.IsEnabled = false;

this.spatialAudioCheckBox.IsChecked = false;

ElementSoundPlayer.State = ElementSoundPlayerState.Off;

ElementSoundPlayer.SpatialAudioMode = ElementSpatialAudioMode.Off;

}

#endregion

#region Enable Spatial Audio 체크 박스 체크시 처리하기 - enableSpatialAudioCheckBox_Checked(sender, e)

/// <summary>

/// Enable Spatial Audio 체크 박스 체크시 처리하기

/// </summary>

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

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

private void enableSpatialAudioCheckBox_Checked(object sender, RoutedEventArgs e)

{

if(this.soundToggleSwitch.IsOn == true)

{

ElementSoundPlayer.SpatialAudioMode = ElementSpatialAudioMode.On;

}

#endregion

#region Enable Spatial Audio 체크 박스 체크 해제시 처리하기 - spatialAudioCheckBox_Unchecked(sender, e)

/// <summary>

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

/// </summary>

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

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

private void spatialAudioCheckBox_Unchecked(object sender, RoutedEventArgs e)

{

if(this.soundToggleSwitch.IsOn == true)

{

ElementSoundPlayer.SpatialAudioMode = ElementSpatialAudioMode.Off;

}

#endregion

#region Play Sound 버튼 클릭시 처리하기 - playSoundButton_Click(sender, e)

/// <summary>

/// Play Sound 버튼 클릭시 처리하기

/// </summary>

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

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

private void playSoundButton_Click(object sender, RoutedEventArgs e)

{

ElementSoundPlayer.Play((ElementSoundKind)this.soundSelectionComboBox.SelectedIndex);

}

#endregion

}

TestProject.zip

[C#/WINUI3/.NET6] PersonPicture 엘리먼트 : ProfilePicture/DisplayName/Initials 속성 사용하기

■ PersonPicture 엘리먼트의 ProfilePicture/DisplayName/Initials 속성을 사용하는 방법을 보여준다. ▶ BooleanToValueConverter.cs


using System;

using Microsoft.UI.Xaml.Data;

namespace TestProject
{
    /// <summary>
    /// 불린값→값 변환자
    /// </summary>
    public sealed class BooleanToValueConverter : IValueConverter
    {
        //////////////////////////////////////////////////////////////////////////////////////////////////// Method
        ////////////////////////////////////////////////////////////////////////////////////////// Public

        #region 변환하기 - Convert(sourceValue, targetType, parameter, language)

        /// <summary>
        /// 변환하기
        /// </summary>
        /// <param name="sourceValue">소스 값</param>
        /// <param name="targetType">타겟 타입</param>
        /// <param name="parameter">매개 변수</param>
        /// <param name="language">언어</param>
        /// <returns>변환 값</returns>
        public object Convert(object sourceValue, Type targetType, object parameter, string language)
        {
            return ((bool)sourceValue) ? parameter : null;
        }

        #endregion
        #region 역변환하기 - ConvertBack(sourceValue, targetType, parameter, language)

        /// <summary>
        /// 역변환하기
        /// </summary>
        /// <param name="sourceValue">소스 값</param>
        /// <param name="targetType">타겟 타입</param>
        /// <param name="parameter">매개 변수</param>
        /// <param name="language">언어</param>
        /// <returns>역변환 값</returns>
        public object ConvertBack(object sourceValue, Type targetType, object parameter, string language)
        {
            throw new NotImplementedException();
        }

        #endregion
    }
}

using System;

using Microsoft.UI.Xaml.Data;

namespace TestProject

{

/// <summary>

/// 불린값→값 변환자

/// </summary>

public sealed class BooleanToValueConverter : IValueConverter

{

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

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

#region 변환하기 - Convert(sourceValue, targetType, parameter, language)

/// <summary>

/// 변환하기

/// </summary>

/// <param name="sourceValue">소스 값</param>

/// <param name="targetType">타겟 타입</param>

/// <param name="parameter">매개 변수</param>

/// <param name="language">언어</param>

/// <returns>변환 값</returns>

public object Convert(object sourceValue, Type targetType, object parameter, string language)

{

return ((bool)sourceValue) ? parameter : null;

}

#endregion

#region 역변환하기 - ConvertBack(sourceValue, targetType, parameter, language)

/// <summary>

/// 역변환하기

/// </summary>

/// <param name="sourceValue">소스 값</param>

/// <param name="targetType">타겟 타입</param>

/// <param name="parameter">매개 변수</param>

/// <param name="language">언어</param>

/// <returns>역변환 값</returns>

public object ConvertBack(object sourceValue, Type targetType, object parameter, string language)

{

throw new NotImplementedException();

}

#endregion

}

▶ MainPage.xaml


<?xml version="1.0" encoding="utf-8"?>
<Page x:Class="TestProject.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:TestProject"
    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <Page.Resources>
        <local:BooleanToValueConverter x:Key="BooleanToValueConverterKey" />
    </Page.Resources>
    <Grid Margin="10">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>
        <PersonPicture Name="personPicture" Grid.Column="0"
            HorizontalAlignment="Center"
            VerticalAlignment="Center"
            Height="300"
            ProfilePicture="{Binding IsChecked,
                ElementName=profileImageRadioButton,
                Converter={StaticResource BooleanToValueConverterKey},
                ConverterParameter='https://learn.microsoft.com/windows/uwp/contacts-and-calendar/images/shoulder-tap-static-payload.png'}"
            DisplayName="{x:Bind displayNameRadioButton.IsChecked,
                Mode=OneWay,
                Converter={StaticResource BooleanToValueConverterKey},
                ConverterParameter='Jane Doe'}"
            Initials="{x:Bind initialsRadioButton.IsChecked,
                Mode=OneWay,
                Converter={StaticResource BooleanToValueConverterKey},
                ConverterParameter='SB'}" />
        <RadioButtons Grid.Column="1"
            HorizontalAlignment="Center"
            VerticalAlignment="Center"
            Header="Profile type">
            <RadioButton Name="profileImageRadioButton"
                Content="Profile Image"
                IsChecked="True" />
            <RadioButton Name="displayNameRadioButton"
                Content="Display Name" />
            <RadioButton Name="initialsRadioButton"
                Content="Initials" />
        </RadioButtons>
    </Grid>
</Page>

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

<Page x:Class="TestProject.MainPage"

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

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

xmlns:local="using:TestProject"

Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">

<Page.Resources>

<local:BooleanToValueConverter x:Key="BooleanToValueConverterKey" />

</Page.Resources>

<Grid.ColumnDefinitions>

</Grid.ColumnDefinitions>

<PersonPicture Name="personPicture" Grid.Column="0"

HorizontalAlignment="Center"

VerticalAlignment="Center"

Height="300"

ProfilePicture="{Binding IsChecked,

ElementName=profileImageRadioButton,

Converter={StaticResource BooleanToValueConverterKey},

ConverterParameter='https://learn.microsoft.com/windows/uwp/contacts-and-calendar/images/shoulder-tap-static-payload.png'}"

DisplayName="{x:Bind displayNameRadioButton.IsChecked,

Mode=OneWay,

Converter={StaticResource BooleanToValueConverterKey},

ConverterParameter='Jane Doe'}"

Initials="{x:Bind initialsRadioButton.IsChecked,

Mode=OneWay,

Converter={StaticResource BooleanToValueConverterKey},

ConverterParameter='SB'}" />

<RadioButtons Grid.Column="1"

HorizontalAlignment="Center"

VerticalAlignment="Center"

Header="Profile type">

<RadioButton Name="profileImageRadioButton"

Content="Profile Image"

IsChecked="True" />

<RadioButton Name="displayNameRadioButton"

Content="Display Name" />

<RadioButton Name="initialsRadioButton"

Content="Initials" />

</RadioButtons>

</Grid>

</Page>

TestProject.zip

[C#/WINUI3/.NET6] IValueConverter 인터페이스 : 진리 값→값 변환자 사용하기

■ IValueConverter 인터페이스에서 진리 값→값 변환자를 사용하는 방법을 보여준다. ▶ BooleanToValueConverter.cs


using System;

using Microsoft.UI.Xaml.Data;

/// <summary>
/// 불린값→값 변환자
/// </summary>
public sealed class BooleanToValueConverter : IValueConverter
{
    //////////////////////////////////////////////////////////////////////////////////////////////////// Method
    ////////////////////////////////////////////////////////////////////////////////////////// Public

    #region 변환하기 - Convert(sourceValue, targetType, parameter, language)

    /// <summary>
    /// 변환하기
    /// </summary>
    /// <param name="sourceValue">소스 값</param>
    /// <param name="targetType">타겟 타입</param>
    /// <param name="parameter">매개 변수</param>
    /// <param name="language">언어</param>
    /// <returns>변환 값</returns>
    public object Convert(object sourceValue, Type targetType, object parameter, string language)
    {
        return ((bool)sourceValue) ? parameter : null;
    }

    #endregion
    #region 역변환하기 - ConvertBack(sourceValue, targetType, parameter, language)

    /// <summary>
    /// 역변환하기
    /// </summary>
    /// <param name="sourceValue">소스 값</param>
    /// <param name="targetType">타겟 타입</param>
    /// <param name="parameter">매개 변수</param>
    /// <param name="language">언어</param>
    /// <returns>역변환 값</returns>
    public object ConvertBack(object sourceValue, Type targetType, object parameter, string language)
    {
        throw new NotImplementedException();
    }

    #endregion
}

using System;

using Microsoft.UI.Xaml.Data;

/// <summary>

/// 불린값→값 변환자

/// </summary>

public sealed class BooleanToValueConverter : IValueConverter

{

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

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

#region 변환하기 - Convert(sourceValue, targetType, parameter, language)

/// <summary>

/// 변환하기

/// </summary>

/// <param name="sourceValue">소스 값</param>

/// <param name="targetType">타겟 타입</param>

/// <param name="parameter">매개 변수</param>

/// <param name="language">언어</param>

/// <returns>변환 값</returns>

public object Convert(object sourceValue, Type targetType, object parameter, string language)

{

return ((bool)sourceValue) ? parameter : null;

}

#endregion

#region 역변환하기 - ConvertBack(sourceValue, targetType, parameter, language)

/// <summary>

/// 역변환하기

/// </summary>

/// <param name="sourceValue">소스 값</param>

/// <param name="targetType">타겟 타입</param>

/// <param name="parameter">매개 변수</param>

/// <param name="language">언어</param>

/// <returns>역변환 값</returns>

public object ConvertBack(object sourceValue, Type targetType, object parameter, string language)

{

throw new NotImplementedException();

}

#endregion

}

[C#/WINUI3/.NET6] IValueConverter 인터페이스 : NULLABLE 진리 값↔진리 값 변환자 사용하기

■ IValueConverter 인터페이스에서 NULLABLE 진리 값↔진리 값 변환자를 사용하는 방법을 보여준다. ▶ NullableBooleanToBooleanConverter.cs


using System;

using Microsoft.UI.Xaml.Data;

/// <summary>
/// NULL 가능한 불린값↔불린값 변환자
/// </summary>
public class NullableBooleanToBooleanConverter : IValueConverter
{
    //////////////////////////////////////////////////////////////////////////////////////////////////// Method
    ////////////////////////////////////////////////////////////////////////////////////////// Public

    #region 변환하기 - Convert(sourceValue, targetType, parameter, language)

    /// <summary>
    /// 변환하기
    /// </summary>
    /// <param name="sourceValue">소스 값</param>
    /// <param name="targetType">타겟 타입</param>
    /// <param name="parameter">매개 변수</param>
    /// <param name="language">언어</param>
    /// <returns>변환 값</returns>
    public object Convert(object sourceValue, Type targetType, object parameter, string language)
    {
        if(sourceValue is bool?)
        {
            return (bool)sourceValue;
        }

        return false;
    }

    #endregion
    #region 역변환하기 - ConvertBack(sourceValue, targetType, parameter, language)

    /// <summary>
    /// 역변환하기
    /// </summary>
    /// <param name="sourceValue">소스 값</param>
    /// <param name="targetType">타겟 타입</param>
    /// <param name="parameter">매개 변수</param>
    /// <param name="language">언어</param>
    /// <returns>역변환 값</returns>
    public object ConvertBack(object sourceValue, Type targetType, object parameter, string language)
    {
        if(sourceValue is bool)
        {
            return (bool)sourceValue;
        }

        return false;
    }

    #endregion
}

using System;

using Microsoft.UI.Xaml.Data;

/// <summary>

/// NULL 가능한 불린값↔불린값 변환자

/// </summary>

public class NullableBooleanToBooleanConverter : IValueConverter

{

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

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

#region 변환하기 - Convert(sourceValue, targetType, parameter, language)

/// <summary>

/// 변환하기

/// </summary>

/// <param name="sourceValue">소스 값</param>

/// <param name="targetType">타겟 타입</param>

/// <param name="parameter">매개 변수</param>

/// <param name="language">언어</param>

/// <returns>변환 값</returns>

public object Convert(object sourceValue, Type targetType, object parameter, string language)

{

if(sourceValue is bool?)

{

return (bool)sourceValue;

}

return false;

}

#endregion

#region 역변환하기 - ConvertBack(sourceValue, targetType, parameter, language)

/// <summary>

/// 역변환하기

/// </summary>

/// <param name="sourceValue">소스 값</param>

/// <param name="targetType">타겟 타입</param>

/// <param name="parameter">매개 변수</param>

/// <param name="language">언어</param>

/// <returns>역변환 값</returns>

public object ConvertBack(object sourceValue, Type targetType, object parameter, string language)

{

if(sourceValue is bool)

{

return (bool)sourceValue;

}

return false;

}

#endregion

}

[C#/WINUI3/.NET6] MediaPlayerElement 엘리먼트 : AutoPlay 속성 사용하기

■ MediaPlayerElement 엘리먼트의 AutoPlay 속성을 사용하는 방법을 보여준다. ▶ MainWindow.xaml


<?xml version="1.0" encoding="utf-8"?>
<Window x:Class="TestProject.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="TestProject">
    <MediaPlayerElement Name="mediaPlayerElement"
        Width="400"
        Height="300"
        AutoPlay="True"
        Source="ms-appx:///MEDIA/fishes.wmv" />
</Window>

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

<Window x:Class="TestProject.MainWindow"

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

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

Title="TestProject">

<MediaPlayerElement Name="mediaPlayerElement"

Width="400"

Height="300"

AutoPlay="True"

Source="ms-appx:///MEDIA/fishes.wmv" />

</Window>

TestProject.zip

[C#/WINUI3/.NET6] MediaPlayerElement 엘리먼트 : AreTransportControlsEnabled 속성 사용하기

■ MediaPlayerElement 엘리먼트의 AreTransportControlsEnabled 속성을 사용하는 방법을 보여준다. ▶ MainWindow.xaml


<?xml version="1.0" encoding="utf-8"?>
<Window x:Class="TestProject.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="TestProject">
    <MediaPlayerElement Name="mediaPlayerElement"
        HorizontalAlignment="Center"
        VerticalAlignment="Center"
        Width="400"
        Height="300"
        AreTransportControlsEnabled="True"
        AutoPlay="False"
        Source="ms-appx:///MEDIA/ladybug.wmv" />
</Window>

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

<Window x:Class="TestProject.MainWindow"

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

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

Title="TestProject">

<MediaPlayerElement Name="mediaPlayerElement"

HorizontalAlignment="Center"

VerticalAlignment="Center"

Width="400"

Height="300"

AreTransportControlsEnabled="True"

AutoPlay="False"

Source="ms-appx:///MEDIA/ladybug.wmv" />

</Window>

▶ MainWindow.xaml.cs


using Microsoft.UI.Xaml;

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

        #region 생성자 - MainWindow()

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

            this.mediaPlayerElement.MediaPlayer.Play();
        }

        #endregion
    }
}

using Microsoft.UI.Xaml;

namespace TestProject

{

/// <summary>

/// 메인 윈도우

/// </summary>

public sealed partial class MainWindow : Window

{

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

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

#region 생성자 - MainWindow()

/// <summary>

/// 생성자

/// </summary>

public MainWindow()

{

InitializeComponent();

this.mediaPlayerElement.MediaPlayer.Play();

}

#endregion

}

TestProject.zip

[C#/WINUI3/.NET6] Image 엘리먼트 : SVG 이미지 표시하기

■ Image 엘리먼트에서 SVG 이미지를 표시하는 방법을 보여준다. ▶ MainWindow.xaml


<?xml version="1.0" encoding="utf-8"?>
<Window x:Class="TestProject.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="TestProject">
    <Image
        HorizontalAlignment="Center"
        Height="300"
        Source="/IMAGE/MirrorPCConsent.svg" />
</Window>

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

<Window x:Class="TestProject.MainWindow"

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

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

Title="TestProject">

<Image

HorizontalAlignment="Center"

Height="300"

Source="/IMAGE/MirrorPCConsent.svg" />

</Window>

TestProject.zip

[C#/WINUI3/.NET6] Image 엘리먼트 : NineGrid 속성 사용하기

■ Image 엘리먼트의 NineGrid 속성을 사용하는 방법을 보여준다. ▶ MainWindow.xaml


<?xml version="1.0" encoding="utf-8"?>
<Window x:Class="TestProject.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="TestProject">
    <StackPanel>
        <TextBlock
            HorizontalAlignment="Center"
            Text="The normal image" />
        <Image
            HorizontalAlignment="Center"
            Margin="0 10 0 0"
            Height="82"
            Source="/IMAGE/ninegrid.gif" />
        <TextBlock
            HorizontalAlignment="Center"
            Margin="0 10 0 0"
            Text="Image stretched evenly" />
        <Image
            HorizontalAlignment="Center"
            Margin="0 10 0 0"
            Height="164"
            NineGrid="3 3 3 3"
            Source="/IMAGE/ninegrid.gif" />
        <TextBlock
            HorizontalAlignment="Center"
            Margin="0 10 0 0"
            Text="Image stretched using nine grid" />
        <Image
            HorizontalAlignment="Center"
            Margin="0 10 0 0"
            Height="164"
            NineGrid="30 20 30 20"
            Source="/IMAGE/ninegrid.gif" />
    </StackPanel>
</Window>

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

<Window x:Class="TestProject.MainWindow"

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

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

Title="TestProject">

<TextBlock

HorizontalAlignment="Center"

Text="The normal image" />

<Image

HorizontalAlignment="Center"

Margin="0 10 0 0"

Height="82"

Source="/IMAGE/ninegrid.gif" />

<TextBlock

HorizontalAlignment="Center"

Margin="0 10 0 0"

Text="Image stretched evenly" />

<Image

HorizontalAlignment="Center"

Margin="0 10 0 0"

Height="164"

NineGrid="3 3 3 3"

Source="/IMAGE/ninegrid.gif" />

<TextBlock

HorizontalAlignment="Center"

Margin="0 10 0 0"

Text="Image stretched using nine grid" />

<Image

HorizontalAlignment="Center"

Margin="0 10 0 0"

Height="164"

NineGrid="30 20 30 20"

Source="/IMAGE/ninegrid.gif" />

</StackPanel>

</Window>

TestProject.zip

[C#/WINUI3/.NET6] Image 엘리먼트 : Stretch 속성 사용하기

■ Image 엘리먼트의 Stretch 속성을 사용하는 방법을 보여준다. ▶ MainWindow.xaml


<?xml version="1.0" encoding="utf-8"?>
<Window x:Class="TestProject.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="TestProject">
    <Grid Margin="10">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>
        <Image Name="image" Grid.Column="0"
            HorizontalAlignment="Center"
            VerticalAlignment="Center"
            Width="200"
            Height="200"
            Stretch="None"
            Source="/IMAGE/valley.jpg" />
        <RadioButtons Grid.Column="1"
            HorizontalAlignment="Center"
            VerticalAlignment="Center"
            Header="Image stretch mode">
            <RadioButton Name="noneStretchRadioButton"
                GroupName="ImageStretch"
                Content="None" />
            <RadioButton Name="fillStretchRadioButton"
                GroupName="ImageStretch"
                Content="Fill" />
            <RadioButton Name="uniformStretchRadioButton"
                GroupName="ImageStretch"
                Content="Uniform" />
            <RadioButton Name="uniformToFillStretchRadioButton"
                GroupName="ImageStretch"
                Content="UniformToFill" />
        </RadioButtons>
    </Grid>
</Window>

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

<Window x:Class="TestProject.MainWindow"

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

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

Title="TestProject">

<Grid.ColumnDefinitions>

</Grid.ColumnDefinitions>

<Image Name="image" Grid.Column="0"

HorizontalAlignment="Center"

VerticalAlignment="Center"

Width="200"

Height="200"

Stretch="None"

Source="/IMAGE/valley.jpg" />

<RadioButtons Grid.Column="1"

HorizontalAlignment="Center"

VerticalAlignment="Center"

Header="Image stretch mode">

<RadioButton Name="noneStretchRadioButton"

GroupName="ImageStretch"

Content="None" />

<RadioButton Name="fillStretchRadioButton"

GroupName="ImageStretch"

Content="Fill" />

<RadioButton Name="uniformStretchRadioButton"

GroupName="ImageStretch"

Content="Uniform" />

<RadioButton Name="uniformToFillStretchRadioButton"

GroupName="ImageStretch"

Content="UniformToFill" />

</RadioButtons>

</Grid>

</Window>

▶ MainWindow.xaml.cs


using System;

using Microsoft.UI.Xaml;
using Microsoft.UI.Xaml.Controls;
using Microsoft.UI.Xaml.Media;

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

        #region 생성자 - MainWindow()

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

            this.noneStretchRadioButton.Checked          += stretchRadioButton_Checked;
            this.fillStretchRadioButton.Checked          += stretchRadioButton_Checked;
            this.uniformStretchRadioButton.Checked       += stretchRadioButton_Checked;
            this.uniformToFillStretchRadioButton.Checked += stretchRadioButton_Checked;

            this.noneStretchRadioButton.IsChecked = true;
        }

        #endregion

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

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

        /// <summary>
        /// Stretch 라디오 버튼 체크시 처리하기
        /// </summary>
        /// <param name="sender">이벤트 발생자</param>
        /// <param name="e">이벤트 인자</param>
        private void stretchRadioButton_Checked(object sender, RoutedEventArgs e)
        {
            if(this.image != null)
            {
                string  stretchString = (sender as RadioButton).Content.ToString();
                Stretch stretch       = (Stretch)Enum.Parse(typeof(Stretch), stretchString);

                this.image.Stretch = stretch;
            }
        }

        #endregion
    }
}

using System;

using Microsoft.UI.Xaml;

using Microsoft.UI.Xaml.Controls;

using Microsoft.UI.Xaml.Media;

namespace TestProject

{

/// <summary>

/// 메인 윈도우

/// </summary>

public sealed partial class MainWindow : Window

{

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

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

#region 생성자 - MainWindow()

/// <summary>

/// 생성자

/// </summary>

public MainWindow()

{

InitializeComponent();

this.noneStretchRadioButton.Checked += stretchRadioButton_Checked;

this.fillStretchRadioButton.Checked += stretchRadioButton_Checked;

this.uniformStretchRadioButton.Checked += stretchRadioButton_Checked;

this.uniformToFillStretchRadioButton.Checked += stretchRadioButton_Checked;

this.noneStretchRadioButton.IsChecked = true;

}

#endregion

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

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

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

/// <summary>

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

/// </summary>

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

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

private void stretchRadioButton_Checked(object sender, RoutedEventArgs e)

{

if(this.image != null)

{

string stretchString = (sender as RadioButton).Content.ToString();

Stretch stretch = (Stretch)Enum.Parse(typeof(Stretch), stretchString);

this.image.Stretch = stretch;

}

#endregion

}

TestProject.zip

[C#/WINUI3/.NET6] Image 엘리먼트 사용하기

■ Image 엘리먼트를 사용하는 방법을 보여준다. ▶ MainWindow.xaml


<?xml version="1.0" encoding="utf-8"?>
<Window x:Class="TestProject.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="TestProject">
    <StackPanel
        HorizontalAlignment="Center"
        VerticalAlignment="Center">
        <Image
            HorizontalAlignment="Center"
            Height="100"
            Source="/IMAGE/treetops.jpg" />
        <Image
            HorizontalAlignment="Center"
            Margin="0 10 0 0"
            Height="100">
            <Image.Source>
                <BitmapImage
                    DecodePixelHeight="100"
                    UriSource="/IMAGE/treetops.jpg" />
            </Image.Source>
        </Image>
    </StackPanel>
</Window>

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

<Window x:Class="TestProject.MainWindow"

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

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

Title="TestProject">

<StackPanel

HorizontalAlignment="Center"

VerticalAlignment="Center">

<Image

HorizontalAlignment="Center"

Height="100"

Source="/IMAGE/treetops.jpg" />

<Image

HorizontalAlignment="Center"

Margin="0 10 0 0"

Height="100">

<Image.Source>

<BitmapImage

DecodePixelHeight="100"

UriSource="/IMAGE/treetops.jpg" />

</Image.Source>

</Image>

</StackPanel>

</Window>

TestProject.zip

[TOOL/WORDPRESS] 워드프레스 사이트에서 Robots.txt 설정하기

■ 워드프레스 사이트에서 Robots.txt를 설정하는 방법을 보여준다. • robots.txt 파일은 웹 사이트에서 robot의 접근을 제어하는 파일이다. • robots.txt 파일은 반드시 웹 사이트의

[TOOL/WORDPRESS] 워드프레스 사이트 주소에 ?ckattempt=1~3이 추가되고 리디렉션되는 경우 처리하기

■ 워드프레스 사이트 주소에 ?ckattempt=1~3이 추가되고 리디렉션되는 경우 처리하는 방법을 보여준다. 카페24를 이용하는 사이트에서 주로 발생되고 있다. 카페24의 스팸 쉴드가 문제의 원인으로

[C#/WINUI3/.NET6] MediaPlayerElement 엘리먼트 : MediaCapture 객체를 사용해 카메라 캡처하기

■ MediaPlayerElement 엘리먼트에서 MediaCapture 객체를 사용해 카메라 캡처하는 방법을 보여준다. ▶ ExpandToFillGrid.cs


using Windows.Foundation;

using Microsoft.UI.Xaml.Controls;

namespace TestProject
{
    /// <summary>
    /// 전체 확장 그리드
    /// </summary>
    public class ExpandToFillGrid : Grid
    {
        //////////////////////////////////////////////////////////////////////////////////////////////////// Method
        ////////////////////////////////////////////////////////////////////////////////////////// Protected

        #region 측정하기 (오버라이드) - MeasureOverride(availableSize)

        /// <summary>
        /// 측정하기 (오버라이드)
        /// </summary>
        /// <param name="availableSize">이용 가능 크기</param>
        /// <returns>측정 크기</returns>
        protected override Size MeasureOverride(Size availableSize)
        {
            Size desiredSize = base.MeasureOverride(new Size(availableSize.Width, 100));

            return desiredSize;
        }

        #endregion
    }
}

using Windows.Foundation;

using Microsoft.UI.Xaml.Controls;

namespace TestProject

{

/// <summary>

/// 전체 확장 그리드

/// </summary>

public class ExpandToFillGrid : Grid

{

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

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

#region 측정하기 (오버라이드) - MeasureOverride(availableSize)

/// <summary>

/// 측정하기 (오버라이드)

/// </summary>

/// <param name="availableSize">이용 가능 크기</param>

/// <returns>측정 크기</returns>

protected override Size MeasureOverride(Size availableSize)

{

Size desiredSize = base.MeasureOverride(new Size(availableSize.Width, 100));

return desiredSize;

}

#endregion

}

▶ MainWindow.xaml


<?xml version="1.0" encoding="utf-8"?>
<Window x:Class="TestProject.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:TestProject"
    Title="TestProject">
    <Grid Margin="10">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*"    />
            <ColumnDefinition Width="Auto" />
        </Grid.ColumnDefinitions>
        <Grid
            MinWidth="400"
            MinHeight="300"
            RowSpacing="10"
            ColumnSpacing="4"
            RowDefinitions="Auto,*"
            ColumnDefinitions="*,100">
            <TextBlock Name="displayNameTextBlock" Grid.Row="0" Grid.Column="0"
                VerticalAlignment="Center" />
            <MediaPlayerElement Name="mediaPlayerElement" Grid.Row="1" Grid.Column="0"
                Stretch="Uniform"
                AutoPlay="True" />
            <TextBlock Name="captureTextBlock" Grid.Row="0" Grid.Column="1"
                VerticalAlignment="Center"
                Text="Captured : "
                Visibility="Collapsed" />
            <Grid Name="captureGrid" Grid.Row="1" Grid.Column="1"
                Margin="5 0 5 0">
                <ScrollViewer VerticalScrollMode="Enabled">
                    <StackPanel Name="captureImageStackPanel"
                        Spacing="2" />
                </ScrollViewer>
            </Grid>
        </Grid>
        <StackPanel Grid.Column="1"
            HorizontalAlignment="Center"
            VerticalAlignment="Center"
            Margin="5 0 0 0">
            <ToggleSwitch Name="mirrorTogglePreviewSwitch"
                Header="Mirror preview"
                IsOn="False"
                ToolTipService.ToolTip="Mirrors only the preview, not captured photos" />
            <Button Name="captureButton"
                Content="Capture Photo" />
        </StackPanel>
    </Grid>
</Window>

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

<Window x:Class="TestProject.MainWindow"

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

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

xmlns:local="using:TestProject"

Title="TestProject">

<Grid.ColumnDefinitions>

</Grid.ColumnDefinitions>

<Grid

MinWidth="400"

MinHeight="300"

RowSpacing="10"

ColumnSpacing="4"

RowDefinitions="Auto,*"

ColumnDefinitions="*,100">

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

VerticalAlignment="Center" />

<MediaPlayerElement Name="mediaPlayerElement" Grid.Row="1" Grid.Column="0"

Stretch="Uniform"

AutoPlay="True" />

<TextBlock Name="captureTextBlock" Grid.Row="0" Grid.Column="1"

VerticalAlignment="Center"

Text="Captured : "

Visibility="Collapsed" />

<Grid Name="captureGrid" Grid.Row="1" Grid.Column="1"

Margin="5 0 5 0">

<StackPanel Name="captureImageStackPanel"

Spacing="2" />

</ScrollViewer>

</Grid>

<StackPanel Grid.Column="1"

HorizontalAlignment="Center"

VerticalAlignment="Center"

Margin="5 0 0 0">

<ToggleSwitch Name="mirrorTogglePreviewSwitch"

Header="Mirror preview"

IsOn="False"

ToolTipService.ToolTip="Mirrors only the preview, not captured photos" />

<Button Name="captureButton"

Content="Capture Photo" />

</StackPanel>

</Grid>

</Window>

▶ MainWindow.xaml.cs


using System;
using System.Collections.Generic;
using System.Linq;

using Microsoft.UI.Xaml;
using Microsoft.UI.Xaml.Controls;
using Microsoft.UI.Xaml.Media;
using Microsoft.UI.Xaml.Media.Imaging;

using Windows.Foundation;
using Windows.Media.Capture;
using Windows.Media.Capture.Frames;
using Windows.Media.Core;
using Windows.Media.MediaProperties;
using Windows.Storage.Streams;

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

        #region Field

        /// <summary>
        /// 미디어 프레임 소스 그룹
        /// </summary>
        private MediaFrameSourceGroup mediaFrameSourceGroup;

        /// <summary>
        /// 미디어 캡처
        /// </summary>
        private MediaCapture mediaCapture;

        #endregion

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

        #region 생성자 - MainWindow()

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

            StartMediaPlayerElement();

            ExpandToFillGrid expandToFillGrid = new ExpandToFillGrid();

            ScrollViewer scrollViewer = this.captureGrid.Children[0] as ScrollViewer;

            this.captureGrid.Children.Remove(scrollViewer);

            this.captureGrid.Children.Add(expandToFillGrid);

            expandToFillGrid.Children.Add(scrollViewer);

            this.mirrorTogglePreviewSwitch.Toggled += mirrorPreviewToggleSwitch_Toggled;
            this.captureButton.Click               += captureButton_Click;
        }

        #endregion

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

        #region Mirror preview 토글 스위치 토글시 처리하기 - mirrorPreviewToggleSwitch_Toggled(sender, e)

        /// <summary>
        /// Mirror preview 토글 스위치 토글시 처리하기
        /// </summary>
        /// <param name="sender">이벤트 발생자</param>
        /// <param name="e">이벤트 인자</param>
        private void mirrorPreviewToggleSwitch_Toggled(object sender, RoutedEventArgs e)
        {
            if(this.mirrorTogglePreviewSwitch.IsOn)
            {
                this.mediaPlayerElement.RenderTransform       = new ScaleTransform() { ScaleX = -1 };
                this.mediaPlayerElement.RenderTransformOrigin = new Point(0.5, 0.5);
            }
            else
            {
                this.mediaPlayerElement.RenderTransform = null;
            }
        }

        #endregion
        #region Capture 버튼 클릭시 처리하기 - captureButton_Click(sender, e)

        /// <summary>
        /// Capture 버튼 클릭시 처리하기
        /// </summary>
        /// <param name="sender">이벤트 발생자</param>
        /// <param name="e">이벤트 인자</param>
        private async void captureButton_Click(object sender, RoutedEventArgs e)
        {
            ImageEncodingProperties properties = ImageEncodingProperties.CreateJpeg();

            InMemoryRandomAccessStream stream = new InMemoryRandomAccessStream();

            await this.mediaCapture.CapturePhotoToStreamAsync(properties, stream);

            stream.Seek(0);

            BitmapImage bitmapImage = new BitmapImage();

            await bitmapImage.SetSourceAsync(stream);

            Image image = new Image() { Source = bitmapImage };

            this.captureImageStackPanel.Children.Insert(0, image);

            this.captureTextBlock.Visibility = Visibility.Visible;
        }

        #endregion

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

        #region 미디어 플레이어 엘리먼트 시작하기 - StartMediaPlayerElement()

        /// <summary>
        /// 미디어 플레이어 엘리먼트 시작하기
        /// </summary>
        async private void StartMediaPlayerElement()
        {
            IReadOnlyList<MediaFrameSourceGroup> mediaFrameSourceGroupList = await MediaFrameSourceGroup.FindAllAsync();

            if(mediaFrameSourceGroupList.Count == 0)
            {
                this.displayNameTextBlock.Text = "No camera devices found.";

                return;
            }

            this.mediaFrameSourceGroup = mediaFrameSourceGroupList.First();

            this.displayNameTextBlock.Text = "Viewing : " + this.mediaFrameSourceGroup.DisplayName;

            this. mediaCapture = new MediaCapture();

            MediaCaptureInitializationSettings settings = new MediaCaptureInitializationSettings()
            {
                SourceGroup          = this.mediaFrameSourceGroup,
                SharingMode          = MediaCaptureSharingMode.SharedReadOnly,
                StreamingCaptureMode = StreamingCaptureMode.Video,
                MemoryPreference     = MediaCaptureMemoryPreference.Cpu
            };

            await this.mediaCapture.InitializeAsync(settings);

            MediaFrameSource mediaFrameSource = this.mediaCapture.FrameSources[this.mediaFrameSourceGroup.SourceInfos[0].Id];

            this.mediaPlayerElement.Source = MediaSource.CreateFromMediaFrameSource(mediaFrameSource);
        }

        #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

using System;

using System.Collections.Generic;

using System.Linq;

using Microsoft.UI.Xaml;

using Microsoft.UI.Xaml.Controls;

using Microsoft.UI.Xaml.Media;

using Microsoft.UI.Xaml.Media.Imaging;

using Windows.Foundation;

using Windows.Media.Capture;

using Windows.Media.Capture.Frames;

using Windows.Media.Core;

using Windows.Media.MediaProperties;

using Windows.Storage.Streams;

namespace TestProject

{

/// <summary>

/// 메인 윈도우

/// </summary>

public sealed partial class MainWindow : Window

{

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

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

#region Field

/// <summary>

/// 미디어 프레임 소스 그룹

/// </summary>

private MediaFrameSourceGroup mediaFrameSourceGroup;

/// <summary>

/// 미디어 캡처

/// </summary>

private MediaCapture mediaCapture;

#endregion

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

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

#region 생성자 - MainWindow()

/// <summary>

/// 생성자

/// </summary>

public MainWindow()

{

InitializeComponent();

StartMediaPlayerElement();

ExpandToFillGrid expandToFillGrid = new ExpandToFillGrid();

ScrollViewer scrollViewer = this.captureGrid.Children[0] as ScrollViewer;

this.captureGrid.Children.Remove(scrollViewer);

this.captureGrid.Children.Add(expandToFillGrid);

expandToFillGrid.Children.Add(scrollViewer);

this.mirrorTogglePreviewSwitch.Toggled += mirrorPreviewToggleSwitch_Toggled;

this.captureButton.Click += captureButton_Click;

}

#endregion

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

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

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

#region Mirror preview 토글 스위치 토글시 처리하기 - mirrorPreviewToggleSwitch_Toggled(sender, e)

/// <summary>

/// Mirror preview 토글 스위치 토글시 처리하기

/// </summary>

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

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

private void mirrorPreviewToggleSwitch_Toggled(object sender, RoutedEventArgs e)

{

if(this.mirrorTogglePreviewSwitch.IsOn)

{

this.mediaPlayerElement.RenderTransform = new ScaleTransform() { ScaleX = -1 };

this.mediaPlayerElement.RenderTransformOrigin = new Point(0.5, 0.5);

}

else

{

this.mediaPlayerElement.RenderTransform = null;

}

#endregion

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

/// <summary>

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

/// </summary>

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

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

private async void captureButton_Click(object sender, RoutedEventArgs e)

{

ImageEncodingProperties properties = ImageEncodingProperties.CreateJpeg();

InMemoryRandomAccessStream stream = new InMemoryRandomAccessStream();

await this.mediaCapture.CapturePhotoToStreamAsync(properties, stream);

stream.Seek(0);

BitmapImage bitmapImage = new BitmapImage();

await bitmapImage.SetSourceAsync(stream);

Image image = new Image() { Source = bitmapImage };

this.captureImageStackPanel.Children.Insert(0, image);

this.captureTextBlock.Visibility = Visibility.Visible;

}

#endregion

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

#region 미디어 플레이어 엘리먼트 시작하기 - StartMediaPlayerElement()

/// <summary>

/// 미디어 플레이어 엘리먼트 시작하기

/// </summary>

async private void StartMediaPlayerElement()

{

IReadOnlyList<MediaFrameSourceGroup> mediaFrameSourceGroupList = await MediaFrameSourceGroup.FindAllAsync();

if(mediaFrameSourceGroupList.Count == 0)

{

this.displayNameTextBlock.Text = "No camera devices found.";

return;

}

this.mediaFrameSourceGroup = mediaFrameSourceGroupList.First();

this.displayNameTextBlock.Text = "Viewing : " + this.mediaFrameSourceGroup.DisplayName;

this. mediaCapture = new MediaCapture();

MediaCaptureInitializationSettings settings = new MediaCaptureInitializationSettings()

{

SourceGroup = this.mediaFrameSourceGroup,

SharingMode = MediaCaptureSharingMode.SharedReadOnly,

StreamingCaptureMode = StreamingCaptureMode.Video,

MemoryPreference = MediaCaptureMemoryPreference.Cpu

};

await this.mediaCapture.InitializeAsync(settings);

MediaFrameSource mediaFrameSource = this.mediaCapture.FrameSources[this.mediaFrameSourceGroup.SourceInfos[0].Id];

this.mediaPlayerElement.Source = MediaSource.CreateFromMediaFrameSource(mediaFrameSource);

}

#endregion

}

TestProject.zip

[C#/WINUI3/.NET6] AnimatedVisualPlayer 엘리먼트 : 로띠 애니메이션 만들기

■ AnimatedVisualPlayer 엘리먼트를 사용해 로띠 애니메이션을 만드는 방법을 보여준다. AnimatedVisualPlayer는 Adobe AfterEffects를 사용하여 생성되고 Lottie-Windows를 사용하여 Microsoft.UI.Composition 개체로 변환된 애니메이션을 사용한다. 여기에

[C#/WINUI3/.NET6] Viewbox 엘리먼트 : Stretch/StretchDirection 속성 사용하기

■ Viewbox 엘리먼트의 Stretch/StretchDirection 속성을 사용하는 방법을 보여준다. ▶ MainWindow.xaml


<?xml version="1.0" encoding="utf-8"?>
<Window x:Class="TestProject.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="TestProject">
    <Grid Margin="10">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>
        <Viewbox Name="viewbox" Grid.Column="0"
            HorizontalAlignment="Center"
            VerticalAlignment="Center"
            Width="{x:Bind sizeSlider.Value, Mode=OneWay}"
            Height="{x:Bind sizeSlider.Value, Mode=OneWay}"
            Stretch="Uniform"
            StretchDirection="Both">
            <Border
                BorderThickness="15"
                BorderBrush="Gray">
                <StackPanel Background="DarkGray">
                    <StackPanel Orientation="Horizontal">
                        <Rectangle
                            Width="40"
                            Height="10"
                            Fill="Blue" />
                        <Rectangle
                            Width="40"
                            Height="10"
                            Fill="Green" />
                        <Rectangle
                            Width="40"
                            Height="10"
                            Fill="Red" />
                        <Rectangle
                            Width="40"
                            Height="10"
                            Fill="Yellow" />
                    </StackPanel>
                    <Image Source="ms-appx:///IMAGE/Slices.png" />
                    <TextBlock
                        HorizontalAlignment="Center"
                        Text="This is text." />
                </StackPanel>
            </Border>
        </Viewbox>
        <StackPanel Grid.Column="1"
            HorizontalAlignment="Center"
            VerticalAlignment="Center"
            Width="200">
            <Slider Name="sizeSlider"
                Header="Width/Height"
                Minimum="20"
                Maximum="300"
                Value="200" />
            <RadioButtons Header="Stretch">
                <RadioButton Name="noneStretchRadioButton"
                    Tag="None"
                    Content="None" />
                <RadioButton Name="fillStretchRadioButton"
                    Tag="Fill"
                    Content="Fill" />
                <RadioButton Name="uniformStretchRadioButton"
                    Tag="Uniform"
                    Content="Uniform" />
                <RadioButton Name="uniformToFillStretchRadioButton"
                    Tag="UniformToFill"
                    Content="UniformToFill" />
            </RadioButtons>
            <RadioButtons Header="StretchDirection">
                <RadioButton Name="upOnlystretchDirectionRadioButton"
                    GroupName="StretchDirection"
                    Tag="UpOnly"
                    Content="UpOnly" />
                <RadioButton Name="downOnlystretchDirectionRadioButton"
                    GroupName="StretchDirection"
                    Tag="DownOnly"
                    Content="DownOnly" />
                <RadioButton Name="bothstretchDirectionRadioButton"
                    GroupName="StretchDirection"
                    Tag="Both"
                    Content="Both" />
            </RadioButtons>
        </StackPanel>
    </Grid>
</Window>

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

<Window x:Class="TestProject.MainWindow"

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

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

Title="TestProject">

<Grid.ColumnDefinitions>

</Grid.ColumnDefinitions>

<Viewbox Name="viewbox" Grid.Column="0"

HorizontalAlignment="Center"

VerticalAlignment="Center"

Width="{x:Bind sizeSlider.Value, Mode=OneWay}"

Height="{x:Bind sizeSlider.Value, Mode=OneWay}"

Stretch="Uniform"

StretchDirection="Both">

<Border

BorderThickness="15"

BorderBrush="Gray">

<Rectangle

Width="40"

Height="10"

Fill="Blue" />

<Rectangle

Width="40"

Height="10"

Fill="Green" />

<Rectangle

Width="40"

Height="10"

Fill="Red" />

<Rectangle

Width="40"

Height="10"

Fill="Yellow" />

</StackPanel>

<TextBlock

HorizontalAlignment="Center"

Text="This is text." />

</StackPanel>

</Border>

</Viewbox>

<StackPanel Grid.Column="1"

HorizontalAlignment="Center"

VerticalAlignment="Center"

Width="200">

<Slider Name="sizeSlider"

Header="Width/Height"

Minimum="20"

Maximum="300"

Value="200" />

<RadioButton Name="noneStretchRadioButton"

Tag="None"

Content="None" />

<RadioButton Name="fillStretchRadioButton"

Tag="Fill"

Content="Fill" />

<RadioButton Name="uniformStretchRadioButton"

Tag="Uniform"

Content="Uniform" />

<RadioButton Name="uniformToFillStretchRadioButton"

Tag="UniformToFill"

Content="UniformToFill" />

</RadioButtons>

<RadioButton Name="upOnlystretchDirectionRadioButton"

GroupName="StretchDirection"

Tag="UpOnly"

Content="UpOnly" />

<RadioButton Name="downOnlystretchDirectionRadioButton"

GroupName="StretchDirection"

Tag="DownOnly"

Content="DownOnly" />

<RadioButton Name="bothstretchDirectionRadioButton"

GroupName="StretchDirection"

Tag="Both"

Content="Both" />

</RadioButtons>

</StackPanel>

</Grid>

</Window>

▶ MainWindow.xaml.cs


using Microsoft.UI.Xaml;
using Microsoft.UI.Xaml.Controls;
using Microsoft.UI.Xaml.Media;

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

        #region 생성자 - MainWindow()

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

            this.noneStretchRadioButton.Checked          += stretchRadioButton_Checked;
            this.fillStretchRadioButton.Checked          += stretchRadioButton_Checked;
            this.uniformStretchRadioButton.Checked       += stretchRadioButton_Checked;
            this.uniformToFillStretchRadioButton.Checked += stretchRadioButton_Checked;

            this.upOnlystretchDirectionRadioButton.Checked   += stretchDirectionRadioButton_Checked;
            this.downOnlystretchDirectionRadioButton.Checked += stretchDirectionRadioButton_Checked;
            this.bothstretchDirectionRadioButton.Checked     += stretchDirectionRadioButton_Checked;

            this.uniformStretchRadioButton.IsChecked       = true;
            this.bothstretchDirectionRadioButton.IsChecked = true;
        }

        #endregion

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

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

        /// <summary>
        /// Stretch 라디오 버튼 체크시 처리하기
        /// </summary>
        /// <param name="sender">이벤트 발생자</param>
        /// <param name="e">이벤트 인자</param>
        private void stretchRadioButton_Checked(object sender, RoutedEventArgs e)
        {
            if(sender is RadioButton radioButton && this.viewbox != null)
            {
                string stretch = radioButton.Tag.ToString();

                switch(stretch)
                {
                    case "None"          : this.viewbox.Stretch = Stretch.None;          break;
                    case "Fill"          : this.viewbox.Stretch = Stretch.Fill;          break;
                    case "Uniform"       : this.viewbox.Stretch = Stretch.Uniform;       break;
                    case "UniformToFill" : this.viewbox.Stretch = Stretch.UniformToFill; break;
                }
            }
        }

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

        /// <summary>
        /// StretchDirection 라디오 버튼 체크시 처리하기
        /// </summary>
        /// <param name="sender">이벤트 발생자</param>
        /// <param name="e">이벤트 인자</param>
        private void stretchDirectionRadioButton_Checked(object sender, RoutedEventArgs e)
        {
            if(sender is RadioButton radioButton && this.viewbox != null)
            {
                string stretchDirection = radioButton.Tag.ToString();

                switch(stretchDirection)
                {
                    case "UpOnly"   : this.viewbox.StretchDirection = StretchDirection.UpOnly;   break;
                    case "DownOnly" : this.viewbox.StretchDirection = StretchDirection.DownOnly; break;
                    case "Both"     : this.viewbox.StretchDirection = StretchDirection.Both;     break;
                }
            }
        }

        #endregion
    }
}

using Microsoft.UI.Xaml;

using Microsoft.UI.Xaml.Controls;

using Microsoft.UI.Xaml.Media;

namespace TestProject

{

/// <summary>

/// 메인 윈도우

/// </summary>

public sealed partial class MainWindow : Window

{

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

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

#region 생성자 - MainWindow()

/// <summary>

/// 생성자

/// </summary>

public MainWindow()

{

InitializeComponent();

this.noneStretchRadioButton.Checked += stretchRadioButton_Checked;

this.fillStretchRadioButton.Checked += stretchRadioButton_Checked;

this.uniformStretchRadioButton.Checked += stretchRadioButton_Checked;

this.uniformToFillStretchRadioButton.Checked += stretchRadioButton_Checked;

this.upOnlystretchDirectionRadioButton.Checked += stretchDirectionRadioButton_Checked;

this.downOnlystretchDirectionRadioButton.Checked += stretchDirectionRadioButton_Checked;

this.bothstretchDirectionRadioButton.Checked += stretchDirectionRadioButton_Checked;

this.uniformStretchRadioButton.IsChecked = true;

this.bothstretchDirectionRadioButton.IsChecked = true;

}

#endregion

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

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

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

/// <summary>

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

/// </summary>

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

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

private void stretchRadioButton_Checked(object sender, RoutedEventArgs e)

{

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

{

string stretch = radioButton.Tag.ToString();

switch(stretch)

{

case "None" : this.viewbox.Stretch = Stretch.None; break;

case "Fill" : this.viewbox.Stretch = Stretch.Fill; break;

case "Uniform" : this.viewbox.Stretch = Stretch.Uniform; break;

case "UniformToFill" : this.viewbox.Stretch = Stretch.UniformToFill; break;

}

#endregion

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

/// <summary>

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

/// </summary>

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

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

private void stretchDirectionRadioButton_Checked(object sender, RoutedEventArgs e)

{

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

{

string stretchDirection = radioButton.Tag.ToString();

switch(stretchDirection)

{

case "UpOnly" : this.viewbox.StretchDirection = StretchDirection.UpOnly; break;

case "DownOnly" : this.viewbox.StretchDirection = StretchDirection.DownOnly; break;

case "Both" : this.viewbox.StretchDirection = StretchDirection.Both; break;

}

#endregion

}

TestProject.zip

[C#/WINUI3/.NET6] VariableSizedWrapGrid 엘리먼트 : Orientation 속성과 RowSpan/ColumnSpan 첨부 속성 사용하기

■ VariableSizedWrapGrid 엘리먼트의 Orientation 속성과 RowSpan/ColumnSpan 첨부 속성을 사용하는 방법을 보여준다. ▶ MainWindow.xaml


<?xml version="1.0" encoding="utf-8"?>
<Window x:Class="TestProject.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="TestProject">
    <Grid Margin="10">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>
        <VariableSizedWrapGrid Name="variableSizedWrapGrid" Grid.Column="0"
            HorizontalAlignment="Center"
            VerticalAlignment="Center"
            Width="300"
            Height="300"
            Background="Beige"
            MaximumRowsOrColumns="3"
            ItemHeight="44"
            ItemWidth="44">
            <Rectangle Fill="Red" />
            <Rectangle VariableSizedWrapGrid.RowSpan="2"
                Height="80"
                Fill="Blue" />
            <Rectangle VariableSizedWrapGrid.ColumnSpan="2"
                Width="80"
                Fill="Green" />
            <Rectangle
                VariableSizedWrapGrid.RowSpan="2"
                VariableSizedWrapGrid.ColumnSpan="2"
                Width="80"
                Height="80"
                Fill="Yellow" />
        </VariableSizedWrapGrid>
        <RadioButtons Grid.Column="1"
            HorizontalAlignment="Center"
            VerticalAlignment="Center"
            Header="Orientation">
            <RadioButton Name="horizontalRadioButton"
                Tag="Horizontal"
                Content="Horizontal" />
            <RadioButton Name="verticalRadioButton"
                Tag="Vertical"
                Content="Vertical" />
        </RadioButtons>
    </Grid>
</Window>

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

<Window x:Class="TestProject.MainWindow"

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

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

Title="TestProject">

<Grid.ColumnDefinitions>

</Grid.ColumnDefinitions>

<VariableSizedWrapGrid Name="variableSizedWrapGrid" Grid.Column="0"

HorizontalAlignment="Center"

VerticalAlignment="Center"

Width="300"

Height="300"

Background="Beige"

MaximumRowsOrColumns="3"

ItemHeight="44"

ItemWidth="44">

<Rectangle VariableSizedWrapGrid.RowSpan="2"

Height="80"

Fill="Blue" />

<Rectangle VariableSizedWrapGrid.ColumnSpan="2"

Width="80"

Fill="Green" />

<Rectangle

VariableSizedWrapGrid.RowSpan="2"

VariableSizedWrapGrid.ColumnSpan="2"

Width="80"

Height="80"

Fill="Yellow" />

</VariableSizedWrapGrid>

<RadioButtons Grid.Column="1"

HorizontalAlignment="Center"

VerticalAlignment="Center"

Header="Orientation">

<RadioButton Name="horizontalRadioButton"

Tag="Horizontal"

Content="Horizontal" />

<RadioButton Name="verticalRadioButton"

Tag="Vertical"

Content="Vertical" />

</RadioButtons>

</Grid>

</Window>

▶ MainWindow.xaml.cs


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

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

        #region 생성자 - MainWindow()

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

            this.horizontalRadioButton.Checked += radioButton_Checked;
            this.verticalRadioButton.Checked   += radioButton_Checked;

            this.verticalRadioButton.IsChecked = true;
        }

        #endregion

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

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

        /// <summary>
        /// 라디오 버튼 체크시 처리하기
        /// </summary>
        /// <param name="sender">이벤트 발생자</param>
        /// <param name="e">이벤트 인자</param>
        private void radioButton_Checked(object sender, RoutedEventArgs e)
        {
            if(sender is RadioButton radioButton && this.variableSizedWrapGrid != null)
            {
                string orientationName = radioButton.Tag.ToString();

                switch (orientationName)
                {
                    case "Horizontal" : this.variableSizedWrapGrid.Orientation = Orientation.Horizontal; break;
                    case "Vertical"   : this.variableSizedWrapGrid.Orientation = Orientation.Vertical;   break;
                }
            }
        }

        #endregion
    }
}

using Microsoft.UI.Xaml;

using Microsoft.UI.Xaml.Controls;

namespace TestProject

{

/// <summary>

/// 메인 윈도우

/// </summary>

public sealed partial class MainWindow : Window

{

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

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

#region 생성자 - MainWindow()

/// <summary>

/// 생성자

/// </summary>

public MainWindow()

{

InitializeComponent();

this.horizontalRadioButton.Checked += radioButton_Checked;

this.verticalRadioButton.Checked += radioButton_Checked;

this.verticalRadioButton.IsChecked = true;

}

#endregion

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

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

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

/// <summary>

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

/// </summary>

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

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

private void radioButton_Checked(object sender, RoutedEventArgs e)

{

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

{

string orientationName = radioButton.Tag.ToString();

switch (orientationName)

{

case "Horizontal" : this.variableSizedWrapGrid.Orientation = Orientation.Horizontal; break;

case "Vertical" : this.variableSizedWrapGrid.Orientation = Orientation.Vertical; break;

}

#endregion

}

TestProject.zip