博客园_webabcd - 专注于asp.net, html5, silverlight

稳扎稳打Silverlight(68) - 5.0 XNA 之绘制 3D 图形

2012-03-26T00:29:00Z

稳扎稳打Silverlight(68) - 5.0 XNA 之绘制 3D 图形

作者：webabcd

介绍
Silverlight 5.0 XNA

XNA 绘制 3D 图形的 Demo

在线DEMO
http://www.cnblogs.com/webabcd/archive/2012/03/05/2379862.html

示例
Cube.cs

using System;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Ink;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;

using Microsoft.Xna.Framework;

namespace Silverlight50.XNA
{
    /// <summary>
    /// 描述正方体的相关信息
    /// </summary>
    public static class Cube
    {
        /// <summary>
        /// 正方体的每个顶点的位置（正方体一共 8 个顶点）
        /// </summary>
        public static Vector3[] Corners = new Vector3[]
        {
            new Vector3(1f, 1f, 1f),
            new Vector3(1f, -1f, 1f),
            new Vector3(-1f, -1f, 1f),
            new Vector3(-1f, 1f, 1f),
            new Vector3(1f, 1f, -1f),
            new Vector3(1f, -1f, -1f),
            new Vector3(-1f, -1f, -1f),
            new Vector3(-1f, 1f, -1f)
        };

        /// <summary>
        /// 指定 Corners 里的 4 个顶点组成一个面（正方体一共 4 个面）
        /// </summary>
        public static int[][] Faces = new int[][]
        {
            new int[] { 0, 1, 2, 3 }, 
            new int[] { 0, 3, 7, 4 }, 
            new int[] { 0, 4, 5, 1 }, 
            new int[] { 1, 5, 6, 2 }, 
            new int[] { 2, 6, 7, 3 }, 
            new int[] { 4, 7, 6, 5 }
        };
    }
}

PolygonHelper.cs

using System;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Ink;
using System.Windows.Input;
using System.Windows.Media.Animation;
using System.Windows.Shapes;

using Microsoft.Xna.Framework;
using Microsoft.Xna.Framework.Graphics;
using System.Windows.Graphics;

namespace Silverlight50.XNA
{
    /// <summary>
    /// 绘制多边体的帮助类
    /// </summary>
    public class PolygonHelper
    {
        // 顶点缓冲器，可以将顶点信息以流的方式输出到图形设备中
        protected VertexBuffer vb;

        // 纹理
        protected Texture2D texture;

        /*
         * BasicEffect - 基础效果，可以通过简单的属性设置来实现包含光照、纹理、变换等效果的物体的呈现
         *     BasicEffect.View - 视图矩阵（View 矩阵）
         *     BasicEffect.Projection - 投影矩阵（Projection 矩阵）
         *     BasicEffect.VertexColorEnabled - 是否允许在此效果中启用顶点信息中的颜色数据
         */
        protected BasicEffect be;

        protected Matrix world;
        public Matrix World { get { return world; } set { world = value; } }

        /// <summary>
        /// 初始化多变形体
        /// </summary>
        /// <param name="corners">顶点位置信息数组</param>
        /// <param name="faces">组成每个面的点集合数组</param>
        /// <param name="color">多变形体的颜色</param>
        public PolygonHelper(Vector3[] corners, int[][] faces, Color color)
        {
            GraphicsDevice g = GraphicsDeviceManager.Current.GraphicsDevice;
            VertexPositionNormalTexture[] vertices = CreateVertices(corners, faces);
            vb = new VertexBuffer(g, VertexPositionNormalTexture.VertexDeclaration, vertices.Length, BufferUsage.WriteOnly);
            vb.SetData(0, vertices, 0, vertices.Length, VertexPositionNormalTexture.VertexDeclaration.VertexStride);

            texture = new Texture2D(g, 1, 1, false, SurfaceFormat.Color);
            texture.SetData<Color>(new Color[1] { color });

            be = new BasicEffect(g);
            be.EnableDefaultLighting(); // 使用默认光源效果
            be.LightingEnabled = true;
            be.Texture = texture;
            be.TextureEnabled = true;
        }

        /// <summary>
        /// 绘制多变形体
        /// </summary>
        /// <param name="view">视图矩阵</param>
        /// <param name="projection">投影矩阵</param>
        public void Draw(Matrix view, Matrix projection)
        {
            GraphicsDevice g = GraphicsDeviceManager.Current.GraphicsDevice;
            g.SetVertexBuffer(vb); // 绑定顶点缓冲器到图形设备中
            be.World = world;
            be.View = view;
            be.Projection = projection;
            be.CurrentTechnique.Passes[0].Apply();
            g.DrawPrimitives(PrimitiveType.TriangleList, 0, vb.VertexCount / 3); // 绘制基元
        }

        /// <summary>
        /// 返回一个 VertexPositionNormalTexture 数组
        /// </summary>
        /// <param name="corners">顶点位置信息数组</param>
        /// <param name="faces">组成每个面的点集合数组</param>
        private static VertexPositionNormalTexture[] CreateVertices(Vector3[] corners, int[][] faces)
        {
            int triangleCount = 0;
            // 组成一个面所用的顶点数-2就是所用的三角形数
            foreach (int[] face in faces)
            {
                triangleCount += face.Length - 2;
            }

            // 用到的顶点数 = 用到的三角形数 * 3
            VertexPositionNormalTexture[] vertices = new VertexPositionNormalTexture[triangleCount * 3];
            int i = 0;
            foreach (int[] face in faces)
            {
                // 定义每个三角形的顶点信息
                for (int j = 0; j < face.Length - 2; j++)
                {
                    vertices[i++] = new VertexPositionNormalTexture(corners[face[0]], Vector3.Zero, Vector2.Zero);
                    vertices[i++] = new VertexPositionNormalTexture(corners[face[j + 1]], Vector3.Zero, Vector2.Zero);
                    vertices[i++] = new VertexPositionNormalTexture(corners[face[j + 2]], Vector3.Zero, Vector2.Zero);
                }
                Vector3 vectorA = vertices[i - 1].Position - vertices[i - 3].Position;
                Vector3 vectorB = vertices[i - 1].Position - vertices[i - 2].Position;
                Vector3 normal = Vector3.Cross(vectorB, vectorA);
                for (int j = 0; j < (face.Length - 2) * 3; j++)
                    vertices[i - 1 - j].Normal = normal;
            }

            return vertices;
        }
    }
}

XNA/Demo.xaml

<navigation:Page x:Class="Silverlight50.XNA.Demo" 
           xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
           xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
           xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
           xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
           mc:Ignorable="d"
           xmlns:navigation="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Navigation"
           d:DesignWidth="640" d:DesignHeight="480"
           Title="Demo Page">
    
    <Grid x:Name="LayoutRoot" Background="White">
        <DrawingSurface Name="drawingSurface" Loaded="drawingSurface_Loaded" Draw="drawingSurface_Draw" SizeChanged="drawingSurface_SizeChanged" />
    </Grid>
    
</navigation:Page>

XNA/Demo.xaml.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using System.Windows.Navigation;

using System.Windows.Graphics;
using Microsoft.Xna.Framework;
using Microsoft.Xna.Framework.Graphics;

namespace Silverlight50.XNA
{
    public partial class Demo : Page
    {
        // 可视区的长宽比，一般就是游戏窗口的宽除以游戏窗口的高
        private float _aspectRatio = 1f;
        // 用于绘制多边体的对象
        private PolygonHelper _polygonHelper;

        public Demo()
        {
            InitializeComponent();
        }

        private void drawingSurface_Loaded(object sender, System.Windows.RoutedEventArgs e)
        {

        }

        /// <summary>
        /// 检查 GPU 渲染模式是否可用
        /// </summary>
        private bool CheckAvailable()
        {
            // 检查当前是否是 GPU 渲染模式
            if (GraphicsDeviceManager.Current.RenderMode == RenderMode.Hardware)
                return true;

            // 无法启用 GPU 渲染模式时，显示其原因
            string errorMsg = "";
            switch (GraphicsDeviceManager.Current.RenderModeReason)
            {
                case RenderModeReason.Not3DCapable:
                    errorMsg = "显卡不支持 Shader Model 2.0 +";
                    break;
                case RenderModeReason.GPUAccelerationDisabled:
                    errorMsg = "请设置 <param name=\"EnableGPUAcceleration\" value=\"true\" />";
                    break;
                case RenderModeReason.TemporarilyUnavailable:
                    errorMsg = "显卡有问题，请重启后再试";
                    break;
                case RenderModeReason.SecurityBlocked:
                    errorMsg = "请通过右键配置 Silverlight，在权限选项卡中允许此站点进行 3D 图形加速";
                    break;
            }

            MessageBox.Show(errorMsg);

            return false;
        }

        private void drawingSurface_SizeChanged(object sender, System.Windows.SizeChangedEventArgs e)
        {
            // DrawingSurface 就相当于游戏窗口，所以 DrawingSurface 的宽高比就是 aspectRatio
            _aspectRatio = (float)(drawingSurface.ActualWidth / drawingSurface.ActualHeight);
        }

        private void drawingSurface_Draw(object sender, DrawEventArgs e)
        {
            if (_polygonHelper == null && CheckAvailable())
                _polygonHelper = new PolygonHelper(Cube.Corners, Cube.Faces, new Color(1f, 0f, 0f));

            GraphicsDevice g = GraphicsDeviceManager.Current.GraphicsDevice;

            /*
             * Matrix CreateLookAt(Vector3 cameraPosition, Vector3 cameraTarget, Vector3 cameraUpVector) - 实例化视图矩阵
             *     Vector3 cameraPosition - 摄像机的位置坐标
             *     Vector3 cameraTarget - 摄像机镜头的朝向向量
             *     Vector3 cameraUpVector - 摄像机机身的顶部的上方的向量
             */
            Matrix view = Matrix.CreateLookAt(new Vector3(0, 0, 8.0f), Vector3.Zero, Vector3.Up);

            /*
             * CreatePerspectiveFieldOfView(float fieldOfView, float aspectRatio, float nearPlaneDistance, float farPlaneDistance) - 实例化投影矩阵
             *     float fieldOfView - Y 轴方向上的视角弧度，一般是四分之一个 PI
             *     float aspectRatio - 可视区的长宽比，一般就是游戏窗口的宽除以游戏窗口的高
             *     float nearPlaneDistance - 当物体离摄像机多近时无法看清
             *     float farPlaneDistance - 当物体离摄像机多远时无法看清
             */
            Matrix projection = Matrix.CreatePerspectiveFieldOfView(0.85f, _aspectRatio, 0.01f, 1000.0f);

            // 指定旋转轴
            Vector3 axis = new Vector3(-0.5f, 1, -0.5f);
            axis.Normalize();

            // 通过四元数旋转
            _polygonHelper.World = Matrix.CreateFromQuaternion(Quaternion.CreateFromAxisAngle(axis, (float)e.TotalTime.TotalSeconds * 3));

            // 清除游戏窗口上的所有对象，然后以指定的颜色作为背景
            g.Clear(new Color(0.8f, 0.8f, 0.8f, 1.0f));

            // 绘制图像
            _polygonHelper.Draw(view, projection);

            // 结束本次 Draw ，并再次触发 Draw 事件
            e.InvalidateSurface();
        }
    }
}

OK
[源码下载]

本文链接

稳扎稳打Silverlight(67) - 5.0被信任的应用程序之访问本地文件系统, 支持多窗口, 被信任的程序在浏览器中运行, Call Windows API

2012-03-22T00:31:00Z

[源码下载]

稳扎稳打Silverlight(67) - 5.0被信任的应用程序之访问本地文件系统, 支持多窗口, 被信任的程序在浏览器中运行, Call Windows API

作者：webabcd

介绍
Silverlight 5.0 被信任的应用程

AccessFileSystem - 访问本地文件系统
MultipleWindows - 支持多窗口
In Browser - 被信任的程序在浏览器中运行
Call Windows API

在线DEMO
http://www.cnblogs.com/webabcd/archive/2012/03/05/2379862.html

示例
1、AccessFileSystem（访问本地文件系统）
TrustedApplication/AccessFileSystem.xaml

<navigation:Page x:Class="Silverlight50.TrustedApplication.AccessFileSystem" 
           xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
           xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
           xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
           xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
           mc:Ignorable="d"
           xmlns:navigation="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Navigation"
           d:DesignWidth="640" d:DesignHeight="480"
           Title="AccessFileSystem Page">
    <StackPanel x:Name="LayoutRoot" HorizontalAlignment="Left">

        <TextBlock Text="在不使用 OpenFileDialog 和 SaveFileDialog 的情况下，访问本地文件系统" />

        <!-- 显示“C盘”中的文件夹列表 -->
        <ListBox Name="listBoxDirectory" HorizontalAlignment="Left">
            <ListBox.ItemTemplate>
                <DataTemplate>
                    <StackPanel Orientation="Horizontal">
                        <TextBlock Text="{Binding Name}" Margin="1" />
                    </StackPanel>
                </DataTemplate>
            </ListBox.ItemTemplate>
        </ListBox>

        <!-- 显示“C盘”中的文件列表 -->
        <ListBox Name="listBoxFile" HorizontalAlignment="Left">
            <ListBox.ItemTemplate>
                <DataTemplate>
                    <StackPanel Orientation="Horizontal">
                        <TextBlock Text="{Binding Name}" Margin="1" />
                    </StackPanel>
                </DataTemplate>
            </ListBox.ItemTemplate>
        </ListBox>

    </StackPanel>
