Sergiy Baydachnyy

Blog about technologies

Archive for August 25th, 2015

UWP: How to implement Drag and Drop functionality

leave a comment »

One more new feature, which is available for Windows 10 developers, is Drag and Drop support. Starting with Windows 10 you can implement Drag and Drop functionality between UI parts of your application or use external sources/targets including Win 32 applications.

Let’s start with Drag operation. In order to show how Drag operation works, I simply added an image from the application package to the main page.

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"> <Image Source="Assets\drone.jpg" Name="image" CanDrag="True" DragStarting="Image_DragStarting" Margin="100" VerticalAlignment="Top" HorizontalAlignment="Left"></Image> </Grid>

You can see two important attributes there that activate Drag operation: CanDrag and DragStarting. CanDrag attribute is just a flag which enables the feature for all UIElement controls but DragStaring attribute contains name for event handler. Thanks to this event handler you can define any content to drag. In my case I implemented the following handler:

private async void Image_DragStarting(UIElement sender, DragStartingEventArgs args) { List<IStorageItem> files = new List<IStorageItem>(); StorageFile file = await StorageFile.GetFileFromApplicationUriAsync(new Uri("ms-appx:///Assets/drone.jpg")); files.Add(file); args.DragUI.SetContentFromDataPackage(); args.Data.RequestedOperation = DataPackageOperation.Copy; args.Data.SetStorageItems(files); }

In this event handler I used StorageFile class in order to pass my image like a file and thanks to Data property of DragStartingEventArgs parameter I packaged the file to the object of DataPackage class. DataPackage class is very popular among different features in Universal Windows Platform and usually you need to pass it to the operation system and OS allows to select the target application. But in case of Drag functionality user selects the target directly. So, we just need to prepare the DataPackage and that’s all.

Additionally I used two important properties there: DragUI and RequestedOperation. Thanks to the RequestedOperation I can assign the right operation and user should not be able to select anything from system menu – just drag and drop. Thanks to DragUI I can apply the content which will be shown during Drag operation. If you don’t use DragUI property, user will see the same image with the same width and height like in your application. It’s not very cozy to drag a huge image especially if you don’t use RequestedOperation – the system menu will be behind the image. That’s why you can assign any other content using DragUI or use SetContentFromDataPackage method in order to ask API to prepare appropriate icon for you based on content in DataPackage.

Just run the application and drag and drop the image to the file explorer – image will be copied to the selected folder.

Let’s see how to implement an opposite task – Drop functionality. I want to accept several images. So, I am going to use ListView in order to show my items.

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}" AllowDrop="True" Drop="Grid_Drop" DragEnter="Grid_DragEnter"> <ListView Margin="50" Name="listView"> <ListView.ItemTemplate> <DataTemplate> <Grid> <Image Source="{Binding Source}" Width="200" Margin="10"></Image> </Grid> </DataTemplate> </ListView.ItemTemplate> </ListView> </Grid>

You can see that I am using AllowDrop to activate the Drop functionality, DragEnter – to setup allowed operations (Copy) and Drop – to get content from DataPackage and show it using ListView.

In order to create items source for images I created BitmapItem class:

class BitmapItem { public ImageSource Source { get; set; } }

In the next step I implemented DragEnter event handler in order to notify the system about supported operations.

private void Grid_DragEnter(object sender, DragEventArgs e) { e.AcceptedOperation = DataPackageOperation.Copy; }

Finally, I am using DataPackageView in order to get reference to the content. DataPackageView can contain anything but I want to work with files only, so I call GetStorageItemsAsync in order to get references to files there and use BitmapImage to prepare the image files for Image objects.

private async void Grid_Drop(object sender, DragEventArgs e) { var files=await e.DataView.GetStorageItemsAsync(); List<BitmapItem> items = new List<BitmapItem>(); foreach(StorageFile file in files) { try { BitmapImage bi = new BitmapImage(); bi.SetSource(await file.OpenAsync(FileAccessMode.Read)); items.Add(new BitmapItem() { Source = bi }); } catch { } } listView.ItemsSource = items; }

I am too lazy, so I decided to avoid any checking – I simply use empty catch block if user passed non-image file(s).

That’s all. You can see that it’s easy to implement Drag and Drop functionality and you can make experiments with different content types there or implement the same functionality inside the same application (drag and drop content from one part of application to another).

Advertisements

Written by Sergiy Baydachnyy

08/25/2015 at 10:33 PM

XAML tools in Visual Studio 2015

leave a comment »

Visual Studio is the best editor forever. So, it’s very hard to implement something new that can excite me but developers of Visual Studio 2015 made it and today I want to talk about several features related to XAML editor.

The first feature there is “peek window”. The feature can be used not just in XAML editor but in case of XAML it’s really valuable because it allows to do a lot of things that were not possible before. This feature allows to inject “dependent code” windows directly to my current window.

clip_image002

Thanks to that I can easily check styles even in generic.xaml, review definitions of controls, modify event handlers etc. And in order to do it I should not close my primary window.

You can call “peek window” using context menu or you can find this window using some features of Visual Studio 2015. For example, Visual Studio 2015 contains updated template editor. If you want to create a new template for any control you can use context menu and select Edit Template->Edit a Copy

clip_image003

If you use Application resources or Resource Dictionary, Visual Studio redirects you to the appropriate file. But in case if Visual Studio 2015 you continue to work with new template using the same window, editing the template in the designer and checking and modifying code using “peek window”.

clip_image005

Visual Studio 2015 applies color border to the visual editor in template editor mode.

One more feature in XAML editor is its ability to add named regions in XAML code like in C#. You can use the following syntaxes in order to create a marked region inside your XAML

clip_image006

As in C# you can collapse it:

clip_image007

You can use this feature in many ways: mark the existing code for some reason or create some templates for future work.

I showed three new features in XAML editor: peek window, updated template editor and marked XAML blocks. Let’s use these features to make coding more smoothly.

Written by Sergiy Baydachnyy

08/25/2015 at 10:21 PM

Posted in Visual Studio, Windows 10

Tagged with