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

[索引页]
[源码下载]

[align=center]稳扎稳打Silverlight(6) - 2.0控件之ScrollViewer, Slider, StackPanel, TabControl, TextBlock, TextBox, ToggleButton[/align]

作者：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="带引号的"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
[源码下载]