稳扎稳打Silverlight(5) - 2.0控件之ListBox, MediaElement, MultiScaleImage, PasswordBox, ProgressBar, RadioButton

[索引页]
[源码下载]

稳扎稳打Silverlight(5) - 2.0控件之ListBox, MediaElement, MultiScaleImage, PasswordBox, ProgressBar, RadioButton

作者： webabcd


介绍
Silverlight 2.0 控件一览：ListBox, MediaElement, MultiScaleImage, PasswordBox, ProgressBar, RadioButton


在线DEMO
http://www.cnblogs.com/webabcd/archive/2008/10/09/1307486.html


示例
1、ListBox.xaml

< UserControl  x:Class ="Silverlight20.Control.ListBox"
    xmlns ="http://schemas.microsoft.com/winfx/2006/xaml/presentation"  
    xmlns:x ="http://schemas.microsoft.com/winfx/2006/xaml" >
     < StackPanel  HorizontalAlignment ="Left" >
        
         <!--
        SelectionChanged - ListBox中某个对象被选中后所触发的事件
         -->
         < ListBox  Margin ="5"  Width ="200"  Height ="100"  SelectionChanged ="ListBox_SelectionChanged" >
             < ListBoxItem  Content ="ListBoxItem01"   />
             < ListBoxItem  Content ="ListBoxItem02"   />
             < ListBoxItem  Content ="ListBoxItem03"   />
             < ListBoxItem  Content ="ListBoxItem04"   />
             < ListBoxItem  Content ="ListBoxItem05"   />
             < ListBoxItem  Content ="ListBoxItem06"   />
             < ListBoxItem  Content ="ListBoxItem07"   />
             < ListBoxItem  Content ="ListBoxItem08"   />
             < ListBoxItem  Content ="ListBoxItem09"   />
             < ListBoxItem  Content ="ListBoxItem10"   />
         </ ListBox >
        
         <!--
        ListBox中可以包含任何对象
         -->
         < ListBox  Margin ="5"  Width ="200" >
             < TextBlock  Text ="TextBlock"   />
             < TextBox  Text ="TextBox"   />
             < Button  Content ="Button"   />
         </ ListBox >
        
     </ StackPanel >
</ UserControl >

ListBox.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.Browser;

namespace  Silverlight20.Control
{
    public partial class ListBox : UserControl
    {
        public ListBox()
        {
            InitializeComponent();
        }

        private void ListBox_SelectionChanged(object sender, SelectionChangedEventArgs e)
        {
            // ListBox.SelectedItem - ListBox中被选中的对象

            var lst = sender as System.Windows.Controls.ListBox;

            MessageBox.Show(
                ((System.Windows.Controls.ListBoxItem)lst.SelectedItem).Content + " 被单击了",
                "提示",
                MessageBoxButton.OK);
        }
    }
}

2、MediaElement.xaml

< UserControl  x:Class ="Silverlight20.Control.MediaElement"
    xmlns ="http://schemas.microsoft.com/winfx/2006/xaml/presentation"  
    xmlns:x ="http://schemas.microsoft.com/winfx/2006/xaml" >
     < StackPanel  HorizontalAlignment ="Center" >
        
         <!--
        Source - 视频路径
        AutoPlay - 是否自动播放
         -->
         < MediaElement  x:Name ="mediaElement"  Height ="250"  AutoPlay ="False"
                    Source ="/Silverlight20;component/Video/Demo.wmv"    />
        
         < StackPanel  Orientation ="Horizontal"  HorizontalAlignment ="Center" >
             < ToggleButton  x:Name ="play"  Content ="播放"  Margin ="5"  Click ="play_Click"   />
             < ToggleButton  x:Name ="mute"  Content ="静音"  Margin ="5"  Click ="mute_Click"   />
         </ StackPanel >
     </ StackPanel >
</ UserControl >

MediaElement.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;

namespace  Silverlight20.Control
{
    public partial class MediaElement : UserControl
    {
        public MediaElement()
        {
            InitializeComponent();
        }

        void play_Click(object sender, RoutedEventArgs e)
        {
            var tb = sender as System.Windows.Controls.Primitives.ToggleButton;
            if (tb.IsChecked == true)
            {
                tb.Content = "暂停";

                // MediaElement.Play() - 播放视频
                this.mediaElement.Play();
            }
            else
            {
                tb.Content = "播放";

                // MediaElement.Pause() - 暂停视频
                // MediaElement.Stop() - 停止视频
                this.mediaElement.Pause();
            }
        }

        void mute_Click(object sender, RoutedEventArgs e)
        {
            var tb = sender as System.Windows.Controls.Primitives.ToggleButton;
            if (tb.IsChecked == true)
            {
                tb.Content = "有声";

                // MediaElement.IsMuted - 是否静音
                // MediaElement.Volume - 声音大小（0 - 1）
                this.mediaElement.IsMuted = true;
            }
            else
            {
                tb.Content = "静音";
                this.mediaElement.IsMuted = false;
            }
        }
    }
}

