开发者社区> powertoolsteam> 正文

Silverlight 版 C1OutlookBar 初体验

简介: ComponentOne 2011 v3版本中新增了Silverlight版本和WPF版本的c1OutlookBar控件。它对应的是WinForms版本的C1NavBar。因为“OutlookBar”更贴切也更准确,所以我们在XAML平台下使用了这个名字。
+关注继续查看

ComponentOne 2011 v3版本中新增了Silverlight版本和WPF版本的c1OutlookBar控件。它对应的是WinForms版本的C1NavBar。因为“OutlookBar”更贴切也更准确,所以我们在XAML平台下使用了这个名字。有Outlook2007和2010样式。

clip_image002

OutlookBar类似一个TabControl,用户可以选择Content panel中的任何一个Item。你可以按照优先级为它们建立分类。OutlookBar可以通过拖拽操作,自由的收起或者展开各个项目。这样用户就可以方便的定制那些项目显示出来,哪些最小化到底部的菜单里。如图所示:

clip_image003

整个控件可以最小化到最左边或者最右边。当你不需要导航栏的时候,可以轻松的隐藏它,而将有限的屏幕空间用于显示其他UI。

C1OutlookBar支持14种不同的外观样式。其实基本上所有的ComponentOne Studio的控件都可以通过设置几个Brush属性来适应各种样式风格。这都要感谢ClearStyle技术。

clip_image005

 

控件结构

以一个最基本的例子来说,我们可以通过几行简单的XAML代码创建一个C1OutlookBar。每一个Item包含4个主要属性:Header,Content,LargeIcon以及SmallIcon。如下图所示:

clip_image007

此外,还需要指定哪些内容在控件收起的时候可以显示,这可以通过定义icon templates实现。下面的XAML代码是上图C1OutlookBar的全部代码:

<c1:C1OutlookBar Name="c1OutlookBar1" ExpandedWidth="170" IsExpanded="True"> 
<!-- content shown when the bar is collapsed -->
<c1:C1OutlookBar.CollapsedContent>
<c1:C1LayoutTransformer>
<c1:C1LayoutTransformer.LayoutTransform>
<RotateTransform Angle="270" />
</c1:C1LayoutTransformer.LayoutTransform>
<TextBlock FontSize="13" TextAlignment="Center" VerticalAlignment="Center"
Text
="Navigation Pane" />
</c1:C1LayoutTransformer>
</c1:C1OutlookBar.CollapsedContent>
<!-- define icon templates -->
<c1:C1OutlookBar.LargeIconTemplate>
<DataTemplate>
<Image Source="{Binding}" Width="24" Height="24" />
</DataTemplate>
</c1:C1OutlookBar.LargeIconTemplate>
<c1:C1OutlookBar.SmallIconTemplate>
<DataTemplate>
<Grid Height="24">
<Image Source="{Binding}" Width="16" Height="16" />
</Grid>
</DataTemplate>
</c1:C1OutlookBar.SmallIconTemplate>
<!-- items -->
<c1:C1OutlookItem Header="Home" SmallIcon="Images/16/Home.png" LargeIcon="Images/24/Home.png">
<TextBlock Text="My Home" />
</c1:C1OutlookItem>
<c1:C1OutlookItem Header="Files" SmallIcon="Images/16/Cab1.png" LargeIcon="Images/24/Cab1.png">
<TextBlock Text="My Files" />
</c1:C1OutlookItem>
<c1:C1OutlookItem Header="Sales" SmallIcon="Images/16/ChartPie.png" LargeIcon="Images/24/ChartPie.png">
<TextBlock Text="My Sales" />
</c1:C1OutlookItem>
<c1:C1OutlookItem Header="History" SmallIcon="Images/16/History.png" LargeIcon="Images/24/History.png">
<TextBlock Text="My History" />
</c1:C1OutlookItem>
<c1:C1OutlookItem Header="Settings" SmallIcon="Images/16/User.png" LargeIcon="Images/24/User.png">
<TextBlock Text="My Settings" />
</c1:C1OutlookItem>
</c1:C1OutlookBar>



 

页面排布

当C1OutlookBar收起的时候,中间的content区域会自动展开,充满空余的界面。尤其是当把C1OutlookBar放在Grid中时,ColumnDefinition的宽度设置为Auto时,该功能支持的很好。同时初始化ExpandedWidth也很重要,当然了,这个属性可以在runtime修改。代码如下:

<Grid x:Name="LayoutRoot"> 
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<c1:C1OutlookBar ExpandedWidth="200" IsExpanded="True" />
</Grid>



 

clip_image001

 

工作在MVVM模式下

C1OutlookBar是一个ItemsControl。我们可以将ItemsSource设置给一个由ViewModel定义的列表。这种用例下,我们还可以设置ItemTemplate,ContentTemplate。LargeIconTemplate以及SmallIconTemplate。

 

关于更多的功能可以下载: Studio for SilverlightStudio for WPF

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
Unity 开发入门指南
学习 Unity 开发接近一年了,从开始对 Unity 一无所知,到现在能模仿制作出一个完整游戏,对个人成长来说,也算是一个不大不小的里程碑。这篇是对自己学习的总结与回顾,希望对 Unity 初学者有所帮助。
1076 0
MEF 插件式开发 - WPF 初体验
原文:MEF 插件式开发 - WPF 初体验 目录 MEF 在 WPF 中的简单应用 加载插件 获取元数据 依赖注入 总结 MEF 在 WPF 中的简单应用 MEF 的开发模式主要适用于插件化的业务场景中,C/S 和 B/S 中都有相应的使用场景,其中包括但不限于 ASP.NET MVC 、ASP WebForms、WPF、UWP 等开发框架。
926 0
+关注
powertoolsteam
经过30年来在控件领域的不断积累,葡萄城已经成为全球最大的控件提供商,旗下多款产品在国际软件行业屡获殊荣,并且在全球被数十万家企业、学校和政府机构等选用。
文章
问答
文章排行榜
最热
最新
相关电子书
更多
ios开发者必读咨讯
立即下载
蚂蚁金服高级开发工程师萧恺:IDEA 插件开发入门教程
立即下载
低代码开发师(初级)实战教程
立即下载