稳扎稳打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,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

@H_502_1353@

            

{

                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)

            @H_502_2448@

{

                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, 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
[源码下载]