■ SplitButton 엘리먼트의 Style 속성에서 SplitButtonRevealStyle 리소스를 사용하는 방법을 보여준다.
▶ 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 |
<Page x:Class="TestProject.MainPage" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:muxc="using:Microsoft.UI.Xaml.Controls" Background="{ThemeResource ApplicationPageBackgroundThemeBrush}" FontFamily="나눔고딕코딩" FontSize="16"> <Grid> <StackPanel HorizontalAlignment="Center" VerticalAlignment="Center"> <muxc:SplitButton Name="splitButton" AutomationProperties.Name="font color" Style="{ThemeResource SplitButtonRevealStyle}" MinWidth="0" MinHeight="0" Padding="0" Click="splitButton_Click"> <Rectangle Name="currentColorRectangle" Margin="10" Width="32" Height="32" Fill="Green" /> <muxc:SplitButton.Flyout> <Flyout Placement="Bottom"> <VariableSizedWrapGrid Orientation="Horizontal" MaximumRowsOrColumns="3"> <VariableSizedWrapGrid.Resources> <Style TargetType="Rectangle"> <Setter Property="Width" Value="32" /> <Setter Property="Height" Value="32" /> </Style> <Style TargetType="Button"> <Setter Property="Margin" Value="10" /> <Setter Property="MinWidth" Value="0" /> <Setter Property="MinHeight" Value="0" /> <Setter Property="Padding" Value="0" /> </Style> </VariableSizedWrapGrid.Resources> <Button AutomationProperties.Name="Red" Click="colorButton_Click"> <Button.Content> <Rectangle Fill="Red" /> </Button.Content> </Button> <Button AutomationProperties.Name="Orange" Click="colorButton_Click"> <Button.Content> <Rectangle Fill="Orange" /> </Button.Content> </Button> <Button AutomationProperties.Name="Yellow" Click="colorButton_Click"> <Button.Content> <Rectangle Fill="Yellow" /> </Button.Content> </Button> <Button AutomationProperties.Name="Green" Click="colorButton_Click"> <Button.Content> <Rectangle Fill="Green" /> </Button.Content> </Button> <Button AutomationProperties.Name="Blue" Click="colorButton_Click"> <Button.Content> <Rectangle Fill="Blue" /> </Button.Content> </Button> <Button AutomationProperties.Name="Indigo" Click="colorButton_Click"> <Button.Content> <Rectangle Fill="Indigo" /> </Button.Content> </Button> <Button AutomationProperties.Name="Violet" Click="colorButton_Click"> <Button.Content> <Rectangle Fill="Violet" /> </Button.Content> </Button> <Button AutomationProperties.Name="Gray" Click="colorButton_Click"> <Button.Content> <Rectangle Fill="Gray" /> </Button.Content> </Button> </VariableSizedWrapGrid> </Flyout> </muxc:SplitButton.Flyout> </muxc:SplitButton> <RichEditBox Name="richEditBox" HorizontalAlignment="Center" Margin="0 10 0 0" Width="240" MinHeight="96" PlaceholderText="Type something here" TextChanged="richEditBox_TextChanged" /> </StackPanel> </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 139 140 141 142 143 144 145 146 |
using Windows.Foundation; using Windows.Graphics.Display; using Windows.UI; using Windows.UI.Text; using Windows.UI.ViewManagement; using Windows.UI.Xaml; using Windows.UI.Xaml.Controls; using Windows.UI.Xaml.Media; using Windows.UI.Xaml.Shapes; namespace TestProject { /// <summary> /// 메인 페이지 /// </summary> public sealed partial class MainPage : Page { //////////////////////////////////////////////////////////////////////////////////////////////////// Field ////////////////////////////////////////////////////////////////////////////////////////// Private #region Field /// <summary> /// 현재 색상 /// </summary> private Color currentColor = Colors.Green; #endregion //////////////////////////////////////////////////////////////////////////////////////////////////// Constructor ////////////////////////////////////////////////////////////////////////////////////////// Public #region 생성자 - MainPage() /// <summary> /// 생성자 /// </summary> public MainPage() { InitializeComponent(); #region 윈도우 크기를 설정한다. double width = 800d; double height = 600d; double dpi = (double)DisplayInformation.GetForCurrentView().LogicalDpi; ApplicationView.PreferredLaunchWindowingMode = ApplicationViewWindowingMode.PreferredLaunchViewSize; Size windowSize = new Size(width * 96d / dpi, height * 96d / dpi); ApplicationView.PreferredLaunchViewSize = windowSize; Window.Current.Activate(); ApplicationView.GetForCurrentView().TryResizeView(windowSize); #endregion #region 윈도우 제목을 설정한다. ApplicationView.GetForCurrentView().Title = "SplitButton 엘리먼트 : Style 속성에서 SplitButtonRevealStyle 리소스 사용하기"; #endregion this.richEditBox.Document.Selection.CharacterFormat.ForegroundColor = this.currentColor; this.richEditBox.Document.Selection.SetText ( TextSetOptions.None, "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. " + "Tempor commodo ullamcorper a lacus." ); } #endregion //////////////////////////////////////////////////////////////////////////////////////////////////// Method ////////////////////////////////////////////////////////////////////////////////////////// Private #region 분리 버튼 클릭시 처리하기 - splitButton_Click(sender, e) /// <summary> /// 분리 버튼 클릭시 처리하기 /// </summary> /// <param name="sender">이벤트 발생자</param> /// <param name="e">이벤트 인자</param> private void splitButton_Click(Microsoft.UI.Xaml.Controls.SplitButton sender, Microsoft.UI.Xaml.Controls.SplitButtonClickEventArgs e) { Rectangle rectangle = sender.Content as Rectangle; Color color = (rectangle.Fill as SolidColorBrush).Color; this.richEditBox.Document.Selection.CharacterFormat.ForegroundColor = color; this.currentColor = color; } #endregion #region 색상 버튼 클릭시 처리하기 - colorButton_Click(sender, e) /// <summary> /// 색상 버튼 클릭시 처리하기 /// </summary> /// <param name="sender">이벤트 발생자</param> /// <param name="e">이벤트 인자</param> private void colorButton_Click(object sender, RoutedEventArgs e) { Button colorButtonClicked = sender as Button; Rectangle colorRectangleClicked = colorButtonClicked.Content as Rectangle; Color colorClicked = (colorRectangleClicked.Fill as SolidColorBrush).Color; this.richEditBox.Document.Selection.CharacterFormat.ForegroundColor = colorClicked; this.currentColorRectangle.Fill = new SolidColorBrush(colorClicked); this.splitButton.Flyout.Hide(); this.richEditBox.Focus(FocusState.Keyboard); this.currentColor = colorClicked; } #endregion #region 리치 에디트 박스 텍스트 변경시 처리하기 - richEditBox_TextChanged(sender, e) /// <summary> /// 리치 에디트 박스 텍스트 변경시 처리하기 /// </summary> /// <param name="sender">이벤트 발생자</param> /// <param name="e">이벤트 인자</param> private void richEditBox_TextChanged(object sender, RoutedEventArgs e) { if(this.richEditBox.Document.Selection.CharacterFormat.ForegroundColor != currentColor) { this.richEditBox.Document.Selection.CharacterFormat.ForegroundColor = currentColor; } } #endregion } } |