[索引页]
[源码下载]
稳扎稳打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>
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
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;
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
using System.Windows.Browser;
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
namespace Silverlight20.Control
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ContractedBlock.gif)
{
public partial class ListBox : UserControl
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
public ListBox()
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
InitializeComponent();
}
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
private void ListBox_SelectionChanged(object sender, SelectionChangedEventArgs e)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
// ListBox.SelectedItem - ListBox中被选中的对象
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
var lst = sender as System.Windows.Controls.ListBox;
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
MessageBox.Show(
((System.Windows.Controls.ListBoxItem)lst.SelectedItem).Content + " 被单击了",
"提示",
MessageBoxButton.OK);
}
}
}
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
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>
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
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;
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
namespace Silverlight20.Control
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ContractedBlock.gif)
{
public partial class MediaElement : UserControl
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
public MediaElement()
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
InitializeComponent();
}
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
void play_Click(object sender, RoutedEventArgs e)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
var tb = sender as System.Windows.Controls.Primitives.ToggleButton;
if (tb.IsChecked == true)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
tb.Content = "暂停";
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
// MediaElement.Play() - 播放视频
this.mediaElement.Play();
}
else
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
tb.Content = "播放";
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
// MediaElement.Pause() - 暂停视频
// MediaElement.Stop() - 停止视频
this.mediaElement.Pause();
}
}
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
void mute_Click(object sender, RoutedEventArgs e)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
var tb = sender as System.Windows.Controls.Primitives.ToggleButton;
if (tb.IsChecked == true)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
tb.Content = "有声";
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
// MediaElement.IsMuted - 是否静音
// MediaElement.Volume - 声音大小(0 - 1)
this.mediaElement.IsMuted = true;
}
else
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
tb.Content = "静音";
this.mediaElement.IsMuted = false;
}
}
}
}
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
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>
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
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;
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
namespace Silverlight20.Control
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ContractedBlock.gif)
{
public partial class MultiScaleImage : UserControl
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
//
// Based on prior work done by Lutz Gerhard, Peter Blois, and Scott Hanselman
//
Point lastMousePos = new Point();
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
double _zoom = 1;
bool mouseButtonPressed = false;
bool mouseIsDragging = false;
Point dragOffset;
Point currentPosition;
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
public double ZoomFactor
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
get
{ return _zoom; }
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
set
{ _zoom = value; }
}
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
public MultiScaleImage()
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
InitializeComponent();
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
//
// 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));
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
//
// Firing an event when the MultiScaleImage is Loaded
//
this.msi.Loaded += new RoutedEventHandler(msi_Loaded);
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
//
// Firing an event when all of the images have been Loaded
//
this.msi.ImageOpenSucceeded += new RoutedEventHandler(msi_ImageOpenSucceeded);
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
//
// Handling all of the mouse and keyboard functionality
//
this.MouseMove += delegate(object sender, MouseEventArgs e)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
if (mouseButtonPressed)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
mouseIsDragging = true;
}
this.lastMousePos = e.GetPosition(this.msi);
};
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
this.MouseLeftButtonDown += delegate(object sender, MouseButtonEventArgs e)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
mouseButtonPressed = true;
mouseIsDragging = false;
dragOffset = e.GetPosition(this);
currentPosition = msi.ViewportOrigin;
};
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
this.msi.MouseLeave += delegate(object sender, MouseEventArgs e)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
mouseIsDragging = false;
};
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
this.MouseLeftButtonUp += delegate(object sender, MouseButtonEventArgs e)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
mouseButtonPressed = false;
if (mouseIsDragging == false)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
bool shiftDown = (Keyboard.Modifiers & ModifierKeys.Shift) == ModifierKeys.Shift;
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
ZoomFactor = 2.0;
if (shiftDown) ZoomFactor = 0.5;
Zoom(ZoomFactor, this.lastMousePos);
}
mouseIsDragging = false;
};
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
this.MouseMove += delegate(object sender, MouseEventArgs e)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
if (mouseIsDragging)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
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;
}
};
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
new MouseWheelHelper(this).Moved += delegate(object sender, MouseWheelEventArgs e)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
e.Handled = true;
if (e.Delta > 0)
ZoomFactor = 1.2;
else
ZoomFactor = .80;
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
Zoom(ZoomFactor, this.lastMousePos);
};
}
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
void msi_ImageOpenSucceeded(object sender, RoutedEventArgs e)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
//If collection, this gets you a list of all of the MultiScaleSubImages
//
//foreach (MultiScaleSubImage subImage in msi.SubImages)
//{
// // Do something
//}
}
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
void msi_Loaded(object sender, RoutedEventArgs e)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
// Hook up any events you want when the image has successfully been opened
}
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
public void Zoom(double zoom, Point pointToZoom)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
Point logicalPoint = this.msi.ElementToLogicalPoint(pointToZoom);
this.msi.ZoomAboutLogicalPoint(zoom, logicalPoint.X, logicalPoint.Y);
}
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
/**//*
* 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;
}
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
private void zoomInClick(object sender, RoutedEventArgs e)
{
Zoom(1.2, new Point(this.ActualWidth / 2, this.ActualHeight / 2));
}
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
private void zoomOutClick(object sender, RoutedEventArgs e)
{
Zoom(.8, new Point(this.ActualWidth / 2, this.ActualHeight / 2));
}
* */
}
}
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
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>
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
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>
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
<!--
IsIndeterminate - 是否无法确定当前的进度值
false - 可以确定当前的进度值
true - 无法确定当前的进度值。一个Loading动画
-->
<ProgressBar Width="200" Height="20" IsIndeterminate="True" Margin="5"></ProgressBar>
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
</StackPanel>
</UserControl>
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
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;
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
namespace Silverlight20.Control
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ContractedBlock.gif)
{
public partial class ProgressBar : UserControl
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
Storyboard _loop = new Storyboard();
int _count = 0;
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
public ProgressBar()
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
InitializeComponent();
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
ProgressBarDemo();
}
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
void ProgressBarDemo()
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
_loop.Duration = TimeSpan.FromMilliseconds(100d);
_loop.Completed += new EventHandler(_loop_Completed);
_loop.Begin();
}
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
void _loop_Completed(object sender, EventArgs e)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
progressBar.Value = _count;
lblPercent.Text = _count.ToString() + "%";
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
if (_count > 100)
_count = 0;
else
_count++;
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
_loop.Begin();
}
}
}
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
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" />
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
<!--
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>
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
OK
[源码下载]