WPF窗体动态效果

于 2024-08-14 10:40:03 发布
阅读量536 收藏 6
点赞数 10
分类专栏： WPF 文章标签： wpf 动态窗口
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zhaotianff/article/details/141184395
版权

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

效果如下：

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

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

示例代码

△曉風殘月〆
关注
  • 10
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
WPF窗体阴影效果
D&M的博客
07-08 5177
通常界面要有鲜明对比才更能让人容易区分，通过为元素添加阴影渐变等效果让界面富有层次感来张显主题，下面我给一个登录窗体添加了阴影效果，思路大概是把窗体设置为透明，然后在底部绘制一个Rectangle矩形，把Rectangle设置为圆角，然后设置Rectangle的效果。 效果如下： 我把设置窗体阴影效果的样式放在了App.xaml页面里，然后再在XAML处引用此资源，详细代码如下： App...
WPF 窗体自定义拖拽缩放
beautifull001的博客
03-10 607
先看效果： 自定义WindowChrome 通过WindowChrome的ResizeBorderThickness属性进行设置 XAML代码 <Window x:Class="SmartClient.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006.
WPF 窗体增加置顶按钮Demo
qq_42399932的博客
07-21 367
许多应用窗口除了最大化、最小化、关闭按钮外还包含固定置顶按钮，例如微信、一些播放窗口。这里尝试用WPF来实现这一功能。
WPF 项目开发入门（三）WPF 窗体与页面
热门推荐
zhtbs的博客
07-25 1万+
WPF 开发系列页面跳转控制功能
WPF实现动画效果
无糖加冰
06-03 2570
WPF动画 今天我们尝试用WPF实现动画效果,我们都知道一般传统的动画形式主要是用计时器以及一些事件处理对象的属性来实现动画的. 而WPF则是使用计时器和自定义的绘图逻辑以及对象自带的属性来实现动画的. 实现WPF动画的基本过程 实现动画的过程就和拍电影一样,首先确定剧本,然后修改剧本,随后确定演员角色,最后开拍 1,在XAML中将改为并取名name=“canvas” 在window设计界面里面,通过Loaded="Canvas_Loaded"向界面添加加载事件 (开拍前的准备工作) <Window
WPF中的动态加载页面
weixin_43152819的博客
07-04 178
WPF的动态加载界面
wpf TreeView 实现动态加载页面
04-08 472
wpf TreeView 实现动态加载页面
WPF+PRISM 学习2_窗体高度宽度的设定
王永胜的专栏
03-01 1011
WPF+PRISM 学习2_窗体高度宽度客户区域高度宽度的关系，窗体的高度属性包括标题栏和边框，窗体的宽度包括窗体的边框等
WPF页面动态生成
xfeng20的博客
06-23 4666
页面初始化与动态加载
WPF 窗体拖拽效果，窗体随鼠标移动
03-24
首先，我们需要创建一个新的WPF窗体项目。在Visual Studio中，选择“新建项目”，然后选择“WPF应用程序”。在项目中，你会看到一个默认的`MainWindow.xaml`文件，这是我们的主窗体。我们需要在这个文件中添加必要的...
WPF窗体上生成泡泡效果
12-04
总结起来，实现WPF窗体上的泡泡效果需要创建自定义泡泡控件，处理它们的移动、碰撞检测以及显示文字提示。通过提供的源码（WPF_QiPao），开发者可以进一步学习和实践这些技术，从而在自己的应用中创建出更生动有趣的...
wpf 窗体旋转 效果
08-30
总的来说，WPF提供了强大的图形和动画支持，通过掌握RenderTransform和相关转换类，开发者可以创建出富有动态效果和交互性的应用程序界面。在实际项目中，根据需求灵活运用这些技术，可以极大地提升用户体验。
WPF中窗体最大化问题的解决方法
12-31
WPF窗体是XAML文件和后台代码文件的混合体。 本文将详细介绍关于WPF窗体最大化问题的相关内容，下面话不多说了，来一起看看详细的介绍吧 遇到的问题信息 问题：当WindowStyle=None时，窗口最大化，不显示任务栏 ...
WPF动态更改窗体颜色
02-06
在Windows Presentation Foundation（WPF）中，动态更改窗体颜色和透明度是一项常见的需求，尤其在创建具有丰富用户交互体验的应用程序时。WPF提供了一种强大的方式来实现这一点，结合了XAML（Extensible ...
笔记：简单介绍WPF中RenderTransform，LayoutTransform， VisualTransform区别
HeBianGu的博客
08-09 769
在 WPF 中，RenderTransform、LayoutTransform 和 VisualTransform 是用于对控件进行变换的属性，他们的主要区别是什么，如何选用合适的Transform，本文简要介绍。它们的主要区别在于应用变换的时机和影响范围。
【C# WPF WeChat UI 简单布局】
最新发布
qq_54141095的博客
08-13 638
【C# WPF WeChat UI 简单布局】
WPF RadialGradientBrush中Center、RadiusX/Y、GradientOrigin 渐变参数
u013400314的博客
08-08 298
案例案例
WPF 数据模板DataTemplate、控件模板ControlTemplate、Style、ItemsPreseter
u013400314的博客
08-12 280
DataTemplate常用的地方有3处，分别是：ContentControl的ContentTemplate属性，相当于给ContentControl的内容穿衣服。ItemsControl的 ItemTemplate属性，相当于给ItemsControl的数据条目穿衣服。GridViewColumn的CellTemplate属性，相当于给GridViewColumn单元格里的数据穿衣服。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值