在WP7中使用Coding4Fun Button控件
這篇文章將詳細討論Coding4Fun工具包中的Button控件。講解這里面的主要特性及現有的公共API,并給出不同情況的例子。
Coding4Fun工具包提供了RoundButton and RoundToggleButton控件,RoundToggleButton是一個UI組件,源自CheckBox控件并且暴露了一些額外的依賴屬性,正如它名字所說的。這是一種擴展圓形的切換按鈕且有自動反向圖像的支持。RoundButton控件是一個圓形的且提供自動反向圖像支持的擴展按鈕。
在開始使用RoundButton和RoundToggleButton控件之前我們需要添加Coding4Fun.Phone.Controls.dll的引用。
你可以從這個地方下載:Coding4Fun Toolkit
首先我們需要添加“C4F”的前綴聲明,確保你的頁面聲明了“c4fToolkit” 的命名空間。
- xmlns:c4f="clr-namespace:Coding4Fun.Phone.Controls;assembly=Coding4Fun.Phone.Controls"
- <c4f:RoundButton/>
- <c4f:RoundToggleButton/>
RoundToggleButton控件從CheckBox繼承了所有的屬性和事件,RoundButton 控件去Button控件中繼承了所有的屬性和事件。
Content屬性
這個屬性來來自父類用戶設置 RoundToggleButton/RoundButton的內容。
ImageSource屬性
ImageSource是一個ImageSource類型的依賴屬性,它用戶設置或獲取RoundToggleButton/RoundButton控件的圖片。
Orientation屬性
Orientation是一個Orientation類型的依賴屬性,它用于設置或獲取RoundToggleButton/RoundButton控件的方向。
Examples
下面的例子我將使用2個圖標。
注:圖標會自動根據Light主題的變化而適當的變化。
Example1:RoundButton示例
這個例子演示了如何設置RoundButton控件常用屬性,添加如下xaml代碼:
- <StackPanel Orientation="Horizontal">
- <c4f:RoundButton FontSize="18" Content="OK" BorderBrush="CornflowerBlue" />
- <c4f:RoundButton FontSize="48" Content="48" Background="CornflowerBlue" />
- <c4f:RoundButton Foreground="CornflowerBlue" FontSize="36" Content="36"/>
- <c4f:RoundButton ImageSource="Images/appbar.delete.rest.png" Content="Delete"/>
- </StackPanel>
下面分別是在Dark and Light themes中的結果。
Example2:RoundButton Orientation and ImageSource屬性的使用
- <c4f:RoundButton Orientation="Horizontal" ImageSource="Images/appbar.feature.search.rest.png" Content="horizontal text"/>
Example3. RoundToggleButton控件示例
這個例子演示了如何設置RoundToggleButton控件常用屬性,添加如下xaml代碼:
- <StackPanel Orientation="Horizontal">
- <c4f:RoundToggleButton FontSize="18" Content="ok" BorderBrush="CornflowerBlue" />
- <c4f:RoundToggleButton FontSize="48" Content="48" Background="CornflowerBlue" />
- <c4f:RoundToggleButton Foreground="CornflowerBlue" FontSize="36" Content="36" />
- <c4f:RoundToggleButton ImageSource="Images/appbar.delete.rest.png" Content="DELETE"/>
- </StackPanel>
Example4: RoundToggleButton Orientation and ImageSource屬性的使用
- <c4f:RoundToggleButton Orientation="Horizontal" ImageSource="Images/appbar.feature.search.rest.png" Content="horizontal text"/>
Example5: RoundButton and RoundToggleButton控件的禁用
- <c4f:RoundButton x:Name="btn" IsEnabled="False" Orientation="Horizontal" ImageSource="Images/appbar.delete.rest.png"
- Content="disabled button" />
從Coding4fun Toolkit可以深入了解RoundButton/RoundToggleButton控件。
原文鏈接:http://www.cnblogs.com/youhui/archive/2012/03/21/2409091.html
【編輯推薦】
- 在WP開發中使用Coding4Fun工具包
- WP7開發中Coding4Fun的五種彈出框介紹
- 開源類庫Coding4Fun中的ToastPrompt控件介紹
- ToastPrompt在Windows Phone開發中的用法