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，用于自定义窗体样式
输入以下代码
<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窗体动态效果的更多相关文章
- WinForm 与WPF 窗体之间的想到调用
先放置一个容器控件,并设计 好WinForm(或WPF)窗口 winform 调用 wpf ElementHost el = new ElementHost(); el.Dock = DockStyl ...
- 关于WinForm引用WPF窗体---在Winform窗体中使用WPF控件
项目中有个界面展示用WPF实现起来比较简单,并且能提供更酷炫的效果,但是在WinForm中使用WPF窗体出现了问题,在网上找了一下有些人说Winform不能引用WPF的窗体,我就很纳闷,Win32都能 ...
- 关于WinForm引用WPF窗体
项目中有个界面展示用WPF实现起来比较简单,并且能提供更酷炫的效果,但是在WinForm中使用WPF窗体出现了问题,在网上找了一下有些人说Winform不能引用WPF的窗体,我就很纳闷,Win32都能 ...
- WPF窗体视图中绑定Resources文件中字符串时，抛出：System.Windows.Markup.StaticExtension
问题描述: 在Resources.resx定义了一个静态字符串字段Title,并在WPF窗体视图中绑定为窗体的标题: Title="{x:Static local:Resources.Tit ...
- WPF窗体禁用最大化按钮
禁用WPF窗体的最大化按钮可以使用Windows API改变按钮状态的方法实现.使用GetWindowLong可以得到当前按钮的状态.使用SetWindowLong可以设置按钮的状态.使用SetWin ...
- WPF自学入门（八）WPF窗体之间的交互
今天我们一起来看一下WPF窗体之间的交互-窗体之间的传值.有两个窗体,一个是父窗体,一个是子窗体.要将父窗体的文本框中的值传递给子窗体中的控件.我们该怎么实现? 接下来我们一起来实现窗体之间的传值,在 ...
- 在Office应用中打开WPF窗体并且让子窗体显示在Office应用上
在.NET主程序中,我们可以通过创建 ExcelApplication 对象来打开一个Excel应用程序,如果我们想在Excle里面再打开WPF窗口,问题就不那么简单了. 我们可以简单的实例化一个WP ...
- WPF窗体の投影效果
有时候我们需要给WPF窗体加上一个毛边(投影效果) 我们可以在窗体下加上如下代码 <Window.Effect> <DropShadowEffect BlurRadius=" ...
- 自定义WPF窗体形状
介绍 你好WPF爱好者. 随着WPF等统一API语言的发明,丰富用户界面变得非常容易. 创建丰富的用户界面只是一个想法. 您需要拥有的是创造性思维和最新技术融合. WPF和Expression Ble ...
随机推荐
- GoCN每日新闻(2019-10-12)
GoCN每日新闻(2019-10-12) 1. Go 1.13中sync.Pool是如何优化的 https://colobu.com/2019/10/08/how-is-sync-Pool-impro ...
- mysql5.7 之 sql_mode=only_full_group_by问题
在使用查询时,使用到了group by 分组查询,报如下错误: ERROR (): In aggregated query without GROUP BY, expression # of SELE ...
- 开机启动类似于Tencent Upd的弹窗解决方法
1.开机启动的程序,后台启动自动升级的exe,每次开机都弹出弹窗,一不小心就点错了,神烦. 解决方式:直接在windows系统 [ 本地安全策略>软件限制策略>其他规则 ] 里面把弹出的 ...
- MySQL索引和SQL调优手册
MySQL索引 MySQL支持诸多存储引擎,而各种存储引擎对索引的支持也各不相同,因此MySQL数据库支持多种索引类型,如BTree索引,哈希索引,全文索引等等.为了避免混乱,本文将只关注于BTree ...
- 面试问我 Java 逃逸分析，瞬间被秒杀了。。
记得几年前有一次栈长去面试,问到了这么一个问题: Java中的对象都是在堆中分配吗?说明为什么! 当时我被问得一脸蒙逼,瞬间被秒杀得体无完肤,当时我压根就不知道他在考什么知识点,难道对象不是在堆中分配 ...
- hdu1702 ACboy needs your help again![简单STL 栈 队列]
目录 题目地址 题干 代码和解释 参考 题目地址 hdu1702 题干 代码和解释 本题很简单,只要掌握STL stack和STL vector的语法即可作答.记录本题是为了记录STL vector的 ...
- 解决iis内存占用过大的问题--ZT
解决iis内存占用过大的问题 在IIS6下,经常出现w3wp的内存占用不能及时释放,从而导致服务器响应速度很慢. 今天研究了一下,可以做以下配置: 1.在IIS中对每个网站进行单独的应用程序池配置.即 ...
- 利用art.template模仿VUE 一次渲染多个模版
TypeScript代码 import template = require('art-template/lib/template-web'); interface TemplateBindConfi ...
- ISO/IEC 9899:2011 前言
前言 1.ISO(国际标准组织)与IEC(国际电工技术委员会)为全世界标准形成了专门的系统.作为ISO或IEC成员的国家机构,通过由各自组织所建立的技术委员会来加入国际标准的开发,以处理特定领域的技术 ...
- WebGL学习笔记（一）：理解基本概念和渲染管线
WebGL 是以 OpenGL ES 2.0 为基础的 3D 编程应用接口. 渲染管线(图形流水线) 渲染管线是指将数据从3D场景转换成2D图像,最终在屏幕上显示出来的总过程.它分为几个阶段:应用阶段 ...