随笔 - 616, 文章 - 0, 评论 - 10492
  博客园  :: 首页  :: 新随笔  :: 联系 :: 订阅 订阅  :: 管理
[索引页]
[源码下载]


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