稳扎稳打Silverlight(6) - 2.0控件之ScrollViewer, Slider, StackPanel, TabControl, TextBlock, TextBox, ToggleButton

稳扎稳打Silverlight(6) - 2.0控件之ScrollViewer,Slider,StackPanel,TabControl,TextBlock,TextBox,ToggleButton

作者： webabcd

介绍
Silverlight 2.0 控件一览：ScrollViewer,ToggleButton

在线DEMO
http://www.cnblogs.com/webabcd/archive/2008/10/09/1307486.html

示例
1、ScrollViewer.xaml

< UserControl x:Class ="Silverlight20.Control.ScrollViewer"

xmlns ="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x ="http://schemas.microsoft.com/winfx/2006/xaml" >

< StackPanel >

<!--

ScrollViewer.Content - ScrollViewer控件中的内容

HorizontalScrollBarVisibility - 水平滚动条的显示状态

VerticalScrollBarVisibility - 垂直滚动条的显示状态

Auto - 自动根据ScrollViewer的宽和高，以及内容的宽和高，来决定是否显示滚动条

disabled - 不显示，但是可以通过键盘或鼠标在显示内容中的移动或拖动操作，来看到被遮挡的内容

Hidden - 不显示，而且无法看到被遮挡的内容

Visible - 显示滚动条

-->

< ScrollViewer Margin ="5" Width ="200" Height ="200" HorizontalAlignment ="Left" HorizontalScrollBarVisibility ="Auto" VerticalScrollBarVisibility ="Auto" >

< ScrollViewer.Content >

< Image Source ="/Silverlight20;component/Images/logo.jpg" Width ="300" />

</ ScrollViewer.Content >

</ ScrollViewer >

< ScrollViewer Margin ="5" Width ="100" Height ="100" HorizontalAlignment ="Left" HorizontalScrollBarVisibility ="Auto" VerticalScrollBarVisibility ="Auto" >

< TextBox >

< TextBox.Text >

aaa

bbb

ccc

ddd

eee

fff

ggg

hhh

iii

jjj

kkk

lll

mmm

nnn

</ TextBox.Text >

</ TextBox >

</ ScrollViewer >

</ StackPanel >

</ UserControl >

2、Slider.xaml

< UserControl x:Class ="Silverlight20.Control.Slider"

xmlns ="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x ="http://schemas.microsoft.com/winfx/2006/xaml" >

< StackPanel >

<!--

Minimum - Slider控件的最小值。参见基类System.Windows.Controls.Primitives.RangeBase

Maximum - Slider控件的最大值。参见基类System.Windows.Controls.Primitives.RangeBase

Value - Slider控件的值。参见基类System.Windows.Controls.Primitives.RangeBase

SmallChange - 按上/下/左/右键的时候，Slider 控件的 Value 值的变化跨度。参见 Slider 的基类 System.Windows.Controls.Primitives.RangeBase

LargeChange - 鼠标在 Slider 上单击的时候，Slider 控件的 Value 值的变化跨度。参见 Slider 的基类 System.Windows.Controls.Primitives.RangeBase

ValueChanged - Slider控件的值发生变化时所触发的事件

Orientation - 控件的放置方向

Horizontal - 水平放置

Vertical - 垂直放置

IsDirectionReversed - 滑块的初始位置

True - 上到下或者右到左

False - 下到上或者左到右

-->

< Slider Height ="400" HorizontalAlignment ="Left" Orientation ="Vertical" IsDirectionReversed ="True" Minimum ="0" Maximum ="50" SmallChange ="5" ValueChanged ="Slider_ValueChanged" />

< TextBlock x:Name ="lblMsg" HorizontalAlignment ="Left" />

</ StackPanel >

</ UserControl >

Slider.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 Slider : UserControl