3、MultiScaleImage.xaml

< UserControl  x:Class ="Silverlight20.Control.MultiScaleImage"
    xmlns ="http://schemas.microsoft.com/winfx/2006/xaml/presentation"  
    xmlns:x ="http://schemas.microsoft.com/winfx/2006/xaml" >
     < StackPanel  HorizontalAlignment ="Left" >
        
         < MultiScaleImage  x:Name ="msi"  Width ="400"  Height ="300" ></ MultiScaleImage >
        
     </ StackPanel >
</ UserControl >

MultiScaleImage.xaml.cs（支持放大/缩小/拖动/滚轮之类的，摘自Deep Zoom Composer生成的代码）

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;

namespace  Silverlight20.Control
{
    public partial class MultiScaleImage : UserControl
    {
        //
        // Based on prior work done by Lutz Gerhard, Peter Blois, and Scott Hanselman
        //
        Point lastMousePos = new Point();

        double _zoom = 1;
        bool mouseButtonPressed = false;
        bool mouseIsDragging = false;
        Point dragOffset;
        Point currentPosition;

        public double ZoomFactor
        {
            get { return _zoom; }
            set { _zoom = value; }
        }

        public MultiScaleImage()
        {
            InitializeComponent();

            //
            // We are setting the source here, but you should be able to set the Source property via
            //
            this.msi.Source = new DeepZoomImageTileSource(new Uri("/DeepZoomImages/dzc_output.xml", UriKind.Relative));

            //
            // Firing an event when the MultiScaleImage is Loaded
            //
            this.msi.Loaded += new RoutedEventHandler(msi_Loaded);

            //
            // Firing an event when all of the images have been Loaded
            //
            this.msi.ImageOpenSucceeded += new RoutedEventHandler(msi_ImageOpenSucceeded);

            //
            // Handling all of the mouse and keyboard functionality
            //
            this.MouseMove += delegate(object sender, MouseEventArgs e)
            {
                if (mouseButtonPressed)
                {
                    mouseIsDragging = true;
                }
                this.lastMousePos = e.GetPosition(this.msi);
            };

            this.MouseLeftButtonDown += delegate(object sender, MouseButtonEventArgs e)
            {
                mouseButtonPressed = true;
                mouseIsDragging = false;
                dragOffset = e.GetPosition(this);
                currentPosition = msi.ViewportOrigin;
            };

            this.msi.MouseLeave += delegate(object sender, MouseEventArgs e)
            {
                mouseIsDragging = false;
            };

            this.MouseLeftButtonUp += delegate(object sender, MouseButtonEventArgs e)
            {
                mouseButtonPressed = false;
                if (mouseIsDragging == false)
                {
                    bool shiftDown = (Keyboard.Modifiers & ModifierKeys.Shift) == ModifierKeys.Shift;

                    ZoomFactor = 2.0;
                    if (shiftDown) ZoomFactor = 0.5;
                    Zoom(ZoomFactor, this.lastMousePos);
                }
                mouseIsDragging = false;
            };

            this.MouseMove += delegate(object sender, MouseEventArgs e)
            {
                if (mouseIsDragging)
                {
                    Point newOrigin = new Point();
                    newOrigin.X = currentPosition.X - (((e.GetPosition(msi).X - dragOffset.X) / msi.ActualWidth) * msi.ViewportWidth);
                    newOrigin.Y = currentPosition.Y - (((e.GetPosition(msi).Y - dragOffset.Y) / msi.ActualHeight) * msi.ViewportWidth);
                    msi.ViewportOrigin = newOrigin;
                }
            };

            new MouseWheelHelper(this).Moved += delegate(object sender, MouseWheelEventArgs e)
            {
                e.Handled = true;
                if (e.Delta > 0)
                    ZoomFactor = 1.2;
                else
                    ZoomFactor = .80;

                Zoom(ZoomFactor, this.lastMousePos);
            };
        }

        void msi_ImageOpenSucceeded(object sender, RoutedEventArgs e)
        {
            //If collection, this gets you a list of all of the MultiScaleSubImages
            //
            //foreach (MultiScaleSubImage subImage in msi.SubImages)
            //{
            //    // Do something
            //}
        }

        void msi_Loaded(object sender, RoutedEventArgs e)
        {
            // Hook up any events you want when the image has successfully been opened
        }

        public void Zoom(double zoom, Point pointToZoom)
        {
            Point logicalPoint = this.msi.ElementToLogicalPoint(pointToZoom);
            this.msi.ZoomAboutLogicalPoint(zoom, logicalPoint.X, logicalPoint.Y);
        }

