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

Love The Way You Lie 2022-05-15 19:24 227阅读 0赞

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

## 信息显示控件 ##

## TextBlock ##

[![image][]][image 1]

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

## Label ##

[![image][image 2]][image_image 2]

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 ##

[![image][image 3]][image_image 3]

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

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

## ToolTipService ##

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

## Calendar ##

[![image][image 4]][image_image 4]

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

<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 ##

[![image][image 5]][image_image 5]

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

## PasswordBox ##

[![image][image 6]][image_image 6]

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

## AutoCompleteBox ##

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

[![image][image 7]][image_image 7]

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

//创′建¨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 ##

[![image][image 8]][image_image 8]

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

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

[image]: /images/20220503/e42b8c195bed463b9995b2be815d6afb.png
[image 1]: http://images.cnblogs.com/cnblogs_com/TerryFeng/WindowsLiveWriter/Silverlight_AF85/image_2.png
[image 2]: http://images.cnblogs.com/cnblogs_com/TerryFeng/WindowsLiveWriter/Silverlight_AF85/image_thumb_1.png
[image_image 2]: /images/20220503/e371f56d9d754f2e804b5d1f3c379f1a.png
[image 3]: http://images.cnblogs.com/cnblogs_com/TerryFeng/WindowsLiveWriter/Silverlight_AF85/image_thumb_2.png
[image_image 3]: /images/20220503/f881f7ada1be4728a9a8d5f6c4980ec8.png
[image 4]: http://images.cnblogs.com/cnblogs_com/TerryFeng/WindowsLiveWriter/Silverlight_AF85/image_thumb_3.png
[image_image 4]: /images/20220503/f62934ed72a84f54abc41844364ce656.png
[image 5]: http://images.cnblogs.com/cnblogs_com/TerryFeng/WindowsLiveWriter/Silverlight_AF85/image_thumb_6.png
[image_image 5]: /images/20220503/0fc705a42bcf434daefec81b85af6958.png
[image 6]: http://images.cnblogs.com/cnblogs_com/TerryFeng/WindowsLiveWriter/Silverlight_AF85/image_thumb_7.png
[image_image 6]: /images/20220503/821d2de154904684bd6af9dd29f0bc56.png
[image 7]: http://images.cnblogs.com/cnblogs_com/TerryFeng/WindowsLiveWriter/Silverlight_AF85/image_thumb_8.png
[image_image 7]: /images/20220503/8b2c51d88ba0403eb5459428fc4fe069.png
[image 8]: http://images.cnblogs.com/cnblogs_com/TerryFeng/WindowsLiveWriter/Silverlight_AF85/image_thumb_5.png
[image_image 8]: /images/20220503/dd023de5200143bfaf6ad3599b7a8a99.png