</navigation:Page>

TrustedApplication/AccessFileSystem.xaml.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using System.Windows.Navigation;

using System.IO;

namespace Silverlight50.TrustedApplication
{
    public partial class AccessFileSystem : Page
    {
        public AccessFileSystem()
        {
            InitializeComponent();
        }

        protected override void OnNavigatedTo(NavigationEventArgs e)
        {
            if (!App.Current.IsRunningOutOfBrowser)
            {
                MessageBox.Show("请在OOB中运行");
                LayoutRoot.Visibility = Visibility.Collapsed;
            }

            // Application.Current.HasElevatedPermissions - 判断 OOB 模式中的应用程序是否为被信任的应用程序
            if (Application.Current.HasElevatedPermissions)
            {
                // 获取 C 盘的目录信息
                DirectoryInfo root = new DirectoryInfo(@"C:\");
                listBoxDirectory.ItemsSource = root.EnumerateDirectories();
                listBoxFile.ItemsSource = root.EnumerateFiles();
            }
        }
    }
}

2、MultipleWindows（支持多窗口）
TrustedApplication/MultipleWindows.xaml

<navigation:Page x:Class="Silverlight50.TrustedApplication.MultipleWindows" 
           xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
           xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
           xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
           xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
           mc:Ignorable="d"
           xmlns:navigation="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Navigation"
           d:DesignWidth="640" d:DesignHeight="480"
           Title="MultipleWindows Page">
    <Grid x:Name="LayoutRoot" Background="White">
        
        <Button Name="btn" Content="新开窗口" Click="btn_Click" />
        
    </Grid>
</navigation:Page>

TrustedApplication/MultipleWindows.xaml.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using System.Windows.Navigation;

namespace Silverlight50.TrustedApplication
{
    /// <summary>
    /// 演示对多窗口的支持
    /// </summary>
    public partial class MultipleWindows : Page
    {
        Random _random = new Random();

        public MultipleWindows()
        {
            InitializeComponent();
        }

        protected override void OnNavigatedTo(NavigationEventArgs e)
        {
            if (!App.Current.IsRunningOutOfBrowser)
            {
                MessageBox.Show("请在OOB中运行");
                LayoutRoot.Visibility = Visibility.Collapsed;
            }
        }

        private void btn_Click(object sender, RoutedEventArgs e)
        {
            // Application.Current.HasElevatedPermissions - 判断 OOB 模式中的应用程序是否为被信任的应用程序
            if (Application.Current.HasElevatedPermissions)
            {
                /*
                 * Window - OOB 模式下的应用程序窗口
                 *   Height - 窗口的高
                 *   Width - 窗口的宽
                 *   Top - 窗口距顶部的距离
                 *   Left - 窗口距左侧的距离
                 *   Title - 窗口的标题
                 *   Visibility - 窗口的可见性
                 *   Content - 窗口的内容
                 *   TopMost - 窗口是否显示在最前面
                 *   IsActive - 是否为激活窗口（仅 get）
                 *   IsVisible - 窗口是否可见（仅 get）
                 *   WindowState - 窗口的状态（WindowState.Normal，WindowState.Minimized，WindowState.Maximized）
                 *   WindowStyle - 窗口的样式（WindowStyle.None，WindowStyle.SingleBorderWindow，WindowStyle.BorderlessRoundCornersWindow）
                 *   
                 *   Activate() - 激活窗口，使之具有焦点，并置于最前面
                 *   Window.Close() - 关闭窗口
                 *   
                 *   Closing - 窗口关闭前触发的事件
                 */

                Window newWindow = new Window();
                newWindow.Height = 400;
                newWindow.Width = 500;
                newWindow.Top = 1 + _random.Next(0, 100);
                newWindow.Left = 1 + _random.Next(0, 100);
                newWindow.Title = "新窗口";
                newWindow.Visibility = Visibility.Visible;

                // 添加一个内部有按钮的 Canvas，设置 Canvas 的背景色为白色
                Button btn = new Button();
                btn.Width = 80.0;
                btn.Height = 30.0;
                btn.Content = "点  击";
                btn.Margin = new Thickness(5, 10, 0, 0);
                btn.Click += new RoutedEventHandler(btn_Click);
                Canvas canvas = new Canvas();
                canvas.Children.Add(btn);
                canvas.Background = new SolidColorBrush(Colors.White);
                newWindow.Content = canvas;

                newWindow.WindowState = WindowState.Normal;
            }
        }
    }
}

3、In Browser（被信任的程序在浏览器中运行）
TrustedApplication/InBrowser.xaml

<navigation:Page x:Class="Silverlight50.TrustedApplication.InBrowser" 
           xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
           xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
           xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
           xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
           mc:Ignorable="d"
           xmlns:navigation="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Navigation"
           d:DesignWidth="640" d:DesignHeight="480"
           Title="InBrowser Page">
    <StackPanel x:Name="LayoutRoot" Orientation="Vertical" HorizontalAlignment="Left">

        <HyperlinkButton TargetName="_blank" NavigateUri="http://msdn.microsoft.com/en-us/library/gg192793(v=vs.96).aspx" Content="如何使在浏览器中运行的程序成为被信任的程序（需要管理员介入）" />
            
    </StackPanel>
</navigation:Page>

4、Call Windows API
TrustedApplication/CallWindowsAPI.xaml

<navigation:Page x:Class="Silverlight50.TrustedApplication.CallWindowsAPI" 
           xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
           xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
           xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
           xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
           mc:Ignorable="d"
           xmlns:navigation="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Navigation"
           d:DesignWidth="640" d:DesignHeight="480"
           Title="CallWindowsAPI Page">
    <StackPanel x:Name="LayoutRoot">
        
        <Button Content="C 盘的驱动器类型" Click="Button_Click" />

    </StackPanel>
</navigation:Page>

TrustedApplication/CallWindowsAPI.xaml.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using System.Windows.Navigation;

using System.Runtime.InteropServices;

namespace Silverlight50.TrustedApplication
{
    public partial class CallWindowsAPI : Page
    {
        public CallWindowsAPI()
        {
            InitializeComponent();
        }

        protected override void OnNavigatedTo(NavigationEventArgs e)
        {
            if (!App.Current.IsRunningOutOfBrowser)
            {
                MessageBox.Show("请在OOB中运行");
                LayoutRoot.Visibility = Visibility.Collapsed;
            }
        }

        // 演示如何调用 Windows API
        [DllImport("kernel32.dll")]
        static extern int GetDriveType(string lpRootPathName);

        private void Button_Click(object sender, RoutedEventArgs e)
        {
            // Application.Current.HasElevatedPermissions - 判断 OOB 模式中的应用程序是否为被信任的应用程序
            if (Application.Current.HasElevatedPermissions)
            {
                MessageBox.Show("C 盘的驱动器类型：" + GetDriveType(@"c:\"));
            }
        }

        // 注：非托管代码回调托管代码时，托管代码应加上 [AllowReversePInvokeCalls] 标记
    }
}

OK
[源码下载]

本文链接

稳扎稳打Silverlight(66) - 5.0其它之自定义 XAML 扩展标记, 通过 XNA 处理声音效果, 支持矢量打印, 统计连击的次数

2012-03-19T00:47:00Z

[源码下载]

稳扎稳打Silverlight(66) - 5.0其它之自定义 XAML 扩展标记, 通过 XNA 处理声音效果, 支持矢量打印, 连击的次数

作者：webabcd

介绍
Silverlight 5.0

IMarkupExtension - 自定义 XAML 扩展标记
通过 XNA 处理声音效果
支持矢量打印
统计连击的次数

在线DEMO
http://www.cnblogs.com/webabcd/archive/2012/03/05/2379862.html

示例
1、IMarkupExtension（自定义 XAML 扩展标记）
XAML/ConcatMarkupExtension.cs

using System;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Ink;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;

using System.Xaml;

namespace Silverlight50.XAML
{
    /// <summary>
    /// 实现自定义 XAML 扩展标记，需要实现 IMarkupExtension<out T> 接口
    /// 自定义 XAML 扩展标记以“Extension”结尾，XAML 书写时可以不必带“Extension”
    /// 
    /// 本例中的 ConcatMarkup 扩展标记，用于合并两个字符串
    /// </summary>
    public class ConcatMarkupExtension : IMarkupExtension<string>
    {
        public object String1 { get; set; }
        public object String2 { get; set; }

        /// <summary>
        /// 需要实现的方法，返回 ConcatMarkup 的计算结果
        /// </summary>
        public string ProvideValue(IServiceProvider serviceProvider)
        {
            return String1.ToString() + String2.ToString();
        }
    }
}

XAML/IMarkupExtension.xaml

<navigation:Page x:Class="Silverlight50.XAML.IMarkupExtension" 
           xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
           xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
           xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
           xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
           mc:Ignorable="d"
           xmlns:navigation="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Navigation"
           d:DesignWidth="640" d:DesignHeight="480"
           Title="IMarkupExtension Page"
                 
           xmlns:local="clr-namespace:Silverlight50.XAML">
    
    <Grid x:Name="LayoutRoot">

        <!--
            演示自定义的 XAML 扩展标记 ConcatMarkup，本例的结果是 wanglei
        -->
        <TextBlock Text="{local:ConcatMarkup String1=wang, String2=lei}" />

    </Grid>
</navigation:Page>

2、SoundEffectDemo（通过 XNA 处理声音效果）
Media/SoundEffectDemo.xaml

<navigation:Page x:Class="Silverlight50.Media.SoundEffectDemo" 
           xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
           xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
           xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
           xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
           mc:Ignorable="d"
           xmlns:navigation="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Navigation"
           d:DesignWidth="640" d:DesignHeight="480"
           Title="SoundEffectDemo Page">
    <StackPanel HorizontalAlignment="Left">

        <StackPanel Orientation="Horizontal">
            <TextBlock Name="lblVolume" Width="100" Text="音量" TextAlignment="Center" />
            <TextBlock Name="lblPitch" Width="100" Text="高音" TextAlignment="Center" />
            <TextBlock Name="lblPan" Width="100" Text="平衡" TextAlignment="Center" />
        </StackPanel>

        <StackPanel Orientation="Horizontal">
            <Slider Name="sliderVolume" Width="100" Height="200" Orientation="Vertical" Minimum="0" Maximum="1" Value="0.5" />
            <Slider Name="sliderPitch" Width="100" Height="200" Orientation="Vertical" Maximum="1" Minimum="-1" Value="0" />
            <Slider Name="sliderPan"  Width="100" Height="200" Orientation="Vertical" Maximum="1" Minimum="-1" Value="0" />
        </StackPanel>

        <StackPanel Orientation="Horizontal">
            <TextBlock Name="txtVolume" Width="100" TextAlignment="Center" />
            <TextBlock Name="txtPitch" Width="100" TextAlignment="Center" />
            <TextBlock Name="txtPan" Width="100" TextAlignment="Center" />
        </StackPanel>

    </StackPanel>
</navigation:Page>

Media/SoundEffectDemo.xaml.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using System.Windows.Navigation;

using Microsoft.Xna.Framework.Audio;
using System.Windows.Resources;

namespace Silverlight50.Media
{
    /// <summary>
    /// Silverlight 5 支持通过 SoundEffect 处理 wav 音效文件
    /// 本例演示：如何控制音量，高低音，左右声道平衡
    /// </summary>
    public partial class SoundEffectDemo : Page
    {
        /*
         * SoundEffect - 音效对象
         *     SoundEffect.Play(float volume, float pitch, float pan) - 播放音效
         *         volume - 音量值，0 到 1 之间
         *         pitch - 高音值， -1 到 1 之间，-1 是纯低音，1 是纯高音
         *         pan - 左右声道平衡值，-1 到 1 之间，-1 是仅左声道有声，1 是仅右声道有声
         *     SoundEffect.Duration - 音效的时长
         *     SoundEffect.Name - 音效对象的名称
         */