        /**//*
         *  Sample event handlerrs tied to the Click of event of various buttons for 
         *  showing all images, zooming in, and zooming out!
         * 
        private void ShowAllClick(object sender, RoutedEventArgs e)
        {
            this.msi.ViewportOrigin = new Point(0, 0);
            this.msi.ViewportWidth = 1;
            ZoomFactor = 1;
        }

        private void zoomInClick(object sender, RoutedEventArgs e)
        {
            Zoom(1.2, new Point(this.ActualWidth / 2, this.ActualHeight / 2));
        }

        private void zoomOutClick(object sender, RoutedEventArgs e)
        {
            Zoom(.8, new Point(this.ActualWidth / 2, this.ActualHeight / 2));
        }
         * */
    }
}

4、PasswordBox.xaml

< UserControl  x:Class ="Silverlight20.Control.PasswordBox"
    xmlns ="http://schemas.microsoft.com/winfx/2006/xaml/presentation"  
    xmlns:x ="http://schemas.microsoft.com/winfx/2006/xaml" >
     < StackPanel  HorizontalAlignment ="Left" >
        
         <!--
        Password - PasswordBox控件的密码值
        PasswordChar - PasswordBox控件所显示的密码替代字符。默认值为“●”
         -->
         < PasswordBox  Width ="200"  PasswordChar ="*" ></ PasswordBox >
        
     </ StackPanel >     
</ UserControl >

5、ProgressBar.xaml

< UserControl  x:Class ="Silverlight20.Control.ProgressBar"
    xmlns ="http://schemas.microsoft.com/winfx/2006/xaml/presentation"  
    xmlns:x ="http://schemas.microsoft.com/winfx/2006/xaml" >
     < StackPanel  HorizontalAlignment ="Left" >
        
         < TextBlock  x:Name ="lblPercent"  TextAlignment ="Center"   />
         <!--
        Minimum - ProgressBar控件的最小值。参见基类System.Windows.Controls.Primitives.RangeBase
        Maximum - ProgressBar控件的最大值。参见基类System.Windows.Controls.Primitives.RangeBase
        Value - ProgressBar控件的值。参见基类System.Windows.Controls.Primitives.RangeBase
        ValueChanged - ProgressBar控件的值发生变化时所触发的事件
         -->
         < ProgressBar  x:Name ="progressBar"  Width ="200"  Height ="20"  Minimum ="10"  Maximum ="70" ></ ProgressBar >

         <!--
        IsIndeterminate - 是否无法确定当前的进度值
            false - 可以确定当前的进度值
            true - 无法确定当前的进度值。一个Loading动画
         -->
         < ProgressBar  Width ="200"  Height ="20"  IsIndeterminate ="True"  Margin ="5" ></ ProgressBar >

    </ StackPanel >
</ UserControl >

ProgressBar.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;

namespace  Silverlight20.Control
{
    public partial class ProgressBar : UserControl
    {
        Storyboard _loop = new Storyboard();
        int _count = 0;

        public ProgressBar()
        {
            InitializeComponent();

            ProgressBarDemo();
        }

        void ProgressBarDemo()
        {
            _loop.Duration = TimeSpan.FromMilliseconds(100d);
            _loop.Completed += new EventHandler(_loop_Completed);
            _loop.Begin();
        }

        void _loop_Completed(object sender, EventArgs e)
        {
            progressBar.Value = _count;
            lblPercent.Text = _count.ToString() + "%";

            if (_count > 100)
                _count = 0;
            else
                _count++;

            _loop.Begin();
        }
    }
}

6、RadioButton.xaml

< UserControl  x:Class ="Silverlight20.Control.RadioButton"
    xmlns ="http://schemas.microsoft.com/winfx/2006/xaml/presentation"  
    xmlns:x ="http://schemas.microsoft.com/winfx/2006/xaml" >
     < StackPanel  HorizontalAlignment ="Left" >
        
         <!--
        GroupName - RadioButton控件所属组的组名
        Checked - 被选中后所触发的事件
        Click - 被单击后所触发的事件
         -->
         < RadioButton  GroupName ="groupName"  Content ="红色的RadioButton"  Background ="Red"  Margin ="5"   />
        
         <!--
        IsEnabled - RadioButton是否有效
         -->
         < RadioButton  GroupName ="groupName"  Content ="无效的RadioButton"  IsEnabled ="False"  Margin ="5"   />

         <!--
        IsChecked - 是否被选中
        RadioButton.Content - RadioButton所对应的内容
         -->
         < RadioButton  GroupName ="groupName"  Margin ="5"  IsChecked ="true" >
             < RadioButton.Content >
                 < Image  Source ="/Silverlight20;component/Images/Logo.jpg"  Width ="200"   />
             </ RadioButton.Content >
         </ RadioButton >
        
     </ StackPanel >
</ UserControl >

OK
[源码下载]