WPF窗体动态效果

在浏览网页的时候，发现现在很多网页都采用这种效果。看起来很炫。

效果如下：

已经实现很久了，一直没写出来。今天突然想到，写出来分享一下

原理比较简单，就是在Window里面放一个MediaElement控件，播放视频就行

1、首先需要定义Window样式

如果使用 WindowStyle="None"属性再手动实现窗体效果，那窗体是没有阴影、标题栏，也没有动画效果，所以需要使用WindowChrome类来自定义窗体

WindowChrome类介绍https://docs.microsoft.com/zh-cn/dotnet/api/system.windows.shell.windowchrome?redirectedfrom=MSDN&view=netframework-4.8

一、新建一个WPF工程，命名为DynamicWindow

二、添加资源字典WindowStyle.xaml，用于自定义窗体样式

输入以下代码

  1 <ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  2                     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  3                     xmlns:local="clr-namespace:DynamicWindow">
  4     <Style x:Key="CaptionNormalButtonStyle" TargetType="{x:Type Button}">
  5         <Setter Property="Focusable" Value="False" />
  6         <Setter Property="Background" Value="Transparent" />
  7         <Setter Property="BorderBrush" Value="Transparent" />
  8         <Setter Property="BorderThickness"  Value="1" />
  9         <Setter Property="HorizontalContentAlignment"   Value="Center" />
 10         <Setter Property="VerticalContentAlignment"  Value="Center" />
 11         <Setter Property="Template">
 12             <Setter.Value>
 13                 <ControlTemplate TargetType="{x:Type Button}">
 14                     <Grid>
 15                         <Rectangle x:Name="TitleButtonBackground"  Width="40" Height="40" Fill="Silver" Opacity="0" />
 16                         <Border x:Name="ButtonBorder" BorderBrush="{TemplateBinding BorderBrush}"  BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" SnapsToDevicePixels="true">
 17                             <ContentPresenter x:Name="TitleButtonContent"  Focusable="False"  RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" />
 18                         </Border>
 19                     </Grid>
 20                     <ControlTemplate.Triggers>
 21                         <Trigger Property="IsMouseOver" Value="true">
 22                             <Setter Property="Opacity" Value=".5" TargetName="TitleButtonBackground" />
 23                         </Trigger>
 24                         <Trigger Property="IsPressed"  Value="True">
 25                             <Setter Property="Opacity" Value="0.4"  TargetName="TitleButtonBackground" />
 26                         </Trigger>
 27                         <Trigger Property="IsEnabled"   Value="false">
 28                             <Setter TargetName="TitleButtonContent"  Property="Opacity" Value=".5" />
 29                         </Trigger>
 30                     </ControlTemplate.Triggers>
 31                 </ControlTemplate>
 32             </Setter.Value>
 33         </Setter>
 34     </Style>
 35 
 36     <Style x:Key="CaptionCloseButtonStyle" TargetType="{x:Type Button}">
 37         <Setter Property="Focusable" Value="False" />
 38         <Setter Property="Background" Value="Transparent" />
 39         <Setter Property="BorderBrush" Value="Transparent" />
 40         <Setter Property="BorderThickness"  Value="1" />
 41         <Setter Property="HorizontalContentAlignment"   Value="Center" />
 42         <Setter Property="VerticalContentAlignment"  Value="Center" />
 43         <Setter Property="Template">
 44             <Setter.Value>
 45                 <ControlTemplate TargetType="{x:Type Button}">
 46                     <Grid x:Name="LayoutRoot">
 47                         <Rectangle x:Name="TitleButtonBackground"  Width="40" Height="40" Fill="Silver" Opacity="0" />
 48                         <Border x:Name="TitleButtonBorder" BorderBrush="{TemplateBinding BorderBrush}"  BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" SnapsToDevicePixels="true">
 49                             <ContentPresenter x:Name="TitleButtonContent"  Focusable="False"  RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" />
 50                         </Border>
 51                     </Grid>
 52                     <ControlTemplate.Triggers>
 53                         <Trigger Property="IsMouseOver" Value="true">
 54                             <Setter Property="Background" Value="LightSkyBlue" TargetName="TitleButtonBorder" />
 55                         </Trigger>
 56                         <Trigger Property="IsPressed"  Value="True">
 57                             <Setter Property="Opacity" Value="0.4"  TargetName="TitleButtonBackground" />
 58                         </Trigger>
 59                         <Trigger Property="IsEnabled"   Value="false">
 60                             <Setter TargetName="TitleButtonContent"  Property="Opacity" Value=".5" />
 61                         </Trigger>
 62                     </ControlTemplate.Triggers>
 63                 </ControlTemplate>
 64             </Setter.Value>
 65         </Setter>
 66     </Style>
 67 
 68     <DataTemplate x:Key="Minimize">
 69         <Grid>
 70             <Path Data="M 7.2 14.2 L19.2 14.2" Width="26.4"  Height="26.4" VerticalAlignment="Center"  HorizontalAlignment="Center"  Stroke="Black" StrokeThickness="1" />
 71         </Grid>
 72     </DataTemplate>
 73 
 74     <DataTemplate x:Key="Maximize">
 75         <Grid>
 76             <Rectangle Width="10" Height="10" Stroke="Black" StrokeThickness="1" Margin="0,1,0,0"/>
 77         </Grid>
 78     </DataTemplate>
 79 
 80     <DataTemplate x:Key="Restore">
 81         <Grid>
 82             <Rectangle Width="10" Height="10" Stroke="Black" StrokeThickness="1" Margin="0,3,3,0"/>
 83             <Rectangle Width="8" Height="8" Stroke="Black" StrokeThickness="1" Margin="5,0,0,5"/>
 84         </Grid>
 85     </DataTemplate>
 86 
 87     <DataTemplate x:Key="Close">
 88         <Grid Width="15.6" Height="15.4">
 89             <Path Data="M 12,12 L16.4,16.4"  Stretch="Fill" Stroke="Black" StrokeThickness="1"/>
 90             <Path Data="M 12,16.4 L 16.4,12 "  Stretch="Fill" Stroke="Black" StrokeThickness="1"/>
 91         </Grid>
 92     </DataTemplate>
 93 
 94 
 95     <Style TargetType="{x:Type Window}" x:Key="WindowStyle">
 96         <Setter Property="BorderBrush"  Value="White" />
 97         <Setter Property="BorderThickness"  Value="1" />
 98         <Setter Property="ResizeMode"  Value="CanResizeWithGrip" />
 99         <Setter Property="UseLayoutRounding" Value="True" />
