一步一步學Silverlight :使用控件模板

作者: TerryLee  來源: 博客園  發布時間: 2008-10-08 18:06  閱讀: 13516 次  推薦: 0   原文鏈接   [收藏]  
 

概述

Silverlight 2 Beta 1版本發布了,無論從Runtime還是Tools都給我們帶來了很多的驚喜,如支持框架語言Visual Basic, Visual C#, IronRuby, Ironpython,對JSON、Web Service、WCF以及Sockets的支持等一系列新的特性。《一步一步學Silverlight 2系列》文章帶您快速進入Silverlight 2開發。

本文為系列文章第九篇,主要介紹如何使用控件模板定制控件的觀感。Silverlight提供了極其強大的功能,允許用戶完全定制控件的外觀。

定制控件內容

在Silverlight中,WatermarkedTextBox控件可以為用戶的輸入提供一段提示信息,如果只是簡單的一點文字信息,有時候未免顯得單調,如果加上相應的圖片說明效果會更好,如下圖所示的一個簡單的用戶登錄界面:

TerryLee_Silverlight2_0045

這樣看起來界面顯的就生動多了,XAML聲明如下:

<Canvas Background="#46461F">
    <WatermarkedTextBox x:Name="UserName" Canvas.Top="30" Canvas.Left="50"
                        Width="320" Height="48">
        <WatermarkedTextBox.Watermark>
            <StackPanel Width="320" Height="48" Orientation="Horizontal">
                <Image Source="admin.png" HorizontalAlignment="Left"></Image>
                <TextBlock Text="請輸入用戶名" VerticalAlignment="Center" Foreground="#999999"/>
            </StackPanel>
        </WatermarkedTextBox.Watermark>
    </WatermarkedTextBox>
    
    <WatermarkedTextBox x:Name="Password" Canvas.Top="110" Canvas.Left="50"
                        Width="320" Height="48" HorizontalAlignment="Left">
        <WatermarkedTextBox.Watermark>
            <StackPanel Width="320" Height="48" Orientation="Horizontal">
                <Image Source="lock.png" HorizontalAlignment="Left"></Image>
                <TextBlock Text="請輸入密碼" VerticalAlignment="Center" Foreground="#999999"/>
            </StackPanel>
        </WatermarkedTextBox.Watermark>
    </WatermarkedTextBox>
    
    <Button Canvas.Top="180" Canvas.Left="100"
            Width="120" Height="48">
        <Button.Content>
            <StackPanel Orientation="Horizontal">
                <Image Source="apply.png" HorizontalAlignment="Left"></Image>
                <TextBlock Text="登 錄" VerticalAlignment="Center" Margin="10 0 0 0"></TextBlock>
            </StackPanel>
        </Button.Content>
    </Button>
</Canvas>

很多控件都有Content或者Text屬性,我們完全可以充分發揮自己的想象力去進行定制,定制后控件仍然具有原來的功能行為,如上面的示例,當輸入用戶名控件獲得焦點時文字和圖片都將消失:

TerryLee_Silverlight2_0046

0
0
 
 
 

文章列表

全站熱搜
創作者介紹
創作者 大師兄 的頭像
大師兄

IT工程師數位筆記本

大師兄 發表在 痞客邦 留言(0) 人氣()