稳扎稳打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
[源码下载]