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

[索引页]
[×××]

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

作者：webabcd


介绍
Silverlight 2.0 控件一览：ScrollViewer, Slider, StackPanel, TabControl, TextBlock, TextBox, ToggleButton 


在线DEMO
http://webabcd.blog.51cto.com/1787395/342779


示例
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="带引号的"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
[×××]