■ TeachingTip 엘리먼트의 PlacementMargin/PreferredPlacement/TailVisibility 속성을 사용해 Target 속성 설정없이 티칭팁 표시하기 ※ 비주얼 스튜디오에서 TestProject(Unpackaged) 모드로 빌드한다. ※ TestProject.csproj 프로젝트 파일에서 WindowsPackageType
■ Flyout 엘리먼트의 OverlayInputPassThroughElement 속성을 사용해 플라이웃 오픈시 특정 UI 엘리먼의에 대한 입력을 허용하는 방법을 보여준다. ※ 비주얼 스튜디오에서 TestProject(Unpackaged) 모드로 빌드한다.
■ Flyout 엘리먼트의 LightDismissOverlayMode 속성을 사용해 빠른 해제 오버레이 모드를 설정하는 방법을 보여준다. ※ 비주얼 스튜디오에서 TestProject(Unpackaged) 모드로 빌드한다. ※ TestProject.csproj 프로젝트
■ Flyout 엘리먼트의 FlyoutPresenterStyle 속성을 사용해 플라이아웃 프리젠터 스타일을 설정하는 방법을 보여준다. ※ 비주얼 스튜디오에서 TestProject(Unpackaged) 모드로 빌드한다. ※ TestProject.csproj 프로젝트 파일에서
■ FlyoutBase 엘리먼트의 AttachedFlyout 첨부 속성을 사용해 Flyout 엘리먼트를 설정하는 방법을 보여준다. ※ 비주얼 스튜디오에서 TestProject(Unpackaged) 모드로 빌드한다. ※ TestProject.csproj 프로젝트 파일에서
■ FlyoutBase 엘리먼트의 AttachedFlyout 첨부 속성을 사용해 Flyout 엘리먼트를 설정하는 방법을 보여준다. ※ 비주얼 스튜디오에서 TestProject(Unpackaged) 모드로 빌드한다. ※ TestProject.csproj 프로젝트 파일에서
■ ApiInformation 클래스의 IsApiContractPresent 정적 메소드를 사용해 Windows.Foundation.UniversalApiContract 버전 8 이상 여부를 구하는 방법을 보여준다. ▶ 예제 코드 (C#)
|
1 2 3 4 5 6 7 8 |
using Windows.Foundation.Metadata; if(ApiInformation.IsApiContractPresent("Windows.Foundation.UniversalApiContract", 8)) { // 작업을 처리한다. } |
■ VisualTreeHelper 클래스의 GetParent 정적 메소드를 사용해 조상 의존 객체 여부를 구하는 방법을 보여준다. ▶ 예제 코드 (C#)
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
using Microsoft.UI.Xaml; using Microsoft.UI.Xaml.Media; #region 조상 여부 구하기 - IsAncestorOf(parent, child) /// <summary> /// 조상 여부 구하기 /// </summary> /// <param name="parent">부모 의존 객체</param> /// <param name="child">자식 의존 객체</param> /// <returns>조상 여부</returns> public bool IsAncestorOf(DependencyObject parent, DependencyObject child) { DependencyObject current = child; bool isAncestor = false; while(current != null && !isAncestor) { if(current == parent) { isAncestor = true; } current = VisualTreeHelper.GetParent(current); } return isAncestor; } #endregion |
■ ListView 클래스의 ContainerContentChanging 이벤트를 사용해 컨테이너 컨텐트 변경시 처리하는 방법을 보여준다. ※ 비주얼 스튜디오에서 TestProject(Unpackaged) 모드로 빌드한다. ※ TestProject.csproj 프로젝트 파일에서
■ ListView 클래스의 ItemsSource 속성에서 필터 처리한 컬렉션을 설정하는 방법을 보여준다. ※ 비주얼 스튜디오에서 TestProject(Unpackaged) 모드로 빌드한다. ※ TestProject.csproj 프로젝트 파일에서 WindowsPackageType
■ SwipeItems 엘리먼트의 Mode 속성을 사용해 표시(Reveal)/실행(Execute) 모드를 설정하는 방법을 보여준다. ※ 비주얼 스튜디오에서 TestProject(Unpackaged) 모드로 빌드한다. ※ TestProject.csproj 프로젝트 파일에서 WindowsPackageType
■ WebView2 클래스의 CoreWebView2 속성에서 CoreWebView2 객체의 ExecuteScriptAsync 메소드를 사용해 자바 스크립트를 실행하는 방법을 보여준다. ▶ HTML 구하기 (C#)
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
using System.Text.Json; using System.Threading.Tasks; using Microsoft.UI.Xaml.Controls; // ... WebView2 webView2; // ... string html = await webView2.CoreWebView2.ExecuteScriptAsync("document.documentElement.outerHTML"); html = JsonSerializer.Deserialize<string>(html); |
▶ 본문
■ WebView2 클래스에서 웹 페이지의 HTML을 클립보드에 복사하는 방법을 보여준다. ※ 비주얼 스튜디오에서 TestProject(Unpackaged) 모드로 빌드한다. ※ TestProject.csproj 프로젝트 파일에서 WindowsPackageType 태그를
■ WebView2 클래스에서 웹 페이지에서 HTML 본문의 텍스트를 클립보드에 복사하드는 방법을 보여준다. ※ 비주얼 스튜디오에서 TestProject(Unpackaged) 모드로 빌드한다. ※ TestProject.csproj 프로젝트 파일에서
■ 메인 크롬 브라우저 활성 탭에서 URL을 구하는 방법을 보여준다. ※ 비주얼 스튜디오에서 TestProject(Unpackaged) 모드로 빌드한다. ※ TestProject.csproj 프로젝트 파일에서 WindowsPackageType 태그를
■ 메인 크롬 브라우저 활성 탭에서 URL을 구하는 방법을 보여준다. ※ 비주얼 스튜디오에서 TestProject(Unpackaged) 모드로 빌드한다. ※ TestProject.csproj 프로젝트 파일에서 WindowsPackageType 태그를
■ FlaUI.UIA3 누겟을 설치하는 방법을 보여준다. 1. Visual Studio를 실행한다. 2. [도구] / [NuGet 패키지 관리자] / [패키지 관리자 콘솔] 메뉴를 실행한다.
■ RefreshContainer 클래스의 RefreshRequested 이벤트/RequestRefresh 메소드를 사용해 목록을 갱신하는 방법을 보여준다. ※ 비주얼 스튜디오에서 TestProject(Unpackaged) 모드로 빌드한다. ※ TestProject.csproj 프로젝트 파일에서 WindowsPackageType
■ SwipeControl 엘리먼트의 LeftItems 속성을 사용해 스와이프 항목을 표시하는 방법을 보여준다. ▶ 예제 코드 (XAML)
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
<?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}" FontFamily="나눔고딕코딩" FontSize="16"> <SwipeControl HorizontalAlignment="Center" VerticalAlignment="Center"> <SwipeControl.LeftItems> <SwipeItems> <SwipeItem Text="Pin"> <SwipeItem.IconSource> <SymbolIconSource Symbol="Pin" /> </SwipeItem.IconSource> </SwipeItem> </SwipeItems> </SwipeControl.LeftItems> <Border Width="180" Height="44" BorderThickness="1" BorderBrush="Black"> <TextBlock Margin="5 10 0 0" Text="Swipe to Pin" /> </Border> </SwipeControl> </Page> |
■ ListView 엘리먼트의 ItemTemplate 속성에서 SwipeControl 엘리먼트를 사용해 항목별 살짝 밀기 명령을 만드는 방법을 보여준다. ※ 비주얼 스튜디오에서 TestProject(Unpackaged) 모드로 빌드한다. ※
■ UserControl 엘리먼트의 ContextFlyout 속성에서 MenuFlyout 객체를 사용해 명령을 실행하는 방법을 보여준다. ▶ FavoriteCommand.cs
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 |
using System; using System.Windows.Input; namespace TestProject; /// <summary> /// 즐겨찾기 명령 /// </summary> public class FavoriteCommand: ICommand { //////////////////////////////////////////////////////////////////////////////////////////////////// Event ////////////////////////////////////////////////////////////////////////////////////////// Public #region 실행 가능 여부 변경시 - CanExecuteChanged /// <summary> /// 실행 가능 여부 변경시 /// </summary> public event EventHandler CanExecuteChanged; #endregion //////////////////////////////////////////////////////////////////////////////////////////////////// Method ////////////////////////////////////////////////////////////////////////////////////////// Public #region 실행 가능 여부 구하기 - CanExecute(parameter) /// <summary> /// 실행 가능 여부 구하기 /// </summary> /// <param name="parameter">매개 변수</param> /// <returns>실행 가능 여부</returns> public bool CanExecute(object parameter) { return true; } #endregion #region 실행하기 - Execute(parameter) /// <summary> /// 실행하기 /// </summary> /// <param name="parameter">매개 변수</param> public void Execute(object parameter) { Podcast podcast = parameter as Podcast; podcast.IsFavorite = !podcast.IsFavorite; } #endregion } |
▶ Podcast.cs
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 |
using System.ComponentModel; namespace TestProject; /// <summary> /// 팟캐스트 /// </summary> public class Podcast : INotifyPropertyChanged { //////////////////////////////////////////////////////////////////////////////////////////////////// Event ////////////////////////////////////////////////////////////////////////////////////////// Public #region 속성 변경시 - PropertyChanged /// <summary> /// 속성 변경시 /// </summary> public event PropertyChangedEventHandler PropertyChanged; #endregion //////////////////////////////////////////////////////////////////////////////////////////////////// Field ////////////////////////////////////////////////////////////////////////////////////////// Private #region Field /// <summary> /// 즐겨찾기 여부 /// </summary> private bool isFavorite = false; #endregion //////////////////////////////////////////////////////////////////////////////////////////////////// Property ////////////////////////////////////////////////////////////////////////////////////////// Public #region 제목 - Title /// <summary> /// 제목 /// </summary> public string Title { get; set; } #endregion #region 설명 - Description /// <summary> /// 설명 /// </summary> public string Description { get; set; } #endregion #region 즐겨찾기 여부 - IsFavorite /// <summary> /// 즐겨찾기 여부 /// </summary> public bool IsFavorite { get { return this.isFavorite; } set { this.isFavorite = value; FirePropertyChangedEvent("IsFavorite"); } } #endregion //////////////////////////////////////////////////////////////////////////////////////////////////// Method ////////////////////////////////////////////////////////////////////////////////////////// Private #region 속성 변경시 이벤트 발생시키기 - FirePropertyChangedEvent(propertyName) /// <summary> /// 속성 변경시 이벤트 발생시키기 /// </summary> /// <param name="propertyName">속성명</param> private void FirePropertyChangedEvent(string propertyName) { PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName)); } #endregion } |
▶ PodcastControl.xaml
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 |
<UserControl x:Class="TestProject.PodcastControl" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" IsTabStop="True" UseSystemFocusVisuals="True"> <UserControl.Resources> <SymbolIconSource x:Key="FavoriteSymbolIconSourceKey" Symbol="Favorite" /> <SwipeItems x:Key="RightSwipeItemsKey" Mode="Reveal"> <SwipeItem Background="Yellow" IconSource="{StaticResource FavoriteSymbolIconSourceKey}" Text="Favorite" Invoked="swipeItem_Invoked" /> </SwipeItems> </UserControl.Resources> <UserControl.ContextFlyout> <MenuFlyout> <MenuFlyoutItem Text="Favorite" Command="{StaticResource FavoriteCommandKey}" CommandParameter="{x:Bind Podcast, Mode=OneWay}" /> </MenuFlyout> </UserControl.ContextFlyout> <SwipeControl RightItems="{StaticResource RightSwipeItemsKey}"> <VisualStateManager.VisualStateGroups> <VisualStateGroup x:Name="HoveringStates"> <VisualState x:Name="HoverButtonsShown"> <VisualState.Setters> <Setter Target="hoverAreaGrid.Visibility" Value="Visible" /> </VisualState.Setters> </VisualState> <VisualState x:Name="HoverButtonsHidden" /> </VisualStateGroup> </VisualStateManager.VisualStateGroups> <Grid Margin="10 0 10 0"> <Grid.ColumnDefinitions> <ColumnDefinition Width="*" /> <ColumnDefinition Width="Auto" /> </Grid.ColumnDefinitions> <StackPanel Grid.Column="0" Margin="5" Spacing="10"> <TextBlock Style="{StaticResource TitleTextBlockStyle}" Text="{x:Bind Podcast.Title, Mode=OneWay}" /> <TextBlock Style="{StaticResource SubtitleTextBlockStyle}" Text="{x:Bind Podcast.Description, Mode=OneWay}" /> <TextBlock Style="{StaticResource SubtitleTextBlockStyle}" Text="{x:Bind Podcast.IsFavorite, Mode=OneWay}" /> </StackPanel> <Grid Name="hoverAreaGrid" Grid.Column="1" VerticalAlignment="Stretch" Visibility="Collapsed"> <AppBarButton VerticalAlignment="Center" IsTabStop="False" Icon="OutlineStar" Label="Favorite" Command="{StaticResource FavoriteCommandKey}" CommandParameter="{x:Bind Podcast, Mode=OneWay}" /> </Grid> </Grid> </SwipeControl> </UserControl> |
▶
■ SwipeControl 엘리먼트의 RightItems 속성을 사용해 스와이프 항목을 표시하는 방법을 보여준다. ▶ FavoriteCommand.cs
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 |
using System; using System.Windows.Input; namespace TestProject; /// <summary> /// 즐겨찾기 명령 /// </summary> public class FavoriteCommand: ICommand { //////////////////////////////////////////////////////////////////////////////////////////////////// Event ////////////////////////////////////////////////////////////////////////////////////////// Public #region 실행 가능 여부 변경시 - CanExecuteChanged /// <summary> /// 실행 가능 여부 변경시 /// </summary> public event EventHandler CanExecuteChanged; #endregion //////////////////////////////////////////////////////////////////////////////////////////////////// Method ////////////////////////////////////////////////////////////////////////////////////////// Public #region 실행 가능 여부 구하기 - CanExecute(parameter) /// <summary> /// 실행 가능 여부 구하기 /// </summary> /// <param name="parameter">매개 변수</param> /// <returns>실행 가능 여부</returns> public bool CanExecute(object parameter) { return true; } #endregion #region 실행하기 - Execute(parameter) /// <summary> /// 실행하기 /// </summary> /// <param name="parameter">매개 변수</param> public void Execute(object parameter) { Podcast podcast = parameter as Podcast; podcast.IsFavorite = !podcast.IsFavorite; } #endregion } |
▶ Podcast.cs
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 |
using System.ComponentModel; namespace TestProject; /// <summary> /// 팟캐스트 /// </summary> public class Podcast : INotifyPropertyChanged { //////////////////////////////////////////////////////////////////////////////////////////////////// Event ////////////////////////////////////////////////////////////////////////////////////////// Public #region 속성 변경시 - PropertyChanged /// <summary> /// 속성 변경시 /// </summary> public event PropertyChangedEventHandler PropertyChanged; #endregion //////////////////////////////////////////////////////////////////////////////////////////////////// Field ////////////////////////////////////////////////////////////////////////////////////////// Private #region Field /// <summary> /// 즐겨찾기 여부 /// </summary> private bool isFavorite = false; #endregion //////////////////////////////////////////////////////////////////////////////////////////////////// Property ////////////////////////////////////////////////////////////////////////////////////////// Public #region 제목 - Title /// <summary> /// 제목 /// </summary> public string Title { get; set; } #endregion #region 설명 - Description /// <summary> /// 설명 /// </summary> public string Description { get; set; } #endregion #region 즐겨찾기 여부 - IsFavorite /// <summary> /// 즐겨찾기 여부 /// </summary> public bool IsFavorite { get { return this.isFavorite; } set { this.isFavorite = value; FirePropertyChangedEvent("IsFavorite"); } } #endregion //////////////////////////////////////////////////////////////////////////////////////////////////// Method ////////////////////////////////////////////////////////////////////////////////////////// Private #region 속성 변경시 이벤트 발생시키기 - FirePropertyChangedEvent(propertyName) /// <summary> /// 속성 변경시 이벤트 발생시키기 /// </summary> /// <param name="propertyName">속성명</param> private void FirePropertyChangedEvent(string propertyName) { PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName)); } #endregion } |
▶ PodcastControl.xaml
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 |
<UserControl x:Class="TestProject.PodcastControl" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" IsTabStop="True" UseSystemFocusVisuals="True"> <UserControl.Resources> <SymbolIconSource x:Key="FavoriteSymbolIconSourceKey" Symbol="Favorite" /> <SwipeItems x:Key="RightSwipeItemsKey" Mode="Reveal"> <SwipeItem Background="Yellow" IconSource="{StaticResource FavoriteSymbolIconSourceKey}" Text="Favorite" Invoked="swipeItem_Invoked" /> </SwipeItems> </UserControl.Resources> <UserControl.ContextFlyout> <MenuFlyout> <MenuFlyoutItem Text="Favorite" Command="{StaticResource FavoriteCommandKey}" CommandParameter="{x:Bind Podcast, Mode=OneWay}" /> </MenuFlyout> </UserControl.ContextFlyout> <SwipeControl RightItems="{StaticResource RightSwipeItemsKey}"> <VisualStateManager.VisualStateGroups> <VisualStateGroup x:Name="HoveringStates"> <VisualState x:Name="HoverButtonsShown"> <VisualState.Setters> <Setter Target="hoverAreaGrid.Visibility" Value="Visible" /> </VisualState.Setters> </VisualState> <VisualState x:Name="HoverButtonsHidden" /> </VisualStateGroup> </VisualStateManager.VisualStateGroups> <Grid Margin="10 0 10 0"> <Grid.ColumnDefinitions> <ColumnDefinition Width="*" /> <ColumnDefinition Width="Auto" /> </Grid.ColumnDefinitions> <StackPanel Grid.Column="0" Margin="5" Spacing="10"> <TextBlock Style="{StaticResource TitleTextBlockStyle}" Text="{x:Bind Podcast.Title, Mode=OneWay}" /> <TextBlock Style="{StaticResource SubtitleTextBlockStyle}" Text="{x:Bind Podcast.Description, Mode=OneWay}" /> <TextBlock Style="{StaticResource SubtitleTextBlockStyle}" Text="{x:Bind Podcast.IsFavorite, Mode=OneWay}" /> </StackPanel> <Grid Name="hoverAreaGrid" Grid.Column="1" VerticalAlignment="Stretch" Visibility="Collapsed"> <AppBarButton VerticalAlignment="Center" IsTabStop="False" Icon="OutlineStar" Label="Favorite" Command="{StaticResource FavoriteCommandKey}" CommandParameter="{x:Bind Podcast, Mode=OneWay}" /> </Grid> </Grid> </SwipeControl> </UserControl> |
▶ PodcastControl.xaml.cs
■ VisualStateManager 클래스의 GotoState 메소드를 사용해 Grid 컨트롤의 비주얼 상태를 변경하는 방법을 보여준다. ▶ FavoriteCommand.cs
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 |
using System; using System.Windows.Input; namespace TestProject; /// <summary> /// 즐겨찾기 명령 /// </summary> public class FavoriteCommand: ICommand { //////////////////////////////////////////////////////////////////////////////////////////////////// Event ////////////////////////////////////////////////////////////////////////////////////////// Public #region 실행 가능 여부 변경시 - CanExecuteChanged /// <summary> /// 실행 가능 여부 변경시 /// </summary> public event EventHandler CanExecuteChanged; #endregion //////////////////////////////////////////////////////////////////////////////////////////////////// Method ////////////////////////////////////////////////////////////////////////////////////////// Public #region 실행 가능 여부 구하기 - CanExecute(parameter) /// <summary> /// 실행 가능 여부 구하기 /// </summary> /// <param name="parameter">매개 변수</param> /// <returns>실행 가능 여부</returns> public bool CanExecute(object parameter) { return true; } #endregion #region 실행하기 - Execute(parameter) /// <summary> /// 실행하기 /// </summary> /// <param name="parameter">매개 변수</param> public void Execute(object parameter) { Podcast podcast = parameter as Podcast; podcast.IsFavorite = !podcast.IsFavorite; } #endregion } |
▶ Podcast.cs
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 |
using System.ComponentModel; namespace TestProject; /// <summary> /// 팟캐스트 /// </summary> public class Podcast : INotifyPropertyChanged { //////////////////////////////////////////////////////////////////////////////////////////////////// Event ////////////////////////////////////////////////////////////////////////////////////////// Public #region 속성 변경시 - PropertyChanged /// <summary> /// 속성 변경시 /// </summary> public event PropertyChangedEventHandler PropertyChanged; #endregion //////////////////////////////////////////////////////////////////////////////////////////////////// Field ////////////////////////////////////////////////////////////////////////////////////////// Private #region Field /// <summary> /// 즐겨찾기 여부 /// </summary> private bool isFavorite = false; #endregion //////////////////////////////////////////////////////////////////////////////////////////////////// Property ////////////////////////////////////////////////////////////////////////////////////////// Public #region 제목 - Title /// <summary> /// 제목 /// </summary> public string Title { get; set; } #endregion #region 설명 - Description /// <summary> /// 설명 /// </summary> public string Description { get; set; } #endregion #region 즐겨찾기 여부 - IsFavorite /// <summary> /// 즐겨찾기 여부 /// </summary> public bool IsFavorite { get { return this.isFavorite; } set { this.isFavorite = value; FirePropertyChangedEvent("IsFavorite"); } } #endregion //////////////////////////////////////////////////////////////////////////////////////////////////// Method ////////////////////////////////////////////////////////////////////////////////////////// Private #region 속성 변경시 이벤트 발생시키기 - FirePropertyChangedEvent(propertyName) /// <summary> /// 속성 변경시 이벤트 발생시키기 /// </summary> /// <param name="propertyName">속성명</param> private void FirePropertyChangedEvent(string propertyName) { PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName)); } #endregion } |
▶ PodcastControl.xaml
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 |
<UserControl x:Class="TestProject.PodcastControl" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" IsTabStop="True" UseSystemFocusVisuals="True"> <UserControl.Resources> <SymbolIconSource x:Key="FavoriteSymbolIconSourceKey" Symbol="Favorite" /> <SwipeItems x:Key="RightSwipeItemsKey" Mode="Reveal"> <SwipeItem Background="Yellow" IconSource="{StaticResource FavoriteSymbolIconSourceKey}" Text="Favorite" Invoked="swipeItem_Invoked" /> </SwipeItems> </UserControl.Resources> <UserControl.ContextFlyout> <MenuFlyout> <MenuFlyoutItem Text="Favorite" Command="{StaticResource FavoriteCommandKey}" CommandParameter="{x:Bind Podcast, Mode=OneWay}" /> </MenuFlyout> </UserControl.ContextFlyout> <SwipeControl RightItems="{StaticResource RightSwipeItemsKey}"> <VisualStateManager.VisualStateGroups> <VisualStateGroup x:Name="HoveringStates"> <VisualState x:Name="HoverButtonsShown"> <VisualState.Setters> <Setter Target="hoverAreaGrid.Visibility" Value="Visible" /> </VisualState.Setters> </VisualState> <VisualState x:Name="HoverButtonsHidden" /> </VisualStateGroup> </VisualStateManager.VisualStateGroups> <Grid Margin="10 0 10 0"> <Grid.ColumnDefinitions> <ColumnDefinition Width="*" /> <ColumnDefinition Width="Auto" /> </Grid.ColumnDefinitions> <StackPanel Grid.Column="0" Margin="5" Spacing="10"> <TextBlock Style="{StaticResource TitleTextBlockStyle}" Text="{x:Bind Podcast.Title, Mode=OneWay}" /> <TextBlock Style="{StaticResource SubtitleTextBlockStyle}" Text="{x:Bind Podcast.Description, Mode=OneWay}" /> <TextBlock Style="{StaticResource SubtitleTextBlockStyle}" Text="{x:Bind Podcast.IsFavorite, Mode=OneWay}" /> </StackPanel> <Grid Name="hoverAreaGrid" Grid.Column="1" VerticalAlignment="Stretch" Visibility="Collapsed"> <AppBarButton VerticalAlignment="Center" IsTabStop="False" Icon="OutlineStar" Label="Favorite" Command="{StaticResource FavoriteCommandKey}" CommandParameter="{x:Bind Podcast, Mode=OneWay}" /> </Grid> </Grid> </SwipeControl> </UserControl> |
■ AppBarButton 엘리먼트의 Command/CommandParameter 속성을 사용해 버튼 클릭시 명령을 실행하는 방법을 보여준다. ▶ FavoriteCommand.cs
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 |
using System; using System.Windows.Input; namespace TestProject; /// <summary> /// 즐겨찾기 명령 /// </summary> public class FavoriteCommand: ICommand { //////////////////////////////////////////////////////////////////////////////////////////////////// Event ////////////////////////////////////////////////////////////////////////////////////////// Public #region 실행 가능 여부 변경시 - CanExecuteChanged /// <summary> /// 실행 가능 여부 변경시 /// </summary> public event EventHandler CanExecuteChanged; #endregion //////////////////////////////////////////////////////////////////////////////////////////////////// Method ////////////////////////////////////////////////////////////////////////////////////////// Public #region 실행 가능 여부 구하기 - CanExecute(parameter) /// <summary> /// 실행 가능 여부 구하기 /// </summary> /// <param name="parameter">매개 변수</param> /// <returns>실행 가능 여부</returns> public bool CanExecute(object parameter) { return true; } #endregion #region 실행하기 - Execute(parameter) /// <summary> /// 실행하기 /// </summary> /// <param name="parameter">매개 변수</param> public void Execute(object parameter) { Podcast podcast = parameter as Podcast; podcast.IsFavorite = !podcast.IsFavorite; } #endregion } |
▶ Podcast.cs
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 |
using System.ComponentModel; namespace TestProject; /// <summary> /// 팟캐스트 /// </summary> public class Podcast : INotifyPropertyChanged { //////////////////////////////////////////////////////////////////////////////////////////////////// Event ////////////////////////////////////////////////////////////////////////////////////////// Public #region 속성 변경시 - PropertyChanged /// <summary> /// 속성 변경시 /// </summary> public event PropertyChangedEventHandler PropertyChanged; #endregion //////////////////////////////////////////////////////////////////////////////////////////////////// Field ////////////////////////////////////////////////////////////////////////////////////////// Private #region Field /// <summary> /// 즐겨찾기 여부 /// </summary> private bool isFavorite = false; #endregion //////////////////////////////////////////////////////////////////////////////////////////////////// Property ////////////////////////////////////////////////////////////////////////////////////////// Public #region 제목 - Title /// <summary> /// 제목 /// </summary> public string Title { get; set; } #endregion #region 설명 - Description /// <summary> /// 설명 /// </summary> public string Description { get; set; } #endregion #region 즐겨찾기 여부 - IsFavorite /// <summary> /// 즐겨찾기 여부 /// </summary> public bool IsFavorite { get { return this.isFavorite; } set { this.isFavorite = value; FirePropertyChangedEvent("IsFavorite"); } } #endregion //////////////////////////////////////////////////////////////////////////////////////////////////// Method ////////////////////////////////////////////////////////////////////////////////////////// Private #region 속성 변경시 이벤트 발생시키기 - FirePropertyChangedEvent(propertyName) /// <summary> /// 속성 변경시 이벤트 발생시키기 /// </summary> /// <param name="propertyName">속성명</param> private void FirePropertyChangedEvent(string propertyName) { PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName)); } #endregion } |
▶ PodcastControl.xaml
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 |
<UserControl x:Class="TestProject.PodcastControl" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" IsTabStop="True" UseSystemFocusVisuals="True"> <UserControl.Resources> <SymbolIconSource x:Key="FavoriteSymbolIconSourceKey" Symbol="Favorite" /> <SwipeItems x:Key="RightSwipeItemsKey" Mode="Reveal"> <SwipeItem Background="Yellow" IconSource="{StaticResource FavoriteSymbolIconSourceKey}" Text="Favorite" Invoked="swipeItem_Invoked" /> </SwipeItems> </UserControl.Resources> <UserControl.ContextFlyout> <MenuFlyout> <MenuFlyoutItem Text="Favorite" Command="{StaticResource FavoriteCommandKey}" CommandParameter="{x:Bind Podcast, Mode=OneWay}" /> </MenuFlyout> </UserControl.ContextFlyout> <SwipeControl RightItems="{StaticResource RightSwipeItemsKey}"> <VisualStateManager.VisualStateGroups> <VisualStateGroup x:Name="HoveringStates"> <VisualState x:Name="HoverButtonsShown"> <VisualState.Setters> <Setter Target="hoverAreaGrid.Visibility" Value="Visible" /> </VisualState.Setters> </VisualState> <VisualState x:Name="HoverButtonsHidden" /> </VisualStateGroup> </VisualStateManager.VisualStateGroups> <Grid Margin="10 0 10 0"> <Grid.ColumnDefinitions> <ColumnDefinition Width="*" /> <ColumnDefinition Width="Auto" /> </Grid.ColumnDefinitions> <StackPanel Grid.Column="0" Margin="5" Spacing="10"> <TextBlock Style="{StaticResource TitleTextBlockStyle}" Text="{x:Bind Podcast.Title, Mode=OneWay}" /> <TextBlock Style="{StaticResource SubtitleTextBlockStyle}" Text="{x:Bind Podcast.Description, Mode=OneWay}" /> <TextBlock Style="{StaticResource SubtitleTextBlockStyle}" Text="{x:Bind Podcast.IsFavorite, Mode=OneWay}" /> </StackPanel> <Grid Name="hoverAreaGrid" Grid.Column="1" VerticalAlignment="Stretch" Visibility="Collapsed"> <AppBarButton VerticalAlignment="Center" IsTabStop="False" Icon="OutlineStar" Label="Favorite" Command="{StaticResource FavoriteCommandKey}" CommandParameter="{x:Bind Podcast, Mode=OneWay}" /> </Grid> </Grid> </SwipeControl> </UserControl> |
▶
■ 모든 입력 형식에 대한 컬렉션 명령을 만드는 방법을 보여준다. ※ ICommand 인터페이스, UserControl 클래스 ContextFlyout 속성, SwipeItem 클래스 Invoke 이벤트, KeyboardAccelerator