100         <Setter Property="TextOptions.TextFormattingMode"  Value="Display" />
101         <Setter Property="WindowStyle" Value="SingleBorderWindow" />
102         <Setter Property="FontFamily" Value="LightSkyBlue" />
103         <Setter Property="WindowChrome.WindowChrome">
104             <Setter.Value>
105                 <WindowChrome CornerRadius="0"  GlassFrameThickness="1" UseAeroCaptionButtons="False" NonClientFrameEdges="None" />
106             </Setter.Value>
107         </Setter>
108         <Setter Property="Template">
109             <Setter.Value>
110                 <ControlTemplate TargetType="{x:Type Window}">
111                     <Border BorderBrush="{TemplateBinding BorderBrush}"  BorderThickness="{TemplateBinding BorderThickness}" x:Name="WindowBorder" Background="{TemplateBinding Background}">
112                         <!-- Background="{TemplateBinding Background}"-->
113                         <!--<Border.Background>
114                             <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
115                                 <GradientStop Color="#FFFFF9F9" Offset="0"/>
116                                 <GradientStop Color="#FFA49B96" Offset="1"/>
117                             </LinearGradientBrush>
118                         </Border.Background>-->
119 
120                         <Grid x:Name="LayoutRoot">
121                             <Grid.RowDefinitions>
122                                 <RowDefinition Height="26.4" />
123                                 <RowDefinition />
124                             </Grid.RowDefinitions>
125 
126                             <Grid x:Name="PART_WindowTitleGrid"  Grid.Row="0" Background="Transparent" Panel.ZIndex="1">
127                                 <Grid.ColumnDefinitions>
128                                     <ColumnDefinition Width="*" />
129                                     <ColumnDefinition Width="Auto" />
130                                 </Grid.ColumnDefinitions>
131                                 <StackPanel Orientation="Horizontal">
132                                     <Button VerticalAlignment="Center" Margin="7,0,5,0"  Height="{x:Static SystemParameters.SmallIconHeight}" Width="{x:Static SystemParameters.SmallIconWidth}" WindowChrome.IsHitTestVisibleInChrome="True"                                         
133                                     IsTabStop="False" Command="{Binding Source={x:Static SystemCommands.ShowSystemMenuCommand}}" >
134                                         <Button.Template>
135                                             <ControlTemplate>
136                                                 <!--title image-->
137                                                 <Image Name="btnbg" HorizontalAlignment="Center" VerticalAlignment="Center"  Stretch="UniformToFill" Source="caption.png" Width="26.4" Height="26.4"/>
138                                             </ControlTemplate>
139                                         </Button.Template>
140                                     </Button>
141                                     <ContentControl IsTabStop="False"
142                                                     Foreground="LightSkyBlue"
143                                                     FontWeight="Bold"
144                                                     HorizontalAlignment="Center"
145                                                     VerticalAlignment="Center"
146                                                     FontSize="{DynamicResource {x:Static SystemFonts.CaptionFontSize}}"
147                                                     Content="{TemplateBinding Title}"  Margin="5,0,0,0"/>
148                                 </StackPanel>
149                                 <StackPanel x:Name="WindowCommandButtonsStackPanel"  Grid.Column="1" HorizontalAlignment="Right" VerticalAlignment="Top" Orientation="Horizontal" WindowChrome.IsHitTestVisibleInChrome="True">
150                                     <Button x:Name="Minimize" Width="26.4" Height="26.4" ToolTip="最小化"  WindowChrome.IsHitTestVisibleInChrome="True"  Command="{Binding Source={x:Static SystemCommands.MinimizeWindowCommand}}"  ContentTemplate="{StaticResource Minimize}"  Style="{StaticResource CaptionNormalButtonStyle}"  IsTabStop="False" Margin="0,0,2,0"></Button>
151                                     <Button x:Name="Restore" Width="26.4" Height="26.4" ToolTip="还原" WindowChrome.IsHitTestVisibleInChrome="True"  Command="{Binding Source={x:Static SystemCommands.RestoreWindowCommand}}"   Visibility="Collapsed" ContentTemplate="{StaticResource Restore}" Style="{StaticResource CaptionNormalButtonStyle}" IsTabStop="False"></Button>
152                                     <Button x:Name="Maximize"  Width="26.4" Height="26.4" ToolTip="最大化" WindowChrome.IsHitTestVisibleInChrome="True" Command="{Binding Source={x:Static SystemCommands.MaximizeWindowCommand}}"   ContentTemplate="{StaticResource Maximize}" Style="{StaticResource CaptionNormalButtonStyle}" Margin="0,0,1,0" IsTabStop="False"></Button>
153                                     <Button x:Name="Close" Width="26.4" Height="26.4" ToolTip="关闭"  WindowChrome.IsHitTestVisibleInChrome="True"  Command="{Binding Source={x:Static SystemCommands.CloseWindowCommand}}"   IsTabStop="False"  Style="{StaticResource CaptionCloseButtonStyle}"  ContentTemplate="{StaticResource Close}" ></Button>
154                                 </StackPanel>
155                             </Grid>
156                             <AdornerDecorator Grid.Row="0" Grid.RowSpan="2" KeyboardNavigation.IsTabStop="False">
157                                 <ContentPresenter/>
158                             </AdornerDecorator>
159 
160                             <Grid Grid.Row="0" Grid.RowSpan="2" Panel.ZIndex="-1">
161                                 <Grid>
162 
163                                     <!--window background-->
164                                     <!--<Grid.Background>
165                                         <ImageBrush ImageSource="../timg.jpg"  Stretch="UniformToFill"/>
166                                     </Grid.Background>-->
167 
168                                 </Grid>
169                             </Grid>
170                             <ResizeGrip x:Name="ResizeGrip"  HorizontalAlignment="Right" VerticalAlignment="Bottom" Grid.Row="1" IsTabStop="False" Visibility="Hidden" WindowChrome.ResizeGripDirection="BottomRight" />
171                         </Grid>
172                     </Border>
173 
174                     <ControlTemplate.Triggers>
175                         <Trigger Property="WindowState" Value="Maximized">
176                             <Setter TargetName="Maximize" Property="Visibility" Value="Collapsed" />
177                             <Setter TargetName="Restore" Property="Visibility" Value="Visible" />
178                             <Setter TargetName="LayoutRoot" Property="Margin"  Value="7" />
179                         </Trigger>
180                         <Trigger Property="WindowState" Value="Normal">
181                             <Setter TargetName="Maximize" Property="Visibility" Value="Visible" />
182                             <Setter TargetName="Restore" Property="Visibility" Value="Collapsed" />
183                         </Trigger>
184                         <Trigger Property="ResizeMode"  Value="NoResize">
185                             <Setter TargetName="Minimize" Property="Visibility" Value="Collapsed" />
186                             <Setter TargetName="Maximize" Property="Visibility" Value="Collapsed" />
187                             <Setter TargetName="Restore"  Property="Visibility" Value="Collapsed" />
188                         </Trigger>
189                         <MultiTrigger>
190                             <MultiTrigger.Conditions>
191                                 <Condition Property="ResizeMode"  Value="CanResizeWithGrip" />
192                                 <Condition Property="WindowState" Value="Normal" />
193                             </MultiTrigger.Conditions>
194                             <Setter TargetName="ResizeGrip" Property="Visibility" Value="Visible" />
195                         </MultiTrigger>
196                     </ControlTemplate.Triggers>
197                 </ControlTemplate>
198             </Setter.Value>
199         </Setter>
200     </Style>
201 </ResourceDictionary>

