■ Typeface 클래스를 사용해 이모지 타입 페이스 객체를 만드는 방법을 보여준다. ▶ 예제 코드 (C#)
|
1 2 3 4 5 6 7 8 9 10 11 12 |
using System.Windows; using System.Windows.Media; Typeface emojiTypeface = new Typeface ( new FontFamily("Segoe UI Emoji"), FontStyles.Normal, FontWeights.Normal, FontStretches.Normal ); |
■ Button 엘리먼트를 사용해 클릭시 회전하는 톱니바퀴 버튼을 만드는 방법을 보여준다. ▶ MainWindow.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 |
<Window x:Class="TestProject.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Width="800" Height="600" Title="TestProject" FontFamily="나눔고딕코딩" FontSize="16"> <Window.Resources> <Style x:Key="GearButtonStyleKey" TargetType="Button"> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="Button"> <Grid> <Ellipse Fill="{TemplateBinding Background}" Width="{TemplateBinding Width}" Height="{TemplateBinding Height}" /> <Path Name="gearPath" Width="{TemplateBinding Width}" Height="{TemplateBinding Height}" Stretch="Uniform" Fill="{TemplateBinding Foreground}" RenderTransformOrigin="0.5 0.5" Data="M 495.9 166.6 c 3.2 8.7 .5 18.4 -6.4 24.6 l -43.3 39.4 c 1.1 8.3 1.7 16.8 1.7 25.4 s -0.6 17.1 -1.7 25.4 l 43.3 39.4 c 6.9 6.2 9.6 15.9 6.4 24.6 c -4.4 11.9 -9.7 23.3 -15.8 34.3 l -4.7 8.1 c -6.6 11 -14 21.4 -22.1 31.2 c -5.9 7.2 -15.7 9.6 -24.5 6.8 l -55.7 -17.7 c -13.4 10.3 -28.2 18.9 -44 25.4 l -12.5 57.1 c -2 9.1 -9 16.3 -18.2 17.8 c -13.8 2.3 -28 3.5 -42.5 3.5 s -28.7 -1.2 -42.5 -3.5 c -9.2 -1.5 -16.2 -8.7 -18.2 -17.8 l -12.5 -57.1 c -15.8 -6.5 -30.6 -15.1 -44 -25.4 L 83.1 425.9 c -8.8 2.8 -18.6 0.3 -24.5 -6.8 c -8.1 -9.8 -15.5 -20.2 -22.1 -31.2 l -4.7 -8.1 c -6.1 -11 -11.4 -22.4 -15.8 -34.3 c -3.2 -8.7 -0.5 -18.4 6.4 -24.6 l 43.3 -39.4 C 64.6 273.1 64 264.6 64 256 s 0.6 -17.1 1.7 -25.4 L 22.4 191.2 c -6.9 -6.2 -9.6 -15.9 -6.4 -24.6 c 4.4 -11.9 9.7 -23.3 15.8 -34.3 l 4.7 -8.1 c 6.6 -11 14 -21.4 22.1 -31.2 c 5.9 -7.2 15.7 -9.6 24.5 -6.8 l 55.7 17.7 c 13.4 -10.3 28.2 -18.9 44 -25.4 l 12.5 -57.1 c 2 -9.1 9 -16.3 18.2 -17.8 C 227.3 1.2 241.5 0 256 0 s 28.7 1.2 42.5 3.5 c 9.2 1.5 16.2 8.7 18.2 17.8 l 12.5 57.1 c 15.8 6.5 30.6 15.1 44 25.4 l 55.7 -17.7 c 8.8 -2.8 18.6 -0.3 24.5 6.8 c 8.1 9.8 15.5 20.2 22.1 31.2 l 4.7 8.1 c 6.1 11 11.4 22.4 15.8 34.3 z M 256 336 c 44.2 0 80 -35.8 80 -80 s -35.8 -80 -80 -80 s -80 35.8 -80 80 s 35.8 80 80 80 z"> <Path.RenderTransform> <RotateTransform x:Name="gearRotateTransform" /> </Path.RenderTransform> </Path> </Grid> <ControlTemplate.Triggers> <EventTrigger RoutedEvent="Button.PreviewMouseDown"> <BeginStoryboard> <Storyboard> <DoubleAnimation Storyboard.TargetName="gearRotateTransform" Storyboard.TargetProperty="Angle" To="180" Duration="00:00:00.1"/> </Storyboard> </BeginStoryboard> </EventTrigger> </ControlTemplate.Triggers> </ControlTemplate> </Setter.Value> </Setter> </Style> </Window.Resources> <StackPanel HorizontalAlignment="Center" VerticalAlignment="Center"> <Button Name="gearButton1" Style="{StaticResource GearButtonStyleKey}" Width="32" Height="32" Background="Transparent" Foreground="DarkGray" /> <Button Name="gearButton2" Style="{StaticResource GearButtonStyleKey}" Margin="0 10 0 0" Width="64" Height="64" Background="Transparent" Foreground="DarkGray" /> <Button Name="gearButton3" Style="{StaticResource GearButtonStyleKey}" Margin="0 10 0 0" Width="128" Height="128" Background="Transparent" Foreground="DarkGray" /> </StackPanel> </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 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 |
using System; using System.Windows; using System.Windows.Controls; using System.Windows.Media; using System.Windows.Media.Animation; using System.Windows.Shapes; namespace TestProject; /// <summary> /// 메인 윈도우 /// </summary> public partial class MainWindow : Window { //////////////////////////////////////////////////////////////////////////////////////////////////// Field ////////////////////////////////////////////////////////////////////////////////////////// Private #region Field /// <summary> /// 회전 여부 /// </summary> private bool isRotating = false; #endregion //////////////////////////////////////////////////////////////////////////////////////////////////// Constructor ////////////////////////////////////////////////////////////////////////////////////////// Public #region 생성자 - MainWindow() /// <summary> /// 생성자 /// </summary> public MainWindow() { InitializeComponent(); this.gearButton1.Click += settingButton_Click; this.gearButton2.Click += settingButton_Click; this.gearButton3.Click += settingButton_Click; } #endregion //////////////////////////////////////////////////////////////////////////////////////////////////// Method ////////////////////////////////////////////////////////////////////////////////////////// Private #region 기어 버튼 클릭시 처리하기 - settingButton_Click(sender, e) /// <summary> /// 기어 버튼 클릭시 처리하기 /// </summary> /// <param name="sender">이벤트 발생자</param> /// <param name="e">이벤트 인자</param> private void settingButton_Click(object sender, RoutedEventArgs e) { if(!this.isRotating) { this.isRotating = true; Button button = sender as Button; Path gearPath = (Path)button.Template.FindName("gearPath", button); RotateTransform rotateTransform = gearPath.RenderTransform as RotateTransform; DoubleAnimation rotateBackAnimation = new DoubleAnimation { Duration = TimeSpan.FromSeconds(0.2), From = 180, To = 0 }; rotateBackAnimation.Completed += (s, _) => { this.isRotating = false; rotateTransform.Angle = 0; }; rotateTransform.BeginAnimation(RotateTransform.AngleProperty, rotateBackAnimation); } } #endregion } |
TestProject.zip
■ Window 엘리먼트를 사용해 테두리를 제거하고 모서리가 둥근 윈도우를 만드는 방법을 보여준다. ▶ 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 |
<Window x:Class="TestProject.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Width="800" Height="600" Title="TestProject" ResizeMode="NoResize" Background="Transparent" WindowStyle="None" AllowsTransparency="True"> <WindowChrome.WindowChrome> <WindowChrome ResizeBorderThickness="0" CaptionHeight="0" /> </WindowChrome.WindowChrome> <Border Margin="10" CornerRadius="10" Background="White"> <Border.Effect> <DropShadowEffect BlurRadius="15" Direction="-90" RenderingBias="Quality" ShadowDepth="2" /> </Border.Effect> <Grid> <Grid.RowDefinitions> <RowDefinition Height="Auto" /> <RowDefinition Height="*" /> <RowDefinition Height="Auto" /> </Grid.RowDefinitions> <Grid Grid.Row="0" Background="Transparent"> <StackPanel HorizontalAlignment="Right" Margin="0 10 10 0" Orientation="Horizontal"> <Button Name="minimizeButton" Width="30" Height="30"> <Path StrokeThickness="2" Stroke="Black" Data="M 0 8 H 10" /> </Button> <Button Name="maximizeButton" Width="30" Height="30"> <Path StrokeThickness="2" Stroke="Black" Data="M 0 0 H 10 V 10 H 0 Z" /> </Button> <Button Name="closeButton" Width="30" Height="30"> <Path StrokeThickness="2" Stroke="Black" Data="M 0 0 L 10 10 M 0 10 L 10 0" /> </Button> </StackPanel> </Grid> <Grid Grid.Row="1"> <Ellipse HorizontalAlignment="Center" VerticalAlignment="Center" Width="200" Height="200" Fill="Gold" /> </Grid> <Grid Name="bottomGrid" Grid.Row="2" Height="0" Background="#e0e0e0"> <TextBlock HorizontalAlignment="Center" VerticalAlignment="Center" Text="Sliding Panel Content" /> </Grid> <Button Name="settingButton" Grid.Row="1" VerticalAlignment="Bottom" HorizontalAlignment="Left" Margin="10" Width="30" Height="30" Padding="3"> <Path Stretch="Uniform" Fill="Black" Data=" M 12 8 A 4 4 0 0 1 16 12 A 4 4 0 0 1 12 16 A 4 4 0 0 1 8 12 A 4 4 0 0 1 12 8 M 12 10 A 2 2 0 0 0 10 12 A 2 2 0 0 0 12 14 A 2 2 0 0 0 14 12 A 2 2 0 0 0 12 10 M 10 22 C 9.75 22 9.54 21.82 9.5 21.58 L 9.13 18.93 C 8.5 18.68 7.96 18.34 7.44 17.94 L 4.95 18.95 C 4.73 19.03 4.46 18.95 4.34 18.73 L 2.34 15.27 C 2.21 15.05 2.27 14.78 2.46 14.63 L 4.57 12.97 L 4.5 12 L 4.57 11 L 2.46 9.37 C 2.27 9.22 2.21 8.95 2.34 8.73 L 4.34 5.27 C 4.46 5.05 4.73 4.96 4.95 5.05 L 7.44 6.05 C 7.96 5.66 8.5 5.32 9.13 5.07 L 9.5 2.42 C 9.54 2.18 9.75 2 10 2 H 14 C 14.25 2 14.46 2.18 14.5 2.42 L 14.87 5.07 C 15.5 5.32 16.04 5.66 16.56 6.05 L 19.05 5.05 C 19.27 4.96 19.54 5.05 19.66 5.27 L 21.66 8.73 C 21.79 8.95 21.73 9.22 21.54 9.37 L 19.43 11 L 19.5 12 L 19.43 13 L 21.54 14.63 C 21.73 14.78 21.79 15.05 21.66 15.27 L 19.66 18.73 C 19.54 18.95 19.27 19.04 19.05 18.95 L 16.56 17.95 C 16.04 18.34 15.5 18.68 14.87 18.93 L 14.5 21.58 C 14.46 21.82 14.25 22 14 22 H 10 M 11.25 4 L 10.88 6.61 C 9.68 6.86 8.62 7.5 7.85 8.39 L 5.44 7.35 L 4.69 8.65 L 6.8 10.2 C 6.4 11.37 6.4 12.64 6.8 13.8 L 4.68 15.36 L 5.43 16.66 L 7.86 15.62 C 8.63 16.5 9.68 17.14 10.87 17.38 L 11.24 20 H 12.76 L 13.13 17.39 C 14.32 17.14 15.37 16.5 16.14 15.62 L 18.57 16.66 L 19.32 15.36 L 17.2 13.81 C 17.6 12.64 17.6 11.37 17.2 10.2 L 19.31 8.65 L 18.56 7.35 L 16.15 8.39 C 15.38 7.5 14.32 6.86 13.12 6.62 L 12.75 4 H 11.25 Z" /> </Button> </Grid> </Border> </Window> |
▶ 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 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 |
using System; using System.Windows; using System.Windows.Input; using System.Windows.Media.Animation; namespace TestProject; /// <summary> /// 메인 윈도우 /// </summary> public partial class MainWindow : Window { //////////////////////////////////////////////////////////////////////////////////////////////////// Field ////////////////////////////////////////////////////////////////////////////////////////// Private #region Field /// <summary> /// 하단 그리드 표시 여부 /// </summary> private bool isBottomGridVisible = false; #endregion //////////////////////////////////////////////////////////////////////////////////////////////////// Constructor ////////////////////////////////////////////////////////////////////////////////////////// Public #region 생성자 - MainWindow() /// <summary> /// 생성자 /// </summary> public MainWindow() { InitializeComponent(); MouseMove += Window_MouseMove; this.minimizeButton.Click += minimizeButton_Click; this.maximizeButton.Click += maximizeButton_Click; this.closeButton.Click += closeButton_Click; this.settingButton.Click += settingButton_Click; this.bottomGrid.MouseLeave += bottomGrid_MouseLeave; } #endregion //////////////////////////////////////////////////////////////////////////////////////////////////// Method ////////////////////////////////////////////////////////////////////////////////////////// Private //////////////////////////////////////////////////////////////////////////////// Event #region 윈도우 마우스 이동시 처리하기 - Window_MouseMove(sender, e) /// <summary> /// 윈도우 마우스 이동시 처리하기 /// </summary> /// <param name="sender">이벤트 발생자</param> /// <param name="e">이벤트 인자</param> private void Window_MouseMove(object sender, MouseEventArgs e) { Point mousePoint = e.GetPosition(this); if(mousePoint.Y > ActualHeight - 30) { if(!this.isBottomGridVisible) { ShowBottomGrid(); } } } #endregion #region 최소화 버튼 클릭시 처리하기 - minimizeButton_Click(sender, e) /// <summary> /// 최소화 버튼 클릭시 처리하기 /// </summary> /// <param name="sender">이벤트 발생자</param> /// <param name="e">이벤트 인자</param> private void minimizeButton_Click(object sender, RoutedEventArgs e) { WindowState = WindowState.Minimized; } #endregion #region 최대화 버튼 클릭시 처리하기 - maximizeButton_Click(sender, e) /// <summary> /// 최대화 버튼 클릭시 처리하기 /// </summary> /// <param name="sender">이벤트 발생자</param> /// <param name="e">이벤트 인자</param> private void maximizeButton_Click(object sender, RoutedEventArgs e) { if(WindowState == WindowState.Maximized) { WindowState = WindowState.Normal; } else { WindowState = WindowState.Maximized; } } #endregion #region 닫기 버튼 클릭시 처리하기 - closeButton_Click(sender, e) /// <summary> /// 닫기 버튼 클릭시 처리하기 /// </summary> /// <param name="sender">이벤트 발생자</param> /// <param name="e">이벤트 인자</param> private void closeButton_Click(object sender, RoutedEventArgs e) { Close(); } #endregion #region 설정 버튼 클릭시 처리하기 - settingButton_Click(sender, e) /// <summary> /// 설정 버튼 클릭시 처리하기 /// </summary> /// <param name="sender">이벤트 발생자</param> /// <param name="e">이벤트 인자</param> private void settingButton_Click(object sender, RoutedEventArgs e) { MessageBox.Show(this, "Settings button clicked!"); } #endregion #region 하단 그리드 마우스 이탈시 처리하기 - bottomGrid_MouseLeave(sender, e) /// <summary> /// 하단 그리드 마우스 이탈시 처리하기 /// </summary> /// <param name="sender">이벤트 발생자</param> /// <param name="e">이벤트 인자</param> private void bottomGrid_MouseLeave(object sender, MouseEventArgs e) { if(this.isBottomGridVisible) { HideBottomGrid(); } } #endregion //////////////////////////////////////////////////////////////////////////////// Function #region 하단 그리드 표시하기 - ShowBottomGrid() /// <summary> /// 하단 그리드 표시하기 /// </summary> private void ShowBottomGrid() { DoubleAnimation doubleAnimation = new DoubleAnimation(100, TimeSpan.FromSeconds(0.3)); this.bottomGrid.BeginAnimation(HeightProperty, doubleAnimation); this.isBottomGridVisible = true; } #endregion #region 하단 그리드 숨기기- HideBottomGrid() /// <summary> /// 하단 그리드 숨기기 /// </summary> private void HideBottomGrid() { DoubleAnimation doubleAnimation = new DoubleAnimation(0, TimeSpan.FromSeconds(0.3)); this.bottomGrid.BeginAnimation(HeightProperty, doubleAnimation); this.isBottomGridVisible = false; } #endregion } |
TestProject.zip
■ DropShadowEffect 엘리먼트의 BlurRadius/Direction/RenderingBias/ShadowDepth 속성을 사용해 그림자 효과를 설정하는 방법을 보여준다. ▶ 예제 코드 (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 |
<Window x:Class="TestProject.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Width="800" Height="600" Title="TestProject" ResizeMode="NoResize" Background="Transparent" WindowStyle="None" AllowsTransparency="True"> <WindowChrome.WindowChrome> <WindowChrome ResizeBorderThickness="0" CaptionHeight="0" /> </WindowChrome.WindowChrome> <Border Margin="10" CornerRadius="10" Background="White"> <Border.Effect> <DropShadowEffect BlurRadius="15" Direction="-90" RenderingBias="Quality" ShadowDepth="2" /> </Border.Effect> <Grid> <Grid.RowDefinitions> <RowDefinition Height="Auto" /> <RowDefinition Height="*" /> <RowDefinition Height="Auto" /> </Grid.RowDefinitions> <Grid Grid.Row="0" Background="Transparent"> <StackPanel HorizontalAlignment="Right" Margin="0 10 10 0" Orientation="Horizontal"> <Button Name="minimizeButton" Width="30" Height="30"> <Path StrokeThickness="2" Stroke="Black" Data="M 0 8 H 10" /> </Button> <Button Name="maximizeButton" Width="30" Height="30"> <Path StrokeThickness="2" Stroke="Black" Data="M 0 0 H 10 V 10 H 0 Z" /> </Button> <Button Name="closeButton" Width="30" Height="30"> <Path StrokeThickness="2" Stroke="Black" Data="M 0 0 L 10 10 M 0 10 L 10 0" /> </Button> </StackPanel> </Grid> <Grid Grid.Row="1"> <Ellipse HorizontalAlignment="Center" VerticalAlignment="Center" Width="200" Height="200" Fill="Gold" /> </Grid> <Grid Name="bottomGrid" Grid.Row="2" Height="0" Background="#e0e0e0"> <TextBlock HorizontalAlignment="Center" VerticalAlignment="Center" Text="Sliding Panel Content" /> </Grid> <Button Name="settingButton" Grid.Row="1" VerticalAlignment="Bottom" HorizontalAlignment="Left" Margin="10" Width="30" Height="30" Padding="3"> <Path Stretch="Uniform" Fill="Black" Data=" M 12 8 A 4 4 0 0 1 16 12 A 4 4 0 0 1 12 16 A 4 4 0 0 1 8 12 A 4 4 0 0 1 12 8 M 12 10 A 2 2 0 0 0 10 12 A 2 2 0 0 0 12 14 A 2 2 0 0 0 14 12 A 2 2 0 0 0 12 10 M 10 22 C 9.75 22 9.54 21.82 9.5 21.58 L 9.13 18.93 C 8.5 18.68 7.96 18.34 7.44 17.94 L 4.95 18.95 C 4.73 19.03 4.46 18.95 4.34 18.73 L 2.34 15.27 C 2.21 15.05 2.27 14.78 2.46 14.63 L 4.57 12.97 L 4.5 12 L 4.57 11 L 2.46 9.37 C 2.27 9.22 2.21 8.95 2.34 8.73 L 4.34 5.27 C 4.46 5.05 4.73 4.96 4.95 5.05 L 7.44 6.05 C 7.96 5.66 8.5 5.32 9.13 5.07 L 9.5 2.42 C 9.54 2.18 9.75 2 10 2 H 14 C 14.25 2 14.46 2.18 14.5 2.42 L 14.87 5.07 C 15.5 5.32 16.04 5.66 16.56 6.05 L 19.05 5.05 C 19.27 4.96 19.54 5.05 19.66 5.27 L 21.66 8.73 C 21.79 8.95 21.73 9.22 21.54 9.37 L 19.43 11 L 19.5 12 L 19.43 13 L 21.54 14.63 C 21.73 14.78 21.79 15.05 21.66 15.27 L 19.66 18.73 C 19.54 18.95 19.27 19.04 19.05 18.95 L 16.56 17.95 C 16.04 18.34 15.5 18.68 14.87 18.93 L 14.5 21.58 C 14.46 21.82 14.25 22 14 22 H 10 M 11.25 4 L 10.88 6.61 C 9.68 6.86 8.62 7.5 7.85 8.39 L 5.44 7.35 L 4.69 8.65 L 6.8 10.2 C 6.4 11.37 6.4 12.64 6.8 13.8 L 4.68 15.36 L 5.43 16.66 L 7.86 15.62 C 8.63 16.5 9.68 17.14 10.87 17.38 L 11.24 20 H 12.76 L 13.13 17.39 C 14.32 17.14 15.37 16.5 16.14 15.62 L 18.57 16.66 L 19.32 15.36 L 17.2 13.81 C 17.6 12.64 17.6 11.37 17.2 10.2 L 19.31 8.65 L 18.56 7.35 L 16.15 8.39 C 15.38 7.5 14.32 6.86 13.12 6.62 L 12.75 4 H 11.25 Z" /> </Button> </Grid> </Border> </Window> |
■ DoubleAnimation 클래스를 사용해 윈도우 하단에 마우스 위치시 하단 패널을 표시하는 애니메이션을 만드는 방법을 보여준다. ▶ 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 |
<Window x:Class="TestProject.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Height="600" Width="800" Title="TestProject" FontFamily="나눔고딕코딩" FontSize="16"> <Grid Name="contentGrid" Background="White"> <Grid.RowDefinitions> <RowDefinition Height="*" /> <RowDefinition Height="Auto" /> </Grid.RowDefinitions> <Border Name="bottomGrid" Grid.Row="1" Height="0" Background="#e0e0e0"> <TextBlock HorizontalAlignment="Center" VerticalAlignment="Center" Text="Sliding Panel Content" /> </Border> </Grid> </Window> |
▶ 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 |
using System; using System.Windows; using System.Windows.Input; using System.Windows.Media.Animation; namespace TestProject; /// <summary> /// 메인 윈도우 /// </summary> public partial class MainWindow : Window { //////////////////////////////////////////////////////////////////////////////////////////////////// Field ////////////////////////////////////////////////////////////////////////////////////////// Private #region Field /// <summary> /// 하단 그리드 표시 여부 /// </summary> private bool isBottomGridVisible = false; #endregion //////////////////////////////////////////////////////////////////////////////////////////////////// Constructor ////////////////////////////////////////////////////////////////////////////////////////// Public #region 생성자 - MainWindow() /// <summary> /// 생성자 /// </summary> public MainWindow() { InitializeComponent(); this.contentGrid.MouseMove += contentGrid_MouseMove; this.bottomGrid.MouseLeave += bottomGrid_MouseLeave; } #endregion //////////////////////////////////////////////////////////////////////////////////////////////////// Method ////////////////////////////////////////////////////////////////////////////////////////// Private //////////////////////////////////////////////////////////////////////////////// Event #region 컨텐트 그리드 마우스 이동시 처리하기 - contentGrid_MouseMove(sender, e) /// <summary> /// 컨텐트 그리드 마우스 이동시 처리하기 /// </summary> /// <param name="sender">이벤트 발생자</param> /// <param name="e">이벤트 인자</param> private void contentGrid_MouseMove(object sender, MouseEventArgs e) { Point mousePoint = e.GetPosition(this); if(mousePoint.Y > this.contentGrid.ActualHeight - 30) { if(!this.isBottomGridVisible) { ShowBottomGrid(); } } } #endregion #region 하단 그리드 마우스 이탈시 처리하기 - bottomGrid_MouseLeave(sender, e) /// <summary> /// 하단 그리드 마우스 이탈시 처리하기 /// </summary> /// <param name="sender">이벤트 발생자</param> /// <param name="e">이벤트 인자</param> private void bottomGrid_MouseLeave(object sender, MouseEventArgs e) { if(this.isBottomGridVisible) { HideBottomGrid(); } } #endregion //////////////////////////////////////////////////////////////////////////////// Function #region 하단 그리드 표시하기 - ShowBottomGrid() /// <summary> /// 하단 그리드 표시하기 /// </summary> private void ShowBottomGrid() { DoubleAnimation doubleAnimation = new DoubleAnimation(100, TimeSpan.FromSeconds(0.3)); this.bottomGrid.BeginAnimation(HeightProperty, doubleAnimation); this.isBottomGridVisible = true; } #endregion #region 하단 그리드 숨기기 - HideBottomGrid() /// <summary> /// 하단 그리드 숨기기 /// </summary> private void HideBottomGrid() { DoubleAnimation doubleAnimation = new DoubleAnimation(0, TimeSpan.FromSeconds(0.3)); this.bottomGrid.BeginAnimation(HeightProperty, doubleAnimation); this.isBottomGridVisible = false; } #endregion } |
TestProject.zip
■ LinearGradientBrush 엘리먼트를 사용해 반투명 유리 패널을 만드는 방법을 보여준다. ▶ 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 |
<Window x:Class="TestProject.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Width="800" Height="600" Title="TestProject" FontFamily="나눔고딕코딩" FontSize="16"> <Grid> <Image Stretch="UniformToFill" Source="IMAGE/sample.jpg" /> <Border HorizontalAlignment="Center" VerticalAlignment="Center" Width="400" Height="400"> <Border.Background> <LinearGradientBrush StartPoint="0 0" EndPoint="1 1" Opacity="0.75"> <LinearGradientBrush.GradientStops> <GradientStop Color="WhiteSmoke" Offset="0.2" /> <GradientStop Color="Transparent" Offset="0.4" /> <GradientStop Color="WhiteSmoke" Offset="0.5" /> <GradientStop Color="Transparent" Offset="0.75" /> <GradientStop Color="WhiteSmoke" Offset="0.9" /> <GradientStop Color="Transparent" Offset="1" /> </LinearGradientBrush.GradientStops> </LinearGradientBrush> </Border.Background> <TextBlock HorizontalAlignment="Center" VerticalAlignment="Center" Margin="10" TextWrapping="Wrap" xml:space="preserve"> 일본 도쿄 서쪽 수도권 지역인 가나가와현에서 9일 오후 규모 5.3의 지진이 발생했다. 일본 기상청에 따르면 이날 오후 7시 57분경 가나가와현 서쪽 지역에서 발생한 지진으로 가나가와현 일부 지역에서는 '진도5'의 흔들림이 감지됐다. 도쿄 일부 지역에서도 진도 4의 흔들림이 감지됐다고 전해졌다. 일본 기상청 지진 등급인 '진도'는 절대 강도를 의미하는 규모와는 달리 해당 지역에 있는 사람의 느낌이나 주변 물체 등의 흔들림 정도를 0∼7의 수치로 나타낸 상대적 개념이다. 진도5는 대부분의 사람이 공포를 느끼고 선반에 있는 식기나 책장의 책이 떨어지기도 하는 수준이다. 가나가와현 야마토시에 거주 중인 교민 이모 씨는 집에 있다가 지진으로 인한 흔들림이 느껴져 깜짝 놀랐다고 전했다. </TextBlock> </Border> </Grid> </Window> |
TestProject.zip
■ Image 클래스에서 BitmapSource 객체를 구하는 방법을 보여준다. ▶ Image 클래스 : BitmapSource 객체 구하기 예제 (C#)
|
1 2 3 4 5 6 7 8 9 10 11 12 |
using System.Windows.Controls; using System.Windows.Media.Imaging; // ... Image image; // ... BitmapSource bitmapSource = GetBitmapSource(image); |
▶ Image 클래스 :
■ Compositor 클래스를 사용해 사각형에 그림자 효과를 그리는 방법을 보여준다. ▶ MainPage.xaml
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<?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:mgcux="using:Microsoft.Graphics.Canvas.UI.Xaml" Background="{ThemeResource ApplicationPageBackgroundThemeBrush}" FontFamily="나눔고딕코딩" FontSize="16"> <Grid Name="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 |
using System.Numerics; using Microsoft.UI; using Microsoft.UI.Composition; using Microsoft.UI.Xaml.Controls; using Microsoft.UI.Xaml.Hosting; namespace TestProject; /// <summary> /// 메인 페이지 /// </summary> public sealed partial class MainPage : Page { //////////////////////////////////////////////////////////////////////////////////////////////////// Constructor ////////////////////////////////////////////////////////////////////////////////////////// Public #region 생성자 - MainPage() /// <summary> /// 생성자 /// </summary> public MainPage() { this.InitializeComponent(); Visual gridVisual = ElementCompositionPreview.GetElementVisual(this.grid); Compositor compositor = gridVisual.Compositor; CompositionColorBrush compositionColorBrush = compositor.CreateColorBrush(Colors.Blue); DropShadow dropShadow = compositor.CreateDropShadow(); dropShadow.BlurRadius = 15.0f; dropShadow.Offset = new Vector3(10, 10, 0); dropShadow.Color = Colors.Black; SpriteVisual spriteVisual = compositor.CreateSpriteVisual(); spriteVisual.Size = new Vector2(200, 200); spriteVisual.Offset = new Vector3(100, 100, 0); spriteVisual.Brush = compositionColorBrush; spriteVisual.Shadow = dropShadow; ContainerVisual containerVisual = compositor.CreateContainerVisual(); containerVisual.Children.InsertAtTop(spriteVisual); ElementCompositionPreview.SetElementChildVisual(this.grid, containerVisual); } #endregion } |
TestProject.zip
■ ContainerVisual 클래스의 Children 속성에서 VisualCollection 객체의 InsertAtTop 메소드를 사용해 자식 비주얼을 제일 앞에 추가하는 방법을 보여준다. ▶ 예제 코드 (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 34 35 36 37 38 |
using System.Numerics; using Microsoft.UI; using Microsoft.UI.Composition; using Microsoft.UI.Xaml.Hosting; // ... Grid grid; // ... Visual gridVisual = ElementCompositionPreview.GetElementVisual(grid); Compositor compositor = gridVisual.Compositor; CompositionColorBrush compositionColorBrush = compositor.CreateColorBrush(Colors.Blue); DropShadow dropShadow = compositor.CreateDropShadow(); dropShadow.BlurRadius = 15.0f; dropShadow.Offset = new Vector3(10, 10, 0); dropShadow.Color = Colors.Black; SpriteVisual spriteVisual = compositor.CreateSpriteVisual(); spriteVisual.Size = new Vector2(200, 200); spriteVisual.Offset = new Vector3(100, 100, 0); spriteVisual.Brush = compositionColorBrush; spriteVisual.Shadow = dropShadow; ContainerVisual containerVisual = compositor.CreateContainerVisual(); containerVisual.Children.InsertAtTop(spriteVisual); ElementCompositionPreview.SetElementChildVisual(this.grid, containerVisual); |
■ DropShadow 클래스의 BlurRadius/Offset/Color 속성을 사용하는 방법을 보여준다. ▶ 예제 코드 (C#)
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
using Microsoft.UI; using Microsoft.UI.Composition; using Microsoft.UI.Xaml.Hosting; // ... Grid grid; // ... Visual gridVisual = ElementCompositionPreview.GetElementVisual(grid); Compositor compositor = gridVisual.Compositor; DropShadow dropShadow = compositor.CreateDropShadow(); dropShadow.BlurRadius = 15.0f; dropShadow.Offset = new Vector3(10, 10, 0); dropShadow.Color = Colors.Black; |
■ Compositor 클래스의 CreateDropShadow 메소드를 사용해 DropShadow 객체를 만드는 방법을 보여준다. ▶ 예제 코드 (C#)
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
using Microsoft.UI.Composition; using Microsoft.UI.Xaml.Hosting; // ... Grid grid; // ... Visual gridVisual = ElementCompositionPreview.GetElementVisual(grid); Compositor compositor = gridVisual.Compositor; DropShadow dropShadow = compositor.CreateDropShadow(); |
■ Compositor 클래스의 CreateColorBrush 메소드를 사용해 CompositionColorBrush 객체를 만드는 방법을 보여준다. ▶ 예제 코드 (C#)
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
using System.Numerics; using Microsoft.UI; using Microsoft.UI.Composition; using Microsoft.UI.Xaml.Hosting; // ... Grid grid; // ... Visual gridVisual = ElementCompositionPreview.GetElementVisual(grid); Compositor compositor = gridVisual.Compositor; CompositionColorBrush compositionColorBrush = compositor.CreateColorBrush(Colors.Blue); |
■ SpriteVisual 클래스의 Size/Offset/Brush/Shadow 속성을 사용하는 방법을 보여준다. ▶ 예제 코드 (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 |
using System.Numerics; using Microsoft.UI; using Microsoft.UI.Composition; using Microsoft.UI.Xaml.Hosting; // ... Grid grid; // ... Visual gridVisual = ElementCompositionPreview.GetElementVisual(this.grid); Compositor compositor = gridVisual.Compositor; CompositionColorBrush compositionColorBrush = compositor.CreateColorBrush(Colors.Blue); DropShadow dropShadow = compositor.CreateDropShadow(); dropShadow.BlurRadius = 15.0f; dropShadow.Offset = new Vector3(10, 10, 0); dropShadow.Color = Colors.Black; SpriteVisual spriteVisual = compositor.CreateSpriteVisual(); spriteVisual.Size = new Vector2(200, 200); spriteVisual.Offset = new Vector3(100, 100, 0); spriteVisual.Brush = compositionColorBrush; spriteVisual.Shadow = dropShadow; |
■ Compositor 클래스의 CreateContainerVisual 메소드를 사용해 ContainerVisual 객체를 만드는 방법을 보여준다. ▶ 예제 코드 (C#)
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
using Microsoft.UI.Composition; using Microsoft.UI.Xaml.Hosting; // ... Grid grid; // ... Visual gridVisual = ElementCompositionPreview.GetElementVisual(this.grid); Compositor compositor = gridVisual.Compositor; ContainerVisual containerVisual = compositor.CreateContainerVisual(); |
■ CanvasControl 클래스의 Draw 이벤트를 사용해 그림자 효과를 그리는 방법을 보여준다. ※ 비주얼 스튜디오에서 TestProject(Unpackaged) 모드로 빌드한다. ※ TestProject.csproj 프로젝트 파일에서 WindowsPackageType
■ IconSourceElement 엘리먼트의 IconSource 속성에서 FontIconSource 엘리먼트를 설정해 폰트 아이콘을 표시하는 방법을 보여준다. ※ 비주얼 스튜디오에서 TestProject(Unpackaged) 모드로 빌드한다. ※ TestProject.csproj 프로젝트
■ SymbolIcon 엘리먼트의 Symbol 속성을 사용해 심볼 아이콘을 표시하는 방법을 보여준다. ※ 비주얼 스튜디오에서 TestProject(Unpackaged) 모드로 빌드한다. ※ TestProject.csproj 프로젝트 파일에서 WindowsPackageType
■ Button 엘리먼트의 FontFamily/Content 속성을 사용해 아이콘을 표시하는 방법을 보여준다. ※ 비주얼 스튜디오에서 TestProject(Unpackaged) 모드로 빌드한다. ※ TestProject.csproj 프로젝트 파일에서 WindowsPackageType 태그를
■ Compositor 클래스를 사용해 화면 배경의 브러시 애니메이션을 만드는 방법을 보여준다. ※ 비주얼 스튜디오에서 TestProject(Unpackaged) 모드로 빌드한다. ※ TestProject.csproj 프로젝트 파일에서 WindowsPackageType
■ CompositionColorGradientStop 클래스의 StartAnimation 메소드를 사용해 브러시 애니메이션을 시작하는 방법을 보여준다. ▶ 예제 코드 (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 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 |
using System; using System.Numerics; using Microsoft.UI; using Microsoft.UI.Composition; using Microsoft.UI.Xaml.Controls; using Microsoft.UI.Xaml.Hosting; // ... Grid grid = null; // ... Visual gridVisual = ElementCompositionPreview.GetElementVisual(grid); Compositor compositor = gridVisual.Compositor; SpriteVisual spriteVisual = compositor.CreateSpriteVisual(); spriteVisual.Size = new Vector2((float)grid.ActualWidth, (float)grid.ActualHeight); ElementCompositionPreview.SetElementChildVisual(grid, spriteVisual); CompositionLinearGradientBrush compositionLinearGradientBrush = compositor.CreateLinearGradientBrush(); compositionLinearGradientBrush.StartPoint = new Vector2(0, 0); compositionLinearGradientBrush.EndPoint = new Vector2(1, 1); CompositionColorGradientStop compositionColorGradientStop1 = compositor.CreateColorGradientStop(0.0f, Colors.Transparent); CompositionColorGradientStop compositionColorGradientStop2 = compositor.CreateColorGradientStop(1.0f, Colors.Blue ); compositionLinearGradientBrush.ColorStops.Add(compositionColorGradientStop1); compositionLinearGradientBrush.ColorStops.Add(compositionColorGradientStop2); spriteVisual.Brush = compositionLinearGradientBrush; ScalarKeyFrameAnimation offsetScalarKeyFrameAnimation = compositor.CreateScalarKeyFrameAnimation(); offsetScalarKeyFrameAnimation.InsertKeyFrame(0.0f, -1.0f); offsetScalarKeyFrameAnimation.InsertKeyFrame(1.0f, 1.0f); offsetScalarKeyFrameAnimation.IterationBehavior = AnimationIterationBehavior.Forever; offsetScalarKeyFrameAnimation.Duration = TimeSpan.FromSeconds(1.5); compositionColorGradientStop1.StartAnimation("Offset", offsetScalarKeyFrameAnimation); compositionColorGradientStop2.StartAnimation("Offset", offsetScalarKeyFrameAnimation); |
■ Compositor 클래스의 CreateLinearGradientBrush 메소드를 사용해 CompositionLinearGradientBrush 객체를 만드는 방법을 보여준다. ▶ 예제 코드 (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 34 35 36 37 |
using System.Numerics; using Microsoft.UI; using Microsoft.UI.Composition; using Microsoft.UI.Xaml.Controls; using Microsoft.UI.Xaml.Hosting; // ... Grid grid; // ... Visual gridVisual = ElementCompositionPreview.GetElementVisual(grid); Compositor compositor = gridVisual.Compositor; SpriteVisual spriteVisual = compositor.CreateSpriteVisual(); spriteVisual.Size = new Vector2((float)grid.ActualWidth, (float)grid.ActualHeight); ElementCompositionPreview.SetElementChildVisual(grid, spriteVisual); CompositionLinearGradientBrush compositionLinearGradientBrush = compositor.CreateLinearGradientBrush(); compositionLinearGradientBrush.StartPoint = new Vector2(0, 0); compositionLinearGradientBrush.EndPoint = new Vector2(1, 1); CompositionColorGradientStop compositionColorGradientStop1 = compositor.CreateColorGradientStop(0.0f, Colors.Transparent); CompositionColorGradientStop compositionColorGradientStop2 = compositor.CreateColorGradientStop(1.0f, Colors.Blue ); compositionLinearGradientBrush.ColorStops.Add(compositionColorGradientStop1); compositionLinearGradientBrush.ColorStops.Add(compositionColorGradientStop2); spriteVisual.Brush = compositionLinearGradientBrush; |
■ Compositor 클래스의 CreateSpriteVisual 메소드를 사용해 SpriteVisual 객체를 만드는 방법을 보여준다. ▶ 예제 코드 (C#)
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
using System.Numerics; using Microsoft.UI.Composition; using Microsoft.UI.Xaml.Controls; using Microsoft.UI.Xaml.Hosting; // ... Grid grid; // ... Visual gridVisual = ElementCompositionPreview.GetElementVisual(grid); Compositor compositor = gridVisual.Compositor; SpriteVisual spriteVisual = this.compositor.CreateSpriteVisual(); spriteVisual.Size = new Vector2((float)grid.ActualWidth, (float)grid.ActualHeight); |
■ FontIcon 엘리먼트의 FontFamily/Glyph 속성을 사용해 이모지 아이콘을 표시하는 방법을 보여준다. ※ 비주얼 스튜디오에서 TestProject(Unpackaged) 모드로 빌드한다. ※ TestProject.csproj 프로젝트 파일에서 WindowsPackageType
■ CanvasTextFormat 클래스의 GetSystemFontFamilies 정적 메소드를 사용해 언어별 폰트명 리스트를 구하는 방법을 보여준다. ※ 상기 클래스를 사용하기 위해서 Microsoft.Graphics.Win2D 누겟을 설치한다. ※
■ InstalledFontCollection 클래스의 Families 속성을 사용해 한글 폰트명 리스트를 구하는 방법을 보여준다. ※ 상기 클래스를 사용하기 위해서 System.Drawing.Common 누겟을 설치한다. ※ 비주얼