如何在WPF中通过MaterialDesign修改窗口样式(标题及控制按钮)
嘿,我正好在WPF里折腾过MaterialDesign的窗口样式,给你捋捋具体步骤,亲测好使!
一、先确认核心资源已引入
首先得确保你在App.xaml里已经加了窗口样式所需的MaterialDesign资源——毕竟预设的窗口主题是单独的资源文件,没引入的话样式出不来:
<Application.Resources> <ResourceDictionary> <ResourceDictionary.MergedDictionaries> <!-- 基础主题资源 --> <materialDesign:BundledTheme BaseTheme="Light" PrimaryColor="DeepPurple" SecondaryColor="Lime" /> <ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.Defaults.xaml" /> <!-- 重点:必须引入窗口样式资源 --> <ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.Window.xaml" /> </ResourceDictionary.MergedDictionaries> </ResourceDictionary> </Application.Resources>
二、快速套用预设窗口样式
最简单的方式就是直接给你的Window指定MaterialDesign提供的预设样式,一行代码搞定标题栏+按钮的风格切换:
<Window x:Class="YourProject.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes" Style="{StaticResource MaterialDesignWindow}" Title="你的窗口标题"> <!-- 这里放窗口内容 --> </Window>
这套预设已经帮你处理了原生标题栏隐藏、窗口拖拽、按钮交互(悬停/点击效果),完全不用自己写额外逻辑。
三、自定义窗口样式(预设不满足时)
如果想改颜色、按钮布局或者加自定义元素,可以基于预设样式扩展:
1. 快速修改颜色主题
不用重写模板,直接覆盖资源就能改标题栏、按钮的颜色:
<Window.Resources> <!-- 标题栏背景色 --> <SolidColorBrush x:Key="MaterialDesignWindowTitleBackground" Color="#FF6200EE" /> <!-- 标题文字颜色 --> <SolidColorBrush x:Key="MaterialDesignWindowTitleForeground" Color="White" /> <!-- 按钮悬停背景色 --> <SolidColorBrush x:Key="MaterialDesignWindowButtonHoverBackground" Color="#FF3700B3" /> <!-- 关闭按钮点击时的颜色 --> <SolidColorBrush x:Key="MaterialDesignWindowCloseButtonPressedForeground" Color="#FFFF5252" /> </Window.Resources>
2. 深度定制窗口布局
如果要调整按钮位置、加窗口图标或者自定义标题栏内容,可以重写Window的模板,基于MaterialDesign的基础样式改:
<Window.Style> <Style TargetType="Window" BasedOn="{StaticResource MaterialDesignWindow}"> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="Window"> <Grid> <!-- 自定义标题栏 --> <Grid Background="{StaticResource MaterialDesignWindowTitleBackground}" Height="48"> <Grid.ColumnDefinitions> <ColumnDefinition Width="Auto" /> <ColumnDefinition Width="*" /> <ColumnDefinition Width="Auto" /> </Grid.ColumnDefinitions> <!-- 窗口图标 --> <Image Grid.Column="0" Source="Assets/YourIcon.png" Width="24" Height="24" Margin="12,0" /> <!-- 标题文字 --> <TextBlock Grid.Column="1" Text="{TemplateBinding Title}" Foreground="{StaticResource MaterialDesignWindowTitleForeground}" VerticalAlignment="Center" Margin="8,0" FontSize="14" /> <!-- 窗口按钮组 --> <StackPanel Grid.Column="2" Orientation="Horizontal"> <Button Style="{StaticResource MaterialDesignWindowMinimizeButton}" /> <Button Style="{StaticResource MaterialDesignWindowMaximizeButton}" /> <Button Style="{StaticResource MaterialDesignWindowCloseButton}" /> </StackPanel> </Grid> <!-- 窗口内容区域 --> <ContentPresenter Margin="0,48,0,0" /> <!-- 窗口边框 --> <Rectangle Stroke="{StaticResource MaterialDesignDivider}" StrokeThickness="1" /> </Grid> </ControlTemplate> </Setter.Value> </Setter> </Style> </Window.Style>
注意:如果自定义标题栏后无法拖拽窗口,给标题栏的Grid加上materialDesign:WindowAssist.IsHitTestVisibleInChrome="True"属性即可。
四、小提醒
- 用
MaterialDesignWindow样式时,不需要手动设置WindowStyle="None",预设已经帮你隐藏了原生标题栏。 - 按钮的单独样式也可以自定义,比如修改最小化按钮的图标,直接覆盖
MaterialDesignWindowMinimizeButton的模板就行。
内容的提问来源于stack exchange,提问作者ar.gorgin
相关产品推荐
相关产品推荐

