Intersoft ClientUI Documentation
Walkthrough: Customize Drag-able Area using DragDropPoint
Intersoft ClientUI 8 > ClientUI Fundamentals > Drag-drop Framework Overview > Drag-drop Framework Walkthroughs > Walkthrough: Customize Drag-able Area using DragDropPoint

This walkthrough shows you how to create customize drag-able area using DragDropPoint.

In this walkthrough, you perform the following tasks:

Creating a new ClientUI Application Project

The first step is to create a new ClientUI Application project using Intersoft ClientUI Application project template in Visual Studio.

To create the ClientUI Application project

  1. Start Visual Studio 2010.
  2. Create a new ClientUI Application project using Intersoft ClientUI Application project template. To learn more, see Walkthrough: Create New Intersoft ClientUI Application Template.

To add the resources file

  1. In your project, create new folder with name Images.
  2. In Images folder, copy the images from [Intersoft Installation Folder]\Intersoft WebUI Studio 2010 R1\Samples\SL4\ClientUI Samples\Intersoft.ClientUI.Samples.ClientUIFramework\Assets\Images\Files\)

Creating Customize Drag-able Area Using DragPoint

This section shows you how to create drag point during drag and drop.

  1. First declare interactivity in your XAML.
    Sample Code
    Copy Code 
    <Intersoft:UXPage... 
    xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity" >
</Intersoft:UXPage>
  2. Remove the d:DesignHeight property and the d:DesignWidth property in UXPage.
  3. Add Grid to the LayoutRoot.
  4. Add UXWindow control to the Grid and set the following properties to the control. 
    Property Value
    Width 300
    Height 150
    VerticalAlignment Top
    Margin 0 22 0 0
    IsActive True
    IsClientVisible True
    Header My Document
  5. Add UXScrollViewer control to the UXWindow control.
    XAML
    Copy Code 
    <Grid x:Name="LayoutRoot">    <Grid>         <Intersoft:UXWindow Width="300" Height="150" VerticalAlignment="Top" Margin="0 22 0 0" IsActive="True" IsClientVisible="True" Header="My Document">             <Intersoft:UXScrollViewer>             </Intersoft:UXScrollViewer>         </Intersoft:UXWindow>    </Grid></Grid>

  6. Add WrapPanel to the UXScrollViewer control and set the Background property to White.
    XAML
    Copy Code 
    <Intersoft:UXWindow... >
    <Intersoft:UXScrollViewer>
        <Intersoft:WrapPanel Background="White">
            ...
        </Intersoft:WrapPanel>
    </Intersoft:UXScrollViewer>
</Intersoft:UXWindow>
  7. Add DropTargetBehavior to the WrapPanel and set the TooltipText property to Move.
    XAML
    Copy Code 
    <Intersoft:WrapPanel... >
    <i:Interaction.Behaviors>
        <Intersoft:DropTargetBehavior TooltipText="Move" />
    </i:Interaction.Behaviors>
</Intersoft:WrapPanel>
  8. Add StackPanel to the WrapPanel and set set the Orientation property to Vertical.
    XAML
    Copy Code 
    <Intersoft:WrapPanel... >
    <i:Interaction.Behaviors>
        ...
    </i:Interaction.Behaviors>
    <StackPanel Orientation="Vertical">
    </StackPanel>
</Intersoft:WrapPanel>
  9. Add DragDropBehavior to the StackPanel and set the DragEffect property to Move and IsDragable property to False.
    XAML
    Copy Code 
    <StackPanel... >
    <i:Interaction.Behaviors>
        <Intersoft:DragDropBehavior DragEffect="Move" IsDragable="False" />
    </i:Interaction.Behaviors>
</StackPanel>
  10. Add Image control to the StackPanel and set the Source property to /CustomizeDrag-ableAreaUsingDragPoint;component/Images/Text.png, the Width property to 64 and the Height property to 64.
    XAML
    Copy Code 
    <StackPanel... >
    <i:Interaction.Behaviors>
        ...
    </i:Interaction.Behaviors>
    <Image Source="/CustomizeDrag-ableAreaUsingDragPoint;component/Images/Text.png" Width="64" Height="64">
    </Image>
</StackPanel>

  11. Add DragDropPointBehavior used for drag point to the Image control.
    XAML
    Copy Code 
    <Image... >
    <i:Interaction.Behaviors>
        <Intersoft:DragDropPointBehavior />
    </i:Interaction.Behaviors>
</Image>
  12. Add EllipsisText after Image control and set the Text property to Text.
    XAML
    Copy Code 
    <StackPanel... >
    ...
    <Image... >
        ...
    </Image>
    <Intersoft:EllipsisText Text="Text" />