        /*
         * SoundEffectInstance - SoundEffect 的对象实例
         *     SoundEffect.CreateInstance() - 返回 SoundEffect 对象
         *     SoundEffectInstance.Volume - 音量值，0 到 1 之间
         *     SoundEffectInstance.Pitch - 高音值， -1 到 1 之间，-1 是纯低音，1 是纯高音
         *     SoundEffectInstance.Pan - 左右声道平衡值，-1 到 1 之间，-1 是仅左声道有声，1 是仅右声道有声
         *     SoundEffectInstance.IsLooped - 是否循环播放
         *     SoundEffectInstance.Play() - 播放
         *     SoundEffectInstance.Pause() - 暂停
         *     SoundEffectInstance.Resume() - 继续播放
         *     SoundEffectInstance.Stop() - 停止
         *     SoundEffectInstance.State - 返回音效对象的当前状态 [Microsoft.Xna.Framework.Audio.SoundState 枚举]
         *         SoundState.Playing - 正在播放状态
         *         SoundState.Paused - 暂停状态
         *         SoundState.Stopped - 停止状态
         */

        /*
            SoundEffectInstance soundEffectInstance = soundEffect.CreateInstance();
            soundEffectInstance.Volume = 0.5f;
            soundEffectInstance.Pitch = -1f;
            soundEffectInstance.Pan = 0f;
            soundEffectInstance.IsLooped = true;
            soundEffectInstance.Play();
            soundEffectInstance.Pause();
            soundEffectInstance.Resume();
            soundEffectInstance.Stop();
            SoundState soundState = soundEffectInstance.State;
        */

        private SoundEffect _soundEffect;
        private SoundEffectInstance _instance;

        public SoundEffectDemo()
        {
            InitializeComponent();

            this.Loaded += new RoutedEventHandler(SoundEffectDemo_Loaded);
        }

        void SoundEffectDemo_Loaded(object sender, RoutedEventArgs e)
        {
            this.sliderVolume.ValueChanged += new RoutedPropertyChangedEventHandler<double>(sliderVolume_ValueChanged);
            this.sliderPitch.ValueChanged += new RoutedPropertyChangedEventHandler<double>(sliderPitch_ValueChanged);
            this.sliderPan.ValueChanged += new RoutedPropertyChangedEventHandler<double>(sliderPan_ValueChanged);

            // 获取 wav 文件流
            StreamResourceInfo musicStream = Application.GetResourceStream(new Uri("Media/rockyou.wav", UriKind.RelativeOrAbsolute));
            _soundEffect = SoundEffect.FromStream(musicStream.Stream);

            // 设置音效的初始属性
            _instance = _soundEffect.CreateInstance();
            _instance.IsLooped = true;
            _instance.Pitch = 0f;
            _instance.Pan = 0f;
            _instance.Volume = .5f;
            _instance.Play();
        }

        // 控制音量
        private void sliderVolume_ValueChanged(object sender, RoutedPropertyChangedEventArgs<double> e)
        {
            _instance.Volume = (float)e.NewValue;
            txtVolume.Text = e.NewValue.ToString("f2");
        }

        // 控制高低音
        private void sliderPitch_ValueChanged(object sender, RoutedPropertyChangedEventArgs<double> e)
        {
            _instance.Pitch = (float)e.NewValue; ;
            txtPitch.Text = e.NewValue.ToString("f2");
        }

        // 控制左右声道平衡
        private void sliderPan_ValueChanged(object sender, RoutedPropertyChangedEventArgs<double> e)
        {
            _instance.Pan = (float)e.NewValue; ;
            txtPan.Text = e.NewValue.ToString("f2");
        }
    }
}

3、VectorPrinting（支持矢量打印）

<navigation:Page x:Class="Silverlight50.Other.VectorPrinting" 
           xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
           xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
           xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
           xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
           mc:Ignorable="d"
           xmlns:navigation="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Navigation"
           d:DesignWidth="640" d:DesignHeight="480"
           Title="VectorPrinting Page">
    <Grid x:Name="LayoutRoot">

        <TextBlock Text="支持矢量打印了" />
        
    </Grid>
</navigation:Page>

4、ClickCount（统计连击的次数）
Other/ClickCount.xaml

<navigation:Page x:Class="Silverlight50.Other.ClickCount" 
           xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
           xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
           xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
           xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
           mc:Ignorable="d"
           xmlns:navigation="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Navigation"
           d:DesignWidth="640" d:DesignHeight="480"
           Title="ClickCount Page">
    <StackPanel x:Name="LayoutRoot">
        
        <Rectangle Name="rectangle" Width="100" Height="30" Fill="Gray" MouseLeftButtonDown="rectangle_MouseLeftButtonDown" />
        <TextBlock Name="txt" />
        
    </StackPanel>
</navigation:Page>

Other/ClickCount.xaml.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using System.Windows.Navigation;

namespace Silverlight50.Other
{
    public partial class ClickCount : Page
    {
        public ClickCount()
        {
            InitializeComponent();
        }

        protected override void OnNavigatedTo(NavigationEventArgs e)
        {

        }

        private void rectangle_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
        {
            /*
             * MouseButtonEventArgs.ClickCount - 获取连击的次数
             * 注：连击的最大间隔时间是由操作系统的"控制面板"-->"鼠标"-->"双击速度"设置的
             */

            if (e.ClickCount == 1) // Single Click
                txt.Text = "Left Mouse Click Counter:" + e.ClickCount.ToString();
            else if (e.ClickCount == 2) // Double Click
                txt.Text = "Left Mouse Click Counter:" + e.ClickCount.ToString();
            else // More Click
                txt.Text = "Left Mouse Click Counter:" + e.ClickCount.ToString();
        }
    }
}

OK
[源码下载]

本文链接

稳扎稳打Silverlight(65) - 5.0绑定之通过 ICustomTypeProvider 绑定动态生成的属性

2012-03-15T01:09:00Z

[源码下载]

稳扎稳打Silverlight(65) - 5.0绑定之通过 ICustomTypeProvider 绑定动态生成的属性

作者：webabcd

介绍
Silverlight 5.0 绑定

绑定动态生成的属性

在线DEMO
http://www.cnblogs.com/webabcd/archive/2012/03/05/2379862.html

示例
Binding/DynamicProperty.xaml

<navigation:Page x:Class="Silverlight50.Binding.DynamicProperty" 
           xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
           xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
           xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
           xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
           mc:Ignorable="d"
           xmlns:navigation="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Navigation"
           d:DesignWidth="640" d:DesignHeight="480"
           Title="DynamicProperty Page"
                 
           xmlns:sdk="http://schemas.microsoft.com/winfx/2006/xaml/presentation/sdk">
    
    <Grid x:Name="LayoutRoot">
        <sdk:DataGrid Name="dgProducts" AutoGenerateColumns="True" />
    </Grid>
</navigation:Page>

Binding/DynamicProperty.xaml.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using System.Windows.Navigation;

namespace Silverlight50.Binding
{
    public partial class DynamicProperty : Page
    {
        public DynamicProperty()
        {
            InitializeComponent();

            this.Loaded += new RoutedEventHandler(DynamicProperty_Loaded);
        }

        void DynamicProperty_Loaded(object sender, RoutedEventArgs e)
        {
            // 动态地为 Product 类型增加属性
            Product.AddProperty("Age", typeof(int));
            Product.AddProperty("Favorite", typeof(bool));

            Product product = new Product { Name = "3DS", Category = "游戏机", Price = 1100d };

            // 为 Product 中的动态生成的属性赋值
            product.SetPropertyValue("Age", 1);
            product.SetPropertyValue("Favorite", true);

            List<Product> products = new List<Product>();
            products.Add(product);

            // 由于 Product 实现了 ICustomTypeProvider 接口，所以动态生成的属性会被绑定到 DataGrid 控件上
            dgProducts.ItemsSource = products;
        }

        // Product 实现了 ICustomTypeProvider 接口，实现此接口的话可以绑定动态生成的属性
        class Product : CustomTypeHelper<Product>
        {
            public string Name { get; set; }
            public string Category { get; set; }
            public double Price { get; set; }
        }
    }
}

Binding/CustomTypeHelper.cs

using System;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Ink;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;

using System.Reflection;
using System.ComponentModel;
using System.Collections.Generic;
using System.Linq;

namespace Silverlight50.Binding
{
    /// <summary>
    /// 实现了 ICustomTypeProvider 和 INotifyPropertyChanged 的自定义类型的帮助类
    /// </summary>
    public class CustomTypeHelper<T> : ICustomTypeProvider, INotifyPropertyChanged
    {
        private static List<CustomPropertyInfoHelper> _customProperties = new List<CustomPropertyInfoHelper>();
        private Dictionary<string, object> _customPropertyValues;
        private CustomType _ctype;
        public event PropertyChangedEventHandler PropertyChanged;

        private void NotifyPropertyChanged(String info)
        {
            if (PropertyChanged != null)
            {
                PropertyChanged(this, new PropertyChangedEventArgs(info));
            }
        }

        public CustomTypeHelper()
        {
            _customPropertyValues = new Dictionary<string, object>();
            foreach (var property in this.GetCustomType().GetProperties())
            {
                _customPropertyValues.Add(property.Name, null);
            }
        }

        public static void AddProperty(string name)
        {
            if (!CheckIfNameExists(name))
                _customProperties.Add(new CustomPropertyInfoHelper(name, typeof(String)));
        }

        public static void AddProperty(string name, Type propertyType)
        {
            if (!CheckIfNameExists(name))
                _customProperties.Add(new CustomPropertyInfoHelper(name, propertyType));
        }

        public static void AddProperty(string name, Type propertyType, List<Attribute> attributes)
        {
            if (!CheckIfNameExists(name))
                _customProperties.Add(new CustomPropertyInfoHelper(name, propertyType, attributes));
        }

        private static bool CheckIfNameExists(string name)
        {
            if ((from p in _customProperties select p.Name).Contains(name) || (from p in typeof(T).GetProperties() select p.Name).Contains(name))
                throw new Exception("已存在同名属性：" + name);
            else return false;
        }

        public void SetPropertyValue(string propertyName, object value)
        {
            CustomPropertyInfoHelper propertyInfo = (from prop in _customProperties where prop.Name == propertyName select prop).FirstOrDefault();
            if (!_customPropertyValues.ContainsKey(propertyName))
                throw new Exception("无此属性：" + propertyName);
            if (ValidateValueType(value, propertyInfo._type))
            {
                if (_customPropertyValues[propertyName] != value)
                {
                    _customPropertyValues[propertyName] = value;
                    NotifyPropertyChanged(propertyName);
                }
            }
            else throw new Exception("值的类型错误或者对一个非空类型设置为 null");
        }

        private bool ValidateValueType(object value, Type type)
        {
            if (value == null)
                // 引用类型可以被标记为 null
                if (!type.IsValueType)
                    return true;
                else
                    return (type.IsGenericType && type.GetGenericTypeDefinition() == typeof(Nullable<>));
            else
                return type.IsAssignableFrom(value.GetType());
        }

        public object GetPropertyValue(string propertyName)
        {
            if (_customPropertyValues.ContainsKey(propertyName))
                return _customPropertyValues[propertyName];
            else
                throw new Exception("无此属性：" + propertyName);
        }

        public PropertyInfo[] GetProperties()
        {
            return this.GetCustomType().GetProperties();
        }

        public Type GetCustomType()
        {
            if (_ctype == null)
            {
                _ctype = new CustomType(typeof(T));
            }
            return _ctype;
        }

        /// <summary>
        /// 继承抽象类 Type，以实现自定义的 Type
        /// </summary>
        private class CustomType : Type
        {
            Type _baseType;
            public CustomType(Type delegatingType)
            {
                _baseType = delegatingType;
            }
            public override Assembly Assembly
            {
                get { return _baseType.Assembly; }
            }

            public override string AssemblyQualifiedName
            {
                get { return _baseType.AssemblyQualifiedName; }
            }

            public override Type BaseType
            {
                get { return _baseType.BaseType; }
            }

            public override string FullName
            {
                get { return _baseType.FullName; }
            }

            public override Guid GUID
            {
                get { return _baseType.GUID; }
            }

            protected override TypeAttributes GetAttributeFlagsImpl()
            {
                throw new NotImplementedException();
            }

            protected override ConstructorInfo GetConstructorImpl(BindingFlags bindingAttr, Binder binder, CallingConventions callConvention, Type[] types, ParameterModifier[] modifiers)
            {

                throw new NotImplementedException();
            }

            public override ConstructorInfo[] GetConstructors(BindingFlags bindingAttr)
            {
                return _baseType.GetConstructors(bindingAttr);
            }

            public override Type GetElementType()
            {
                return _baseType.GetElementType();
            }

            public override EventInfo GetEvent(string name, BindingFlags bindingAttr)
            {
                return _baseType.GetEvent(name, bindingAttr);
            }

            public override EventInfo[] GetEvents(BindingFlags bindingAttr)
            {
                return _baseType.GetEvents(bindingAttr);
            }

            public override FieldInfo GetField(string name, BindingFlags bindingAttr)
            {
                return _baseType.GetField(name, bindingAttr);
            }

            public override FieldInfo[] GetFields(BindingFlags bindingAttr)
            {
                return _baseType.GetFields(bindingAttr);
            }

