拼吾爱程序人生

首页»  WPF»  WPF 4 动态覆盖图标（Dynamic Overlay Icon）
cobra - 2010-6-4 11:24:00
在《WPF 4 开发Windows 7 任务栏》一文中我们学习了任务栏的相关开发内容，同时也对覆盖图标（Overlay Icon）功能进行了一些介绍，其中覆盖图标是以静态方式呈现的。本篇将进一步制作覆盖图标的动态实例。

新建应用程序

在项目中添加应用程序图标资源（App.ico），通过Window 属性为应用程序设置图标。

附件: Icon.png

附件: Property.png

附件: ChooseIcon.png

在XAML 页面添加一个“Show Overlay Icon” <Button>控件用于触发后面显示动态覆盖图标的点击事件。

附件: XAML.png
  1. <Grid>
  2.     <Button x:Name="showBtn" Content="Show Overlay Icon"
  3.             Height="30" Width="120" Click="showBtn_Click"/>
  4. </Grid>
复制代码
设置图标模板

    为了使用方便我们通过Window Resource 设置一个图标数据模板（DataTemplate）。由一个绿色圆圈（Ellipse）和一个文本框（TextBlock）组成，文本框用于动态显示倒计时数字。
  1. <Window.Resources>
  2.     <DataTemplate x:Key="DynamicIcon">
  3.         <Grid Width="20" Height="20">
  4.             <Ellipse Fill="Green" Stroke="White" StrokeThickness="2"/>

  6.             <TextBlock Text="{Binding}" TextAlignment="Center" Foreground="White"
  7.                         FontWeight="Bold" Height="16" VerticalAlignment="Center"
  8.                         FontSize="12"/>
  9.         </Grid>
  10.     </DataTemplate>
  11. </Window.Resources>
复制代码
添加任务栏组件

在XAML 中添加TaskbarItemInfo 组件，支持覆盖图标显示。
  1. <Window x:Class="Win7TaskbarDemo.MainWindow"
  2.         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  3.         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  4.         Title="MainWindow" Height="211" Width="363"
  5.         Icon="/Win7TaskbarDemo;component/Resources/App.ico">
  6.     <Window.Resources>
  7.         … …
  8.     </Window.Resources>

  10.     <Window.TaskbarItemInfo>
  11.         <TaskbarItemInfo />
  12.     </Window.TaskbarItemInfo>

  14.     <Grid>
  15.         <Button x:Name="showBtn" Content="Show Overlay Icon"
  16.                 Height="30" Width="120" Click="showBtn_Click"/>
  17.     </Grid>
  18. </Window>
复制代码
添加点击事件

最后为按键添加点击事件，如下代码：
  1. private void showBtn_Click(object sender, RoutedEventArgs e)
  2. {
  3.     int iconWidth = 20;
  4.     int iconHeight = 20;

  6.     for (int i = 10; i > 0; i--)
  7.     {
  8.         RenderTargetBitmap bmp = new RenderTargetBitmap(iconWidth, iconHeight, 96, 96, PixelFormats.Default);
  9.         ContentControl ctl = new ContentControl();

  11.         ctl.ContentTemplate = ((DataTemplate)Resources["DynamicIcon"]);
  12.         ctl.Content = i.ToString();
  13.         ctl.Arrange(new Rect(0, 0, iconWidth, iconHeight));

  15.         bmp.Render(ctl);
  16.         TaskbarItemInfo.Overlay = (ImageSource)bmp;
  17.         Thread.Sleep(1000);
  18.     }
  19. }
复制代码
上面代码中，主要思路是通过循环将i值显示在覆盖图标中，以达到倒计时的效果。RenderTargetBitmap 允许我们通过XAML创建视图并将其渲染成Bitmap，当然这个Bitmap 图片就是要为TaskbarItemInfo 设置的Overlay 属性。

    接下来通过ContentControl 为DynamicIcon 模板设置覆盖图标资源，并将i值Binding 到TextBlock 控件。最后通过Render 方法将ContentControl 渲染为Bitmap，并赋给TaskbarItemInfo 的Overlay 属性。

运行程序点击“Show Overlay Icon”按键后，覆盖图标便以倒计时10秒方式动态显示。（文/Gnie）

附件: 10.png     附件: 8.png     附件: 1.png

下载源码

附件: 下载地址
WPF栏目的最新浏览文章：
• WPF案例（二）模拟Apple OS界面前后180度反转
• C#开发WPF/Silverlight动画及游戏系列教程(Game Course)
• WPF动态改变主题颜色
• [WPF系列教程] 手把手教你做“咖啡”按钮
• 【WPF】一个类似于QQ面板的GroupShelf控件
• WPF案例（六）动态切换UI布局
• [WPF] 解决ListView在没有Items时，水平滚动条不出现的问题
• WPF案例（一）模拟Windows 7 Win+Tab切换
• Wpf Docking Library--类似于VisualStudio界面风格的类库
• WPF案例（三）模拟QQ“快速换装"界面
• WPF案例（五）对控件界面使用倒影
• WPF案例（四）模拟Windows 7桌面任务栏
• WPF实现不规则窗体
• 制作WPF的屏幕保护程序
• WPF 版本的 IPMessager
• 【WPF】用CustomControl打造WPF版的Marquee
查看完整版本: WPF 4 动态覆盖图标（Dynamic Overlay Icon）
Powered by Discuz!NT Archiver 3.0.0
CopyRight © 2007-2010 Pin5i-Programming-Life