WPF 中的画笔、媒体和动画功能详解

• 下载安装程序 - 196.09 KB
• 下载画笔 - 196.09 KB

引言

本文将重点介绍几个 GUI 应用程序，以解释它们的工作原理和原因。对 WPF 有相当好的实践知识，将有助于初学者不仅理解如何使用提到的这些技术，还能在此基础上进行扩展。作为 WPF 的持续学习者，我将尽我所能，尝试整理一份文档，作为 WPF 中一小部分但很重要的参考。下载的文件是已构建好的解决方案，因为.wmf 文件太大无法上传。因此，本文也旨在让读者可以将任何.wmf 文件用于动画和视频目的。

此 WPF 应用程序将显示一个带有文本的TextBox和一个椭圆，它们的属性都已被操作，以例证Brush的使用，并描绘三个Ellipse：一个填充纯色，一个包含图像，还有一个包含下载的 NASA.wmv 文件。画笔会改变元素的图形属性，例如Fill、Stroke或Background。SolidColorBrush用指定的颜色填充元素。为了进一步自定义元素，我们可以使用ImageBrush、Visual Brush 和渐变画笔。ImageBrush将图像绘制到其分配的属性中。例如，文本为“Image”的TextBlock及其旁边的Ellipse都填充了图像，在本例中是一张花朵图片。要填充文本，我们可以将ImageBrush分配给TextBlock的Foreground属性。Foreground属性指定文本本身的填充，而Background属性指定文本周围区域的填充。我们可以通过设置其ImageSource为要显示的文件的ImageBrush。我们还可以将画笔分配给Ellipse的Fill以在形状内显示图像。请注意，Ellipse不是Canvas控件。

更重要的是，此应用程序在TextBlock的foreground和Ellipse的Fill中显示视频。要在 WPF 应用程序中使用音频或视频，请使用MediaElement对象。在使用视频文件之前，请先将其添加到 Visual Studio 项目中，首先在“项目”菜单中选择“添加现有项…”。在出现的对话框中，找到并选择您想要使用的视频。请注意，在“文件名”TextBox旁边的下拉菜单中，您必须将选择更改为“所有文件”(*.*)才能找到您的文件。选择文件后，单击“添加”。在“解决方案资源管理器”中选择新添加的视频文件。然后，在“属性”窗口中，将“复制到输出目录”属性更改为“如果新则复制”。这会告诉项目将您的视频复制到项目的输出目录，以便可以直接引用该文件。之后，我们可以将MediaElement的Source属性设置为视频。我们使用VisualBrush元素在所需对象中显示视频。我们通过将MediaElement分配给其 Visual 属性来定义。通过将视频分配给此属性，可以将画笔应用于TextBox的Foreground，并填充Ellipse以在对象内部播放视频。请注意，第三行的元素的 Fill 在每个屏幕截图中的每个屏幕上都不同。我们来看看 XAML 和代码隐藏文件。

 <Window x:Class="UsingBrushes.UsingBrushesWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="UsingBrushes" Height="450" Width="700">
<Grid>
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<TextBlock FontSize="100" FontWeight="999">
<TextBlock.Foreground>
<SolidColorBrush Color="#5F2CAE" />
</TextBlock.Foreground>
Color
</TextBlock>
<Ellipse Grid.Column="1" Height="100" Width="300" Fill="#5F2CAE" />
<TextBlock Grid.Row="1" FontSize="100" FontWeight="999">
<TextBlock.Foreground>
<ImageBrush ImageSource="flowers.jpg" />
</TextBlock.Foreground>
Image
</TextBlock>
<Ellipse Grid.Row="1" Grid.Column="1" Height="100" Width="300">
<Ellipse.Fill>
<ImageBrush ImageSource="flowers.jpg" />
</Ellipse.Fill>
</Ellipse>
<TextBlock Grid.Row="2" FontSize="100" FontWeight="999">
<TextBlock.Foreground>
<VisualBrush>
<VisualBrush.Visual>
<MediaElement Source="nasa.wmv" />
</VisualBrush.Visual>
</VisualBrush>
</TextBlock.Foreground>
Video
</TextBlock>
<Ellipse Grid.Row="2" Grid.Column="1" Height="100" Width="300">
<Ellipse.Fill>
<VisualBrush>
<VisualBrush.Visual>
<MediaElement Source="nasa.wmv" />
</VisualBrush.Visual>
</VisualBrush>
</Ellipse.Fill>
</Ellipse>
</Grid>
</Window>

代码隐藏文件是标准的

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;

namespace UsingBrushes
{   
   public partial class UsingBrushesWindow : Window
   {
      public UsingBrushesWindow()
      {
         InitializeComponent();
      }
   }
}

这是输出的图像

 

            

