آموزش ساخت Window سفارشی در WPF
در این بخش آموزش ساخت Window سفارشی در WPF را برای شما آماده کرده ایم که یک آموزش مناسب برای ساخت کنترل های سفارشی با استفاده از زبان برنامه نویسی سی شارپ و تکنولوژی Xaml است. در ادامه می توانید توضیحات، تصاویر و فیلمی از نتیجه نهایی را مشاهده کنید. همچنین سورس کد پروژه نیز به صورت رایگان برای دانلود قرار داده شده است.
توضیحات
برای ساخت این پروژه از نرم افزار Visual Studio نسخه 2019 و فریم ورک .Net Core 3.1 استفاده شده است. البته شما می توانید با اعمال تغییرات کوچکی پروژه را در نسخه های پایین تر نیز پیاده سازی کنید. نتیجه نهایی به شکل زیر خواهد بود.
مراحل آموزش
- ایجاد پروژه WPF Custom Control Library
- ایجاد کنترل CustomWindow
- کلاس WindowChrome
- ایجاد پروژه WPF
- استفاده از کنترل CustomWindow
ایجاد پروژه WPF Custom Control Library
ابتدا یک Blank Solution ایجاد کنید و سپس یک پروژه از نوع WPF Custom Control Library به آن اضافه کنید.
ایجاد کنترل CustomWindow
قبل ایجاد کنترل مورد نظر ما به یک سری NativeMethod نیاز داریم که آن ها را در کلاس استاتیک NativeMethod قرار داده ام. در زیر می توانید محتوای این فایل را مشاهده کنید.
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 | using System; using System.Drawing; using System.Runtime.InteropServices; namespace CustomControls.Utils { public static class NativeMethods { #region Dll Imports [DllImport("user32.dll", EntryPoint = "SetWindowPos")] public static extern IntPtr SetWindowPos(IntPtr hWnd, int hWndInsertAfter, int x, int Y, int cx, int cy, int wFlags); [DllImport("User32.dll")] [return: MarshalAs(UnmanagedType.Bool)] private static extern bool GetCursorPos(ref System.Drawing.Point lpPoint); [DllImport("User32.dll")] private static extern IntPtr MonitorFromPoint(System.Drawing.Point pt, uint dwFlags); [DllImport("User32.dll", CharSet = CharSet.Auto)] public static extern bool GetMonitorInfo(IntPtr hmonitor, [In, Out]MonitorInfo info); [DllImport("user32.dll", CharSet = CharSet.Auto)] private static extern IntPtr FindWindow(string strClassName, string strWindowName); [DllImport("shell32.dll")] private static extern uint SHAppBarMessage(uint dwMessage, ref TaskbarData pData); #endregion #region Types [StructLayout(LayoutKind.Sequential, CharSet = CharSet.Auto, Pack = 4)] public class MonitorInfo { public int cbSize = Marshal.SizeOf(typeof(MonitorInfo)); public Rect rcMonitor = new Rect(); public Rect rcWork = new Rect(); public int dwFlags = 0; [MarshalAs(UnmanagedType.ByValArray, SizeConst = 32)] public char[] szDevice = new char[32]; } [StructLayout(LayoutKind.Sequential)] public struct Point { public readonly int x; public readonly int y; public Point(int x, int y) { this.x = x; this.y = y; } } [StructLayout(LayoutKind.Sequential)] public struct Rect { public int left; public int top; public int right; public int bottom; } private enum TaskbarMessages { New = 0x00, Remove = 0x01, QueryPos = 0x02, SetPos = 0x03, GetState = 0x04, GetTaskBarPos = 0x05, Activate = 0x06, GetAutoHideBar = 0x07, SetAutoHideBar = 0x08, WindowPosChanged = 0x09, SetState = 0x0a } [StructLayout(LayoutKind.Sequential)] private struct TaskbarData { public uint cbSize; public IntPtr hWnd; public uint uCallbackMessage; public uint uEdge; public Rectangle rc; public int lParam; } public enum TaskbarStates { AutoHide = 0x01, AlwaysOnTop = 0x02 } #endregion #region Constants private const int MonitorDefaultToNearest = 2; private const string TaskbarWindowName = "System_TrayWnd"; public const int SwpShowWindow = 0x0040; #endregion #region Methods public static IntPtr GetCurrentMonitor() { var p = new System.Drawing.Point(0, 0); GetCursorPos(ref p); return MonitorFromPoint(p, MonitorDefaultToNearest); } public static TaskbarStates GetTaskbarState() { TaskbarData msgData = new TaskbarData(); msgData.cbSize = (uint)Marshal.SizeOf(msgData); msgData.hWnd = FindWindow(TaskbarWindowName, null); return (TaskbarStates)SHAppBarMessage((uint)TaskbarMessages.GetState, ref msgData); } #endregion } } |
از این متدها برای دسترسی به اطلاعات Monitor و Taskbar و همچنین تنظیم موقعیت Window استفاده خواهیم کرد. بعد از ایجاد کلاس بالا، یک آیتم از نوع WPF Custom Control را با نام CustomWindow به پروژه اضافه کنید. بعد از انجام اینکار یک فایل جدید با نام CustomWindow.cs ایجاد و یک استایل پیشفرض برای آن در داخل فایل Generic.xaml اضافه می شود. محتوای فایل CustomWindow.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 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 | using CustomControls.Utils; using System; using System.Windows; using System.Windows.Controls; using System.Windows.Interop; using System.Windows.Media; namespace CustomControls { public class CustomWindow : Window { #region Fields private const string TemplateContainerName = "PART_TemplateContainerBorder"; private const string TitleBarContainerName = "PART_TitleBarContainerGrid"; private const string IconPresenterName = "PART_IconImage"; private const string TitlePresenterName = "PART_TitleTextBlock"; private const string WindowCloseButtonName = "PART_WindowCloseButton"; private const string WindowMaximizeButtonName = "PART_WindowMaximizeButton"; private const string WindowMinimizeButtonName = "PART_WindowMinimizeButton"; private Button _windowCloseButton; private Button _windowMaximizeButton; private Button _windowMinimizeButton; #endregion #region Constructors static CustomWindow() { DefaultStyleKeyProperty.OverrideMetadata(typeof(CustomWindow), new FrameworkPropertyMetadata(typeof(CustomWindow))); } #endregion #region Overrides public override void OnApplyTemplate() { UnregisterClickHandlers(); LoadButtonsTemplate(); RegisterClickHandlers(); CheckIconAndTitle(); } protected override void OnStateChanged(EventArgs e) { if (!(GetTemplateChild(TemplateContainerName) is Border templateContainerBorder)) return; if (WindowState == WindowState.Maximized) { var removeOnePixel = true; if (IsTaskbarVisible()) { templateContainerBorder.Padding = new Thickness(7); removeOnePixel = false; } AdjustWindowPosition(removeOnePixel); } else if (WindowState == WindowState.Normal) { templateContainerBorder.Padding = new Thickness(0); } } #endregion #region Methods protected virtual bool IsTaskbarVisible() => NativeMethods.GetTaskbarState() != NativeMethods.TaskbarStates.AutoHide; protected virtual NativeMethods.MonitorInfo GetMonitorInfo() { var monitorHandle = NativeMethods.GetCurrentMonitor(); var monitorInfo = new NativeMethods.MonitorInfo(); NativeMethods.GetMonitorInfo(monitorHandle, monitorInfo); return monitorInfo; } protected virtual void AdjustWindowPosition(bool removeOnePixel) { var currentWindowHandle = new WindowInteropHelper(this).EnsureHandle(); var monitorInfo = GetMonitorInfo(); var x = monitorInfo.rcWork.left; var y = monitorInfo.rcWork.top; var width = monitorInfo.rcWork.right; var height = monitorInfo.rcWork.bottom; // NOTE: // To adjust window position when auto-hide taskbar enabled. // If we don't remove one pixel from bottom of the window, // our custom window will block auto-hide taskbar. height = removeOnePixel ? height - 1 : height; NativeMethods.SetWindowPos(currentWindowHandle, 0, x, y, width, height, NativeMethods.SwpShowWindow); } protected virtual void LoadButtonsTemplate() { _windowCloseButton = (Button)GetTemplateChild(WindowCloseButtonName) ?? throw new NullReferenceException("Close button template not found."); _windowMinimizeButton = (Button)GetTemplateChild(WindowMinimizeButtonName) ?? throw new NullReferenceException("Minimize button template not found."); _windowMaximizeButton = (Button)GetTemplateChild(WindowMaximizeButtonName) ?? throw new NullReferenceException("Maximize button template not found."); } protected virtual void RegisterClickHandlers() { _windowCloseButton.Click += CloseWindow; _windowMinimizeButton.Click += MinimizeWindow; _windowMaximizeButton.Click += MaximizeWindow; } protected virtual void UnregisterClickHandlers() { if (_windowCloseButton != null) _windowCloseButton.Click -= CloseWindow; if (_windowMinimizeButton != null) _windowMinimizeButton.Click -= MinimizeWindow; if (_windowMaximizeButton != null) _windowMaximizeButton.Click -= MaximizeWindow; } protected virtual void CheckIconAndTitle() { var TitleBarContainer = GetTemplateChild(TitleBarContainerName) as Grid; if (Icon == null) { var iconImage = GetTemplateChild(IconPresenterName) as Image; TitleBarContainer?.Children.Remove(iconImage); } if (string.IsNullOrWhiteSpace(Title)) { var titleTextBlock = GetTemplateChild(TitlePresenterName) as TextBlock; TitleBarContainer?.Children.Remove(titleTextBlock); } } #endregion #region Event Handlers protected virtual void CloseWindow(object sender, EventArgs args) => Close(); protected virtual void MinimizeWindow(object sender, EventArgs args) => WindowState = WindowState.Minimized; protected virtual void MaximizeWindow(object sender, EventArgs args) => WindowState = (WindowState == WindowState.Normal) ? WindowState.Maximized : WindowState.Normal; #endregion #region DependencyProperty : ActiveTitleBarBackground public static readonly DependencyProperty ActiveTitleBarBackgroundProperty = DependencyProperty.Register(nameof(ActiveTitleBarBackground), typeof(Brush), typeof(Window), new PropertyMetadata(default(Brush))); public Brush ActiveTitleBarBackground { get => (Brush)GetValue(ActiveTitleBarBackgroundProperty); set => SetValue(ActiveTitleBarBackgroundProperty, value); } #endregion #region DependencyProperty : InactiveTitleBarBackground public static readonly DependencyProperty InactiveTitleBarBackgroundProperty = DependencyProperty.Register(nameof(InactiveTitleBarBackground), typeof(Brush), typeof(Window), new PropertyMetadata(default(Brush))); public Brush InactiveTitleBarBackground { get => (Brush)GetValue(InactiveTitleBarBackgroundProperty); set => SetValue(InactiveTitleBarBackgroundProperty, value); } #endregion #region DependencyProperty : WindowButtonMouseOverBackground public static readonly DependencyProperty WindowButtonMouseOverBackgroundProperty = DependencyProperty.Register(nameof(WindowButtonMouseOverBackground), typeof(Brush), typeof(Window), new PropertyMetadata(default(Brush))); public Brush WindowButtonMouseOverBackground { get => (Brush)GetValue(WindowButtonMouseOverBackgroundProperty); set => SetValue(WindowButtonMouseOverBackgroundProperty, value); } #endregion #region DependencyProperty : WindowButtonMouseOverForeground public static readonly DependencyProperty WindowButtonMouseOverForegroundProperty = DependencyProperty.Register(nameof(WindowButtonMouseOverForeground), typeof(Brush), typeof(Window), new PropertyMetadata(default(Brush))); public Brush WindowButtonMouseOverForeground { get => (Brush)GetValue(WindowButtonMouseOverForegroundProperty); set => SetValue(WindowButtonMouseOverForegroundProperty, value); } #endregion } } |
در ادامه بخش های مختلف کد بالا را توضیح می دهم. بخش Fields شامل اسم قسمت های مختلف Template سفارشی ما و سه متغیر از نوع Button برای نگه داشتن دکمه های Close، Maximize و Minimize است. بخش Constructors شامل یک سازنده استاتیک است که برای Override کردن متادیتای مربوط به کنترل والد استفاده می شود. در آموزش های قبلی این بخش را توضیح داده ام. بخش Overrides شامل متدهای Override شده است. متد زیر مسئول آماده سازی Template کنترل است.
1 2 3 4 5 6 7 | public override void OnApplyTemplate() { UnregisterClickHandlers(); LoadButtonsTemplate(); RegisterClickHandlers(); CheckIconAndTitle(); } |
و هندلر زیر زمانی که وضعیت Window تغییر کند، فراخوانی می شود. منظور از وضعیت یعنی Maximize، Minimize و یا Close شدن است. کار اصلی این هندلر تنظیم Padding مناسب برای قالب و فراخوانی تابع AdjustWindowPosition برای تنظیم موقعیت Window است.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | protected override void OnStateChanged(EventArgs e) { if (!(GetTemplateChild(TemplateContainerName) is Border templateContainerBorder)) return; if (WindowState == WindowState.Maximized) { var removeOnePixel = true; if (IsTaskbarVisible()) { templateContainerBorder.Padding = new Thickness(7); removeOnePixel = false; } AdjustWindowPosition(removeOnePixel); } else if (WindowState == WindowState.Normal) { templateContainerBorder.Padding = new Thickness(0); } } |
بخش Methods شامل متدهای مختلفی است که هر کدام را توضیح می دهم. متد IsTaskbarVisible با استفاده از NativeMethod هایی که در بالا ایجاد کردیم، وضعیت Taskbar ویندوز را بررسی می کند و اگر در حالت Auto-Hide نباشد، true باز میگرداند. متد GetMonitorInfo اطلاعات Monitor جاری را برمیگرداند. ساختار این اطلاعات به شکل زیر است.
1 2 3 4 5 6 7 8 9 | public class MonitorInfo { public int cbSize = Marshal.SizeOf(typeof(MonitorInfo)); public Rect rcMonitor = new Rect(); public Rect rcWork = new Rect(); public int dwFlags = 0; [MarshalAs(UnmanagedType.ByValArray, SizeConst = 32)] public char[] szDevice = new char[32]; } |
متد AdjustWindowPosition مسئول تنظیم موقعیت Window براساس وضعیت Monitor و Taskbar است. متد LoadButtonsTemplate قالب های مربوط به دکمه های Window را لود می کند. متد RegisterClickHandlers برای رویداد کلیک دکمه های Window هندلر ثبت می کند (البته شما می توانید از Command هم استفاده کنید). متد UnregisterClickHandlers هم هندلر های ثبت شده را حذف می کند. متد CheckIconAndTitle زمانی که مقداری به عنوان Title و Icon تنظیم نشده باشد، Template مربوط به آن ها را حذف می کند. بخش Event Handlers شامل هندلر دکمه های Window است و فکر نمیکنم لازم به توضیح باشد که چه کاری انجام می دهند. بخش خاصیت ها (Dependency Properties) شامل خاصیت های کنترل سفارشی است که هر کدام را در زیر توضیح می دهم.
- خاصیت ActiveTitleBarBackground: رنگ TitleBar در حالتی که برنامه به صورت Active است رامشخص می کند.
- خاصیت InactiveTitleBarBackground: رنگ TitleBar در حالتی که برنامه به صورت Inactive است را مشخص می کند.
- خاصیت WindowButtonMouseOverBackground: همانطور که از اسم آن نیز مشخص است، رنگ پس زمینه دکمه های Window در حالتی که ماوس بر روی آن ها قرار دارد را مشخص می کند.
- خاصیت WindowButtonMouseOverForeground: مشابه خاصیت بالا.
تا اینجای کار بخش مربوط به C# را پیاده سازی کردیم، در ادامه کدهای Xaml را بررسی خواهیم کرد. در زیر کد مربوط به قالب کنترل CustomWindow را مشاهده می کنید (فایل CustomWindow.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 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 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 | <ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:local="clr-namespace:CustomControls" xmlns:system="clr-namespace:System;assembly=System.Runtime"> <!--#region Constants --> <system:Double x:Key="TitleBarHeight">24</system:Double> <system:Double x:Key="WindowButtonWidth">28</system:Double> <system:Double x:Key="WindowButtonHeight">24</system:Double> <system:Double x:Key="IconSize">20</system:Double> <system:Double x:Key="TitleFontSize">13</system:Double> <!--#endregion--> <!--#region Window Buttons Content Templates--> <DataTemplate x:Key="CloseButtonIcon"> <Viewbox Stretch="Uniform"> <Canvas Width="2048" Height="2048"> <Path Fill="{Binding Foreground, RelativeSource={RelativeSource FindAncestor, AncestorType=Button}}" Data="M1718.1,1534.2c18.9,18.9,18.9,49.6,0,68.5l-115.4,115.4c-18.9,18.9-49.6,18.9-68.5,0L1024,1207.8l-510.2,510.2 c-18.9,18.9-49.6,18.9-68.5,0l-115.4-115.4c-18.9-18.9-18.9-49.6,0-68.5L840.2,1024L329.9,513.8c-18.9-18.9-18.9-49.6,0-68.5 l115.4-115.4c18.9-18.9,49.6-18.9,68.5,0L1024,840.2l510.2-510.2c18.9-18.9,49.6-18.9,68.5,0l115.4,115.4 c18.9,18.9,18.9,49.6,0,68.5L1207.8,1024L1718.1,1534.2z"/> </Canvas> </Viewbox> </DataTemplate> <DataTemplate x:Key="MinimizeButtonIcon"> <Viewbox Stretch="Uniform"> <Canvas Width="2048" Height="2048"> <Path Fill="{Binding Foreground, RelativeSource={RelativeSource FindAncestor, AncestorType=Button}}" Data="M1924,1569.3v-163.1c0-26.7-21.7-48.4-48.4-48.4H172.4c-26.7,0-48.4,21.7-48.4,48.4v163.1c0,26.7,21.7,48.4,48.4,48.4 h1703.1C1902.3,1617.7,1924,1596.1,1924,1569.3z"/> </Canvas> </Viewbox> </DataTemplate> <DataTemplate x:Key="MaximizeButtonIcon"> <Viewbox Stretch="Uniform"> <Canvas Width="2048" Height="2048"> <Path Fill="{Binding Foreground, RelativeSource={RelativeSource FindAncestor, AncestorType=Button}}" Data="M1520.5,527.5v993h-993v-993H1520.5 M1768.81,227.5H279.19c-28.55,0-51.69,23.14-51.69,51.69v1489.62 c0,28.55,23.14,51.69,51.69,51.69h1489.62c28.55,0,51.69-23.14,51.69-51.69V279.19C1820.5,250.64,1797.36,227.5,1768.81,227.5 L1768.81,227.5z"/> </Canvas> </Viewbox> </DataTemplate> <DataTemplate x:Key="RestoreButtonIcon"> <Viewbox Stretch="Uniform"> <Canvas Width="2048" Height="2048"> <Path Fill="{Binding Foreground, RelativeSource={RelativeSource FindAncestor, AncestorType=Button}}" Data="M1314.4,729.9v993h-993v-993H1314.4 M1562.8,429.9H73.1c-28.6,0-51.7,23.1-51.7,51.7v1489.6c0,28.6,23.1,51.7,51.7,51.7 h1489.6c28.6,0,51.7-23.1,51.7-51.7V481.6C1614.4,453.1,1591.3,429.9,1562.8,429.9L1562.8,429.9z M1986.3,14H496.7 C468.1,14,445,37.1,445,65.7V314h300h993v993v300h248.3c28.6,0,51.7-23.1,51.7-51.7V65.7C2038,37.1,2014.9,14,1986.3,14z"/> </Canvas> </Viewbox> </DataTemplate> <!--#endregion--> <!--#region Window Buttons Styles--> <Style x:Key="WindowButton" TargetType="{x:Type Button}"> <Setter Property="UseLayoutRounding" Value="True"/> <Setter Property="Width" Value="{StaticResource WindowButtonWidth}" /> <Setter Property="Height" Value="{StaticResource WindowButtonHeight}" /> <Setter Property="Foreground" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Foreground}" /> <Setter Property="Background" Value="Transparent" /> <Setter Property="BorderBrush" Value="Transparent" /> <Setter Property="BorderThickness" Value="0" /> <Setter Property="WindowChrome.IsHitTestVisibleInChrome" Value="True" /> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="{x:Type Button}"> <Border x:Name="ContainerBorder" SnapsToDevicePixels="True" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}"> <ContentPresenter x:Name="ContentPresenter" Content="{TemplateBinding Content}" ContentTemplate="{TemplateBinding ContentTemplate}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" Margin="{TemplateBinding Padding}" RenderOptions.ClearTypeHint="Auto" TextOptions.TextRenderingMode="Auto" TextOptions.TextFormattingMode="Display" Opacity="0.24"/> </Border> <ControlTemplate.Triggers> <Trigger Property="IsEnabled" Value="False"> <Setter Property="Opacity" TargetName="ContainerBorder" Value="0.42"/> </Trigger> <Trigger Property="IsMouseOver" Value="True"> <Setter Property="Opacity" TargetName="ContentPresenter" Value="0.8"/> <Setter Property="Background" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=WindowButtonMouseOverBackground}"/> <Setter Property="Foreground" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=WindowButtonMouseOverForeground}"/> </Trigger> </ControlTemplate.Triggers> </ControlTemplate> </Setter.Value> </Setter> </Style> <Style x:Key="CloseButtonStyle" BasedOn="{StaticResource WindowButton}" TargetType="{x:Type Button}"> <Style.Triggers> <Trigger Property="IsMouseOver" Value="True"> <Setter Property="Background" Value="#D53826"/> <Setter Property="Foreground" Value="#ffffff"/> </Trigger> </Style.Triggers> </Style> <!--#endregion--> <!--#region Window Chrome--> <WindowChrome x:Key="CustomWindowChrome" ResizeBorderThickness="{Binding Source={x:Static SystemParameters.WindowResizeBorderThickness}}" UseAeroCaptionButtons="False" CaptionHeight="{StaticResource TitleBarHeight}"/> <!--#endregion--> <!--#region Window Template --> <ControlTemplate x:Key="CustomWindowTemplate" TargetType="{x:Type local:CustomWindow}"> <Border Name="PART_TemplateContainerBorder" KeyboardNavigation.TabNavigation="None" KeyboardNavigation.DirectionalNavigation="None" TextElement.Foreground="{TemplateBinding Foreground}" Background="{TemplateBinding BorderBrush}"> <Grid> <!--Window Content--> <Border Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Padding="0, 24, 0, 0"> <AdornerDecorator> <ContentPresenter Content="{TemplateBinding Content}"/> </AdornerDecorator> </Border> <!--TitleBar--> <Rectangle x:Name="PART_TitleBarBackgroundRectangle" VerticalAlignment="Top" Height="{StaticResource TitleBarHeight}" Fill="{TemplateBinding ActiveTitleBarBackground}"/> <Grid x:Name="PART_TitleBarContainerGrid" VerticalAlignment="Top" Height="{StaticResource TitleBarHeight}"> <Grid.ColumnDefinitions> <ColumnDefinition Width="Auto" /> <ColumnDefinition Width="*" /> <ColumnDefinition Width="Auto" /> </Grid.ColumnDefinitions> <!--Icon--> <Image x:Name="PART_IconImage" Grid.Column="0" Margin="4, 0, 0, 0" Stretch="Uniform" VerticalAlignment="Center" Width="{StaticResource IconSize}" Height="{StaticResource IconSize}" Source="{TemplateBinding Icon}"/> <!--Title--> <TextBlock x:Name="PART_TitleTextBlock" Grid.Column="1" Margin="4, 0, 0, 0" TextAlignment="Left" VerticalAlignment="Center" FontSize="{StaticResource TitleFontSize}" Text="{TemplateBinding Title}"/> <!--Buttons--> <StackPanel Grid.Row="0" Grid.Column="2" Orientation="Horizontal"> <Button Name="PART_WindowMinimizeButton" Style="{StaticResource WindowButton}"> <Button.ContentTemplate> <DataTemplate> <ContentControl ContentTemplate="{StaticResource MinimizeButtonIcon}" Width="14" Height="16"/> </DataTemplate> </Button.ContentTemplate> </Button> <Button Name="PART_WindowMaximizeButton"> <Button.Style> <Style TargetType="{x:Type Button}" BasedOn="{StaticResource WindowButton}"> <Setter Property="ContentTemplate"> <Setter.Value> <DataTemplate> <ContentControl ContentTemplate="{StaticResource MaximizeButtonIcon}" Width="16" Height="15"/> </DataTemplate> </Setter.Value> </Setter> <Style.Triggers> <DataTrigger Binding="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=WindowState}" Value="Maximized"> <Setter Property="ContentTemplate"> <Setter.Value> <DataTemplate> <ContentControl ContentTemplate="{StaticResource RestoreButtonIcon}" Width="16" Height="12"/> </DataTemplate> </Setter.Value> </Setter> </DataTrigger> </Style.Triggers> </Style> </Button.Style> </Button> <Button Name="PART_WindowCloseButton" Style="{StaticResource CloseButtonStyle}"> <Button.ContentTemplate> <DataTemplate> <ContentControl ContentTemplate="{StaticResource CloseButtonIcon}" Width="16" Height="16"/> </DataTemplate> </Button.ContentTemplate> </Button> </StackPanel> </Grid> </Grid> </Border> <ControlTemplate.Triggers> <Trigger Property="IsActive" Value="False"> <Setter TargetName="PART_TitleBarBackgroundRectangle" Property="Fill" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=InactiveTitleBarBackground}"/> </Trigger> <Trigger Property="IsEnabled" Value="False"> <Setter TargetName="PART_TitleBarBackgroundRectangle" Property="Opacity" Value="0.64"/> </Trigger> <Trigger Property="ResizeMode" Value="NoResize"> <Setter TargetName="PART_WindowMaximizeButton" Property="Visibility" Value="Collapsed"/> </Trigger> </ControlTemplate.Triggers> </ControlTemplate> <!--#endregion--> <Style TargetType="{x:Type local:CustomWindow}"> <Setter Property="Background" Value="#ffffff" /> <Setter Property="Foreground" Value="#444444" /> <Setter Property="ActiveTitleBarBackground" Value="#fafafa" /> <Setter Property="InactiveTitleBarBackground" Value="#f0f0f0" /> <Setter Property="WindowButtonMouseOverBackground" Value="#f5f5f5" /> <Setter Property="WindowButtonMouseOverForeground" Value="#888888" /> <Setter Property="UseLayoutRounding" Value="True"/> <Setter Property="WindowChrome.WindowChrome" Value="{StaticResource CustomWindowChrome}" /> <Setter Property="Template" Value="{StaticResource CustomWindowTemplate}"/> </Style> </ResourceDictionary> |
کد فوق بخش تازه ای (به جز بخش مربوط به WindowChrome) ندارد و اگر آموزش های قبلی ما در مورد ساخت کنترل سفارشی در WPF را مشاهده کرده باشید، برای درک کدهای بالا مشکلی نخواهید داشت.
کلاس WindowChrome
کلاس WindowChrome برای شخصی سازی Window با حفظ قابلیت های آن مورد استفاده قرار می گیرد. این کلاس به شما این امکان را می دهد تا بخش Client Area را تا اندازه ای که بخش Non-Clinet Area را پوشش دهد، توسعه دهید. برای درک بهتر به تصویر زیر نگاه کنید.
اگر ما بخش مربوط به WindowChrome را از قالب کنترل حذف کنیم، خروجی به شکل زیر خواهد بود.
WindowChrome به ما اجازه می دهد تا آن بخش هایی که مربوط به برنامه نیست را هم پوشش دهیم. برای اطلاعات بیشتر درمورد این کلاس می توانید به صفحه مایکروسافت مراجعه کنید. (WPF Window Chrome Class)
توجه داشته باشید که این WindowChrome ربطی به مرورگر کروم ندارد و آیکون استفاده شده در داخل برنامه به دلیل زیبایی آیکون این مرورگر بوده است و دلیل خاصی ندارد.
ایجاد پروژه WPF
برای تست کنترلی که ایجاد کرده ایم، یک پروژه از نوع WPF با نام CustomWindow.Demo اضافه کنید. و سپس Reference مربوط به پروژه WPF Custom Control Library را به آن اضافه کنید.
استفاده از کنترل CustomWindow
بعد از انجام مرحله بالا، فایل App.xaml را باز کنید و Resource مربوط به کنترل سفارشی را به شکل زیر به آن اضافه کنید.
1 2 3 4 5 6 7 8 9 10 11 12 13 | <Application x:Class="CustomWindow.Demo.App" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" StartupUri="MainWindow.xaml"> <Application.Resources> <ResourceDictionary> <ResourceDictionary.MergedDictionaries> <ResourceDictionary Source="pack://application:,,,/CustomControls;component/Themes/Generic.xaml"/> </ResourceDictionary.MergedDictionaries> </ResourceDictionary> </Application.Resources> </Application> |
سپس فایل 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 | <controls:CustomWindow x:Class="CustomWindow.Demo.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:controls="clr-namespace:CustomControls;assembly=CustomControls" mc:Ignorable="d" Title="SourceSara.Com" Height="500" Width="700" Background="#1B2738" Foreground="#a0afc0" ActiveTitleBarBackground="{Binding RelativeSource={RelativeSource Self}, Path=Background}" InactiveTitleBarBackground="#182333" WindowButtonMouseOverBackground="#323D4C" WindowButtonMouseOverForeground="{Binding RelativeSource={RelativeSource Self}, Path=Foreground}" TextElement.FontFamily="Roboto" Icon="/Resources/Images/Chrome.png" WindowStartupLocation="CenterScreen"> <Viewbox Margin="32"> <StackPanel> <Viewbox Width="240" Height="{Binding RelativeSource={RelativeSource Self}, Path=Width}"> <Canvas Width="48" Height="48"> <Path Fill="#131B27" Data="M44,24c0,11.044-8.956,20-20,20S4,35.044,4,24S12.956,4,24,4S44,12.956,44,24z"/> <Path Fill="#182333" Data="M24,4v20l8,4l-8.843,16c0.317,0,0.526,0,0.843,0c11.053,0,20-8.947,20-20S35.053,4,24,4z"/> <Path Fill="#131B27" Data="M44,24c0,11.044-8.956,20-20,20S4,35.044,4,24S12.956,4,24,4S44,12.956,44,24z"/> <Path Fill="#131B27" Data="M24,4v20l8,4l-8.843,16c0.317,0,0.526,0,0.843,0c11.053,0,20-8.947,20-20S35.053,4,24,4z"/> <Path Fill="#131B27" Data="M41.84,15H24v13l-3-1L7.16,13.26H7.14C10.68,7.69,16.91,4,24,4C31.8,4,38.55,8.48,41.84,15z"/> <Path Fill="#182333" Data="M7.158,13.264l8.843,14.862L21,27L7.158,13.264z"/> <Path Fill="#182333" Data="M23.157,44l8.934-16.059L28,25L23.157,44z"/> <Path Fill="#182333" Data="M41.865,15H24l-1.579,4.58L41.865,15z"/> <Path Fill="#182333" Data="M33,24c0,4.969-4.031,9-9,9s-9-4.031-9-9s4.031-9,9-9S33,19.031,33,24z"/> <Path Fill="#131B27" Data="M31,24c0,3.867-3.133,7-7,7s-7-3.133-7-7s3.133-7,7-7S31,20.133,31,24z"/> </Canvas> </Viewbox> <TextBlock FontSize="34" Margin="0,16" TextAlignment="Center" Foreground="#8ab4f8" Text="WPF Custom Window TitleBar"/> <controls:MadeByAmRo Margin="0,16" Foreground="#a0afc0" AmRoLogoBrush="#8ab4f8" HeartBrush="#f28b82"/> </StackPanel> </Viewbox> </controls:CustomWindow> |
پروژه را Build و Run کنید تا نتیجه نهایی را مشاهده کنید.
هیچ نظری ثبت نشده است