首页 > 代码库 > 使用Coding4Fun工具包

使用Coding4Fun工具包

2024-07-28 00:47:15   223人阅读

Coding4Fun是一款很受WP开发者喜爱的开源类库，对于开发者来说，Coding4Fun上手很简单。只要从CodePlex下载Coding4Fun工具包，下载完成后，解压文件到一个文件夹中，里面有4个dll文件，列表如下：

Coding4Fun工具包

新建一个Windows Phone 7项目，然后右键“引用”添加dll引用：

加dll引用

ProgressOverlay 动画

添加dll引用之后，我们就可以开始了,当我的RSS正在下载的时候需要一个ProgressOverlay动画或者“Loading Screen”。

Loading Screen

在你需要控件的任何页面中添加以下命名空间：

  1. xmlns:Controls="clr-namespace:Coding4Fun.Phone.Controls;  
  2. assembly=Coding4Fun.Phone.Controls" 

 

  1. <Controls:ProgressOverlay Name="progressOverlay" > 
  2.     <Controls:ProgressOverlay.Content> 
  3.         <TextBlock>Loading</TextBlock> 
  4. </Controls:ProgressOverlay.Content> 
  5. </Controls:ProgressOverlay> 

现在有了一个非常漂亮的加载屏幕了，当然在ProgressOverlay里面如果你是用MVVM或其他类似模型你要添加Visibility属性，当数据加载完成后要去关闭它。

关于对话框

现在我需要一个界面漂亮且具备功能强大的关于对话框，例如：如果他们点击我的twitter 、个人主页、E-mail 来发送相应的任务。

关于对话框

只需要一下几行代码就行了：

  1. var p = new AboutPrompt();  
  2. p.VersionNumber = "2.0";  
  3. p.Show("Michael  
  4. Crump", "@mbcrump",  
  5. "michael@michaelcrump.net", @http://michaelcrump.net/); 

 

一个漂亮简洁的“关于”对话框只要几行代码就可以实现了。

输入框

Coding4Fun还带有一个漂亮可爱的输入提示框从用户抓取信息。

Coding4Fun中的输入框 Coding4Fun中的输入框

实现的代码也非常简单：

  1. InputPrompt input = new 
  2. InputPrompt();  
  3. input.Completed += (s, e) =>                        
  4. {                            
  5.     MessageBox.Show(e.Result.ToString());                     
  6. };  
  7. input.Title = "InputBox";  
  8. input.Message = "What  
  9. does a \"Developer Large\" T-Shirt Mean? ";  
  10. input.Show(); 

 

PhoneHelper类

我非常喜欢PhoneHelper类，因为它让你很容易从WMAppManifest.xml文件获取数据，例如：从WMAppManifest.xml获取当前应用程序的版本。

PhoneHelper类

只需以下这句代码就可以了：

  1. PhoneHelper.GetAppAttribute("Version"); 

 

当然你需要添加以下这句命名空间的引用：

  1. using Coding4Fun.Phone.Controls.Data; 

 

如果没有一个强大的转换器你可能不那么容易去展示一些cool的控件。BooleanToVisibility 转换器可以将Boolean类型转换成Visibility类型值。

如勾选CheckBox的时候显示一个TextBox时就是一个好例子。

Coding4Fun项目实例 Coding4Fun项目实例

代码如下：

  1. <phone:PhoneApplicationPage.Resources> 
  2.     <Converters:BooleanToVisibilityConverter x:Key="BooleanToVisibilityConverter"/> 
  3. </phone:PhoneApplicationPage.Resources> 
  4. <CheckBox x:Name="checkBox"/> 
  5. <TextBlock Text="Display Text" Visibility="{Binding ElementName=checkBox, Path=IsChecked, Converter={StaticResource BooleanToVisibilityConverter} }"/> 

RoundButton

 

Coding4Fun 工具包提供了RoundButton and RoundToggleButton 控件，RoundToggleButton是一个UI组件，源自CheckBox控件并且暴露了一些额外的依赖属性，正如它名字所说的。这是一种扩展圆形的切换按钮且有自动反向图像的支持。RoundButton控件是一个圆形的且提供自动反向图像支持的扩展按钮

 

在开始使用RoundButton 和 RoundToggleButton控件之前我们需要添加Coding4Fun.Phone.Controls.dll的引用

第一步：添加“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工具包


联系
我们