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 ...
随机推荐
- manjaro系统的回滚操作
作为linux系统的爱好者,自从使用linux后,就喜欢追求新的软件,连系统都换成了滚动升级的版本.manjaro基于arch linux,同时也是kde的支持系统,升级非常频繁.使用了几年,很少碰到 ...
- 【2019.11.27】SDN上机第5次作业
参考资料: https://www.cnblogs.com/zzqsss/p/11924685.html 问答环节 描述官方教程实现了一个什么样的交换机功能? Ryu是一个基于组件的软件定义的网络框架 ...
- mongodb启动命令与端口设置
一.mongodb安装和配置 1.创建tools目录,用于存放安装包 cd /usr/local mkdir -p tools cd tools 2.下载mongodb包(其它版本请自行下载) wge ...
- 各大web服务器https的证书文件
nginx key+pem iis pfx+pfx-password.txt tomcat pfx+pfx-password.txt apache key+chain.crt+public.crt
- Empirical Analysis of Beam Search Performance Degradation in Neural Sequence Models
Empirical Analysis of Beam Search Performance Degradation in Neural Sequence Models 2019-06-13 10:2 ...
- 工具系列 | VScode Remote 远程开发与调试（告别SSH）
简介 最近VScode发布了远程编程与调试的插件Remote Development,使用这个插件可以在很多情况下代替vim直接远程修改与调试服务器上的代码,同时具备代码高亮与补全功能,就和在本地使用 ...
- easyui 如何为datagrid添加自定义列属性（如：width,align,editor）
我在实际业务需要为datagrid添加一个自定义属性 原先的datagrid列属性包括:title.width.align.formattter.editor等 我们可以通过datagrid的一个方法 ...
- 运维笔记--postgresql占用CPU问题定位
运维笔记--postgresql占用CPU问题定位 场景描述: 业务系统访问变慢,登陆服务器查看系统负载并不高,然后查看占用CPU较高的进程,发现是连接数据库的几个进程占用系统资源较多. 处理方式: ...
- EasyDSS高性能RTMP、HLS(m3u8)、FLV、RTSP流媒体服务器运行遇到getpwnam(_xxxxx_)错误的解决办法
EasyDSS RTMP流媒体服务器是什么? EasyDarwin如何支持点播和RTMP/HLS直播?EasyDSS! getpwnam("xxxxx") 近期有EasyDSS流媒 ...
- piecewise_construct存在的意义
C++11中大部分的容器对于添加元素除了传统的 insert 或者 pusb_back/push_front 之外都提供一个新的函数叫做 emplace. 比如如果你想要向 std::vector 的 ...