WPF is in close contact with the Surface 2.0 SDK-LibraryBar

LibraryBar Introduction

Similar to LibraryStack, LibraryBar also belongs to ItemsControl. Components in LibraryBar are displayed horizontally and grouped. Similarly, LibraryBar supports drag and drop operations by default.

The following example shows a group of Sample images through LibraryBar. First, you can use DataTemplate as the LibraryBar style template to bind image resources. Next, add the LibraryBar control to the Grid and set the ItemTemplate data template. You can modify the Rows parameter to adjust the number of lines displayed by the component in 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>

Add image data sources for LiraryBar. Note that the image string [] array cannot be directly assigned to the LiraryBar, And the ObservableCollection must be used.

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.}

The default two-line mode:

Three-line mode:

LibraryBar Group

Next, we will group the images and add a PhotoAlbum class that contains the path, label, and group name information of the images.

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; }    }}

Modify the DataTemplate and add the image Label <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>

Add the PropertyGroupDescription object for GroupDescriptions's default set browsing mode based on GroupName as the grouping method and assign it to the ItemsSource attribute.

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"));

LibraryBar drag

As shown in the preceding example, you cannot drag an image from the LibraryBar. After the drag operation ends, the image is automatically returned to the LibraryBar. Drag the image to the ScatterView control.

First, modify the XAML control and put LibraryBar into the ScatterView control. Here we need to set the AllwoDrop attribute of ScatterView to True, and the background color to Transparent, so that the components in LibraryBar can be dragged to 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>

Next, add the SurfaceDragDrop. Drop event to ScatterView to process the drag operation. When an event is triggered, a new ScatterViewItem (newItem) is created to load the dragged image component. Convert e. Cursor. Data to PhotoAlbum and create a MediaElement using the FileName attribute. Grant MediaElement (mediaItem) to newItem. Content, and get the position of the drag and drop action through GetPosition as the position where newItem is displayed in 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);}

In this way, the components in LibraryBar are dragged to ScatterView. MSDN also provides documents for your reference: Using the Microsoft Surface Drag-and-Drop Framework