AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

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

2017-11-06 1015
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介：
[索引页]
[源码下载]


稳扎稳打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)); 
                } 
        } 
}
 
 
 




     本文转自webabcd 51CTO博客，原文链接：http://blog.51cto.com/webabcd/342829 ，如需转载请自行联系原作者

文章标签：
Windows
关键词：
silverlight tabcontrol
silverlight控件
silverlight scrollviewer
silverlight stackpanel
技术小胖子
目录
相关文章
杰克.陈
Silverlight自定义数据绑定控件应该如何处理IEditableObject和IEditableCollectionView对象
原文:Silverlight自定义数据绑定控件应该如何处理IEditableObject和IEditableCollectionView对象 原创文章，如需转载，请注明出处。   最近在一直研究Silverlight下的数据绑定控件，发现有这样两个接口IEditableObject 和IEditableCollectionView，记录一下结论，欢迎交流指正。
杰克.陈
872 0
技术小甜
|
前端开发
[Silverlight]TextBlock控件全攻略
技术小甜
1080 0
余二五
|
C# .NET 开发框架
《SilverLight2快速入门》之基本控件Button
余二五
1058 0
余二五
|
C# 前端开发 .NET
《SilverLight2快速入门》之基本控件Calendar
余二五
987 0
技术小牛人
|
数据安全/隐私保护
silverlight-带水印的自定义TextBox控件（版本2）
技术小牛人
752 0
科技小能手
|
Web App开发
Silverlight实用窍门系列：39.Silverlight中使用Frame和Page控件制作导航【附带实例源码】
科技小能手
1371 0
科技小能手
Silverlight实用窍门系列：42.读取拖动到控件上的外部txt和jpg文件，多外部文件的拖动
科技小能手
919 0
科技小能手
|
前端开发
Silverlight实用窍门系列：51.Silverlight页面控件的放大缩小、Silverlight和Html控件的互相操作
科技小能手
1058 0
科技小能手
Silverlight实用窍门系列：66.Silverlight的数据模板DataTemplate(二)获取数据模板控件
科技小能手
963 0
科技小能手
|
开发工具
Silverlight实用窍门系列：69.Silverlight的ScrollViewer
科技小能手
989 0

热门文章

最新文章

  • 1
    Silverlight 5 beta新特性探索系列:2.在XAML代码中设置断点和Binding绑定调试【附带源码实例】
  • 2
    Silverlight实用窍门系列：62.Silverlight中的Action动作TargetedTriggerAction、TriggerAction
  • 3
    分享Silverlight新鲜事(11月15日-21日) - PDC 10 Downloader
  • 4
    Silverlight 游戏开发小技巧：血条和进度条
  • 5
    SilverLight Tip 1 : Validation
  • 6
    整理Silverlight资源列表(二)
  • 7
    艾伟：Silverlight 2中实现Deep Zoom
  • 8
    快速浏览Silverlight3 Beta：在线与离线状态检测
  • 9
    游戏人生Silverlight(6) - 贪吃蛇[Silverlight 3.0(c#)]
  • 10
    ArcGIS API for Silverlight 当DataGrid选中项时，地图聚焦弹出窗口，并可以播放音频文件
  • 1
    Silverlight & Blend动画设计系列二：旋转动画（RotateTransform）
    1020
  • 2
    silverlight，WPF动画终极攻略之白云飘，坐车去旅游篇（Blend 4开发）
    1256
  • 3
    silverlight，WPF动画终极攻略之迟来的第三章 动画整合篇（Blend 4开发）
    1151
  • 4
    Silverlight & Blend动画设计系列六：动画技巧（Animation Techniques）之对象与路径转化、波感特效
    1053
  • 5
    Silverlight & Blend动画设计系列五：故事板(StoryBoards)和动画(Animations)
    950
  • 6
    Silverlight & Blend动画设计系列四：倾斜动画（SkewTransform）
    848
  • 7
    Silverlight & Blend动画设计系列三：缩放动画（ScaleTransform）
    942
  • 8
    在Silverlight程序中使用Thread一个很容易被忽略的问题
    751
  • 9
    Silverlight Map 技术点总结
    985
  • 10
    silverlight起步（二）——第一个silverligth
    890

    • 相关电子书

    更多
  • 低代码开发师（初级）实战教程
  • 冬季实战营第三期：MySQL数据库进阶实战
  • 阿里巴巴DevOps 最佳实践手册
    • 下一篇
    手把手教你白嫖阿里云服务器(免费领服务器)