            public override Type GetInterface(string name, bool ignoreCase)
            {
                return _baseType.GetInterface(name, ignoreCase);
            }

            public override Type[] GetInterfaces()
            {
                return _baseType.GetInterfaces();
            }

            public override MemberInfo[] GetMembers(BindingFlags bindingAttr)
            {
                return _baseType.GetMembers(bindingAttr);
            }

            protected override MethodInfo GetMethodImpl(string name, BindingFlags bindingAttr, Binder binder, CallingConventions callConvention, Type[] types, ParameterModifier[] modifiers)
            {
                throw new NotImplementedException();
            }

            public override MethodInfo[] GetMethods(BindingFlags bindingAttr)
            {
                return _baseType.GetMethods(bindingAttr);
            }

            public override Type GetNestedType(string name, BindingFlags bindingAttr)
            {
                return _baseType.GetNestedType(name, bindingAttr);
            }

            public override Type[] GetNestedTypes(BindingFlags bindingAttr)
            {
                return _baseType.GetNestedTypes(bindingAttr);
            }

            public override PropertyInfo[] GetProperties(BindingFlags bindingAttr)
            {
                PropertyInfo[] clrProperties = _baseType.GetProperties(bindingAttr);
                if (clrProperties != null)
                {
                    return clrProperties.Concat(_customProperties).ToArray();
                }
                else
                    return _customProperties.ToArray();
            }

            protected override PropertyInfo GetPropertyImpl(string name, BindingFlags bindingAttr, Binder binder, Type returnType, Type[] types, ParameterModifier[] modifiers)
            {
                PropertyInfo propertyInfo = (from prop in GetProperties(bindingAttr) where prop.Name == name select prop).FirstOrDefault();
                if (propertyInfo == null)
                {
                    // 如果没有对应的clr属性则返回自定义属性
                    propertyInfo = (from prop in _customProperties where prop.Name == name select prop).FirstOrDefault();
                }
                return propertyInfo;
            }

            protected override bool HasElementTypeImpl()
            {
                throw new NotImplementedException();
            }

            public override object InvokeMember(string name, BindingFlags invokeAttr, Binder binder, object target, object[] args, ParameterModifier[] modifiers, System.Globalization.CultureInfo culture, string[] namedParameters)
            {
                return _baseType.InvokeMember(name, invokeAttr, binder, target, args, modifiers, culture, namedParameters);
            }

            protected override bool IsArrayImpl()
            {
                throw new NotImplementedException();
            }

            protected override bool IsByRefImpl()
            {
                throw new NotImplementedException();
            }

            protected override bool IsCOMObjectImpl()
            {
                throw new NotImplementedException();
            }

            protected override bool IsPointerImpl()
            {
                throw new NotImplementedException();
            }

            protected override bool IsPrimitiveImpl()
            {
                return _baseType.IsPrimitive;
            }

            public override Module Module
            {
                get { return _baseType.Module; }
            }

            public override string Namespace
            {
                get { return _baseType.Namespace; }
            }

            public override Type UnderlyingSystemType
            {
                get { return _baseType.UnderlyingSystemType; }
            }

            public override object[] GetCustomAttributes(Type attributeType, bool inherit)
            {
                return _baseType.GetCustomAttributes(attributeType, inherit);
            }

            public override object[] GetCustomAttributes(bool inherit)
            {
                return _baseType.GetCustomAttributes(inherit);
            }

            public override bool IsDefined(Type attributeType, bool inherit)
            {
                return _baseType.IsDefined(attributeType, inherit);
            }

            public override string Name
            {
                get { return _baseType.Name; }
            }
        }

        /// <summary>
        /// 继承抽象类 PropertyInfo，以实现自定仪的 PropertyInfo
        /// </summary>
        private class CustomPropertyInfoHelper : PropertyInfo
        {
            public string _name;
            public Type _type;
            public List<Attribute> _attributes = new List<Attribute>();


            public CustomPropertyInfoHelper(string name, Type type)
            {
                _name = name;
                _type = type;
            }

            public CustomPropertyInfoHelper(string name, Type type, List<Attribute> attributes)
            {
                _name = name;
                _type = type;
                _attributes = attributes;
            }

            public override PropertyAttributes Attributes
            {
                get { throw new NotImplementedException(); }
            }

            public override bool CanRead
            {
                get { return true; }
            }

            public override bool CanWrite
            {
                get { return true; }
            }

            public override MethodInfo[] GetAccessors(bool nonPublic)
            {
                throw new NotImplementedException();
            }

            public override MethodInfo GetGetMethod(bool nonPublic)
            {
                throw new NotImplementedException();
            }

            public override ParameterInfo[] GetIndexParameters()
            {
                throw new NotImplementedException();
            }

            public override MethodInfo GetSetMethod(bool nonPublic)
            {
                throw new NotImplementedException();
            }

            public override object GetValue(object obj, BindingFlags invokeAttr, Binder binder, object[] index, System.Globalization.CultureInfo culture)
            {

                return obj.GetType().GetMethod("GetPropertyValue").Invoke(obj, new[] { _name });
            }

            public override Type PropertyType
            {
                get { return _type; }
            }

            public override void SetValue(object obj, object value, BindingFlags invokeAttr, Binder binder, object[] index, System.Globalization.CultureInfo culture)
            {
                obj.GetType().GetMethod("SetPropertyValue").Invoke(obj, new[] { _name, value });
            }

            public override Type DeclaringType
            {
                get { throw new NotImplementedException(); }
            }

            public override object[] GetCustomAttributes(Type attributeType, bool inherit)
            {
                var attrs = from a in _attributes where a.GetType() == attributeType select a;
                return attrs.ToArray();
            }

            public override object[] GetCustomAttributes(bool inherit)
            {
                return _attributes.ToArray();
            }

            public override bool IsDefined(Type attributeType, bool inherit)
            {
                throw new NotImplementedException();
            }

            public override string Name
            {
                get { return _name; }
            }

            public override Type ReflectedType
            {
                get { throw new NotImplementedException(); }
            }

            internal List<Attribute> CustomAttributesInternal
            {
                get { return _attributes; }
            }
        }
    }
}

OK
[源码下载]

本文链接

稳扎稳打Silverlight(64) - 5.0绑定之 Style 中的 Setter 支持绑定, 绑定父级链上的元素, 隐式指定数据模板, UI 上数据更新的触发方式

2012-03-12T00:48:00Z

[源码下载]

稳扎稳打Silverlight(64) - 5.0绑定之 Style 中的 Setter 支持绑定, 绑定父级链上的元素, 隐式指定数据模板, UI 上数据更新的触发方式

作者：webabcd

介绍
Silverlight 5.0 绑定

StyleSetter - Style 中的 Setter 支持绑定
AncestorRelativeSource - 绑定父级链上的元素
ImplicitDataTemplate - 隐式指定数据模板
FrameworkElement.DataContextChanged
UpdateSourceTrigger - UI 上数据更新的触发方式

在线DEMO
http://www.cnblogs.com/webabcd/archive/2012/03/05/2379862.html

示例
1、StyleSetter（Style 中的 Setter 支持绑定）
Binding/StyleSetter.xaml

<navigation:Page x:Class="Silverlight50.Binding.StyleSetter" 
           xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
           xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
           xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
           xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
           mc:Ignorable="d"
           xmlns:navigation="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Navigation"
           d:DesignWidth="640" d:DesignHeight="480"
           Title="StyleSetter Page"
                 
           xmlns:clr="clr-namespace:System;assembly=mscorlib">
    
    <Grid x:Name="LayoutRoot">
        
        <Grid.Resources>
            <!--设置一些资源-->
            <clr:Int32 x:Key="TextFontSize">24</clr:Int32>
            <SolidColorBrush x:Key="TextForeground" Color="#00FF00" />

            <!--为 Style 的 Setter 的 Value 做数据绑定-->
            <Style x:Key="MyStyle" TargetType="TextBox">
                <Setter Property="FontSize" Value="{Binding Source={StaticResource TextFontSize}}"/>
                <Setter Property="Foreground" Value="{Binding Source={StaticResource TextForeground}}"/>
            </Style>
        </Grid.Resources>

        <!--应用样式-->
        <TextBox Text="我是TextBox" Margin="5" Style="{StaticResource MyStyle}" />
        
    </Grid>
</navigation:Page>

2、AncestorRelativeSource（绑定父级链上的元素）
Binding/AncestorRelativeSource.xaml

<navigation:Page x:Class="Silverlight50.Binding.AncestorRelativeSource" 
           xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
           xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
           xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
           xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
           mc:Ignorable="d"
           xmlns:navigation="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Navigation"
           d:DesignWidth="640" d:DesignHeight="480"
           Title="AncestorRelativeSource Page">
    <Grid x:Name="LayoutRoot">
        
        <!--
            关于 RelativeSource 参看 http://www.cnblogs.com/webabcd/archive/2009/09/03/1559240.html
        -->
        
        <!--
            Silverlight 5 的 RelativeSource（除了 Self 和 TemplatedParent 外）新增了 FindAncestor
        
            FindAncestor - 指定相对数据源为父级链上的元素（如果指定了 AncestorType 或 AncestorLevel 则为 FindAncestor 模式，即可以不用显示指定 FindAncestor）
            AncestorType - 数据源的类型
            AncestorLevel - 数据源相对于自己的相隔层级数，AncestorLevel = 1 代表最近的父级元素
        -->
        
        <ListBox Tag="我是 Tag" Name="listBox">
            <ListBox.ItemTemplate>
                <DataTemplate>
                    <StackPanel Orientation="Horizontal">
                        <TextBlock Text="{Binding Tag, RelativeSource={RelativeSource FindAncestor, AncestorType=ListBox, AncestorLevel=1}}"/>
                        <TextBlock Text="{Binding}"/>
                    </StackPanel>
                </DataTemplate>
            </ListBox.ItemTemplate>
        </ListBox>
        
    </Grid>
</navigation:Page>

Binding/AncestorRelativeSource.xaml.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using System.Windows.Navigation;

namespace Silverlight50.Binding
{
    public partial class AncestorRelativeSource : Page
    {
        public AncestorRelativeSource()
        {
            InitializeComponent();

            listBox.ItemsSource = new List<string>(){"1", "2", "3"};
        }
    }
}

3、ImplicitDataTemplate（隐式指定数据模板）
Binding/ImplicitDataTemplate.xaml

<navigation:Page x:Class="Silverlight50.Binding.ImplicitDataTemplate" 
           xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
           xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
           xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
           xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
           mc:Ignorable="d"
           xmlns:navigation="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Navigation"
           d:DesignWidth="640" d:DesignHeight="480"
           Title="ImplicitDataTemplate Page"
                 
           xmlns:local="clr-namespace:Silverlight50.Binding">
    
    <StackPanel x:Name="LayoutRoot" Orientation="Vertical">

        <StackPanel.Resources>
            <!--
                DataType - 如果数据项为此类型则使用此模板（隐式）
            -->
            <DataTemplate DataType="local:Person">
                <TextBlock Foreground="Red" Text="{Binding Name}" />
            </DataTemplate>
            <DataTemplate DataType="local:Employee">
                <TextBlock Foreground="Blue" Text="{Binding Name}" />
            </DataTemplate>
        </StackPanel.Resources>

        <!--数据源的数据项为 Person 类型，所以会使用第一个数据模板-->
        <ListBox x:Name="listBoxPersons" />

        <!--数据源的数据项为 Employee 类型，所以会使用第二个数据模板-->
        <ListBox x:Name="listBoxEmployees" />

    </StackPanel>
</navigation:Page>

Binding/ImplicitDataTemplate.xaml.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using System.Windows.Navigation;

using System.Collections.ObjectModel;

namespace Silverlight50.Binding
{
    public partial class ImplicitDataTemplate : Page
    {
        public ImplicitDataTemplate()
        {
            InitializeComponent();

            this.Loaded += new RoutedEventHandler(ImplicitDataTemplate_Loaded);
        }

        void ImplicitDataTemplate_Loaded(object sender, RoutedEventArgs e)
        {
            // 为 listBoxPersons 绑定的数据源的数据项为 Person 类型
            listBoxPersons.ItemsSource = new ObservableCollection<Person>
            {
                new Person { Name = "webabcd" },
                new Person { Name = "webabcd2" }
            };

            // 为 listBoxEmployees 绑定的数据源的数据项为 Employee 类型
            listBoxEmployees.ItemsSource = new ObservableCollection<Employee>
            {
                new Employee { Name = "webabcd3" },
                new Employee { Name = "webabcd4" },
                new Employee { Name = "webabcd5" }
            };
        }
    }

    public class Person
    {
        public string Name { get; set; }
    }

    public class Employee : Person
    {
        public string Position { get; set; }
    }
}

4、FrameworkElement.DataContextChanged
Binding/DataContextChanged.xaml

<navigation:Page x:Class="Silverlight50.Binding.DataContextChanged" 
           xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
           xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
           xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
           xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
           mc:Ignorable="d"
           xmlns:navigation="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Navigation"
           d:DesignWidth="640" d:DesignHeight="480"
           Title="DataContextChanged Page">
    <StackPanel x:Name="LayoutRoot">
        