{

public Slider()

{

InitializeComponent();

}

private void Slider_ValueChanged(object sender, RoutedPropertyChangedEventArgs<double> e)

{

// RoutedPropertyChangedEventArgs<double>.OldValue - Slider控件的原值

// RoutedPropertyChangedEventArgs<double>.NewValue - Slider控件的新值

lblMsg.Text = string.Format("原值：{0}/r/n新值：{1}", e.OldValue.ToString(), e.NewValue.ToString());

}

3、StackPanel.xaml

< UserControl x:Class ="Silverlight20.Control.StackPanel"

xmlns ="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x ="http://schemas.microsoft.com/winfx/2006/xaml" >

< StackPanel HorizontalAlignment ="Left" >

<!--

Orientation - StackPanel控件内对象的排列方向

Horizontal - 水平排列

Vertical - 垂直排列

-->

< StackPanel Orientation ="Horizontal" >

< TextBlock Text ="a" Margin ="5" />

< TextBlock Text ="b" Margin ="5" />

< TextBlock Text ="c" Margin ="5" />

</ StackPanel >

< StackPanel Orientation ="Vertical" >

< TextBlock Text ="a" Margin ="5" />

< TextBlock Text ="b" Margin ="5" />

< TextBlock Text ="c" Margin ="5" />

</ StackPanel >

</ UserControl >

4、TabControl.xaml

< UserControl x:Class ="Silverlight20.Control.TabControl"

xmlns ="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x ="http://schemas.microsoft.com/winfx/2006/xaml"

xmlns:basics ="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls" >

< StackPanel HorizontalAlignment ="Left" >

<!--

Selectedindex - 被选中的 TabItem 索引

SelectedItem - 被选中的 TabItem 对象

-->

< basics:TabControl Width ="400" Height ="400" Selectedindex ="1" >

< basics:TabItem Header ="Tab1" >

< TextBlock Text ="Tab1 Content" />

</ basics:TabItem >

<!--

TabItem.Header - TabItem 的标题

TabItem.Content - TabItem 的内容

-->

< basics:TabItem >

< basics:TabItem.Header >

< TextBlock Text ="Tab2" />

</ basics:TabItem.Header >

< basics:TabItem.Content >

< TextBlock Text ="Tab2 Content" />

</ basics:TabItem.Content >

</ basics:TabItem >

< basics:TabItem >

< basics:TabItem.Header >

< Image Source ="/Silverlight20;component/Images/logo.jpg" Height ="20" />

</ basics:TabItem.Header >

< TextBlock Text ="Tab3 Content" ></ TextBlock >

</ basics:TabItem >

< basics:TabItem >

< basics:TabItem.Header >

< Grid Width ="100" >

< Image Source ="/Silverlight20;component/Images/logo.jpg" Height ="20" HorizontalAlignment ="Center" />

< TextBlock Text ="Tab4" HorizontalAlignment ="Center" />

</ Grid >

</ basics:TabItem.Header >

< TextBlock Text ="Tab4 Content" ></ TextBlock >

</ basics:TabItem >

</ basics:TabControl >

</ StackPanel >

</ UserControl >

5、TextBlock.xaml

< UserControl x:Class ="Silverlight20.Control.TextBlock"

xmlns ="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x ="http://schemas.microsoft.com/winfx/2006/xaml" >

< StackPanel HorizontalAlignment ="Left" >

<!--

Text - TextBlock上显示的值

-->

< TextBlock Text ="TextBlock" />

<!--

Foreground - 字体颜色

-->

< TextBlock Text ="红色的TextBlock" Foreground ="Red" />

<!--

要以XAML的方式直接显示引号等特殊字请使用相应的HTML编码

-->

< TextBlock Text ="带引号的"TextBlock"" />

<!--

FontFamily - 字体

FontSize - 字体大小

FontWeight - 字形粗细度 [System.Windows.FontWeights枚举]

FontStyle - 字形斜体否 [System.Windows.FontStyles枚举]

Textdecorations - 字体下划线 [System.Windows.Textdecorations枚举]

FontStretch - 字体间距 [System.Windows.FontStretches枚举]

-->

< TextBlock Text ="常用属性TextBlock" FontFamily ="宋体" FontSize ="36" FontWeight ="Bold" FontStyle ="Italic" Textdecorations ="Underline" FontStretch ="normal" />

<!--

TextAlignment - 文字排列 [System.Windows.TextAlignment枚举]

Run - 文本内容

LineBreak - 换行符

LineHeight - 每行行高

textwrapping - 文本限制（超过限制是否换行）

Nowrap - 永不换行

Wrap - 超过限制则换行

LinestackingStrategy - 控制行高的策略

MaxHeight - TextBlock内每行的行高以LineHeight值和每行自身所设置的行高值间的最大值为准

BlockLineHeight - TextBlock内每行的行高以LineHeight值为准

-->

< TextBlock VerticalAlignment ="Center" TextAlignment ="Center" LineHeight ="10" LinestackingStrategy ="MaxHeight" Width ="200" textwrapping ="Nowrap" >

< Run FontSize ="20" Foreground ="Maroon" Text ="MaroonMaroonMaroonMaroon" />

< LineBreak />

< Run Foreground ="teal" Text ="teal" />

< LineBreak />

< Run FontSize ="30" Foreground ="SteelBlue" Text ="SteelBlue" />

</ TextBlock >

< TextBlock VerticalAlignment ="Center" TextAlignment ="Center" LineHeight ="10" LinestackingStrategy ="BlockLineHeight" Width ="200" textwrapping ="Wrap" >

< Run FontSize ="20" Foreground ="Red" Text ="RedRedRedRedRedRedRedRedRed" />

< LineBreak />

< Run Foreground ="Green" Text ="Green" />

< LineBreak />

< Run FontSize ="30" Foreground ="Blue" Text ="Blue" />

</ TextBlock >

</ StackPanel >

</ UserControl >

6、TextBox.xaml

< UserControl x:Class ="Silverlight20.Control.TextBox"

xmlns ="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x ="http://schemas.microsoft.com/winfx/2006/xaml" >

< StackPanel HorizontalAlignment ="Left" Width ="200" >

<!--

Text - TextBox内显示的值

BorderThickness - 边框的宽度（像素值：上下左右；左右,上下；左,上,右,下）

BorderBrush - 边框的颜色

-->

< TextBox Text ="红色框绿色底蓝色字（真难看）" BorderBrush ="Red" BorderThickness ="1,5" Background ="Green" Foreground ="Blue" Margin ="6" />

<!--

IsReadOnly - 是否只读

-->

< TextBox Text ="只读TextBox" IsReadOnly ="True" Margin ="6" />

<!--

AcceptsReturn - 是否允许输入回车

HorizontalScrollBarVisibility - 水平滚动条的显示状态

VerticalScrollBarVisibility - 垂直滚动条的显示状态

Auto - 自动根据TextBox控件的宽和高，以及其内容的宽和高，来决定是否显示滚动条

disabled - 不显示，但是可以通过键盘或鼠标在显示内容中的移动或拖动操作，来看到被遮挡的内容

Hidden - 不显示，而且无法看到被遮挡的内容

Visible - 显示滚动条

-->

< TextBox Height ="50" AcceptsReturn ="True" VerticalScrollBarVisibility ="Auto" Margin ="6"

Text ="多行文本框1 多行文本框2 多行文本框3 多行文本框4 多行文本框5 多行文本框6" />

<!--

SelectionChanged - 选中的文本内容发生变化时所触发的事件

-->

< TextBox Height ="50" AcceptsReturn ="False" Margin ="5" SelectionChanged ="TextBox_SelectionChanged"

Text ="相应选中事件多行文本框1 多行文本框2 多行文本框3" />

< TextBlock Margin ="5" >

< Run > 选中的文本为： </ Run >

< LineBreak />

< Run x:Name ="lblMsg" ></ Run >

</ TextBlock >

</ StackPanel >

</ UserControl >

TextBox.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 TextBox : UserControl

{

public TextBox()

{

InitializeComponent();

}

private void TextBox_SelectionChanged(object sender, RoutedEventArgs e)

{

lblMsg.Text = ((System.Windows.Controls.TextBox)sender).SelectedText;

}

7、ToggleButton.xaml

< UserControl x:Class ="Silverlight20.Control.ToggleButton"

xmlns ="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x ="http://schemas.microsoft.com/winfx/2006/xaml" >

< StackPanel HorizontalAlignment ="Left" Width ="300" >

<!--

Content - ToggleButton上显示的内容

Click - ToggleButton的单击事件

Cursor - 鼠标移动到ToggleButton上面时，鼠标指针的样式

Arrow - 箭头

Hand - 手形

Wait - 沙漏

IBeam - “I”字形

Stylus - 点

Eraser - 橡皮

None - 无

-->

< ToggleButton x:Name ="tbtn1" Content ="红色的两状态的ToggleButton" Cursor ="IBeam" Background ="Red" Margin ="5" />

<!--

IsThreeState - 是否是有3个状态的ToggleButton

false - 通常的两状态。默认值

true - 有3个状态，分别为：true, false, null。也就是说 ToggleButton.IsChecked 是 bool? 类型

Checked - ToggleButton的IsChecked变为true时所触发的事件

Unchecked - ToggleButton的IsChecked变为false时所触发的事件

Indeterminate - ToggleButton的IsChecked变为null时所触发的事件

-->

< ToggleButton x:Name ="tbtn2" Content ="红色的三状态的ToggleButton" Background ="Red" IsThreeState ="True" Margin ="5" />

<!--

IsEnabled - ToggleButton是否有效

-->

< ToggleButton x:Name ="tbtn3" Content ="无效的ToggleButton" IsEnabled ="False" Margin ="5" />

<!--

ToggleButton.Content - ToggleButton上显示的内容

ClickMode - 触发单击事件的类型 [System.Windows.Controls.ClickMode枚举]

ClickMode.Press - 鼠标左键单击

ClickMode.Release - 鼠标左键单击并放开

ClickMode.Hover - 鼠标经过

-->

< ToggleButton x:Name ="tbtn4" ClickMode ="Release" Margin ="5" >

< ToggleButton.Content >

< Image Source ="/Silverlight20;component/Images/logo.jpg" />

</ ToggleButton.Content >

</ ToggleButton >

< Button Content ="各个ToggleButton的选中状态" HorizontalAlignment ="Left" Click ="Button_Click" Margin ="5" />

</ StackPanel >

</ UserControl >

ToggleButton.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 ToggleButton : UserControl

{

public ToggleButton()

{

InitializeComponent();

}

private void Button_Click(object sender, RoutedEventArgs e)

{

HtmlWindow html = HtmlPage.Window;

html.Alert(string.Format("tbtn1: {0}/r/ntbtn2: {1}/r/ntbtn3: {2}/r/ntbtn4: {3}",

tbtn1.IsChecked, tbtn2.IsChecked, tbtn3.IsChecked, tbtn4.IsChecked));

}

OK
[源码下载]

稳扎稳打Silverlight(6) - 2.0控件之ScrollViewer, Slider, StackPanel, TabControl, TextBlock, TextBox, ToggleButton

相关推荐