WPF窗体动态效果

news2024/11/22 16:32:12

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

效果如下:

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

原理比较简单,就是在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、运行,点击播放就可以看到效果

示例代码

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2039980.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

shell命令行解释器—既陌生有熟悉的东西

今天做一个感性的认识来&#xff0c;用一个生活的例子。 你生活在有一条村子里面&#xff0c;在村的东边就是王婆&#xff0c;王婆呢&#xff1f;她主要做什么呢啊&#xff1f;她在村儿里面呢&#xff0c;也不种地啊&#xff0c;那她干什么呢&#xff1f;他主要做帮别人进行婚嫁…

人工智能时代,网络安全公司F5如何提高防护效能?

随着AI推动的应用和API数量迅速增长&#xff0c;企业面临着日益严峻的安全挑战&#xff0c;亟需采取有效措施来应对。AI正将数字体验推向一个全新的高度&#xff0c;它通过分布式部署数据源、模型和服务在企业内部、云端和边缘计算环境中&#xff0c;并依靠不断扩展的API网络实…

旋转字符串 | LeetCode-796 | 模拟 | KMP | 字符串匹配

&#x1f64b;大家好&#xff01;我是毛毛张! &#x1f308;个人首页&#xff1a; 神马都会亿点点的毛毛张 &#x1f579;️KMP算法练习题 LeetCode链接&#xff1a;796. 旋转字符串 文章目录 1.题目描述&#x1f351;2.题解&#x1fad0;2.1 暴力解法&#x1fad2;2.2 模拟…

Go调度器

线程数过多,意味着操作系统会不断地切换线程,频繁的上下文切换就成了性能瓶颈.Go提供一种机制 可以在线程中自己实现调度,上下文切换更轻量,从而达到线程数少,而并发数并不少的效果,而线程中调度的就是Goroutine 调度器主要概念: 1.G:即Go协程,每个go关键字都会创建一个协程…

opencv基础的图像操作

1.读取图像&#xff0c;显示图像&#xff0c;保存图像 #图像读取、显示与保存 import numpy as np import cv2 imgcv2.imread(./src/1.jpg) #读取 cv2.imshow("img",img) #显示 cv2.imwrite("./src/2.jpg",img) #保存 cv2.waitKey(0) #让程序进入主循环(让…

Kubernetes/K8s集群1.23.6搭建

1 集群规划 HostnameIP角色centos702192.168.131.102mastercentos704192.168.131.104nodecentos705192.168.131.105node 2 安装步骤 初始操作和安装基础软件每个节点都要执行。 2.1 初始操作 2.1.1 关闭防火墙 systemctl stop firewalld systemctl disable firewalld2.1.…

单元训练06:独立按键的扩展应用

蓝桥杯 小蜜蜂 #include "stc15f2k60s2.h"// 定义LED打开 #define LED(x) \{ \P0 x; \P2 P2 & 0x1f | 0x80; \P2 P2 & 0x1f; \}// 以位数来定义第1、2至6个灯&#xff0c;注意&#xff…

发两张Pop!_OS 24.04-alpha版本截图

发两张Pop!_OS 24.04-alpha版本截图

《Linux运维总结:基于x86_64架构CPU使用docker-compose一键离线部署etcd 3.5.15容器版分布式集群》

总结&#xff1a;整理不易&#xff0c;如果对你有帮助&#xff0c;可否点赞关注一下&#xff1f; 更多详细内容请参考&#xff1a;《Linux运维篇&#xff1a;Linux系统运维指南》 一、部署背景 由于业务系统的特殊性&#xff0c;我们需要面对不同的客户部署业务系统&#xff0…

flink文档刨析

flink任务运行方式 flink任务提交方式有3种 session、per-job、application三种 flink任务运行底座也有三种&#xff0c;Standalone、yarn、k8s 原则上一个flink任务运行的方式由3*39种&#xff0c;但是有些是没法搭配的 yarn&#xff1a;包括yarn-session 、yarn-per-job 、…

vue2+OpenLayers 天地图上凸显出当前地理位置区域(4)