        <Button x:Name="btnChange" Content="改变数据上下文" Click="btnChange_Click" />
        <ListBox x:Name="listBox" ItemsSource="{Binding}" DataContextChanged="listBox_DataContextChanged" />
        
    </StackPanel>
</navigation:Page>

Binding/DataContextChanged.xaml.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using System.Windows.Navigation;

namespace Silverlight50.Binding
{
    public partial class DataContextChanged : Page
    {
        public DataContextChanged()
        {
            InitializeComponent();

            this.Loaded += new RoutedEventHandler(DataContextChanged_Loaded);
        }

        void DataContextChanged_Loaded(object sender, RoutedEventArgs e)
        {
            // 绑定初始数据上下文
            listBox.DataContext = new List<string> { "a", "b", "c" };
        }

        private void btnChange_Click(object sender, RoutedEventArgs e)
        {
            // 修改数据上下文
            listBox.DataContext = new List<string> { "x", "y", "z" };
        }

        private void listBox_DataContextChanged(object sender, DependencyPropertyChangedEventArgs e)
        {
            /*
             * FrameworkElement.DataContextChanged - 数据上下文发生改变后所触发的事件
             */

            // 数据上下文发生改变后
            MessageBox.Show("数据源发生改变");
        }
    }
}

5、UpdateSourceTrigger（UI 上数据更新的触发方式）
Binding/UpdateSourceTrigger.xaml

<navigation:Page x:Class="Silverlight50.Binding.UpdateSourceTrigger" 
           xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
           xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
           xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
           xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
           mc:Ignorable="d"
           xmlns:navigation="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Navigation"
           d:DesignWidth="640" d:DesignHeight="480"
           Title="UpdateSourceTrigger Page">
    <StackPanel x:Name="LayoutRoot">

        <!--
            UpdateSourceTrigger - UI 上数据更新的触发方式
                Default - 失去焦点后触发
                PropertyChanged - 属性值发生改变后触发
                Explicit - 需要通过 BindingExpression.UpdateSource() 显示触发
        -->
        <TextBox Text="{Binding Text, Mode=TwoWay, ElementName=lbl, UpdateSourceTrigger=Default}" />
        <TextBox Text="{Binding Text, Mode=TwoWay, ElementName=lbl, UpdateSourceTrigger=PropertyChanged}" />
        <TextBox Name="txtExplicit" Text="{Binding Text, Mode=TwoWay, ElementName=lbl, UpdateSourceTrigger=Explicit}" />
        <Button Name="btnBinding" Content="显示触发更新" Click="btnBinding_Click" />

        <TextBlock Name="lbl" />
        
    </StackPanel>
</navigation:Page>

Binding/UpdateSourceTrigger.xaml.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using System.Windows.Navigation;

using System.Windows.Data;

namespace Silverlight50.Binding
{
    public partial class UpdateSourceTrigger : Page
    {
        public UpdateSourceTrigger()
        {
            InitializeComponent();
        }

        private void btnBinding_Click(object sender, RoutedEventArgs e)
        {
            // 显示触发 txtExplicit 的数据更新
            BindingExpression be = txtExplicit.GetBindingExpression(TextBox.TextProperty);
            be.UpdateSource();
        }
    }
}

OK
[源码下载]

本文链接

稳扎稳打Silverlight(63) - 5.0文本之Character Spacing, RichTextBlock 和 RichTextBlockOverflow, TextOptions

2012-03-08T01:24:00Z

[源码下载]

稳扎稳打Silverlight(63) - 5.0文本之Character Spacing, RichTextBlock 和 RichTextBlockOverflow, TextOptions

作者：webabcd

介绍
Silverlight 5.0 文本

Character Spacing - 字符间距
RichTextBlock 和 RichTextBlockOverflow - 只读 RichTextBox 及文本溢出后的显示方式
TextOptions - 文字清晰方式

在线DEMO
http://www.cnblogs.com/webabcd/archive/2012/03/05/2379862.html

示例
1、Character Spacing（字符间距）
Text/CharacterSpacing.xaml

<navigation:Page x:Class="Silverlight50.Text.CharacterSpacing" 
           xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
           xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
           xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
           xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
           mc:Ignorable="d"
           xmlns:navigation="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Navigation"
           d:DesignWidth="640" d:DesignHeight="480"
           Title="CharacterSpacing Page">
    <StackPanel>
        
        <!--
            设置行间距，可参考 http://www.cnblogs.com/webabcd/archive/2008/10/20/1314770.html 中的 LineHeight 和 LineStackingStrategy 
        -->
        
        <!--
            CharacterSpacing - 用于设置字符间距
                具体字符间隔像素计算公式如下：字体大小 * CharacterSpacing值 / 1000 = 字符间距像素值
        -->
        
        <TextBlock Text="aaaaaaaaaaaaaaaaaa" />
        <TextBlock Text="aaaaaaaaaaaaaaaaaa" CharacterSpacing="100" />
        <TextBlock Text="aaaaaaaaaaaaaaaaaa" CharacterSpacing="1000" />
        <TextBlock Text="aaaaaaaaaaaaaaaaaa" FontSize="32" CharacterSpacing="1000" />
        
    </StackPanel>
</navigation:Page>

2、RichTextBlock 和 RichTextBlockOverflow（只读 RichTextBox 及文本溢出后的显示方式）
Text/RichTextBlockOverflow.xaml

<navigation:Page x:Class="Silverlight50.Text.RichTextBlockOverflow" 
           xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
           xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
           xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
           xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
           mc:Ignorable="d"
           xmlns:navigation="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Navigation"
           d:DesignWidth="640" d:DesignHeight="480"
           Title="RichTextBlockOverflow Page">
    <StackPanel>

        <!--
            RichTextBlock - 一个只读的 RichTextBox
                OverflowContentTarget - 当 RichTextBlock 中的内容溢出时，将溢出文字绑定到指定的 RichTextBlockOverflow 中
        
            RichTextBlockOverflow - 用于显示 RichTextBlock 或其他 RichTextBlockOverflow 中的溢出文字
                OverflowContentTarget - 当此 RichTextBlockOverflow 中的内容也溢出时，将溢出文字绑定到指定的其他 RichTextBlockOverflow 中
        -->
        
        <RichTextBlock HorizontalAlignment="Left" Width="200" Height="100" OverflowContentTarget="{Binding ElementName=txtOverflow}">
            <Paragraph>
                Microsoft Silverlight是微软所发展的 Web 前端应用程序开发解决方案，是微软丰富型互联网应用程序（Rich Internet Application）策略的主要应用程序开发平台之一，以浏览器的外挂组件方式，提供 Web 应用程序中多媒体（含影音流与音效流）与高度交互性前端应用程序的解决方案，同时它也是微软 UX（用户经验）策略中的一环，也是微软试图将美术设计和程序开发人员的工作明确切分与协同合作发展应用程序的尝试之一。                
            </Paragraph>
        </RichTextBlock>

        <RichTextBlockOverflow Name="txtOverflow" HorizontalAlignment="Left" Margin="100" />

    </StackPanel>
</navigation:Page>

3、TextOptions（文字清晰方式）
Text/TextOptions.xaml

<navigation:Page x:Class="Silverlight50.Text.TextOptions" 
           xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
           xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
           xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
           xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
           mc:Ignorable="d"
           xmlns:navigation="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Navigation"
           d:DesignWidth="640" d:DesignHeight="480"
           Title="TextOptions Page">
    <StackPanel>

        <!--
            TextOptions.TextFormattingMode - 文字的格式化模式
                Display - 采用度量的方式在整个像素范围内绘制文字
                Ideal - 相对没有 Display 清晰（默认值）

            TextOptions.TextHintingMode - 文字的呈现行为
                Fixed - 文本无动画效果时效果好（默认值）
                Animated - 文本有动画效果时效果好

            TextOptions.TextRenderingMode - 文字的渲染方式
                Auto - 自动，默认会使用 ClearType（默认值）
                Aliased - 双层抗锯齿
                Grayscale - 灰度抗锯齿
                ClearType - 平滑方式，使用最合适的方式来呈现文本
        -->
        
        <TextBlock Text="中文中文中文 Default（Ideal Fixed Auto）" />

        <TextBlock Text="中文中文中文 Ideal, Fixed, Auto" TextOptions.TextFormattingMode="Ideal" TextOptions.TextHintingMode="Fixed" TextOptions.TextRenderingMode="Auto" />
        <TextBlock Text="中文中文中文 Ideal, Fixed, Aliased" TextOptions.TextFormattingMode="Ideal" TextOptions.TextHintingMode="Fixed" TextOptions.TextRenderingMode="Aliased" />
        <TextBlock Text="中文中文中文 Ideal, Fixed, Grayscale" TextOptions.TextFormattingMode="Ideal" TextOptions.TextHintingMode="Fixed" TextOptions.TextRenderingMode="Grayscale" />
        <TextBlock Text="中文中文中文 Ideal, Fixed, Cleartype" TextOptions.TextFormattingMode="Ideal" TextOptions.TextHintingMode="Fixed" TextOptions.TextRenderingMode="ClearType" />

        <TextBlock Text="中文中文中文 Ideal, Animated, Auto" TextOptions.TextFormattingMode="Ideal" TextOptions.TextHintingMode="Animated" TextOptions.TextRenderingMode="Auto" />
        <TextBlock Text="中文中文中文 Ideal, Animated, Aliased" TextOptions.TextFormattingMode="Ideal" TextOptions.TextHintingMode="Animated" TextOptions.TextRenderingMode="Aliased" />
        <TextBlock Text="中文中文中文 Ideal, Animated, Grayscale" TextOptions.TextFormattingMode="Ideal" TextOptions.TextHintingMode="Animated" TextOptions.TextRenderingMode="Grayscale" />
        <TextBlock Text="中文中文中文 Ideal, Animated, Cleartype" TextOptions.TextFormattingMode="Ideal" TextOptions.TextHintingMode="Animated" TextOptions.TextRenderingMode="ClearType" />

        <TextBlock Text="中文中文中文 Display, Fixed, Auto" TextOptions.TextFormattingMode="Display" TextOptions.TextHintingMode="Fixed" TextOptions.TextRenderingMode="Auto" />
        <TextBlock Text="中文中文中文 Display, Fixed, Aliased" TextOptions.TextFormattingMode="Display" TextOptions.TextHintingMode="Fixed" TextOptions.TextRenderingMode="Aliased" />
        <TextBlock Text="中文中文中文 Display, Fixed, Grayscale" TextOptions.TextFormattingMode="Display" TextOptions.TextHintingMode="Fixed" TextOptions.TextRenderingMode="Grayscale" />
        <TextBlock Text="中文中文中文 Display, Fixed, Cleartype" TextOptions.TextFormattingMode="Display" TextOptions.TextHintingMode="Fixed" TextOptions.TextRenderingMode="ClearType" />

        <TextBlock Text="中文中文中文 Display, Animated, Auto" TextOptions.TextFormattingMode="Display" TextOptions.TextHintingMode="Animated" TextOptions.TextRenderingMode="Auto" />
        <TextBlock Text="中文中文中文 Display, Animated, Aliased" TextOptions.TextFormattingMode="Display" TextOptions.TextHintingMode="Animated" TextOptions.TextRenderingMode="Aliased" />
        <TextBlock Text="中文中文中文 Display, Animated, Grayscale" TextOptions.TextFormattingMode="Display" TextOptions.TextHintingMode="Animated" TextOptions.TextRenderingMode="Grayscale" />
        <TextBlock Text="中文中文中文 Display, Animated, Cleartype" TextOptions.TextFormattingMode="Display" TextOptions.TextHintingMode="Animated" TextOptions.TextRenderingMode="ClearType" />

    </StackPanel>
</navigation:Page>

OK
[源码下载]

本文链接

稳扎稳打Silverlight(62) - 5.0控件之PivotViewer, ListBox 和 ComboBox 新特性, OpenFileDialog 和 SaveFileDialog 新特性

2012-03-05T01:44:00Z

[源码下载]

稳扎稳打Silverlight(62) - 5.0控件之PivotViewer, ListBox 和 ComboBox 新特性, OpenFileDialog 和 SaveFileDialog 新特性

作者：webabcd

介绍
Silverlight 5.0 控件

ListBox 和 ComboBox 新特性 - 支持键盘检索
OpenFileDialog 和 SaveFileDialog 新特性 - InitialDirectory 和 DefaultFileName
新增控件 - PivotViewer

在线DEMO
http://www.cnblogs.com/webabcd/archive/2012/03/05/2379862.html

示例
1、ListBox 和 ComboBox 新特性
Control/ListBoxAndComboBox.xaml

<navigation:Page x:Class="Silverlight50.Control.ListBoxAndComboBox" 
           xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
           xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
           xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
           xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
           mc:Ignorable="d"
           xmlns:navigation="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Navigation"
           d:DesignWidth="640" d:DesignHeight="480"
           Title="ListBoxAndComboBox Page">
    <StackPanel x:Name="LayoutRoot" HorizontalAlignment="Left">
        
