Giters

chenkaibin / DMSkin-for-WPF

WPF无边框窗口 重绘非客户区+阴影层窗口(双层带动画)|支持MVVM

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

# DMSkin-for-WPF 2.1.0.0

升级到2.1.0.0,全新改版,支持MVVM

前言

WPF无边框方案(双层窗体)

基于WPF的UI框架

方案思路:Win32 重绘非客户区+阴影层窗口

支持：.NET Framework 3.5 - 4.7

支持：Windows XP - Windows 7 - Windows 10

本方案以及其他方案对比

WPF .NET Framework 4.5+ 推出了原生组件WindowChrome无边框方案

WPF .NET Framework 3.5+ 可以调用 System.Windows.Shell 实现无边框方案

以上2种方案缺点:阴影效果不好.跨系统版本兼容性差

DMSkin-for-WPF-Small 单层窗口,无系统动画 DMSkin-for-WPF-Small

注意事项

本源码采用VS2017 个人版 开发,.NET FrameWork4.0,部分C# 6.0+语法 vs2015 vs2013 vs2012 请自行修改源码中不支持的部分。

本方案优点:阴影效果DIY.

本方案缺点:---遗留BUG:WIN7 系统上非客户区系统按钮阻挡操作(目前WIN7有点小瑕疵)---.

WPF borderless scheme (double form)

UI framework based on WPF

Plan idea: Win32 redraws non customer zone + shadow layer window

Support:.NET Framework 3.5 - 4.7

Support: Windows XP - Windows 7 - Windows 10

DMSkin-for-WPF是一个基于WPF的.Net WPF开源界面库,实现了无边框的WPF开发方案,内置部分控件模板. 你可以参照模板自行修改完善。（以下简称DFW）。

核心

DFW实现了比较完美的无边框窗体方案，并且拖拽全部采用WIN32消息实现。拖拽依靠桌面边缘完美,高DPI支持,窗体不会变形或异常

最新版本已经支持MVVM架构。

版本更新

2.1.0.0 (2018-04-17)

1.修改逻辑,目前窗口支持MVVM。

2.修复一个启动时阴影分层的BUG。

3.系统按钮被分离出窗口模板,具体查看本文底部使用方法。

2.0.0.1 (2018-01-30)

1.新增一个窗口Demo。

2.0.0.0 (2017-10-15)

1.移除WindowMode。

2.目前WIN7有点小瑕疵。

3.0 (2017-9-21)

1.WIN7以及以下采用单层。

2.WIN8、WIN10采用双层。

2.4 (2017-9-21)

1.窗口边缘拉伸(右,右下,下)。

2.阴影恢复速度调为200ms

3.阴影可以完全关闭(高效率,配合窗口虚线使用)

2.3 (2017-9-20)

1.修复ALT+TAB 出现2个窗体的BUG。

2.阴影层背景色,拉伸 拖拽时 出现的颜色。选择跟主窗体 接近的颜色 用户体验更好

2.2 (2017-9-20)

1.修复多个窗口无法激活聚焦的BUG。

2.拖动窗口支持显示阴影层

3.阴影层延迟显示的BUG修复

2.1 (2017-9-19)

1.优化最小化恢复阴影顺序,不会像网易云音乐一样出现双层了。

2.去除窗口裁剪代码(之前的裁剪操作多此一举)

3.拖动窗口位置时隐藏阴影提高效率

【2.0版本】采用双层窗体+Win32实现无边框,2.0版本不支持圆角窗体,不支持窗体透明,但是拥有完美最小化的动画。如果采用虚线边框,则可以去除双层窗体。

【1.0版本】采用WindowStyle.None + 透明实现无边框,版本缺陷是无边框通病，窗体最小化 动画失效了。但是我用xaml实现了动画(动画流畅程度取决于显卡),需要这个版本的源码请点击我的头像进到另外一个1.0项目中获取

2.0 (2017-9-13)

1.版本升级到2.0,最小化动画终于解决,此方案可以移植到winform无边框中,这是我所知道的世界第一例WPF/winfrom无边框最小化动画方案。

0.8 (2017-8-26)

1.修复最小化动画以及恢复动画(尚可优化)

0.7 (2017-8-25)

 

1.代码托管到GITHUB

2.新增Demo:周杰伦音乐播放器

3.新增Demo:默认模板窗体

0.6 (2017-3-6)

1.新增DMSystemButtonHoverColor 系统按钮鼠标悬浮的背景色(圆角窗体请设为透明,效果更好)

2.新增窗体模式：扁平化Metro+阴影Shadow 2种风格窗体

相关

加入讨论

C#.NET 2000人 QQ群： 76566523

DMSkin QQ群： 194684812

WPF课程群(收费) QQ群： 611509631

我的QQ:944095635

官网：http://www.dmskin.com

帮助改进

非常欢迎参与DFW的改进。有钱出钱有力出力，如果你觉得DFW很棒，请支持我。 如果你需要相关的资源或者学习资料也请联系我。

使用说明


1.引用DMSkin.WPF.DLL
2.Window继承修改为:MainWindow : DMSkinWindow
3.添加引用:xmlns:DMSkin="clr-namespace:DMSkin.WPF;assembly=DMSkin.WPF"
4.XAML继承修改为: DMSkin:DMSkinWindow x:Class="DMSkin.WPF.Test.MainWindow"

窗体属性

     
Foreground="White"                    //前景色 
Background="White"                    //背景色 

DMWindowShadowSize="10"               //窗体边框阴影大小
DMWindowShadowColor="#FFC8C8C8"       //窗体边框阴影颜色
DMWindowShadowDragVisibility="False"  //窗体拖动时是否显示阴影层
DMWindowShadowVisibility="False"      //窗体是否有阴影层[关闭阴影层]
DMWindowShadowBackColor="#FF323CAD"   //阴影背景色,选择跟主窗体相近的颜色 拉伸跟拖动 用户体验更好|#FF323CAD 为蓝色