</StackPanel>

  13. Add more StackPanel and Image control and repeat step 8-12.
    XAML
    Copy Code 
    <StackPanel Orientation="Vertical">
    <i:Interaction.Behaviors>
        <Intersoft:DragDropBehavior DragEffect="Move" IsDragable="False" />
    </i:Interaction.Behaviors>
    <Image Source="/CustomizeDrag-ableAreaUsingDragPoint;component/Images/Text.png" Width="64" Height="64">
        <i:Interaction.Behaviors>
            <Intersoft:DragDropPointBehavior />
        </i:Interaction.Behaviors>
    </Image>
    <Intersoft:EllipsisText Text="Text" />
</StackPanel>
                        
<StackPanel Orientation="Vertical">
    <i:Interaction.Behaviors>
        <Intersoft:DragDropBehavior DragEffect="Move" IsDragable="False" />
    </i:Interaction.Behaviors>
    <Image Source="/CustomizeDrag-ableAreaUsingDragPoint;component/Images/Download.png" Width="64" Height="64">
        <i:Interaction.Behaviors>
            <Intersoft:DragDropPointBehavior />
        </i:Interaction.Behaviors>
    </Image>
    <Intersoft:EllipsisText Text="Download" />
</StackPanel>
<StackPanel Orientation="Vertical">
    <i:Interaction.Behaviors>
        <Intersoft:DragDropBehavior DragEffect="Move" IsDragable="False" />
    </i:Interaction.Behaviors>
    <Image Source="/CustomizeDrag-ableAreaUsingDragPoint;component/Images/Picture.png" Width="64" Height="64">
        <i:Interaction.Behaviors>
            <Intersoft:DragDropPointBehavior />
        </i:Interaction.Behaviors>
    </Image>
    <Intersoft:EllipsisText Text="Picture" />
</StackPanel>

  14. Add more UXWindow and repeat step 4-13.
    XAML
    Copy Code 
    <Intersoft:UXWindow Width="300" Height="150" VerticalAlignment="Bottom" Margin="0 0 0 22" IsClientVisible="True" Header="D:\Data">
    <Intersoft:UXScrollViewer>
        <Intersoft:WrapPanel Background="White">
            <i:Interaction.Behaviors>
                <Intersoft:DropTargetBehavior TooltipText="Move" />
            </i:Interaction.Behaviors>
            <StackPanel Orientation="Vertical" >
                <i:Interaction.Behaviors>
                    <Intersoft:DragDropBehavior DragEffect="Move" IsDragable="False" />
                </i:Interaction.Behaviors>
                <Image Source="/CustomizeDrag-ableAreaUsingDragPoint;component/Images/Document.png" Width="64" Height="64">
                    <i:Interaction.Behaviors>
                        <Intersoft:DragDropPointBehavior />
                    </i:Interaction.Behaviors>
                </Image>
                <Intersoft:EllipsisText Text="Document" />
            </StackPanel>
            <StackPanel Orientation="Vertical" >
                <i:Interaction.Behaviors>
                    <Intersoft:DragDropBehavior DragEffect="Move" IsDragable="False" />
                </i:Interaction.Behaviors>
                <Image Source="/CustomizeDrag-ableAreaUsingDragPoint;component/Images/Report.png" Width="64" Height="64">
                    <i:Interaction.Behaviors>
                        <Intersoft:DragDropPointBehavior />
                    </i:Interaction.Behaviors>
                </Image>
                <Intersoft:EllipsisText Text="Report" />
            </StackPanel>
            <StackPanel Orientation="Vertical" >
                <i:Interaction.Behaviors>
                    <Intersoft:DragDropBehavior DragEffect="Move" IsDragable="False" />
                </i:Interaction.Behaviors>
                <Image Source="/CustomizeDrag-ableAreaUsingDragPoint;component/Images/Favorite.png" Width="64" Height="64">
                    <i:Interaction.Behaviors>
                        <Intersoft:DragDropPointBehavior />
                    </i:Interaction.Behaviors>
                </Image>
                <Intersoft:EllipsisText Text="Favorite" />
            </StackPanel>
        </Intersoft:WrapPanel>
    </Intersoft:UXScrollViewer>
</Intersoft:UXWindow>

  15. Finally, save and run the project.

    After the application is running in the browser, you can try to click on the image it will active the drag drop behavior. Then try again click on the text below image it will do nothing because you only set the drag drop point to the image, such as shown in the following figure.

Conclusion

In this walkthrough, you have learned how to create ClientUI project using project template. You also learned how to using drag drop point behavior.

Complete Code Listing

This section lists the complete code used in this walkthrough.

MainPage.xaml

