Silverlight 信息显示与编辑控件示例

最新推荐文章于 2025-12-12 12:01:28 发布

最新推荐文章于 2025-12-12 12:01:28 发布 · 172 阅读

文章标签：

#Silverlight #Windows #Google #UI

[随笔分类][05] Silverlight 专栏收录该内容

19 篇文章

订阅专栏

本文详细介绍Silverlight平台中的多种控件，包括信息显示控件TextBlock和Label、进度条ProgressBar、提示服务ToolTipService、日期选择控件Calendar及DatePicker、以及信息编辑控件如TextBox、PasswordBox和AutoCompleteBox等。通过丰富的示例代码展示了各控件的基本用法和关键属性。

Silverlight 真是一个不错的开发平台，想到即将发布的Silverlight 4 更是增加了像去学习他的兴趣。

信息显示控件

TextBlock

信息显示第一个要说的一定是TextBlock，他是最基础的文本显示块控件，通过属性可以更改文字的字体，大小，颜色、下划线、粗体等等

<TextBlock Text="信息显示控件示例-TextBlock" Margin="10,5,0,0"
               FontSize="18" FontWeight="Bold" Foreground="#FFBE4D4D"/>

<TextBlock Canvas.Left="10" Canvas.Top="160" FontStretch="UltraExpanded">
        文本内容</TextBlock>

Label

Label 标签控件在功能上和TextBlock类似用来显示文本，但文本设置属性是Content，而TextBlock 是Text属性

当你从工具箱中拖动进来一个Label 控件后，Visual Studio 会为你添加一个空间的引用

<UserControl

xmlns:dataInput="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Data.Input">

 <dataInput:Label Background="Blue" Foreground="White" FontWeight="Bold" 
            Content="Silverlight " FontSize="60" />

ProgressBar

进度条控件，用来提示用户当前程序正在运行的进度。

<ProgressBar Name="indeterminateProgressBar" IsIndeterminate="True"
                 HorizontalAlignment="Left" Height="20" Width="260"
                 Margin="10,5,0,0" />

IsIndeterminate="True" 这个属性很重要，用来设置进度条是否要呈现进度，True代表不呈现进度，而是反复的播放动画。

ToolTipService

ToolTipService 用来为其他控件添加提示，这个提示可以是文本也可以是任何XAML元素，图片、链接都可以作为提示的一部分。

<Image Source="/Images/logo.jpg" Margin="10" 
           ToolTipService.Placement="Mouse"
           ToolTipService.ToolTip="这a是?Silverlight标ê志?！?"/>

<Button Width="320" Height="80" Content="这a是?Silverlight标ê志?！?" 
               FontSize="30" Canvas.Top="110" Canvas.Left="20" >
        <ToolTipService.ToolTip>
            <Image Source="/Images/logo.jpg"/>
        </ToolTipService.ToolTip>
    </Button>

Calendar

日期选择控件，通过触发事件，可以获得选择的日期，并处理。

<UserControl xmlns:basics="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls"

<basics:Calendar Name="calendar1" Grid.Row="1" 
                     HorizontalAlignment="Left" Margin="10,0,0,0" >
    </basics:Calendar>

    //选择日期发生变化时引发事件

    this.calendar1.SelectedDatesChanged +=
        new EventHandler<SelectionChangedEventArgs>
            (calendar1_SelectedDatesChanged);

// 选?择?的?日?期ú发￠生ú变?化ˉ
private void calendar1_SelectedDatesChanged(object sender
    , SelectionChangedEventArgs e)
{
    this.tbSelectedCanlendar.Text = "选?择?的?日?期ú是?：o"
        + calendar1.SelectedDate.ToString();
}

信息编辑控件

TextBox

TextBox 最熟悉不过的文本输入框，可以输入单行文本，也可以输入多行文本。

 <TextBox x:Name="TextBox"  Text="文?字?内ú容Y"
                 TextChanged="TB_TextChanged"
                 IsReadOnly="False" HorizontalAlignment="Left" 
                 Margin="20,5,0,0" Width="300" />

PasswordBox

密码输入框，和TextBox一样，只是不显示你输入的内容是什么

<PasswordBox Name="passwordBox2" Password="密ü码?内ú容Y" 
                     HorizontalAlignment="Left" Width="300" Margin="10,10,0,0">   
        </PasswordBox>

AutoCompleteBox

示例取自：Silverlight 开发详解一书

自动完成窗口，输入文字的第一个字符，就会匹配存储好的字符串，给出提示下拉列表框，像Google输入框一样

 <TextBlock Text="AutoCompleteBox控件演示" FontSize="18" Margin="5"/>
        <StackPanel x:Name="Layou" Orientation="Horizontal">
            <TextBlock Text="请输入关键字:" FontSize="15" Margin="5"/>
            <controls:AutoCompleteBox x:Name="acBox" 
                                   FontSize="15" Width="265"/>
        </StackPanel>

 //创′建¨AutoCompleteBox数y据Y源′集ˉ合?
  List<string> items = new List<string>();
  items.Add("Silverlight 3 发￠布?了?");
  items.Add("Silverlight是?新?一?代úRIA技?术?！?");
  items.Add("Silverlight 3支§持?H.264和íAAC格?式?！?");
  items.Add("Silverlight 3支§持?3-D特?效§！?");
  //绑ó定¨数y据Y源′
  acBox.ItemsSource = items;

DatePicker

DatePicker和Calendar 控件所要达到的目的是一样的，都是用于让用户输入日期，但是DatePicker控件用的比较多，因为他很节省UI布局空间。

<basics:DatePicker Name="datePicker2" Grid.Row="5" Width="200" 
                       HorizontalAlignment="Left"  Margin="10,5,0,0" 
                       SelectedDateFormat="Long"/>
SelectedDateFormat="Long" 这个属性很重要，他用来设置文本框中的日期格式，是简单的还是复杂的