WPF 应用程序中的动画是指在指定时间段内，一个属性从一个值过渡到另一个值。这意味着 GUI 元素的绝大多数图形属性都可以进行动画处理。动画示例使用.wmv文件来展示视频大小的动画。GUI 中创建了一个MediaElement以及两个输入TextBoxes——一个用于宽度，一个用于高度——以及一个动画按钮。很多时候，我们经常下载带有 GUI 元素的动画文件，但可能不理解它为什么或如何工作。我们知道，当您单击动画按钮时，视频的Width和Height属性会动画到用户在相应TextBox中输入的。不可否认，只需下载一个解决方案文件容器并构建它们很容易。然而，很多时候，我们可能不知道这些文件为何或如何工作来构建 GUI 应用程序。因此，让我们先看看 XAML 和输出，然后再尝试理解其工作原理。

<Window x:Class="UsingAnimations.UsingAnimationsWindow"
   xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
   xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
   Title="UsingAnimations" Height="400" Width="500">
   <Grid>
      <Grid.ColumnDefinitions>
         <ColumnDefinition />
         <ColumnDefinition Width="Auto" />
      </Grid.ColumnDefinitions> 
  
      <MediaElement Name="video" Height="100" Width="100" Stretch="Fill"
         Source="ourfractal.wmv"/>
 
      <StackPanel Grid.Column="1">
        
         <TextBlock Margin="5,0,0,0">Width:</TextBlock>
         <TextBox Name="widthValue" Width="75" Margin="5">100</TextBox> 
      
         <TextBlock Margin="5,0,0,0">Height:</TextBlock>
         <TextBox Name="heightValue" Width="75" Margin="5">100</TextBox> 
     
         <Button Width="75" Margin="5">Animate
            <Button.Triggers>
              
               <EventTrigger RoutedEvent="Button.Click">
                  <BeginStoryboard>
                     <Storyboard Storyboard.TargetName="video">
                        <!-- Animates the Width -->
                        <DoubleAnimation Duration="0:0:2"
                           Storyboard.TargetProperty="Width"
                           To="{Binding ElementName=widthValue,
                           Path=Text}" />
 <DoubleAnimation Duration="0:0:2"
                           Storyboard.TargetProperty="Height"
                           To="{Binding ElementName=heightValue,
                           Path=Text}" />
                     </Storyboard>
                  </BeginStoryboard>
               </EventTrigger>
            </Button.Triggers>
         </Button>
      </StackPanel>
   </Grid>
</Window>

代码隐藏和它一样简单

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;

namespace UsingAnimations
{
   public partial class UsingAnimationsWindow : Window
   {
      public UsingAnimationsWindow()
      {
         InitializeComponent();
      }
   }
}

与 Windows Forms 应用程序类似，我们创建一个UsingAnimationsWindow类，并使用冒号表示它派生自 Forms 基类。这是应用程序的视图：  

           

这是一个具有某种催眠效果的动画。可以操作Width和Height属性以在（指定时间段内）放大动画。在 XAML 中，我们放置了一个StoryBoard元素，其中包含嵌套的动画元素。当StoryBoard开始执行时，所有子动画都会开始执行。在 WPF 中，您可以定义多个StoryBoard，如果您希望它们都同时执行。原因是Storyboard元素有两个重要的附加属性——TargetName和TargetProperty——这些属性可以在StoryBoard或动画元素中定义。TargetName指定动画对象的哪个属性要更改。在本例中，Width和Height是TargetProperties，因为我们要更改视频.wmv文件的大小。TargetName和TargetProperties都可以定义在StoryBoard或动画元素本身中。WPF 提供了几个类来为属性添加动画。我们使用DoubleAnimation来处理Width和Height属性——PointAnimations和ColorAnimations是另外两个常用的动画类。

DoubleAnimation为double类型的属性添加动画。Width和Height动画分别是。我们定义了Width动画的To属性，它指定了动画结束时的值。我们使用数据绑定将此值设置在widthValueTextBox中。动画还有一个Duration属性，用于指定动画需要多长时间：请注意，我们将Width动画（再次强调，Width是TargetProperties之一）的Duration设置为 0:02，这意味着需要 0 小时、0 分钟和 2 秒。十进制类型的以秒的几分之一表示。小时和分钟值必须是整数。动画还有一个From属性，它定义了动画属性的恒定起始值。这对于那些在 Visual C# Windows Forms 中使用StopWatch的StartNew()方法的人来说可能很熟悉。最后，动画还有一个by属性，这对于数值动画很有用。此属性指定要更改属性的量。这可以代替From和To属性来创建更通用的动画。您可以从中学习 WPF 的首选来源是 http://windowsclient.net/。

历史

• 2010 年 5 月 23 日：首次发布