ResizeMode="CanResize"                //边框拉伸方案CanResiz和CanResizeWithGrip
Height="700" Width="1000"             //窗体大小
MinHeight="268" MinWidth="360"        //窗体最大以及最小属性
WindowStartupLocation="CenterScreen"  //窗体初始位置

系统按钮

     

<WrapPanel Height="{Binding DMSystemButtonSize}" Orientation="Horizontal" VerticalAlignment="Top" HorizontalAlignment="Right">
<controls:DMSystemMinButton DMSystemButtonSize="50" DMSystemButtonHoverForeground="#383838" DMSystemButtonForeground="#383838"></controls:DMSystemMinButton>
<controls:DMSystemMaxButton DMSystemButtonSize="50" DMSystemButtonHoverForeground="#FFFFFF" DMSystemButtonForeground="#383838"></controls:DMSystemMaxButton>
<controls:DMSystemCloseButton DMSystemButtonSize="50" DMSystemButtonHoverForeground="#FFFFFF" DMSystemButtonForeground="#383838"></controls:DMSystemCloseButton>
</WrapPanel>


DMSystemButtonSize="50"               //系统按钮大小
DMSystemButtonForeground="#FF666666"  //系统按钮[文字]颜色
DMSystemButtonHoverColor="#33000000"  //系统按钮的鼠标悬浮[背景]色
DMSystemButtonHoverForeground="White" //系统按钮的鼠标悬浮[文字]颜色
DMSystemButtonCloseHoverColor="Red"   //系统【关闭】按钮的鼠标悬浮[背景]色-默认为红色

资源引用


<Application.Resources>
            <ResourceDictionary>
                <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary Source="pack://application:,,,/DMSkin.WPF;Component/Themes/DMColor.xaml" />
                <ResourceDictionary Source="pack://application:,,,/DMSkin.WPF;Component/Themes/DMScrollViewer.xaml" />
                <ResourceDictionary Source="pack://application:,,,/DMSkin.Wpf;component/Themes/DMButton.xaml" />
                <ResourceDictionary Source="pack://application:,,,/DMSkin.Wpf;component/Themes/DMTabControl.xaml" />
                <ResourceDictionary Source="pack://application:,,,/DMSkin.Wpf;component/Themes/DMRadioButton.xaml" />
                <ResourceDictionary Source="pack://application:,,,/DMSkin.Wpf;component/Themes/DMTreeView.xaml" />
                <ResourceDictionary Source="pack://application:,,,/DMSkin.Wpf;component/Themes/DMDataGrid.xaml" />
                <ResourceDictionary Source="pack://application:,,,/DMSkin.Wpf;component/Themes/DMListBox.xaml" />
                <ResourceDictionary Source="pack://application:,,,/DMSkin.Wpf;component/Themes/DMSlider.xaml" />
                <ResourceDictionary Source="pack://application:,,,/DMSkin.Wpf;component/Themes/DMCheckBox.xaml" />
                <ResourceDictionary Source="pack://application:,,,/DMSkin.Wpf;component/Themes/DMContextMenu.xaml" />
                </ResourceDictionary.MergedDictionaries>
            </ResourceDictionary>
</Application.Resources>

通用模板


<Grid>
        <Grid Background="White">
            <Border Grid.Column="0" BorderThickness="0,0,0,2" BorderBrush="{StaticResource LineColor}" VerticalAlignment="Top">
                <Grid>
                    <TextBlock Foreground="{StaticResource MainColor}" Text="DMSkin"  FontSize="20"
                           HorizontalAlignment="Left" VerticalAlignment="Center" Margin="10,0,0,0"/>
                    <Button  Name="ButtonSkin"
                                ToolTip="主题"
                                Focusable="False"
                                Style="{DynamicResource CaptionButtonStyle}"
                                Padding="0" HorizontalContentAlignment="Center" HorizontalAlignment="Right" Margin="0,0,150,0" Width="50" Height="50" 
                                >
                        <Label Foreground="#FF555555" 
                                       Content="X" FontSize="22" 
                                       HorizontalContentAlignment="Center" FontWeight="Bold"  ></Label>
                    </Button>
                </Grid>
            </Border>
        </Grid>
        <ResizeGrip  HorizontalContentAlignment="Stretch" VerticalContentAlignment="Stretch" VerticalAlignment="Bottom" HorizontalAlignment="Right"></ResizeGrip>
</Grid>

圆角窗体


<Border Background="White" CornerRadius="5"  BorderThickness="1">
        <Border.Effect>
            <DropShadowEffect BlurRadius="12" ShadowDepth="0" Color="#88000000"/>
        </Border.Effect>
        <Grid Margin="0,0,0,0">
            <Grid Background="Transparent">
                <Grid.RowDefinitions>
                    <RowDefinition Height="30"></RowDefinition>
                    <RowDefinition Height="*"></RowDefinition>
                    <RowDefinition Height="30"></RowDefinition>
                </Grid.RowDefinitions>
                <Grid Grid.Row="0" Name="DMTitle">
                </Grid>
            </Grid>
            <ResizeGrip VerticalContentAlignment="Bottom" HorizontalContentAlignment="Right" HorizontalAlignment="Right" VerticalAlignment="Bottom"></ResizeGrip>
        </Grid>
</Border>

更多效果图:

About

WPF无边框窗口 重绘非客户区+阴影层窗口(双层带动画)|支持MVVM

License:The Unlicense

Languages

Language:C# 100.0%