稳扎稳打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, Slider, StackPanel, TabControl, TextBlock, TextBox, 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 >
        
     </ 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 ="带引号的&quot;TextBlock&quot;"   />

         <!--
        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
[源码下载]