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

[索引页]
[源码下载]

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

作者： webabcd


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


在线DEMO
http://webabcd.blog.51cto.com/1787395/342779  


示例  
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));
                }
                 * */
        }
}

 

 

未完待续>>

 

OK
[源码下载]