        <!--
            ListBox 和 ComboBox 支持键盘搜索（把焦点放到 ListBox，然后可以测试键盘搜索的功能） 
        -->
        
        <ListBox Name="listBox" Margin="5" Width="200" Height="100">
            <ListBoxItem Content="aaa" />
            <ListBoxItem Content="bbb" />
            <ListBoxItem Content="ccc" />
            <ListBoxItem Content="ddd" />
            <ListBoxItem Content="eee" />
            <ListBoxItem Content="fff" />
            <ListBoxItem Content="ggg" />
            <ListBoxItem Content="hhh" />
            <ListBoxItem Content="iii" />
            <ListBoxItem Content="jjj" />
        </ListBox>

    </StackPanel>
</navigation:Page>

2、OpenFileDialog 和 SaveFileDialog 新特性
Control/OpenFileDialogAndSaveFileDialog.xaml

<navigation:Page x:Class="Silverlight50.Control.OpenFileDialogAndSaveFileDialog" 
           xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
           xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
           xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
           xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
           mc:Ignorable="d"
           xmlns:navigation="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Navigation"
           d:DesignWidth="640" d:DesignHeight="480"
           Title="OpenFileDialogAndSaveFileDialog Page">
    <Grid x:Name="LayoutRoot">
        
        <StackPanel>
            <TextBox x:Name="txtInfo" />
            <Button x:Name="btnSave" Content="保存" Click="btnSave_Click" />
            <Button x:Name="btnLoad" Content="载入" Click="btnLoad_Click" />
        </StackPanel>
        
    </Grid>
</navigation:Page>

Control/OpenFileDialogAndSaveFileDialog.xaml.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using System.Windows.Navigation;

using System.Text;
using System.IO;

namespace Silverlight50.Control
{
    public partial class OpenFileDialogAndSaveFileDialog : Page
    {
        public OpenFileDialogAndSaveFileDialog()
        {
            InitializeComponent();
        }

        private void btnSave_Click(object sender, RoutedEventArgs e)
        {
            /*
             * SaveFileDialog - 用户发起的保存文件对话框
             *     Filter - 指定保存文件的描述信息及文件类型（出现在对话框的“保存类型”下拉列表中）
             *     DefaultExt - 当指定保存文件类型为 *.* 时的默认扩展名
             *     SafeFileName - 获取 SaveFileDialog 相关的文件名（只有文件名和扩展名，没有路径信息）
             *     FilterIndex - 默认的保存类型在 Filter 中的索引（注意：索引从 1 开始）
             *     ShowDialog() - 显示保存文件对话框。用户在对话框中单击“保存”则返回 true；单击“取消”或关闭对话框则返回 false
             *     OpenFile() - 打开用户选择的文件，并返回文件流
             */

            SaveFileDialog dialog = new SaveFileDialog();
            dialog.Filter = "Text Files|*.txt|Log Files|*.log|All Files|*.*";
            dialog.FilterIndex = 1;

            // DefaultFileName - 用于设置 SaveFileDialog 的默认文件名（新增属性）
            dialog.DefaultFileName = "temp.txt";

            bool? result = dialog.ShowDialog();
            if (result == true)
            {
                using (Stream stream = dialog.OpenFile())
                {
                    byte[] info = Encoding.UTF8.GetBytes(txtInfo.Text);
                    stream.Write(info, 0, info.Length);
                }

                txtInfo.Text = "";
            }
        }

        private void btnLoad_Click(object sender, RoutedEventArgs e)
        {
            /*
             * OpenFileDialog - 打开文件对话框
             *     Filter - 同 SaveFileDialog
             *     FilterIndex - 同 SaveFileDialog
             *     ShowDialog() - 显示打开文件对话框。用户在对话框中单击“打开”则返回 true；单击“取消”或关闭对话框则返回 false
             *     File - 返回用户所选择文件的的 FileInfo 对象
             *     Multiselect - 选择文件时可否多选
             *     Files - 返回用户所选择文件的的 FileInfo 对象集合
             */

            OpenFileDialog dialog = new OpenFileDialog();
            dialog.Filter = "Text Files|*.txt";

            // InitialDirectory - 用于设置 OpenFileDialog 的初始目录（新增属性）
            dialog.InitialDirectory = @"C:\";

            if (dialog.ShowDialog() == true)
            {
                using (FileStream fs = dialog.File.OpenRead())
                {
                    byte[] buffer = new byte[fs.Length];
                    fs.Read(buffer, 0, buffer.Length);

                    txtInfo.Text = Encoding.UTF8.GetString(buffer, 0, buffer.Length);
                }
            }
        }
    }
}

3、新增控件 PivotViewer
Control/PivotViewerDemo.xaml

<navigation:Page x:Class="Silverlight50.Control.PivotViewerDemo" 
           xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
           xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
           xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
           xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
           mc:Ignorable="d"
           xmlns:navigation="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Navigation"
           d:DesignWidth="640" d:DesignHeight="480"
           Title="PivotViewerDemo Page"
                 
           xmlns:sdk="clr-namespace:System.Windows.Controls.Pivot;assembly=System.Windows.Controls.Pivot">

    <Grid x:Name="LayoutRoot" Background="White">
        
        <!--
            更多 PivotViewer 的相关内容参看
            http://www.silverlight.net/learn/data-networking/pivot-viewer
        -->
        
        <sdk:PivotViewer x:Name="pivotViewer">

            <!--
                设置 PivotProperties，可用于左侧检索栏
            -->
            <sdk:PivotViewer.PivotProperties>
                <sdk:PivotViewerStringProperty Id="Category" Options="CanFilter" DisplayName="产品类别" Binding="{Binding Category}" />
            </sdk:PivotViewer.PivotProperties>

            <!--
                设置 PivotViewerItemTemplate，用于主显示区
            -->
            <sdk:PivotViewer.ItemTemplates>
                <sdk:PivotViewerItemTemplate>
                    <Border Width="200" Height="200" Background="Blue">
                        <StackPanel Orientation="Vertical">
                            <TextBlock Text="{Binding Name}" FontSize="16" Foreground="White" />
                            <TextBlock Text="{Binding Category}" FontSize="16" Foreground="White" />
                            <TextBlock Text="{Binding Price}" FontSize="16" Foreground="White" />
                        </StackPanel>
                    </Border>
                </sdk:PivotViewerItemTemplate>
            </sdk:PivotViewer.ItemTemplates>
        </sdk:PivotViewer>
    </Grid>

</navigation:Page>

Control/PivotViewerDemo.xaml.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using System.Windows.Navigation;

using System.Collections.ObjectModel;

namespace Silverlight50.Control
{
    public partial class PivotViewerDemo : Page
    {
        public PivotViewerDemo()
        {
            InitializeComponent();
        }

        protected override void OnNavigatedTo(NavigationEventArgs e)
        {
            ObservableCollection<Product> products = new ObservableCollection<Product>();
            Random random = new Random();

            // 构造数据源
            for (int i = 0; i < 100; i++)
            {
                products.Add
                (
                    new Product
                    (
                        "webabcd" + i.ToString(),
                        "category" + random.Next(0, 9).ToString(),
                        random.NextDouble() * 1000d
                    )
                );
            }

            // 给 PivotViewer 指定数据源
            pivotViewer.ItemsSource = products;
        }
    }

    /// <summary>
    /// 数据的实体类
    /// </summary>
    public class Product
    {
        public string Name { get; set; }
        public string Category { get; set; }
        public double Price { get; set; }

        public Product(string name, string category, double price)
        {
            this.Name = name;
            this.Category = category;
            this.Price = price;
        }
    }
}

OK
[源码下载]

本文链接

Silverlight 5.0 Demo

2012-03-05T00:29:00Z

[源码下载]

本文链接

千呼万唤 HTML 5 (11) - 画布（canvas）之效果

2012-02-27T02:18:00Z

[源码下载]

千呼万唤 HTML 5 (11) - 画布（canvas）之效果

作者：webabcd

介绍
HTML 5: 画布（canvas）之效果

填充色, 笔划色, 颜色值 | fillStyle, strokeStyle
剪裁 | clip()
渐变色 | createLinearGradient(), createRadialGradient(), CanvasGradient.addColorStop()
贴图的平铺模式 | createPattern()
阴影效果 | shadowOffsetX, shadowOffsetY, shadowBlur, shadowColor
全局 Alpha | globalAlpha
新颜色与画布当前已有颜色的合成方式 | globalCompositeOperation
保存画布上下文，以及恢复画布上下文 | save(), restore()
像素操作 | createImageData(), getImageData(), putImageData(), ImageData, CanvasPixelArray

示例
1、填充色, 笔划色, 颜色值 | fillStyle, strokeStyle
canvas/effect/color.html

<!DOCTYPE HTML>
<html>
<head>
    <title>填充色, 笔划色, 颜色值</title>
</head>
<body>
    <canvas id="canvas" width="260" height="140" style="background-color: rgb(222, 222, 222)">
        您的浏览器不支持 canvas 标签
    </canvas>
    <br />
    <button type="button" onclick="drawIt();">Demo</button>
    <button type="button" onclick="clearIt();">清除画布</button>

    <script type="text/javascript">

        var ctx = document.getElementById('canvas').getContext('2d');

        function drawIt() {

            clearIt();

            /*
             * context.fillStyle - 指定填充色的颜色值
             *
             * context.strokeStyle - 指定笔划色的颜色值
             *
             * 颜色值示例如下：
             *   Color Name - "green"
             *   #rgb - "#0f0"
             *   #rrggbb = "#00ff00"
             *   rgb(0-255, 0-255, 0-255) - rgb(0, 255, 0)
             *   rgb(0.0%-100.0%, 0.0%-100.0%, 0.0%-100.0%) - rgb(0%, 100%, 0%)
             *   rgba(0-255, 0-255, 0-255, 0.0-1.0) - rgb(0, 255, 0, 1)
             *   rgba(0.0%-100.0%, 0.0%-100.0%, 0.0%-100.0%, 0.0-1.0) - rgb(0%, 100%, 0%, 1)
             */

            ctx.fillStyle = 'Red';
            ctx.strokeStyle = 'Green';
            ctx.lineWidth = 10;

            // 看看 fillStyle 颜色的示例和 strokeStyle 颜色的示例，以及先 stroke 再 fill 和先 fill 再 stroke 的区别
            ctx.beginPath();
            ctx.rect(20, 20, 100, 100);
            ctx.stroke();
            ctx.fill();

            ctx.beginPath();
            ctx.rect(140, 20, 100, 100);
            ctx.fill();
            ctx.stroke();
        }

        function clearIt() {
            ctx.clearRect(0, 0, 260, 140);
        }

    </script>
</body>
</html>

2、剪裁 | clip()
canvas/effect/clip.html

<!DOCTYPE HTML>
<html>
<head>
    <title>剪裁</title>
</head>
<body>
    <canvas id="canvas" width="512" height="512" style="background-color: rgb(222, 222, 222)">
        您的浏览器不支持 canvas 标签
    </canvas>
    <br />
    <button type="button" onclick="drawIt();">Demo</button>
    <button type="button" onclick="clearIt();">清除画布</button>

    <script type="text/javascript">

        var ctx = document.getElementById('canvas').getContext('2d');

        function drawIt() {

            clearIt();

            var img = new Image();

            img.onload = function () {
                ctx.drawImage(img, 0, 0, 512, 512);
            }

            img.src = "http://www.w3.org/html/logo/downloads/HTML5_Logo_512.png";
            // img.src = "http://www.cnblogs.com/assets/html5_logo.png";

            /*
             * context.clip() - 只显示当前路径所包围的剪切区域
             */
            ctx.beginPath();
            ctx.arc(256, 256, 100, 0, Math.PI * 2, true);
            ctx.clip();
        }

        function clearIt() {
            ctx.clearRect(0, 0, 512, 512);
        }

    </script>
</body>
</html>

3、渐变色 | createLinearGradient(), createRadialGradient(), CanvasGradient.addColorStop()
canvas/effect/gradient.html

<!DOCTYPE HTML>
<html>
<head>
    <title>渐变色</title>
</head>
<body>
    <canvas id="canvas" width="200" height="100" style="background-color: rgb(222, 222, 222)">
        您的浏览器不支持 canvas 标签
    </canvas>
    <br />
    <button type="button" onclick="drawIt();">Demo</button>
    <button type="button" onclick="clearIt();">清除画布</button>

    <script type="text/javascript">

        var ctx = document.getElementById('canvas').getContext('2d');

