当前位置：首页 > news >正文

WPF窗体动态效果

news 来源：原创 2024/9/20 16:30:19

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

效果如下：

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

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

1、首先需要定义Window样式

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

WindowChrome类介绍WindowChrome 类 (System.Windows.Shell) | Microsoft Learn

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

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

输入以下代码

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"xmlns:local="clr-namespace:DynamicWindow"><Style x:Key="CaptionNormalButtonStyle" TargetType="{x:Type Button}"><Setter Property="Focusable" Value="False" /><Setter Property="Background" Value="Transparent" /><Setter Property="BorderBrush" Value="Transparent" /><Setter Property="BorderThickness"  Value="1" /><Setter Property="HorizontalContentAlignment"   Value="Center" /><Setter Property="VerticalContentAlignment"  Value="Center" /><Setter Property="Template"><Setter.Value><ControlTemplate TargetType="{x:Type Button}"><Grid><Rectangle x:Name="TitleButtonBackground"  Width="40" Height="40" Fill="Silver" Opacity="0" /><Border x:Name="ButtonBorder" BorderBrush="{TemplateBinding BorderBrush}"  BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" SnapsToDevicePixels="true"><ContentPresenter x:Name="TitleButtonContent"  Focusable="False"  RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" /></Border></Grid><ControlTemplate.Triggers><Trigger Property="IsMouseOver" Value="true"><Setter Property="Opacity" Value=".5" TargetName="TitleButtonBackground" /></Trigger><Trigger Property="IsPressed"  Value="True"><Setter Property="Opacity" Value="0.4"  TargetName="TitleButtonBackground" /></Trigger><Trigger Property="IsEnabled"   Value="false"><Setter TargetName="TitleButtonContent"  Property="Opacity" Value=".5" /></Trigger></ControlTemplate.Triggers></ControlTemplate></Setter.Value></Setter></Style><Style x:Key="CaptionCloseButtonStyle" TargetType="{x:Type Button}"><Setter Property="Focusable" Value="False" /><Setter Property="Background" Value="Transparent" /><Setter Property="BorderBrush" Value="Transparent" /><Setter Property="BorderThickness"  Value="1" /><Setter Property="HorizontalContentAlignment"   Value="Center" /><Setter Property="VerticalContentAlignment"  Value="Center" /><Setter Property="Template"><Setter.Value><ControlTemplate TargetType="{x:Type Button}"><Grid x:Name="LayoutRoot"><Rectangle x:Name="TitleButtonBackground"  Width="40" Height="40" Fill="Silver" Opacity="0" /><Border x:Name="TitleButtonBorder" BorderBrush="{TemplateBinding BorderBrush}"  BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" SnapsToDevicePixels="true"><ContentPresenter x:Name="TitleButtonContent"  Focusable="False"  RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" /></Border></Grid><ControlTemplate.Triggers><Trigger Property="IsMouseOver" Value="true"><Setter Property="Background" Value="LightSkyBlue" TargetName="TitleButtonBorder" /></Trigger><Trigger Property="IsPressed"  Value="True"><Setter Property="Opacity" Value="0.4"  TargetName="TitleButtonBackground" /></Trigger><Trigger Property="IsEnabled"   Value="false"><Setter TargetName="TitleButtonContent"  Property="Opacity" Value=".5" /></Trigger></ControlTemplate.Triggers></ControlTemplate></Setter.Value></Setter></Style><DataTemplate x:Key="Minimize"><Grid><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" /></Grid></DataTemplate><DataTemplate x:Key="Maximize"><Grid><Rectangle Width="10" Height="10" Stroke="Black" StrokeThickness="1" Margin="0,1,0,0"/></Grid></DataTemplate><DataTemplate x:Key="Restore"><Grid><Rectangle Width="10" Height="10" Stroke="Black" StrokeThickness="1" Margin="0,3,3,0"/><Rectangle Width="8" Height="8" Stroke="Black" StrokeThickness="1" Margin="5,0,0,5"/></Grid></DataTemplate><DataTemplate x:Key="Close"><Grid Width="15.6" Height="15.4"><Path Data="M 12,12 L16.4,16.4"  Stretch="Fill" Stroke="Black" StrokeThickness="1"/><Path Data="M 12,16.4 L 16.4,12 "  Stretch="Fill" Stroke="Black" StrokeThickness="1"/></Grid></DataTemplate><Style TargetType="{x:Type Window}" x:Key="WindowStyle"><Setter Property="BorderBrush"  Value="White" /><Setter Property="BorderThickness"  Value="1" /><Setter Property="ResizeMode"  Value="CanResizeWithGrip" /><Setter Property="UseLayoutRounding" Value="True" /><Setter Property="TextOptions.TextFormattingMode"  Value="Display" /><Setter Property="WindowStyle" Value="SingleBorderWindow" /><Setter Property="FontFamily" Value="LightSkyBlue" /><Setter Property="WindowChrome.WindowChrome"><Setter.Value><WindowChrome CornerRadius="0"  GlassFrameThickness="1" UseAeroCaptionButtons="False" NonClientFrameEdges="None" /></Setter.Value></Setter><Setter Property="Template"><Setter.Value><ControlTemplate TargetType="{x:Type Window}"><Border BorderBrush="{TemplateBinding BorderBrush}"  BorderThickness="{TemplateBinding BorderThickness}" x:Name="WindowBorder" Background="{TemplateBinding Background}"><!-- Background="{TemplateBinding Background}"--><!--<Border.Background><LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0"><GradientStop Color="#FFFFF9F9" Offset="0"/><GradientStop Color="#FFA49B96" Offset="1"/></LinearGradientBrush></Border.Background>--><Grid x:Name="LayoutRoot"><Grid.RowDefinitions><RowDefinition Height="26.4" /><RowDefinition /></Grid.RowDefinitions><Grid x:Name="PART_WindowTitleGrid"  Grid.Row="0" Background="Transparent" Panel.ZIndex="1"><Grid.ColumnDefinitions><ColumnDefinition Width="*" /><ColumnDefinition Width="Auto" /></Grid.ColumnDefinitions><StackPanel Orientation="Horizontal"><Button VerticalAlignment="Center" Margin="7,0,5,0"  Height="{x:Static SystemParameters.SmallIconHeight}" Width="{x:Static SystemParameters.SmallIconWidth}" WindowChrome.IsHitTestVisibleInChrome="True"IsTabStop="False" Command="{Binding Source={x:Static SystemCommands.ShowSystemMenuCommand}}" ><Button.Template><ControlTemplate><!--title image--><Image Name="btnbg" HorizontalAlignment="Center" VerticalAlignment="Center"  Stretch="UniformToFill" Source="caption.png" Width="26.4" Height="26.4"/></ControlTemplate></Button.Template></Button><ContentControl IsTabStop="False"Foreground="LightSkyBlue"FontWeight="Bold"HorizontalAlignment="Center"VerticalAlignment="Center"FontSize="{DynamicResource {x:Static SystemFonts.CaptionFontSize}}"Content="{TemplateBinding Title}"  Margin="5,0,0,0"/></StackPanel><StackPanel x:Name="WindowCommandButtonsStackPanel"  Grid.Column="1" HorizontalAlignment="Right" VerticalAlignment="Top" Orientation="Horizontal" WindowChrome.IsHitTestVisibleInChrome="True"><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><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><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><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></StackPanel></Grid><AdornerDecorator Grid.Row="0" Grid.RowSpan="2" KeyboardNavigation.IsTabStop="False"><ContentPresenter/></AdornerDecorator><Grid Grid.Row="0" Grid.RowSpan="2" Panel.ZIndex="-1"><Grid><!--window background--><!--<Grid.Background><ImageBrush ImageSource="../timg.jpg"  Stretch="UniformToFill"/></Grid.Background>--></Grid></Grid><ResizeGrip x:Name="ResizeGrip"  HorizontalAlignment="Right" VerticalAlignment="Bottom" Grid.Row="1" IsTabStop="False" Visibility="Hidden" WindowChrome.ResizeGripDirection="BottomRight" /></Grid></Border><ControlTemplate.Triggers><Trigger Property="WindowState" Value="Maximized"><Setter TargetName="Maximize" Property="Visibility" Value="Collapsed" /><Setter TargetName="Restore" Property="Visibility" Value="Visible" /><Setter TargetName="LayoutRoot" Property="Margin"  Value="7" /></Trigger><Trigger Property="WindowState" Value="Normal"><Setter TargetName="Maximize" Property="Visibility" Value="Visible" /><Setter TargetName="Restore" Property="Visibility" Value="Collapsed" /></Trigger><Trigger Property="ResizeMode"  Value="NoResize"><Setter TargetName="Minimize" Property="Visibility" Value="Collapsed" /><Setter TargetName="Maximize" Property="Visibility" Value="Collapsed" /><Setter TargetName="Restore"  Property="Visibility" Value="Collapsed" /></Trigger><MultiTrigger><MultiTrigger.Conditions><Condition Property="ResizeMode"  Value="CanResizeWithGrip" /><Condition Property="WindowState" Value="Normal" /></MultiTrigger.Conditions><Setter TargetName="ResizeGrip" Property="Visibility" Value="Visible" /></MultiTrigger></ControlTemplate.Triggers></ControlTemplate></Setter.Value></Setter></Style>
</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、运行，点击播放就可以看到效果