XAML
Copy Code 
<Intersoft:UXPage 
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        mc:Ignorable="d"
        xmlns:Intersoft="http://intersoft.clientui.com/schemas"
        x:Class="CustomizeDrag_ableAreaUsingDragPoint.MainPage" 
    xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity"
        Title="MainPage Page">
        <Grid x:Name="LayoutRoot">
        <Grid>
            <Intersoft:UXWindow Width="300" Height="150" VerticalAlignment="Top" Margin="0 22 0 0" IsActive="True" IsClientVisible="True" Header="My Documents">
                <Intersoft:UXScrollViewer>
                    <Intersoft:WrapPanel Background="White">
                        <i:Interaction.Behaviors>
                            <Intersoft:DropTargetBehavior TooltipText="Move" />
                        </i:Interaction.Behaviors>
                        <StackPanel Orientation="Vertical">
                            <i:Interaction.Behaviors>
                                <Intersoft:DragDropBehavior DragEffect="Move" IsDragable="False" />
                            </i:Interaction.Behaviors>
                            <Image Source="/CustomizeDrag-ableAreaUsingDragPoint;component/Images/Text.png" Width="64" Height="64">
                                <i:Interaction.Behaviors>
                                    <Intersoft:DragDropPointBehavior />
                                </i:Interaction.Behaviors>
                            </Image>
                            <Intersoft:EllipsisText Text="Text" />
                        </StackPanel>
                        <StackPanel Orientation="Vertical">
                            <i:Interaction.Behaviors>
                                <Intersoft:DragDropBehavior DragEffect="Move" IsDragable="False" />
                            </i:Interaction.Behaviors>
                            <Image Source="/CustomizeDrag-ableAreaUsingDragPoint;component/Images/Download.png" Width="64" Height="64">
                                <i:Interaction.Behaviors>
                                    <Intersoft:DragDropPointBehavior />
                                </i:Interaction.Behaviors>
                            </Image>
                            <Intersoft:EllipsisText Text="Download" />
                        </StackPanel>
                        <StackPanel Orientation="Vertical">
                            <i:Interaction.Behaviors>
                                <Intersoft:DragDropBehavior DragEffect="Move" IsDragable="False" />
                            </i:Interaction.Behaviors>
                            <Image Source="/CustomizeDrag-ableAreaUsingDragPoint;component/Images/Picture.png" Width="64" Height="64">
                                <i:Interaction.Behaviors>
                                    <Intersoft:DragDropPointBehavior />
                                </i:Interaction.Behaviors>
                            </Image>
                            <Intersoft:EllipsisText Text="Picture" />
                        </StackPanel>
                    </Intersoft:WrapPanel>
                </Intersoft:UXScrollViewer>
            </Intersoft:UXWindow>
            <Intersoft:UXWindow Width="300" Height="150" VerticalAlignment="Bottom" Margin="0 0 0 22" IsClientVisible="True" Header="D:\Data">
                <Intersoft:UXScrollViewer>
                    <Intersoft:WrapPanel Background="White">
                        <i:Interaction.Behaviors>
                            <Intersoft:DropTargetBehavior TooltipText="Move" />
                        </i:Interaction.Behaviors>
                        <StackPanel Orientation="Vertical" >
                            <i:Interaction.Behaviors>
                                <Intersoft:DragDropBehavior DragEffect="Move" IsDragable="False" />
                            </i:Interaction.Behaviors>
                            <Image Source="/CustomizeDrag-ableAreaUsingDragPoint;component/Images/Document.png" Width="64" Height="64">
                                <i:Interaction.Behaviors>
                                    <Intersoft:DragDropPointBehavior />
                                </i:Interaction.Behaviors>
                            </Image>
                            <Intersoft:EllipsisText Text="Document" />
                        </StackPanel>
                        <StackPanel Orientation="Vertical" >
                            <i:Interaction.Behaviors>
                                <Intersoft:DragDropBehavior DragEffect="Move" IsDragable="False" />
                            </i:Interaction.Behaviors>
                            <Image Source="/CustomizeDrag-ableAreaUsingDragPoint;component/Images/Report.png" Width="64" Height="64">
                                <i:Interaction.Behaviors>
                                    <Intersoft:DragDropPointBehavior />
                                </i:Interaction.Behaviors>
                            </Image>
                            <Intersoft:EllipsisText Text="Report" />
                        </StackPanel>
                        <StackPanel Orientation="Vertical" >
                            <i:Interaction.Behaviors>
                                <Intersoft:DragDropBehavior DragEffect="Move" IsDragable="False" />
                            </i:Interaction.Behaviors>
                            <Image Source="/CustomizeDrag-ableAreaUsingDragPoint;component/Images/Favorite.png" Width="64" Height="64">
                                <i:Interaction.Behaviors>
                                    <Intersoft:DragDropPointBehavior />
                                </i:Interaction.Behaviors>
                            </Image>
                            <Intersoft:EllipsisText Text="Favorite" />
                        </StackPanel>
                    </Intersoft:WrapPanel>
                </Intersoft:UXScrollViewer>
            </Intersoft:UXWindow>
        </Grid>
    </Grid>
</Intersoft:UXPage>
See Also
UXWindow Class

Concepts

Drag-drop Framework Overview

Other Resources

Locating the Samples in Local Installation
Drag-drop Framework How-to Topics
Walkthroughs and How-to Topics