        function drawIt() {

            clearIt();

            /*
             * context.createLinearGradient(xStart, yStart, xEnd, yEnd) - 创建线性渐变对象，并返回 CanvasGradient 类型的对象
             *   xStart, yStart - 线性渐变对象的起始点坐标
             *   xEnd, yEnd - 线性渐变对象的结束点坐标
             *
             * CanvasGradient.addColorStop(offset, color) - 新增一个渐变参考点
             *   offset - 渐变参考点的位置，0.0 - 1.0 之间。起始点为 0，结束点为 1
             *   color - 渐变参考点的颜色值 
             */
            var linearGradient = ctx.createLinearGradient(50, 0, 50, 100);
            linearGradient.addColorStop(0, "red");
            linearGradient.addColorStop(0.5, "green");
            linearGradient.addColorStop(1, "blue");

            ctx.beginPath();
            ctx.arc(50, 50, 50, 0, 2 * Math.PI, true);
            ctx.fillStyle = linearGradient;
            ctx.fill();


            /*
             * context.createRadialGradient(xStart, yStart, radiusStart, xEnd, yEnd, radiusEnd) - 创建放射性渐变对象，并返回 CanvasGradient 
             *   xStart, yStart - 放射性渐变对象的开始圆的圆心坐标
             *   radiusStart - 开始圆的半径
             *   xEnd, yEnd - 放射性渐变对象的结束圆的圆心坐标
             *   radiusEnd - 结束圆的半径
             */
            var radialGradient = ctx.createRadialGradient(150, 50, 0, 150, 50, 50);
            radialGradient.addColorStop(0, "red");
            radialGradient.addColorStop(0.5, "green");
            radialGradient.addColorStop(1, "blue");

            ctx.beginPath();
            ctx.arc(150, 50, 50, 0, 2 * Math.PI, true);
            ctx.fillStyle = radialGradient;
            ctx.fill();
        }

        function clearIt() {
            ctx.clearRect(0, 0, 200, 100);
        }

    </script>
</body>
</html>

4、贴图的平铺模式 | createPattern()
canvas/effect/pattern.html

<!DOCTYPE HTML>
<html>
<head>
    <title>贴图的平铺模式</title>
</head>
<body>
    <canvas id="canvas" width="620" height="620" style="background-color: rgb(222, 222, 222)">
        您的浏览器不支持 canvas 标签
    </canvas>
    <br />
    <button type="button" onclick="drawIt();">Demo</button>
    <button type="button" onclick="clearIt();">清除画布</button>

    <script type="text/javascript">

        var ctx = document.getElementById('canvas').getContext('2d');

        function drawIt() {

            clearIt();

            var img = new Image();
            img.onload = function () {

                /*
                 * context.createPattern(image, repetitionStyle) - 指定贴图的平铺模式
                 *   image - 图像对象。除了支持 HTMLImageElement 外，还支持 HTMLCanvasElement 和 HTMLVideoElement
                 *   repetitionStyle - 平铺模式（无论任何平铺模式，首图均在画布的左上角）
                 *     no-repeat - 不平铺，只贴图一次，当然也是在画布的左上角
                 *     repeat-x - x 轴方向上平铺图片
                 *     repeat-y - y 轴方向上平铺图片
                 *     repeat - x 轴和 y 轴方向均平铺图片
                 */

                var pattern = ctx.createPattern(img, "no-repeat");
                ctx.fillStyle = pattern;
                ctx.strokeStyle = "blue";
                ctx.beginPath();
                ctx.rect(0, 0, 300, 300);
                ctx.fill();
                ctx.stroke();

                pattern = ctx.createPattern(img, "repeat-x");
                ctx.fillStyle = pattern;
                ctx.strokeStyle = "blue";
                ctx.beginPath();
                ctx.rect(320, 0, 300, 300);
                ctx.fill();
                ctx.stroke();

                pattern = ctx.createPattern(img, "repeat-y");
                ctx.fillStyle = pattern;
                ctx.strokeStyle = "blue";
                ctx.beginPath();
                ctx.rect(0, 320, 300, 300);
                ctx.fill();
                ctx.stroke();

                pattern = ctx.createPattern(img, "repeat");
                ctx.fillStyle = pattern;
                ctx.strokeStyle = "blue";
                ctx.beginPath();
                ctx.rect(320, 320, 300, 300);
                ctx.fill();
                ctx.stroke();
            }

            img.src = "http://res2.windows.microsoft.com/resbox/en/Windows%207/main/4300ae64-546c-4bbe-9026-6779b3684fb9_0.png";
            // img.src = "http://www.cnblogs.com/assets/windows_logo.png";
        }

        function clearIt() {
            ctx.clearRect(0, 0, 620, 620);
        }

    </script>
</body>
</html>

5、阴影效果 | shadowOffsetX, shadowOffsetY, shadowBlur, shadowColor
canvas/effect/shadow.html

<!DOCTYPE HTML>
<html>
<head>
    <title>阴影效果</title>
</head>
<body>
    <canvas id="canvas" width="480" height="480" style="background-color: rgb(222, 222, 222)">
        您的浏览器不支持 canvas 标签
    </canvas>
    <br />
    <button type="button" onclick="drawIt();">Demo</button>
    <button type="button" onclick="clearIt();">清除画布</button>

    <script type="text/javascript">

        var ctx = document.getElementById('canvas').getContext('2d');

        function drawIt() {

            clearIt();

            /*
             * context.shadowOffsetX - 阴影相对于实体的水平偏移值
             * context.shadowOffsetY - 阴影相对于实体的垂直偏移值
             * context.shadowBlur - 阴影模糊程度。默认值是 0 ，即不模糊
             * context.shadowColor - 阴影的颜色
             */

            ctx.shadowOffsetX = 5;
            ctx.shadowOffsetY = 10;
            ctx.shadowBlur = 10;
            ctx.shadowColor = "rgba(0, 0, 255, 0.5)";

            ctx.beginPath();
            ctx.arc(120, 120, 100, 0, Math.PI * 2, true);
            ctx.stroke();

            ctx.fillRect(300, 300, 100, 100);
        }

        function clearIt() {
            ctx.clearRect(0, 0, 480, 480);
        }

    </script>
</body>
</html>

6、全局 Alpha | globalAlpha
canvas/effect/globalAlpha.html

<!DOCTYPE HTML>
<html>
<head>
    <title>全局 Alpha</title>
</head>
<body>
    <canvas id="canvas" width="140" height="140" style="background-color: rgb(222, 222, 222)">
        您的浏览器不支持 canvas 标签
    </canvas>
    <br />
    <button type="button" onclick="drawIt();">Demo</button>
    <button type="button" onclick="clearIt();">清除画布</button>

    <script type="text/javascript">

        var ctx = document.getElementById('canvas').getContext('2d');

        function drawIt() {

            clearIt();

            /*
             * context.globalAlpha - 设置全局的 alpha 值
             */
            ctx.globalAlpha = "0.5";

            ctx.fillStyle = "red";
            ctx.beginPath();
            ctx.rect(20, 20, 100, 100);
            ctx.fill();
        }

        function clearIt() {
            ctx.clearRect(0, 0, 140, 140);
        }

    </script>
</body>
</html>

7、新颜色与画布当前已有颜色的合成方式 | globalCompositeOperation
canvas/effect/globalCompositeOperation.html

<!DOCTYPE HTML>
<html>
<head>
    <title>新颜色与画布当前已有颜色的合成方式</title>
</head>
<body>
    <div id="msg"></div>

    <canvas id="canvas" width="200" height="200" style="background-color: rgb(222, 222, 222)">
        您的浏览器不支持 canvas 标签
    </canvas>
    <br />
    <button type="button" onclick="drawIt();">改变 globalCompositeOperation</button>
    <button type="button" onclick="clearIt();">清除画布</button>

    <script type="text/javascript">

        var ctx = document.getElementById('canvas').getContext('2d');

        var compositeOperationTypes = ['source-atop', 'source-in', 'source-out', 'source-over', 'destination-atop', 'destination-in', 'destination-out', 'destination-over', 'lighter', 'copy', 'xor'];
        var index = 0;

        function drawIt() {

            clearIt();

            ctx.fillStyle = "red";
            ctx.beginPath();
            ctx.rect(20, 20, 100, 100);
            ctx.fill();

            /*
             * context.globalCompositeOperation - 设置新颜色与画布当前已有颜色的合成方式
             *   source-atop - 保留已有颜色，然后绘制新颜色与已有颜色重合的部分
             *   source-in - 绘制新颜色与已有颜色重合的部分，其余全透明
             *   source-out - 绘制新颜色与已有颜色不重合的部分，其余全透明
             *   source-over - 在已有颜色的前面绘制新颜色。默认值
             *   destination-atop - 在已有颜色的后面绘制新颜色，然后保留已有颜色与新颜色重合的部分
             *   destination-in - 保留已有颜色与新颜色重合的部分，其余全透明
             *   destination-out - 保留已有颜色与新颜色不重合的部分，其余全透明
             *   destination-over - 在已有颜色的后面绘制新颜色
             *   lighter - 混合重叠部分的颜色
             *   copy - 删除已有颜色，只绘制新颜色
             *   xor - 透明化重叠部分的颜色
             */
            ctx.globalCompositeOperation = compositeOperationTypes[index];
            document.getElementById("msg").innerHTML = ctx.globalCompositeOperation;

            ctx.fillStyle = "blue";
            ctx.beginPath();
            ctx.rect(80, 80, 100, 100);
            ctx.fill();

            index++;
            if (index >= compositeOperationTypes.length)
                index = 0;
        }

        function clearIt() {
            ctx.clearRect(0, 0, 200, 200);

            // source-over 是 context.globalCompositeOperation 的默认值
            ctx.globalCompositeOperation = "source-over";
        }

    </script>
</body>
</html>

8、保存画布上下文，以及恢复画布上下文 | save(), restore()
canvas/effect/save_restore.html

<!DOCTYPE HTML>
<html>
<head>
    <title>保存画布上下文，以及恢复画布上下文</title>
</head>
<body>
    <div>单击“save and draw”一次，然后单击“restore and draw”三次</div>

    <canvas id="canvas" width="280" height="140" style="background-color: rgb(222, 222, 222)">
        您的浏览器不支持 canvas 标签
    </canvas>
    <br />
    <button type="button" onclick="drawIt();">save and draw</button>
    <button type="button" onclick="restoreIt();">restore and draw</button>

    <script type="text/javascript">

        var ctx = document.getElementById('canvas').getContext('2d');

        /*
         * save() - 将画布的上下文压入堆栈
         * restore() - 从堆栈中取一个画布的上下文，如果没有则什么都不做
         */

        function drawIt() {
            clearIt();

            ctx.strokeStyle = "red";
            ctx.fillStyle = "green";
            ctx.lineWidth = 5;
            ctx.save(); // 将画布的上下文压入堆栈，此时堆栈中有一个画布上下文

            drawRect1();

            ctx.strokeStyle = "blue";
            ctx.fillStyle = "yellow";
            ctx.lineWidth = 10;
            ctx.save(); // 将画布的上下文压入堆栈，此时堆栈中有两个画布上下文

            drawRect2();
        }

        function restoreIt() {
            clearIt();

            ctx.restore(); // 按后进先出的顺序从堆栈里取画布上下文，如果取不到则什么都不做

            drawRect1();
            drawRect2();
        }

        function drawRect1() {
            ctx.beginPath();
            ctx.rect(20, 20, 100, 100);
            ctx.stroke();
            ctx.fill();
        }

        function drawRect2() {
            ctx.beginPath();
            ctx.rect(140, 20, 100, 100);
            ctx.stroke();
            ctx.fill();
        }

        function clearIt() {
            ctx.clearRect(0, 0, 280, 140);

            ctx.strokeStyle = "black";
            ctx.fillStyle = "black";
            ctx.lineWidth = 1;
        }
    </script>
</body>
</html>

9、像素操作 | createImageData(), getImageData(), putImageData(), ImageData, CanvasPixelArray
canvas/effect/imageData.html

<!DOCTYPE HTML>
<html>
<head>
    <title>像素操作</title>
</head>
<body>
    <div id="msg"></div>

    <canvas id="canvas" width="300" height="300" style="background-color: black">
        您的浏览器不支持 canvas 标签
    </canvas>
    <br />
    <button type="button" onclick="drawIt();">Demo</button>
    <button type="button" onclick="clearIt();">清除画布</button>

    <br /><br />

    <canvas id="canvas2" width="300" height="300" style="background-color: black">
        您的浏览器不支持 canvas 标签
    </canvas>
    <br />
    <button type="button" onclick="syncIt();">同步第一个Demo</button>
    <button type="button" onclick="redIt();">变红</button>

    <script type="text/javascript">

        var canvas = document.getElementById('canvas');
        var canvas2 = document.getElementById('canvas2');

        var ctx = canvas.getContext('2d');
        var ctx2 = canvas2.getContext('2d');

        var timer = -1;