2、引入资源字典

在App.xaml中输入以下代码

1 <Application x:Class="DynamicWindow.App"
2              xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
3              xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
4              xmlns:local="clr-namespace:DynamicWindow"
5              StartupUri="MainWindow.xaml">
6     <Application.Resources>
7         <ResourceDictionary Source="WindowStyle.xaml"/>
8     </Application.Resources>
9 </Application>

3、添加一个MediaElement控件

打开MainWindow.xaml,输入以下代码

 1 <Window x:Class="DynamicWindow.MainWindow"
 2         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
 3         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
 4         xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
 5         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
 6         xmlns:local="clr-namespace:DynamicWindow"
 7         mc:Ignorable="d"
 8         Title="MainWindow" Height="720" Width="1280" Style="{StaticResource WindowStyle}">
 9     <Grid>
10         <Grid.RowDefinitions>
11             <RowDefinition Height="26.4"/>
12             <RowDefinition/>
13         </Grid.RowDefinitions>
14         <Grid  Grid.RowSpan="2" Panel.ZIndex="-1" Grid.Row="0">
15             <MediaElement x:Name="mediaelement" Stretch="UniformToFill" Volume="1" LoadedBehavior="Manual"  UnloadedBehavior="Manual"/>
16         </Grid>
17 
18         <Grid Grid.Row="1">
19             <Button Content="播放" HorizontalAlignment="Left" VerticalAlignment="Top" Click="Button_Click"></Button>
20             <Button Content="停止" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="50,0,0,0" Click="Button_Click_1"></Button>
21         </Grid>
22     </Grid>
23 </Window>

4、运行，点击播放就可以看到效果

示例代码

2019.07.12