■ SplitView 엘리먼트를 사용하는 방법을 보여준다.
▶ NullableBooleanToBooleanConverter.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 |
using System; using Microsoft.UI.Xaml.Data; namespace TestProject { /// <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 } } |
▶ MenuItem.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 |
using Microsoft.UI.Xaml.Controls; namespace TestProject { /// <summary> /// 메뉴 항목 /// </summary> public class MenuItem { //////////////////////////////////////////////////////////////////////////////////////////////////// Constructor ////////////////////////////////////////////////////////////////////////////////////////// Public #region 기호 - Symbol /// <summary> /// 기호 /// </summary> public Symbol Symbol { get; set; } #endregion #region 제목 - Caption /// <summary> /// 제목 /// </summary> public string Caption { get; set; } #endregion } } |
▶ MainPage.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 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 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 |
<Page x:Class="TestProject.MainPage" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:local="using:TestProject" Background="{ThemeResource ApplicationPageBackgroundThemeBrush}" FontFamily="나눔고딕코딩" FontSize="16"> <Page.Resources> <local:NullableBooleanToBooleanConverter x:Key="NullableBooleanToBooleanConverterKey" /> <DataTemplate x:Key="MenuItemDataTemplateKey" x:DataType="local:MenuItem"> <StackPanel Margin="2 0 0 0" Orientation="Horizontal"> <SymbolIcon Symbol="{x:Bind Symbol}" /> <TextBlock VerticalAlignment="Center" Margin="20 0 0 0" Text="{x:Bind Caption}" /> </StackPanel> </DataTemplate> </Page.Resources> <Grid> <VisualStateManager.VisualStateGroups> <VisualStateGroup> <VisualState x:Name="SystemControlBackgroundChromeMediumLowBrush" /> <VisualState x:Name="Red"> <VisualState.Setters> <Setter Target="splitView.PaneBackground" Value="Red" /> </VisualState.Setters> </VisualState> <VisualState x:Name="Blue"> <VisualState.Setters> <Setter Target="splitView.PaneBackground" Value="Blue" /> </VisualState.Setters> </VisualState> <VisualState x:Name="Green"> <VisualState.Setters> <Setter Target="splitView.PaneBackground" Value="Green" /> </VisualState.Setters> </VisualState> </VisualStateGroup> </VisualStateManager.VisualStateGroups> <Grid Margin="10"> <Grid.ColumnDefinitions> <ColumnDefinition Width="*" /> <ColumnDefinition Width="50" /> <ColumnDefinition Width="Auto" /> </Grid.ColumnDefinitions> <SplitView Name="splitView" Grid.Column="0" IsPaneOpen="{x:Bind isPaneOpenToggleButton.IsChecked, Mode=TwoWay, Converter={StaticResource NullableBooleanToBooleanConverterKey}}" PaneBackground="{ThemeResource SystemControlBackgroundChromeMediumLowBrush}" OpenPaneLength="{x:Bind openPaneLengthSlider.Value, Mode=OneWay}" CompactPaneLength="{x:Bind compactPaneLengthSlider.Value, Mode=OneWay}" DisplayMode="CompactOverlay" IsTabStop="False"> <SplitView.Pane> <Grid> <Grid.RowDefinitions> <RowDefinition Height="Auto" /> <RowDefinition Height="*" /> <RowDefinition Height="Auto" /> </Grid.RowDefinitions> <TextBlock Grid.Row="0" Style="{StaticResource BaseTextBlockStyle}" Margin="60 10 0 0" Text="창 컨텐트" /> <ListView Grid.Row="1" ItemTemplate="{StaticResource MenuItemDataTemplateKey}" Margin="0 10 0 0" VerticalAlignment="Stretch" SelectionMode="None" IsItemClickEnabled="True" ItemsSource="{x:Bind MenuItemCollection}" ItemClick="menuListView_ItemClick" /> <StackPanel Grid.Row="2" Margin="15 25 0 25" Orientation="Horizontal"> <SymbolIcon Symbol="Setting" /> <TextBlock VerticalAlignment="Center" Margin="25 0 0 0" Text="설정" /> </StackPanel> </Grid> </SplitView.Pane> <Grid> <Grid.RowDefinitions> <RowDefinition Height="Auto" /> <RowDefinition Height="*" /> </Grid.RowDefinitions> <TextBlock Grid.Row="0" Style="{StaticResource BaseTextBlockStyle}" Margin="10 10 0 0" Text="SplitView 컨텐트" /> <TextBlock Name="contentTextBlock" Grid.Row="1" Style="{StaticResource BodyTextBlockStyle}" Margin="10 10 0 0" /> </Grid> </SplitView> <StackPanel Grid.Column="2" Margin="0 0 10 0" Spacing="10"> <ToggleButton Name="isPaneOpenToggleButton" IsChecked="True" Content="IsPaneOpen" /> <ToggleSwitch Margin="0 10 0 0" MinWidth="120" OffContent="Left" OnContent="Right" Header="PanePlacement" Toggled="panePlacementToggleSwitch_Toggled" /> <ComboBox Name="displayModeCombobox" VerticalAlignment="Center" Margin="0 5 0 0" Width="196" Header="DisplayMode" SelectionChanged="displayModeCombobox_SelectionChanged" SelectedIndex="0"> <ComboBoxItem>Inline</ComboBoxItem> <ComboBoxItem>CompactInline</ComboBoxItem> <ComboBoxItem>Overlay</ComboBoxItem> <ComboBoxItem>CompactOverlay</ComboBoxItem> </ComboBox> <ComboBox Name="paneBackgroundCombobox" VerticalAlignment="Center" Margin="0 10 0 0" Width="196" Header="PaneBackground" SelectionChanged="paneBackgroundCombobox_SelectionChanged" SelectedIndex="0"> <ComboBoxItem Tag="{}{ThemeResource SystemControlBackgroundChromeMediumLowBrush}">SystemControlBackgroundChromeMediumLowBrush</ComboBoxItem> <ComboBoxItem Tag="Red">Red</ComboBoxItem> <ComboBoxItem Tag="Blue">Blue</ComboBoxItem> <ComboBoxItem Tag="Green">Green</ComboBoxItem> </ComboBox> <Slider Name="openPaneLengthSlider" Margin="0 10 0 0" Width="196" IsFocusEngagementEnabled="False" SnapsTo="StepValues" StepFrequency="8" Minimum="128" Maximum="500" Value="256" Header="OpenPaneLength" /> <Slider Name="compactPaneLengthSlider" Width="196" IsFocusEngagementEnabled="False" SnapsTo="StepValues" StepFrequency="8" Minimum="24" Maximum="128" Value="48" Header="CompactPaneLength" /> </StackPanel> </Grid> </Grid> </Page> |
▶ MainPage.xaml.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 92 93 94 95 96 97 98 99 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 |
using System; using System.Collections.ObjectModel; using Microsoft.UI.Xaml.Controls; using Microsoft.UI.Xaml; namespace TestProject { /// <summary> /// 메인 페이지 /// </summary> public sealed partial class MainPage : Page { //////////////////////////////////////////////////////////////////////////////////////////////////// Field ////////////////////////////////////////////////////////////////////////////////////////// Private #region Field /// <summary> /// 메뉴 항목 컬렉션 /// </summary> private ObservableCollection<MenuItem> menuItemCollection = new ObservableCollection<MenuItem>() { new MenuItem() { Caption = "인물" , Symbol = Symbol.People }, new MenuItem() { Caption = "소식" , Symbol = Symbol.Globe }, new MenuItem() { Caption = "메시지", Symbol = Symbol.Message }, new MenuItem() { Caption = "메일" , Symbol = Symbol.Mail } }; #endregion //////////////////////////////////////////////////////////////////////////////////////////////////// Property ////////////////////////////////////////////////////////////////////////////////////////// Public #region 메뉴 항목 컬렉션 - MenuItemCollection /// <summary> /// 메뉴 항목 컬렉션 /// </summary> public ObservableCollection<MenuItem> MenuItemCollection { get { return this.menuItemCollection; } } #endregion //////////////////////////////////////////////////////////////////////////////////////////////////// Constructor ////////////////////////////////////////////////////////////////////////////////////////// Public #region 생성자 - MainPage() /// <summary> /// 생성자 /// </summary> public MainPage() { InitializeComponent(); } #endregion //////////////////////////////////////////////////////////////////////////////////////////////////// Method ////////////////////////////////////////////////////////////////////////////////////////// Private #region 메뉴 리스트 뷰 항목 클릭시 처리하기 - menuListView_ItemClick(sender, e) /// <summary> /// 메뉴 리스트 뷰 항목 클릭시 처리하기 /// </summary> /// <param name="sender">이벤트 발생자</param> /// <param name="e">이벤트 인자</param> private void menuListView_ItemClick(object sender, ItemClickEventArgs e) { this.contentTextBlock.Text = (e.ClickedItem as MenuItem).Caption + " 페이지"; } #endregion #region PanePlacement 토글 스위치 토글시 처리하기 - panePlacementToggleSwitch_Toggled(object sender, RoutedEventArgs e) /// <summary> /// PanePlacement 토글 스위치 토글시 처리하기 /// </summary> /// <param name="sender">이벤트 발생자</param> /// <param name="e">이벤트 인자</param> private void panePlacementToggleSwitch_Toggled(object sender, RoutedEventArgs e) { ToggleSwitch toggleSwitch = sender as ToggleSwitch; if(toggleSwitch.IsOn) { this.splitView.PanePlacement = SplitViewPanePlacement.Right; } else { this.splitView.PanePlacement = SplitViewPanePlacement.Left; } } #endregion #region DisplayMode 콤보 박스 선택 변경시 처리하기 - displayModeCombobox_SelectionChanged(sender, e) /// <summary> /// DisplayMode 콤보 박스 선택 변경시 처리하기 /// </summary> /// <param name="sender">이벤트 발생자</param> /// <param name="e">이벤트 인자</param> private void displayModeCombobox_SelectionChanged(object sender, SelectionChangedEventArgs e) { this.splitView.DisplayMode = (SplitViewDisplayMode)Enum.Parse ( typeof(SplitViewDisplayMode), (e.AddedItems[0] as ComboBoxItem).Content.ToString() ); } #endregion #region 창 배경 콤보 박스 선택 변경시 처리하기 - paneBackgroundCombobox_SelectionChanged(sender, e) /// <summary> /// 창 배경 콤보 박스 선택 변경시 처리하기 /// </summary> /// <param name="sender">이벤트 발생자</param> /// <param name="e">이벤트 인자</param> private void paneBackgroundCombobox_SelectionChanged(object sender, SelectionChangedEventArgs e) { string colorString = (e.AddedItems[0] as ComboBoxItem).Content.ToString(); VisualStateManager.GoToState(this, colorString, false); } #endregion } } |
▶ MainWindow.xaml
|
1 2 3 4 5 6 7 8 9 |
<?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"> <Frame Name="frame" /> </Window> |
▶ MainWindow.xaml.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 |
using Microsoft.UI.Xaml; namespace TestProject { /// <summary> /// 메인 윈도우 /// </summary> public sealed partial class MainWindow : Window { //////////////////////////////////////////////////////////////////////////////////////////////////// Constructor ////////////////////////////////////////////////////////////////////////////////////////// Public #region 생성자 - MainWindow() /// <summary> /// 생성자 /// </summary> public MainWindow() { InitializeComponent(); } #endregion } } |
▶ App.xaml
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<?xml version="1.0" encoding="utf-8"?> <Application x:Class="TestProject.App" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"> <Application.Resources> <ResourceDictionary> <ResourceDictionary.MergedDictionaries> <XamlControlsResources xmlns="using:Microsoft.UI.Xaml.Controls" /> </ResourceDictionary.MergedDictionaries> </ResourceDictionary> </Application.Resources> </Application> |
▶ App.xaml.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 |
using Windows.Graphics; using Microsoft.UI.Xaml; using Microsoft.UI.Xaml.Controls; namespace TestProject; /// <summary> /// 앱 /// </summary> public partial class App : Application { //////////////////////////////////////////////////////////////////////////////////////////////////// Field ////////////////////////////////////////////////////////////////////////////////////////// Private #region Field /// <summary> /// 윈도우 /// </summary> private Window window; #endregion //////////////////////////////////////////////////////////////////////////////////////////////////// Constructor ////////////////////////////////////////////////////////////////////////////////////////// Public #region 생성자 - App() /// <summary> /// 생성자 /// </summary> public App() { InitializeComponent(); } #endregion //////////////////////////////////////////////////////////////////////////////////////////////////// Method ////////////////////////////////////////////////////////////////////////////////////////// Protected #region 시작시 처리하기 - OnLaunched(args) /// <summary> /// 시작시 처리하기 /// </summary> /// <param name="args">이벤트 인자</param> protected override void OnLaunched(LaunchActivatedEventArgs args) { this.window = new MainWindow(); (this.window.Content as Frame).Content = new MainPage(); this.window.AppWindow.Resize(new SizeInt32(800, 600)); this.window.Activate(); } #endregion } |
