XAML WPF 中级开发 C#

WPF 幻灯片

Azim Zahir

4.83/5 (5投票s)

2012 年 3 月 26 日

CPOL

3分钟阅读

65433

5758

本文演示了如何在 WPF 中创建幻灯片。

下载演示项目 - 2.79 MB

Sample Image

引言

在本文中，我展示了如何在 WPF 中创建幻灯片。本文的主要重点不是深入解释任何 WPF 概念。也不是关于创建幻灯片的任何特定方法。而是解释如何集成 WPF 的一些功能来创建一个简单的应用程序。幻灯片应用程序非常简单。事实上，大多数人肯定已经熟悉创建此类应用程序的方法。它使用一种传统的方法，即在按钮的点击事件上按顺序显示一系列图像。

背景

我在我的应用程序中使用的 WPF 的关键概念是

SolidColorBrush 类
LinearGradientBrush 类
RadialGradientBrush 类
DispatcherTimer 类
BitmapImage 类

我们现在将详细介绍每一个。

SolidColorBrush 类是最简单的画笔类型。它使用单一颜色来绘制给定的区域。它有一个 Color 属性来指定要使用的颜色。

以下是 SolidColorBrush 的标记代码

<Rectangle Width="70" Height="40">
  <Rectangle.Fill>
     <SolidColorBrush Color="Red"/>
  </Rectangle.Fill>
</Rectangle>

以上代码的输出如下

LinearGradientBrush 类允许您使用多种颜色创建渐变效果。它具有 StartPoint 和 EndPoint 属性来指定颜色过渡开始和结束的位置。指定 StartPoint 和 EndPoint 值时，0,0 表示左上角，1,1 表示右下角。每种颜色都使用带有 Offset 属性的 GradientStop 属性指定。

以下是 LinearGradientBrush 的标记代码

<Rectangle Width="70" Height="40">
   <Rectangle.Fill>
      <LinearGradientBrush StartPoint="0,0" EndPoint="1,1">
         <GradientStop Color="Violet" Offset="0"/>
         <GradientStop Color="Indigo" Offset="0.2"/>
         <GradientStop Color="Blue" Offset="0.3"/>
         <GradientStop Color="Green" Offset="0.5"/>
         <GradientStop Color="Yellow" Offset="0.7"/>
         <GradientStop Color="Orange" Offset="0.8"/>
         <GradientStop Color="Red" Offset="1"/>
      </LinearGradientBrush>
   </Rectangle.Fill>
</Rectangle>

上面代码的输出是以下彩虹色的渐变

RadialGradientBrush 类也允许您使用多种颜色创建渐变效果。然而，它创建的是一个椭圆形的渐变。与 LinearGradientBrush 类一样，每种颜色都使用带有 Offset 属性的 GradientStop 属性指定。

以下是 RadialGradientBrush 的标记代码

<Rectangle Width="70" Height="40">
    <Rectangle.Fill>
       <RadialGradientBrush>
          <GradientStop Color="Violet" Offset="0"/>
          <GradientStop Color="Indigo" Offset="0.2"/>
          <GradientStop Color="Blue" Offset="0.3"/>
          <GradientStop Color="Green" Offset="0.5"/>
          <GradientStop Color="Yellow" Offset="0.7"/>
          <GradientStop Color="Orange" Offset="0.8"/>
          <GradientStop Color="Red" Offset="1"/>
       </RadialGradientBrush>
    </Rectangle.Fill>
</Rectangle>

上面代码的输出是以下彩虹色的椭圆形渐变

DispatcherTimer 类属于 System.Windows.Threading 命名空间。此类可用于以预定义的时间间隔执行一段特定的代码。它有一个 Interval 属性来指定这个预定义的时间间隔。 Interval 属性将 TimeSpan 类的实例作为其值。 Tick 事件告诉计时器必须执行哪些代码。

以下是每两秒执行一次 timer_Tick 函数的代码

timer = new DispatcherTimer();
timer.Interval = new TimeSpan(0, 0, 2);
timer.Tick += new EventHandler(timer_Tick);

BitmapImage 类位于 System.Windows.Media.Imaging 命名空间中。 BitmapImage 类的 UriSource 属性用于指定要显示在 Image 控件上的图像文件。 BitmapImage 对象被指定为 Image 控件的 Source 属性的值。

以下是在 Image 控件上显示 image.jpg 文件的代码

BitmapImage image = new BitmapImage();
image.BeginInit();
image.UriSource = new Uri("image.jpg", UriKind.Relative);
image.EndInit();
myImage.Source = image;

