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

效果如下：

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

原理比较简单，就是在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，用于自定义窗体样式

输入以下代码

 <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中输入以下代码

 <Application x:Class="DynamicWindow.App"

              xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

              xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

              xmlns:local="clr-namespace:DynamicWindow"

              StartupUri="MainWindow.xaml">

     <Application.Resources>

         <ResourceDictionary Source="WindowStyle.xaml"/>

     </Application.Resources>

 </Application>

3、添加一个MediaElement控件

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

 <Window x:Class="DynamicWindow.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:local="clr-namespace:DynamicWindow"

         mc:Ignorable="d"

         Title="MainWindow" Height="720" Width="1280" Style="{StaticResource WindowStyle}">

     <Grid>

         <Grid.RowDefinitions>

             <RowDefinition Height="26.4"/>

             <RowDefinition/>

         </Grid.RowDefinitions>

         <Grid  Grid.RowSpan="2" Panel.ZIndex="-1" Grid.Row="0">

             <MediaElement x:Name="mediaelement" Stretch="UniformToFill" Volume="1" LoadedBehavior="Manual"  UnloadedBehavior="Manual"/>

         </Grid>

         <Grid Grid.Row="1">

             <Button Content="播放" HorizontalAlignment="Left" VerticalAlignment="Top" Click="Button_Click"></Button>

             <Button Content="停止" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="50,0,0,0" Click="Button_Click_1"></Button>

         </Grid>

     </Grid>

 </Window>

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

示例代码

2019.07.12

WPF窗体动态效果的更多相关文章

  1. WinForm 与WPF 窗体之间的想到调用

    先放置一个容器控件,并设计 好WinForm(或WPF)窗口 winform 调用 wpf ElementHost el = new ElementHost(); el.Dock = DockStyl ...

  2. 关于WinForm引用WPF窗体---在Winform窗体中使用WPF控件

    项目中有个界面展示用WPF实现起来比较简单,并且能提供更酷炫的效果,但是在WinForm中使用WPF窗体出现了问题,在网上找了一下有些人说Winform不能引用WPF的窗体,我就很纳闷,Win32都能 ...

  3. 关于WinForm引用WPF窗体

    项目中有个界面展示用WPF实现起来比较简单,并且能提供更酷炫的效果,但是在WinForm中使用WPF窗体出现了问题,在网上找了一下有些人说Winform不能引用WPF的窗体,我就很纳闷,Win32都能 ...

  4. WPF窗体视图中绑定Resources文件中字符串时，抛出：System.Windows.Markup.StaticExtension

    问题描述: 在Resources.resx定义了一个静态字符串字段Title,并在WPF窗体视图中绑定为窗体的标题: Title="{x:Static local:Resources.Tit ...

  5. WPF窗体禁用最大化按钮

    禁用WPF窗体的最大化按钮可以使用Windows API改变按钮状态的方法实现.使用GetWindowLong可以得到当前按钮的状态.使用SetWindowLong可以设置按钮的状态.使用SetWin ...

  6. WPF自学入门（八）WPF窗体之间的交互

    今天我们一起来看一下WPF窗体之间的交互-窗体之间的传值.有两个窗体,一个是父窗体,一个是子窗体.要将父窗体的文本框中的值传递给子窗体中的控件.我们该怎么实现? 接下来我们一起来实现窗体之间的传值,在 ...

  7. 在Office应用中打开WPF窗体并且让子窗体显示在Office应用上

    在.NET主程序中,我们可以通过创建 ExcelApplication 对象来打开一个Excel应用程序,如果我们想在Excle里面再打开WPF窗口,问题就不那么简单了. 我们可以简单的实例化一个WP ...

  8. WPF窗体の投影效果

    有时候我们需要给WPF窗体加上一个毛边(投影效果) 我们可以在窗体下加上如下代码 <Window.Effect> <DropShadowEffect BlurRadius=" ...

  9. 自定义WPF窗体形状

    介绍 你好WPF爱好者. 随着WPF等统一API语言的发明,丰富用户界面变得非常容易. 创建丰富的用户界面只是一个想法. 您需要拥有的是创造性思维和最新技术融合. WPF和Expression Ble ...

随机推荐

  1. MintUI引入vue项目以及引入iconfont图标

    官网地址:http://mint-ui.github.io/#!/zh-cn 中文文档:http://mint-ui.github.io/docs/#/zh-cn2 示例展示:http://eleme ...

  2. 【大数据应用技术】作业九｜安装关系型数据库MySQL 安装大数据处理框架Hadoop

    本次作业的要求来自:https://edu.cnblogs.com/campus/gzcc/GZCC-16SE2/homework/3161 1.安装MySql 按ctrl+alt+t打开终端窗口,安 ...

  3. 【翻译】可能是CAP理论的最好解释

    一篇非常精彩的解释CAP理论的文章,翻译水平有限,不准确之处请参考原文,还请见谅. Chapter 1: “Remembrance Inc” Your new venture : Last night ...

  4. golang 内存监控

    golang 内存监控 - 简书 https://www.jianshu.com/p/38dc129b6870

  5. 信用卡号码格式验证-C#实现

    /// <summary> /// Is valid? /// </summary> /// <param name="context">Val ...

  6. Android -------- BouncingJellyView 果冻视图（阻尼效果）

    分享一个不错的效果,分享给大家 BouncingJellyView 果冻视图,就像果冻一样伸缩弹跳,也叫阻尼效果.这个效果在MIUI上面到处都可以看到. 效果图: 使用 项目更目录bulid.grad ...

  7. openresty开发系列32--openresty执行流程之1初始化阶段

    openresty开发系列32--openresty执行流程之初始化阶段 一)初始化阶段 1)init_by_lua   init_by_lua_block     init_by_lua_file语 ...

  8. 深度强化学习 之 运行环境 mujoco 报错 ERROR: GLEW initalization error: Missing GL version

    使用  mujoco环境  运行代码,报错 ERROR: GLEW initalization error: Missing GL version 一直无法解决,发现网址: https://blog. ...

  9. 【原创】MongoDB安装配置详解（标注两个坑）

    1.下载安装 3.4正式版([坑]不要最新版,有可能进度卡在这个位置不动,等了半个小时也没什么反映,) http://downloads.mongodb.org/win32/mongodb-win32 ...

  10. redis连接池——JedisPool和JedisCluster的介绍与使用

    目录 Jedis使用方式的介绍 Redis连接池介绍 创建连接池配置文件 单机版的Redis连接池 集群版的Redis连接池 总结 Jedis使用方式的介绍 Jedis就是Java实现的操作Redis ...