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

2016-08-20 11:00:28来源:http://webabcd.blog.51cto.com/1787395/342829作者:webabcd人点击


[索引页][源码下载]
稳扎稳打Silverlight(6) - 2.0控件之ScrollViewer, Slider, StackPanel, TabControl, TextBlock, TextBox, ToggleButton
作者:webabcd介绍Silverlight 2.0 控件一览:ScrollViewer, Slider, StackPanel, TabControl, TextBlock, TextBox, ToggleButton在线DEMOhttp://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[源码下载]

最新文章

123

最新摄影

微信扫一扫

第七城市微信公众平台