使用代码

以下是幻灯片应用程序主窗口的 XAML 代码

<Window x:Class="WPFSlideShow.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Loaded="Window_Loaded"
        Background="{StaticResource windowBrush}"
        Title="Slide Show" Height="391" Width="642">
    <Window.Resources>
        <SolidColorBrush x:Key="borderBrush" Color="Red"/>
        <LinearGradientBrush x:Key="firstBrush" StartPoint="0,0" EndPoint="1,1">
            <GradientStop Color="Red" Offset="0"/>
            <GradientStop Color="LightGreen" Offset="1"/>
        </LinearGradientBrush>
        <LinearGradientBrush x:Key="previousBrush" StartPoint="0,0" EndPoint="1,1">
            <GradientStop Color="LightGreen" Offset="0"/>
            <GradientStop Color="Red" Offset="0.4"/>
            <GradientStop Color="LightGreen" Offset="1"/>
        </LinearGradientBrush>
        <LinearGradientBrush x:Key="nextBrush" StartPoint="0,1" EndPoint="1,0">
            <GradientStop Color="LightGreen" Offset="0"/>
            <GradientStop Color="Red" Offset="0.4"/>
            <GradientStop Color="LightGreen" Offset="1"/>
        </LinearGradientBrush>
        <LinearGradientBrush x:Key="lastBrush" StartPoint="0,1" EndPoint="1,0">
            <GradientStop Color="LightGreen" Offset="0"/>
            <GradientStop Color="Red" Offset="1"/>
        </LinearGradientBrush>
        <LinearGradientBrush x:Key="progressBrush" StartPoint="0,1" EndPoint="1,1">
            <GradientStop Color="Violet" Offset="0.1"/>
            <GradientStop Color="Indigo" Offset="0.3"/>
            <GradientStop Color="Blue" Offset="0.4"/>
            <GradientStop Color="Green" Offset="0.5"/>
            <GradientStop Color="Yellow" Offset="0.7"/>
            <GradientStop Color="Orange" Offset="0.8"/>
            <GradientStop Color="Red" Offset="0.9"/>
        </LinearGradientBrush>
    </Window.Resources>
    <Canvas Width="595" Height="351">
        <Button Name="btnFirst" Background="{StaticResource firstBrush}" 
            BorderBrush="{StaticResource borderBrush}" Content="<<" 
            Canvas.Left="117" Canvas.Top="293" Width="60" Height="30" Click="btnFirst_Click" />
        <Button Name="btnPrevious" Background="{StaticResource previousBrush}" 
            BorderBrush="{StaticResource borderBrush}" Content="<" 
            Canvas.Left="183" Canvas.Top="293" Width="60" Height="30" Click="btnPrevious_Click" />
        <Button Name="btnNext" Background="{StaticResource nextBrush}" 
            BorderBrush="{StaticResource borderBrush}" Content=">" 
            Canvas.Left="249" Canvas.Top="293" Width="60" Height="30" Click="btnNext_Click" />
        <Button Name="btnLast" Background="{StaticResource lastBrush}" 
            BorderBrush="{StaticResource borderBrush}" Content=">>" 
            Canvas.Left="315" Canvas.Top="293" Width="60" Height="30" Click="btnLast_Click" />
        <ProgressBar Name="progressBar1" Background="{StaticResource progressBrush}" 
            BorderBrush="{StaticResource borderBrush}" Canvas.Left="115" 
            Canvas.Top="329" Height="10" Width="258" Minimum="1" Maximum="21" Value="1" />
        <CheckBox Name="chkAutoPlay" Canvas.Left="381" Canvas.Top="293" 
            Height="16" Width="117" Click="chkAutoPlay_Click">Play Automatically</CheckBox>
        <Image Canvas.Left="9" Canvas.Top="11" Height="275" x:Name="myImage" Stretch="Fill" Width="575"/>
    </Canvas>
</Window>

在上面的代码中，我为按钮的边框创建了一个名为 borderBrush 的 SolidColorBrush 资源，以及四个名为 firstBrush、previousBrush、nextBrush 和 lastBrush 的 LinearGradientBrush 资源，用于按钮的背景。为 progressbar 控件的背景创建了另一个名为 progressBrush 的 LinearGradientBrush。我使用了一个名为 windowBrush 的 RadialGradientBrush 资源作为主窗口的背景。此资源在 App.xaml 文件中声明，其代码如下