        var width = parseInt(canvas.width, 10);
        var height = parseInt(canvas.height, 10);

        function drawIt() {
            
            clearIt();

            /*
             * context.createImageData(width, height) - 按指定的宽和高创建并返回 ImageData 对象，其内所有像素的默认值为 rgba(0,0,0,0)
             *
             * context.createImageData(imageData) - 按指定的 ImageData 对象的宽和高创建一个新的 ImageData 对象并返回此对象，其内所有像素的默认值为 rgba(0,0,0,0)
             *   相当于 context.createImageData(imageData.width, imageData.height)
             *
             * context.getImageData(x, y, width, height) - 获取画布的指定范围内的 ImageData 对象，并返回此对象
             *   x - 需要获取的 ImageData 对象矩形框相对于画布的左上角的 x 坐标
             *   y - 需要获取的 ImageData 对象矩形框相对于画布的左上角的 y 坐标
             *   width - 需要获取的 ImageData 对象矩形框的宽
             *   height - 需要获取的 ImageData 对象矩形框的高
             *
             * putImageData(imagedata, x, y, [dirtyX, dirtyY, dirtyWidth, dirtyHeight]) - 在画布上写入指定的数据
             *   imagedata - 需要写入的 ImageData 对象
             *   x, y - 指定需要写入的 ImageData 对象矩形框相对于画布左上角的坐标
             *   [dirtyX, dirtyY, dirtyWidth, dirtyHeight] - 显示 ImageData 对象上指定范围内像素
             */

            /*
             * ImageData - 像素对象
             *   width - 像素对象的宽
             *   height - 像素对象的高
             *   data - 像素数据，CanvasPixelArray 类型的对象
             *
             * CanvasPixelArray - 像素数据对象，可以数组方式进行操作
             *   数组中每 4 个元素代表一个像素，每个元素为一个字节，4 个元素按照 rgba 的方式描述一个像素
             *   length - 元素总数，即像素总数 * 4
             */

            var imageData = ctx.createImageData(width, height);
            document.getElementById("msg").innerHTML = "CanvasPixelArray.length: " + imageData.data.length;

            // 随机生成颜色不一样的像素，并写入到画布上
            timer = setInterval(randomPixel, 1);
            function randomPixel() {
                var x = parseInt(Math.random() * width, 10);
                var y = parseInt(Math.random() * height, 10);

                var index = (y * width + x) * 4;

                imageData.data[index + 0] = parseInt(Math.random() * 256);
                imageData.data[index + 1] = parseInt(Math.random() * 256);
                imageData.data[index + 2] = parseInt(Math.random() * 256);
                imageData.data[index + 3] = parseInt(Math.random() * 256);

                ctx.putImageData(imageData, 50, 50, 0, 0, 200, 200);
            }
        }

        function clearIt() {
            clearInterval(timer);
            ctx.clearRect(0, 0, width, height);
        }

        // 将 canvas 上的像素数据复制到 canvas2 上
function syncIt() {
            var imageData = ctx.getImageData(0, 0, width, height);
            ctx2.putImageData(imageData, 0, 0);
        }

        // 将 canvas2 上的非 rgba(0,0,0,0) 的点都变成红色
function redIt() {
            var imageData = ctx2.getImageData(0, 0, width, height);

            for (var i = 1; i < imageData.data.length / 4; i++) {
                var index = i * 4;

                if (imageData.data[index + 0] + imageData.data[index + 1] + imageData.data[index + 2] + imageData.data[index + 3] > 0) {
                    imageData.data[index + 0] = 255;
                    imageData.data[index + 1] = 0;
                    imageData.data[index + 2] = 0;
                    imageData.data[index + 3] = 255;
                }
            }

            ctx2.putImageData(imageData, 0, 0);
        }

    </script>
</body>
</html>

OK
[源码下载]

本文链接

千呼万唤 HTML 5 (10) - 画布（canvas）之转换

2012-02-22T01:15:00Z

[源码下载]

千呼万唤 HTML 5 (10) - 画布（canvas）之转换

作者：webabcd

介绍
HTML 5: 画布（canvas）之转换（转换画布的用户坐标系）

平移 | translate()
旋转 | rotate()
缩放 | scale()
矩阵转换 | transform(a, b, c, d, e, f)
矩阵转换 | setTransform(a, b, c, d, e, f)

示例
1、平移 | translate()
canvas/transform/translate.html

<!DOCTYPE HTML>
<html>
<head>
    <title>平移</title>
</head>
<body>
    <canvas id="canvas" width="400" height="400" style="background-color: rgb(222, 222, 222)">
        您的浏览器不支持 canvas 标签
    </canvas>
    <br />
    <button type="button" onclick="drawIt();">不断地点我看 Demo</button>
    <button type="button" onclick="clearIt();">清除画布</button>

    <script type="text/javascript">

        var ctx = document.getElementById('canvas').getContext('2d');

        var canvasX = 0;
        var canvasY = 0;

        var stepX = 20;
        var stepY = 20;

        function drawIt() {
            if (canvasX == 0 && canvasY == 0)
                ctx.strokeRect(0, 0, 100, 100);

            canvasX += stepX;
            canvasY += stepY;

            /*
             * context.translate(x, y) - 将当前的用户坐标系平移指定的距离
             *   x - x 轴方向上需要平移的像素数
             *   y - y 轴方向上需要平移的像素数
             */
            ctx.strokeStyle = "blue";
            ctx.translate(stepX, stepY);
            ctx.strokeRect(0, 0, 100, 100);
        }

        function clearIt() {
            ctx.translate(-canvasX, -canvasY);
            canvasX = 0;
            canvasY = 0;
            ctx.strokeStyle = "black";

            ctx.clearRect(0, 0, 400, 400);
        }

    </script>
</body>
</html>

2、旋转 | rotate()
canvas/transform/rotate.html

<!DOCTYPE HTML>
<html>
<head>
    <title>旋转</title>
</head>
<body>
    <canvas id="canvas" width="400" height="400" style="background-color: rgb(222, 222, 222)">
        您的浏览器不支持 canvas 标签
    </canvas>
    <br />
    <button type="button" onclick="drawIt();">不断地点我看 Demo</button>
    <button type="button" onclick="clearIt();">清除画布</button>

    <script type="text/javascript">

        var ctx = document.getElementById('canvas').getContext('2d');

        var canvasRadian = 0;
        var stepRadian = 15 * Math.PI / 180;

        function drawIt() {
            if (canvasRadian == 0)
                ctx.strokeRect(360, 0, 20, 60);

            canvasRadian += stepRadian;

            /*
             * context.rotate(radian) - 将当前的用户坐标系旋转指定的弧度，顺时针为正值，逆时针为负值
             *   radian - 弧度值
             */
            ctx.strokeStyle = "blue";
            ctx.rotate(stepRadian);
            ctx.strokeRect(360, 0, 20, 60);
        }

        function clearIt() {
            ctx.rotate(-canvasRadian);
            canvasRadian = 0;
            ctx.strokeStyle = "black";

            ctx.clearRect(0, 0, 400, 400);
        }

    </script>
</body>
</html>

3、缩放 | scale()
canvas/transform/scale.html

<!DOCTYPE HTML>
<html>
<head>
    <title>缩放</title>
</head>
<body>
    <canvas id="canvas" width="400" height="400" style="background-color: rgb(222, 222, 222)">
        您的浏览器不支持 canvas 标签
    </canvas>
    <br />
    <button type="button" onclick="drawIt();">不断地点我看 Demo</button>
    <button type="button" onclick="clearIt();">清除画布</button>

    <script type="text/javascript">

        var ctx = document.getElementById('canvas').getContext('2d');

        var canvasScaleX = 1;
        var canvasScaleY = 1;

        var stepScaleX = 1.1;
        var stepScaleY = 1.1;

        function drawIt() {
            if (canvasScaleX == 1 && canvasScaleY == 1)
                ctx.strokeRect(0, 0, 60, 60);

            canvasScaleX *= stepScaleX;
            canvasScaleY *= stepScaleY;

            /*
             * context.scale(x, y) - 将当前的用户坐标系缩放指定的倍数
             *   x - 水平方向上的缩放倍数
             *   y - 垂直方向上的缩放倍数
             */
            ctx.strokeStyle = "blue";
            ctx.scale(stepScaleX, stepScaleY);
            ctx.strokeRect(0, 0, 60, 60);
        }

        function clearIt() {
            ctx.scale(1 / canvasScaleX, 1 / canvasScaleY);
            canvasScaleX = 1;
            canvasScaleY = 1;
            ctx.strokeStyle = "black";

            ctx.clearRect(0, 0, 400, 400);
        }

    </script>
</body>
</html>

4、矩阵转换 | transform(a, b, c, d, e, f)
canvas/transform/transform.html

<!DOCTYPE HTML>
<html>
<head>
    <title>矩阵转换 | transform(a, b, c, d, e, f)</title>
</head>
<body>
    <canvas id="canvas" width="400" height="400" style="background-color: rgb(222, 222, 222)">
        您的浏览器不支持 canvas 标签
    </canvas>
    <br />
    <button type="button" onclick="drawIt();">不断地点我看 Demo</button>
    <button type="button" onclick="clearIt();">清除画布</button>

    <script type="text/javascript">

        var ctx = document.getElementById('canvas').getContext('2d');

        var canvasScaleX = 1;
        var canvasScaleY = 1;

        var stepScaleX = 1.1;
        var stepScaleY = 1.1;

        function drawIt() {
            if (canvasScaleX == 1 && canvasScaleY == 1)
                ctx.strokeRect(0, 0, 60, 60);

            canvasScaleX *= stepScaleX;
            canvasScaleY *= stepScaleY;

            /*
             * context.transform(a, b, c, d, e, f) - 按指定的矩阵转换当前的用户坐标系
             *   相当于：context.transform(M11, M12, M21, M22, OffsetX, OffsetY)
             *
             * 关于仿射矩阵参考：http://www.cnblogs.com/webabcd/archive/2008/11/03/1325150.html
             *
             *   |X|             |M11（默认值 1）      M21（默认值 0）       0|
             *   |Y| = |x y 1| * |M12（默认值 0）      M22（默认值 1）       0|
             *   |1|             |OffsetX（默认值 0）  OffsetY（默认值 0）   1|
             *
             *   X = x * M11 + y * M12 + OffsetX
             *   Y = x * M21 + y * M22 + OffsetY
             */
            ctx.strokeStyle = "blue";
            ctx.transform(stepScaleX, 0, 0, stepScaleY, 0, 0);
            ctx.strokeRect(0, 0, 60, 60);
        }

        function clearIt() {
            ctx.transform(1 / canvasScaleX, 0, 0, 1 / canvasScaleY, 0, 0);
            canvasScaleX = 1;
            canvasScaleY = 1;
            ctx.strokeStyle = "black";

            ctx.clearRect(0, 0, 400, 400);
        }

    </script>
</body>
</html>

5、矩阵转换 | setTransform(a, b, c, d, e, f)
canvas/transform/setTransform.html

<!DOCTYPE HTML>
<html>
<head>
    <title>矩阵转换 | setTransform(a, b, c, d, e, f)</title>
</head>
<body>
    <canvas id="canvas" width="400" height="400" style="background-color: rgb(222, 222, 222)">
        您的浏览器不支持 canvas 标签
    </canvas>
    <br />
    <button type="button" onclick="drawIt();">Demo</button>
    <button type="button" onclick="clearIt();">清除画布</button>

    <script type="text/javascript">

        var ctx = document.getElementById('canvas').getContext('2d');

        function drawIt() {
            ctx.strokeStyle = "red";
            ctx.scale(2, 2);
            ctx.strokeRect(0, 0, 60, 60);

            /*
             * context.setTransform(a, b, c, d, e, f) - 首先重置用户坐标系，然后再按指定的矩阵转换用户坐标系（translate, rotate, scale, transform 是针对当前用户坐标系做转换，而 setTransform 是针对重置后的用户坐标系做转换）
             *   相当于：context.setTransform(M11, M12, M21, M22, OffsetX, OffsetY)
             *
             * 关于仿射矩阵参考：http://www.cnblogs.com/webabcd/archive/2008/11/03/1325150.html
             *
             *   |X|             |M11（默认值 1）      M21（默认值 0）       0|
             *   |Y| = |x y 1| * |M12（默认值 0）      M22（默认值 1）       0|
             *   |1|             |OffsetX（默认值 0）  OffsetY（默认值 0）   1|
             *
             *   X = x * M11 + y * M12 + OffsetX
             *   Y = x * M21 + y * M22 + OffsetY
             */
            ctx.strokeStyle = "blue";
            ctx.setTransform(1, 0, 0, 1, 0, 0);
            ctx.strokeRect(0, 0, 60, 60);
        }

        function clearIt() {
            ctx.clearRect(0, 0, 400, 400);
        }

    </script>
</body>
</html>

OK
[源码下载]

本文链接