凸显出当前区域 需要当前地方的json数据 这个可以在阿里的这个阿里 看下效果图 遮盖层的逃命都是可以调的 引入 下面一段代码 import sx from "/views/json/sx1.json"; // 下载的json import GeoJSON from "ol/format/GeoJSON"; // ol的一些方法 imp…

C++ | Leetcode C++题解之第335题路径交叉

题目&#xff1a; 题解&#xff1a; class Solution { public:bool isSelfCrossing(vector<int>& distance) {int n distance.size();// 处理第 1 种情况int i 0;while (i < n && (i < 2 || distance[i] > distance[i - 2])) {i;}if (i n) {ret…

郊游、旅游管理系统-计算机毕设Java|springboot实战项目

&#x1f34a;作者&#xff1a;计算机毕设残哥 &#x1f34a;简介&#xff1a;毕业后就一直专业从事计算机软件程序开发&#xff0c;至今也有8年工作经验。擅长Java、Python、微信小程序、安卓、大数据、PHP、.NET|C#、Golang等。 擅长&#xff1a;按照需求定制化开发项目、 源…

汽车4S店管理系统-计算机毕设Java|springboot实战项目

&#x1f34a;作者&#xff1a;计算机毕设残哥 &#x1f34a;简介&#xff1a;毕业后就一直专业从事计算机软件程序开发&#xff0c;至今也有8年工作经验。擅长Java、Python、微信小程序、安卓、大数据、PHP、.NET|C#、Golang等。 擅长&#xff1a;按照需求定制化开发项目、 源…

微信小程序--26(全局配置-1)

一、全局配置文件 1.标志 app.json 2.配置项 pages 记录当前小程序所有页面的存放路径 window 全局配置小程序窗口配置 tabBar 设置小程序底部的tabBar效果 style 是否启用新版本的组将样式 3.window 导航栏区域 navigationBar …

计算机学生高效记录并整理编程学习笔记的方法

哪些知识点需要做笔记&#xff1f; 以下是我认为计算机学生大学四年可以积累的笔记。 ① 编程语言类&#xff08;C语言CJava&#xff09;&#xff1a;保留课堂笔记中可运行的代码部分&#xff0c;课后debug跑一跑。学习语言初期应该多写代码&#xff08;从仿写到自己写&#…

LeetCode - 88 合并两个有序数组(Java JS Python C C++)

题目来源 88. 合并两个有序数组 - 力扣&#xff08;LeetCode&#xff09; 题目描述 给你两个按 非递减顺序 排列的整数数组 nums1 和 nums2&#xff0c;另有两个整数 m 和 n &#xff0c;分别表示 nums1 和 nums2 中的元素数目。 请你 合并 nums2 到 nums1 中&#xff0c;使…

解决Tomcat 10启动日志乱码及在IntelliJ IDEA中控制台输出乱码的问题

目录 一.背景: 二.出现乱码的原因: 三.Tomcat解决乱码过程: 四.IDEA解决乱码效果: 五.Tomcat的优点和缺点: 一.背景: 在Tomcat启动起来的时候&#xff0c;界面就会出现很多的繁体字根本不知道是什么意思&#xff0c;相信大家看了也很是头痛。 还有一个是在IDEA控制台出现的…

触摸感应芯片原厂/抗干扰2路2通道触摸/双通道触摸方案VK3602XS SOP8

产品品牌&#xff1a;永嘉微电/VINKA 产品型号&#xff1a;VK3602XS 封装形式&#xff1a;SOP8 概述 VK3602XS具有2个触摸按键&#xff0c;可用来检测外部触摸按键上人手的触摸动作。该芯片具有 较高的集成度&#xff0c;仅需极少的外部组件便可实现触摸按键的检测。 提供了2…

进程空间回收和线程

一.进程空间的回收 1.wait pid_t wait(int *status); 功能&#xff1a;该函数可用于阻塞等待任意子进程退出并回收进程的状态 参数&#xff1a;status进程退出时候的状态 如果不关心其退出状态一般用NULL表示 如果要回收进程退出状态&#xff0c;WEXITATUS回收 返回值&…