WPF 与Surface 2.0 SDK 亲密接触–LibraryBar 篇
2011-08-07 13:58
399 查看
LibraryBar 介绍
与LibraryStack 类似LibraryBar 也属于ItemsControl,在LibraryBar 里的组件会以水平平铺方式展示,并且也可以对其中的组件进行按组分类。同样LibraryBar 也是默认支持拖拽操作。下面的例子将通过LibraryBar 展示一组Sample 图片。首先,仍然可以使用DataTemplate 作为LibraryBar 的样式模板用来绑定图片资源。接下来在Grid 中添加LibraryBar 控件,并设置好ItemTemplate 数据模板。我们可以通过修改Rows 参数调整LibraryBar 中组件显示的行数。
<s:SurfaceWindow x:Class="Demo.SurfaceWindow1" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:s="http://schemas.microsoft.com/surface/2008" Title="LibraryBar" > <s:SurfaceWindow.Resources> <DataTemplate x:Key="LibraryBarItemTemplate"> <Image Source="{Binding}"/> </DataTemplate> </s:SurfaceWindow.Resources> <Grid> <s:LibraryBar x:Name="mLibraryBar" Rows="3" ItemTemplate="{StaticResource LibraryBarItemTemplate}"/> </Grid> </s:SurfaceWindow>为LiraryBar 添加图片数据源。注意,同样不能将图片string[] 数组直接赋给LiraryBar,需要借助ObservableCollection。
string imagesPath = @"C:\Users\Public\Pictures\Sample Pictures\"; try { string[] files = System.IO.Directory.GetFiles(imagesPath, "*.jpg"); ObservableCollection<string> items = new ObservableCollection<string>(files); mLibraryBar.ItemsSource = items; } catch (System.IO.DirectoryNotFoundException) { // Error info. }默认两行模式:
![](http://images.cnblogs.com/cnblogs_com/gnielee/201108/201108071357207968.png)
三行模式:
![](http://images.cnblogs.com/cnblogs_com/gnielee/201108/201108071357405539.png)
LibraryBar 分组
接下来我们将图片进行分组操作,先增加一个PhotoAlbum 类,其中包含图片的路径、标签、组名信息。class PhotoAlbum { private string label; private string fileName; private string groupName; private BitmapImage bitmap; public PhotoAlbum(string fileName, string label, string groupName) { this.fileName = fileName; this.label = label; this.groupName = groupName; this.bitmap = new BitmapImage(new Uri(fileName, UriKind.Absolute)); } public string Label { get { return label; } } public string FileName { get { return fileName; } } public string GroupName { get { return groupName; } } public BitmapSource Bitmap { get { return bitmap; } } }对DataTemplate 稍作修改,添加图片标签<Label>。
<s:SurfaceWindow.Resources> <DataTemplate x:Key="LibraryBarItemTemplate"> <Grid> <Image Source="{Binding Bitmap}"/> <Label FontSize="14" Content="{Binding Label}"/> </Grid> </DataTemplate> </s:SurfaceWindow.Resources> <Grid> <s:LibraryBar x:Name="mLibraryBar" Rows="2" ItemTemplate="{StaticResource LibraryBarItemTemplate}"/> </Grid>依据GroupName 作为分组的方式,为GroupDescriptions 默认的集合浏览方式添加PropertyGroupDescription 对象,并赋给ItemsSource 属性。
ObservableCollection<PhotoAlbum> items = new ObservableCollection<PhotoAlbum>(); string imagesPath = @"C:\Users\Public\Pictures\Sample Pictures\"; items.Add(new PhotoAlbum(imagesPath + "Hydrangeas.jpg", "Hydrangeas", "Nature")); items.Add(new PhotoAlbum(imagesPath + "Lighthouse.jpg", "Lighthouse", "Nature")); items.Add(new PhotoAlbum(imagesPath + "Tulips.jpg", "Tulips", "Nature")); items.Add(new PhotoAlbum(imagesPath + "Jellyfish.jpg", "Jellyfish", "Animal")); items.Add(new PhotoAlbum(imagesPath + "Koala.jpg", "Koala", "Animal")); items.Add(new PhotoAlbum(imagesPath + "Penguins.jpg", "Penguins", "Animal")); mLibraryBar.ItemsSource = items; ICollectionView defaultView = CollectionViewSource.GetDefaultView(items); defaultView.GroupDescriptions.Add(new PropertyGroupDescription("GroupName"));
![](http://images.cnblogs.com/cnblogs_com/gnielee/201108/201108071358031394.png)
LibraryBar 拖拽
从上面的示例中可以发现,我们无法将图片从LibraryBar 中拖拽出来,当拖拽操作结束后图片会自动返回到LibraryBar。接下来将实现把图片拖拽到ScatterView 控件。首先,对XAML 控件进行下修改,将LibraryBar 放入ScatterView 控件。这里需要将ScatterView 的AllwoDrop 属性设为True,背景也要填充颜色,可设置为Transparent 透明,这样才能保证LibraryBar 中的组件可以拖拽到ScatterView 中。
<Grid> <s:ScatterView x:Name="scatterView" s:SurfaceDragDrop.Drop="scatterView_Drop" AllowDrop="True" Background="Transparent"> <s:ScatterViewItem Width="500" Height="300"> <s:LibraryBar x:Name="mLibraryBar" Rows="2" ItemTemplate="{StaticResource LibraryBarItemTemplate}"/> </s:ScatterViewItem> </s:ScatterView> </Grid>其次,为ScatterView 添加SurfaceDragDrop.Drop 事件用于处理拖拽的操作。在事件触发时,新建一个ScatterViewItem(newItem) 用于装载被拖动的图片组件。将e.Cursor.Data 转化为PhotoAlbum,借助FileName 属性新建MediaElement。将MediaElement(mediaItem)赋给newItem.Content,并通过GetPosition 获取到拖拽动作的位置作为newItem 在ScatterView 中的显示位置。
private void scatterView_Drop(object sender, SurfaceDragDropEventArgs e) { PhotoAlbum data = e.Cursor.Data as PhotoAlbum; ScatterViewItem newItem = new ScatterViewItem(); MediaElement mediaItem = new MediaElement(); mediaItem.Source = new Uri(data.FileName); newItem.Background = Brushes.Transparent; newItem.Content = mediaItem; newItem.Center = e.Cursor.GetPosition(scatterView); scatterView.Items.Add(newItem); }这样我们就实现了将LibraryBar 中的组件拖拽到ScatterView。MSDN 上也提供了文档供大家参考:Using the Microsoft Surface Drag-and-Drop Framework
![](http://images.cnblogs.com/cnblogs_com/gnielee/201108/201108071358157664.png)
相关文章推荐
- WPF 与Surface 2.0 SDK 亲密接触–LibraryBar 篇
- WPF 与Surface 2.0 SDK 亲密接触 - ScatterView 篇
- WPF 与Surface 2.0 SDK 亲密接触 - ScatterView 篇
- WPF 与Surface 2.0 SDK 亲密接触 - ScatterView 数据绑定篇
- WPF 与Surface 2.0 SDK 亲密接触 - ScatterView 数据绑定篇
- WPF 与Surface 2.0 SDK 亲密接触–LibraryStack 篇
- WPF 与Surface 2.0 SDK 亲密接触–LibraryStack 篇
- WPF 与Surface 2.0 SDK 亲密接触 - ScatterView 数据绑定篇
- WPF 与Surface 2.0 SDK 亲密接触 - 图形缩放篇
- WPF 与Surface 2.0 SDK 亲密接触 - 图形缩放篇
- WPF 与Surface 2.0 SDK 亲密接触–LibraryContainer 篇
- WPF 与Surface 2.0 SDK 亲密接触–LibraryContainer 篇
- 接触Surface 2.0 一
- wpf+.net 4.5 surface2.0 = 异步多点触控 时间轴 part1
- 基于.NET 2.0的GIS开源项目SharpMap分析手记(一):第一次亲密接触
- wpf+.net 4.5 surface2.0 = 异步多点触控 时间轴 part2
- wpf+.net 4.5 surface2.0 = 异步多点触控 时间轴 part3
- wpf+.net 4.5 surface2.0 = 异步多点触控 时间轴 part4
- wpf+.net 4.5 surface2.0 = 异步多点触控 时间轴 part7
- 基于.NET 2.0的GIS开源项目SharpMap分析手记(一):第一次亲密接触