<Application x:Class="WPFSlideShow.App"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             StartupUri="MainWindow.xaml">
    <Application.Resources>
        <RadialGradientBrush x:Key="windowBrush">
            <GradientStop Color="Pink" Offset="0.1"/>
            <GradientStop Color="LightGreen" Offset="0.2"/>
            <GradientStop Color="LightBlue" Offset="0.3"/>
            <GradientStop Color="LightYellow" Offset="0.4"/>
            <GradientStop Color="Pink" Offset="0.5"/>
            <GradientStop Color="LightGreen" Offset="0.6"/>
            <GradientStop Color="LightBlue" Offset="0.7"/>
            <GradientStop Color="LightYellow" Offset="0.8"/>
            <GradientStop Color="Pink" Offset="1.0"/>
        </RadialGradientBrush> 
    </Application.Resources>
</Application>

以下是 MainWindow 类的代码

public partial class MainWindow : Window
{
    // Declaring a timer.
    DispatcherTimer timer;
    // counter to track images.
    int ctr = 0;
    public MainWindow()
    {
        InitializeComponent();
        // Initialize the timer.
        timer = new DispatcherTimer();
        // Specify timer interval.
        timer.Interval = new TimeSpan(0, 0, 2);
        // Specify timer event handler function.
        timer.Tick += new EventHandler(timer_Tick);
    }
    void timer_Tick(object sender, EventArgs e)
    {
        ctr++;
        if (ctr > 21)
        // Move to first image after last image.
        {
            ctr = 1;
        }
        PlaySlideShow(ctr);
    }
    private void Window_Loaded(object sender, RoutedEventArgs e)
    {
        ctr = 1;
        PlaySlideShow(ctr);
    }
    private void PlaySlideShow(int ctr)
    // Function to display image.
    {
        BitmapImage image = new BitmapImage();
        image.BeginInit();
        string filename = ((ctr < 10) ? "images/Plane0" + ctr + 
               ".jpeg" : "images/Plane" + ctr + ".jpeg");
               // Specify image file name in the Images folder in the application.
        image.UriSource = new Uri(filename, UriKind.Relative);
        image.EndInit();
        // Set image source.
        myImage.Source = image;
        // Specify stretch mode.
        myImage.Stretch = Stretch.Uniform;
        // Update progress bar.
        progressBar1.Value = ctr;
    }
    private void btnFirst_Click(object sender, RoutedEventArgs e)
    // Function to go to first image.
    {
        ctr = 1;
        PlaySlideShow(ctr);
    }

    private void btnPrevious_Click(object sender, RoutedEventArgs e)
    // Function to go to previous image
    {
        ctr--;
        if (ctr < 1)
        // Cycle to last image after first image.
        {
            ctr = 21;
        }
        PlaySlideShow(ctr);
    }

    private void btnNext_Click(object sender, RoutedEventArgs e)
    // Function to go to next image.
    {
        ctr++;
        if (ctr > 21)
        // Cycle to first image after last image.
        {
            ctr = 1;
        }
        PlaySlideShow(ctr);
    }

    private void btnLast_Click(object sender, RoutedEventArgs e)
    // Function to go to last image.
    {
        ctr = 21;
        PlaySlideShow(ctr);
    }
    private void chkAutoPlay_Click(object sender, RoutedEventArgs e)
    // Function to allow or disallow automatic slide show.
    {
        timer.IsEnabled = chkAutoPlay.IsChecked.Value;
        // Enable/Disable timer.
        // Show/Hide buttons.

        btnFirst.Visibility = 
          (btnFirst.IsVisible == true) ? Visibility.Hidden : Visibility.Visible;
        btnPrevious.Visibility = 
          (btnPrevious.IsVisible == true) ? Visibility.Hidden : Visibility.Visible;
        btnNext.Visibility = 
          (btnNext.IsVisible == true) ? Visibility.Hidden : Visibility.Visible;
        btnLast.Visibility = 
          (btnLast.IsVisible == true) ? Visibility.Hidden : Visibility.Visible;
    }
}

上面的代码允许用户使用 first (<<), previous (<), next (>), 和 last (>>) 按钮在 21 个图像之间导航。这些图像位于应用程序的 Images 文件夹中。如果选择了“自动播放”复选框，则按钮将被隐藏，图像将以两秒的间隔按顺序显示。

关注点

我使用 Visual C# 2010 Express Edition 创建了这个应用程序。通过这篇文章，我希望读者可以理解如何使用画笔、资源、DispatcherTimer 类和 BitmapImage 类来创建 WPF 应用程序。