学步园

[索引页]
[源码下载]

稳扎稳打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">