Drag and Drop of User Control with a resizable boder on a Canvas with a resize

[Steve]

<UserControl
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:s="clr-namespace:RttmVision.Presentation"
    xmlns:p="clr-namespace:RttmVision.Presentation.Properties"
    xmlns:c="clr-namespace:RttmVision.Presentation.Converters"
    xmlns:widgets="clr-namespace:RttmVision.Applications.Widgets;assembly=RttmVision.Applications"
    xmlns:services="clr-namespace:RttmVision.Applications.Services;assembly=RttmVision.Applications"
    xmlns:telerikNavigation="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.Navigation"
    xmlns:telerikAnimation="clr-namespace:Telerik.Windows.Controls.Animation;assembly=Telerik.Windows.Controls"
    xmlns:telerikGrid="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.GridView"
     xmlns:telerikInput="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.Input"
   xmlns:telerikData="clr-namespace:Telerik.Windows.Data;assembly=Telerik.Windows.Data"
    xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"
    xmlns:telerikDragDrop="clr-namespace:Telerik.Windows.Controls.DragDrop;assembly=Telerik.Windows.Controls"
    x:Class="RttmVision.Presentation.Views.BasicWidgetView"

    MinHeight="300" MinWidth="300"  Loaded="ThisLoaded"
       telerikDragDrop:RadDragAndDropManager.AllowDrag="True"

    >

    <UserControl.Resources>

        <!-- ResizeDecorator Template -->
        <ControlTemplate x:Key="ResizeDecoratorTemplate"  TargetType="{x:Type Control}">
            <Grid >
                <s:ResizeThumb Height="3" Cursor="SizeNS" Margin="0 -4 0 0"
                       VerticalAlignment="Top" HorizontalAlignment="Stretch"/>
                <s:ResizeThumb Width="3" Cursor="SizeWE" Margin="-4 0 0 0"
                       VerticalAlignment="Stretch" HorizontalAlignment="Left"/>
                <s:ResizeThumb Width="3" Cursor="SizeWE" Margin="0 0 -4 0"
                       VerticalAlignment="Stretch" HorizontalAlignment="Right"/>
                <s:ResizeThumb Height="3" Cursor="SizeNS" Margin="0 0 0 -4"
                       VerticalAlignment="Bottom" HorizontalAlignment="Stretch"/>
                <s:ResizeThumb Width="7" Height="7" Cursor="SizeNWSE" Margin="-6 -6 0 0"
                       VerticalAlignment="Top" HorizontalAlignment="Left"/>
                <s:ResizeThumb Width="7" Height="7" Cursor="SizeNESW" Margin="0 -6 -6 0"
                       VerticalAlignment="Top" HorizontalAlignment="Right"/>
                <s:ResizeThumb Width="7" Height="7" Cursor="SizeNESW" Margin="-6 0 0 -6"
                       VerticalAlignment="Bottom" HorizontalAlignment="Left"/>
                <s:ResizeThumb Width="7" Height="7" Cursor="SizeNWSE" Margin="0 0 -6 -6"
                       VerticalAlignment="Bottom" HorizontalAlignment="Right"/>
            </Grid>
        </ControlTemplate>

        <!-- Designer Item Template-->
        <ControlTemplate x:Key="DesignerItemTemplate" TargetType="ContentControl">
            <Grid Height="Auto" Width="Auto"
                DataContext="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=.}">
                <s:MoveThumb Template="{StaticResource MoveThumbTemplate}" Cursor="SizeAll"/>
                <Control  Template="{StaticResource ResizeDecoratorTemplate}"/>
                <ContentPresenter Content="{TemplateBinding Content}"    />
            </Grid>

        </ControlTemplate>

        <!--Popup-->
        <!--We have a style because we are actually going to be using multiple thumbs for
        resizing (one for the bottom edge, one for the corner, and one for the right edge),
        and this way we don't have to repeat these property and event setters. -->
        <Style TargetType="{x:Type Thumb}"
          x:Key="PopupThumb">
            <!--Setting the alignment properties to stretch just guarantees that the thumbs will fill their respective conta-->
            <Setter Property="HorizontalAlignment"
             Value="Stretch"/>
            <Setter Property="VerticalAlignment"
             Value="Stretch"/>
            <EventSetter Event="Thumb.DragStarted"
                  Handler="ThumbDragStarted" />
            <EventSetter Event="Thumb.DragDelta"
                  Handler="ThumbDragDelta" />
            <EventSetter Event="Thumb.DragCompleted"
                  Handler="ThumbDragCompleted" />
        </Style>

        <!--Setup for Popup TreeView-->


        <Style x:Key="Expander" TargetType="{x:Type ToggleButton}">
            <Setter Property="IsEnabled" Value="True" />
            <Setter Property="IsTabStop" Value="False" />
            <Setter Property="Cursor" Value="Hand"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type ToggleButton}">
                        <Grid x:Name="Button" Margin="0,4,0,0" HorizontalAlignment="Right"
                              VerticalAlignment="Top" Width="16" Height="16">
                            <Rectangle Stroke="#FF027BA6" HorizontalAlignment="Stretch"
                                  VerticalAlignment="Stretch" Width="Auto" Height="Auto"
                                  RadiusX="3" RadiusY="3" Fill="#FF00A2DC"/>
                            <Rectangle x:Name="CollapsedVisual" HorizontalAlignment="Left"
                                  VerticalAlignment="Top" Width="2" Height="8" RadiusX="0"
                                  RadiusY="0" Fill="#FFFFFFFF" Margin="7,4,0,0" />
                            <Rectangle RadiusX="0" RadiusY="0" Fill="#FFFFFFFF"
                                  HorizontalAlignment="Left" Margin="4,7,0,0"
                                  VerticalAlignment="Top" Width="8" Height="2" />
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>



        <!--Converter for CheckState-->
        <s:CheckStateConverter x:Key="CheckStateConverter" />
        <c:CellbackGroundColorConverter
                            x:Key="colorConverter" />

        <!--Bindings collection for the RadTreeViewItems-->
        <Style x:Key="BindingsCollection"  TargetType="{x:Type telerikNavigation:RadTreeViewItem}" >
            <Setter Property="CheckState" Value="{Binding Checked, Mode=TwoWay, Converter={StaticResource CheckStateConverter}}" />
            <Setter Property="IsSelected" Value="{Binding Selected, Mode=TwoWay}" />
            <Setter Property="IsExpanded" Value="{Binding Expanded, Mode=TwoWay}" />
        </Style>


        <DataTemplate x:Key="MessageName">
            <TextBlock Text="{Binding MessageName}" ToolTip="Message Name" Foreground="Black" FontSize="10"></TextBlock>
        </DataTemplate>

        <HierarchicalDataTemplate
            x:Key="PacketInfo"
            ItemTemplate="{StaticResource MessageName}"
            ItemsSource="{Binding Messages}">
            <TextBlock Text="{Binding PacketName}" ToolTip="Packet Name" Foreground="Blue" FontSize="10"/>
        </HierarchicalDataTemplate>



        <!--End of setup for Popup TreeView-->


    </UserControl.Resources>



    <UserControl.ContextMenu>
        <ContextMenu>
            <MenuItem  Click="MenuItem_Click" Header="{x:Static p:Resources.ViewPackets}" Icon="" InputGestureText="{x:Static p:Resources.ControlR}" />
        </ContextMenu>
    </UserControl.ContextMenu>

    <ContentControl Width="200"
                      Height="100"
                      Padding="2"
                      Canvas.Left="360"
                      Canvas.Top="60"
                      Template="{StaticResource DesignerItemTemplate}"
                    >
        <Grid
            Width="Auto"
            Height="Auto" >
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="13*" />
                <ColumnDefinition Width="187*" />
            </Grid.ColumnDefinitions>
            <Border CornerRadius="5"
                  IsHitTestVisible="False"
                  BorderBrush="#E0E0E0"
                  BorderThickness="0,1,0,0"
                  Background="{DynamicResource FrameBackground}" Grid.ColumnSpan="2" />
            <Border BorderBrush="Black"
                  BorderThickness="0,0,0,1"
                  CornerRadius="5" Grid.ColumnSpan="2" />
            <Border Background="WhiteSmoke" CornerRadius="5" Margin="5,5,5,25" IsHitTestVisible="False" Grid.ColumnSpan="2" />
            <Border BorderBrush="White" BorderThickness="0,0,1,1" CornerRadius="5" Margin="5,5,5,25" Grid.ColumnSpan="2" />
            <Border BorderBrush="Black" BorderThickness="1,1,0,0" CornerRadius="5" Margin="5,5,5,25" Grid.ColumnSpan="2">

                <telerikGrid:RadGridView x:Name="PacketRadGridView"
                    EnableColumnVirtualization="True"
                    EnableRowVirtualization="True"
                    AutoGenerateColumns="False"
                      CanUserFreezeColumns="False"
                     ItemsSource="{Binding ReceivedPackets}"
                    IsReadOnly="True"
                    DataLoadMode="Asynchronous"

                    >

                    <telerikGrid:RadGridView.Resources>


                        <Style x:Key="CustomColorCellStyle" TargetType="{x:Type telerik:GridViewCell}">
                            <Setter Property="Background" Value="{Binding Converter={StaticResource colorConverter}}">
                            </Setter>
                        </Style>

                    </telerikGrid:RadGridView.Resources>

                    <telerik:RadGridView.ChildTableDefinitions>
                        <telerik:GridViewTableDefinition>
                        </telerik:GridViewTableDefinition>
                    </telerik:RadGridView.ChildTableDefinitions>
                    <telerik:RadGridView.Columns>
                        <telerik:GridViewDataColumn DataMemberBinding="{Binding PacketName}" Header="Packet" />

                    </telerik:RadGridView.Columns>

                    <telerik:RadGridView.HierarchyChildTemplate>
                        <DataTemplate>
                            <telerik:RadGridView
                                x:Name="RadGridView1"
                                CanUserFreezeColumns="False"
                                AutoGenerateColumns="False"

                                ItemsSource="{Binding Messages}"
                                ShowGroupPanel="False"
                                IsReadOnly="True"
                                Loaded="RadGridView1_Loaded">
                                <telerik:RadGridView.Columns>
                                    <telerik:GridViewDataColumn UniqueName="Variable" DataMemberBinding="{Binding MessageName}" Header="Variable" />
                                    <telerik:GridViewDataColumn UniqueName="Value" CellStyle="{StaticResource CustomColorCellStyle}" DataMemberBinding="{Binding Value}" Header="Value"/>
                                </telerik:RadGridView.Columns>
                            </telerik:RadGridView>
                        </DataTemplate>
                    </telerik:RadGridView.HierarchyChildTemplate>


                </telerikGrid:RadGridView>



            </Border>

            <Popup x:Name="packetPopup" StaysOpen="False" Width="300" Height="300"
             Placement="Mouse" Closed="packetPopup_Closed">
                <Border BorderBrush="#FF3F509D" BorderThickness="5,5,3,3">
                    <Grid Background="White">
                        <Grid.RowDefinitions>
                            <RowDefinition Height="*" />
                            <RowDefinition Height="10" />
                        </Grid.RowDefinitions>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="*" />
                            <ColumnDefinition Width="10" />
                        </Grid.ColumnDefinitions>

                        <telerikNavigation:RadTreeView
                            SelectionMode="Extended"
                            IsLineEnabled="True"
                            ItemsOptionListType="CheckList"
                            IsOptionElementsEnabled="True"
                            IsRootLinesEnabled="True"
                            IsTriStateMode="True"

                            ItemsSource="{Binding PacketDefinitions}"
                            ItemTemplate="{StaticResource PacketInfo}"
                            ExpanderStyle="{StaticResource Expander}"
                            Checked="RadTreeView_Checked"
                            Unchecked="RadTreeView_Checked"
                            telerikAnimation:AnimationManager.IsAnimationEnabled="False"
                            ScrollViewer.HorizontalScrollBarVisibility="Auto"
                            ScrollViewer.VerticalScrollBarVisibility="Auto"
                            ItemContainerStyle="{StaticResource BindingsCollection}"/>


                        <Thumb Grid.Row="0" Grid.Column="1"
                Cursor="SizeWE"
                Style="{StaticResource PopupThumb}"/>
                        <Thumb Grid.Row="1" Grid.Column="0"
                Cursor="SizeNS"
              Style="{StaticResource PopupThumb}"/>
                        <Thumb Grid.Row="1" Grid.Column="1"
                Cursor="SizeNWSE"
              Style="{StaticResource PopupThumb}"/>
                    </Grid>
                </Border>
            </Popup>


        </Grid>

    </ContentControl>

</UserControl>

I have the above user control it is bound to an Items Control which has an ItemsPanelTemplate of type Canvas.  I am able to drag and drop the user control around the canvas but when I try resize the user control using the resize thumb, the user control goes into drag mode.  I have tried moving the  telerikDragDrop:RadDragAndDropManager.AllowDrag="True"  to inner controls but then the User Control will not drag on the Canvas.  How can I have a drag-able User Control that is also re-sizable?
Here is the code for the the Items control:

<Grid>
        <ItemsControl x:Name="WidgetItemsControl"  ItemsSource="{Binding WidgetViews}"  Margin="5" >

                <ItemsControl.ItemsPanel>

                    <ItemsPanelTemplate>
                        <Canvas  x:Name="WidgetCanvas" Background="#303030" Width="Auto" Height="Auto" ClipToBounds="True" telerikDragDrop:RadDragAndDropManager.AllowDrop="True"  >
                            <Canvas.ContextMenu>
                                <ContextMenu Name="WidgetContextMenu">
                                    <MenuItem Command="{Binding NewWidgetCommand}" Header="{x:Static p:Resources.NewWidget}" Icon="{StaticResource NewImage}" InputGestureText="{x:Static p:Resources.ControlW}" />
                                </ContextMenu>
                            </Canvas.ContextMenu>

                </Canvas>
                    </ItemsPanelTemplate>

                </ItemsControl.ItemsPanel>

        <ItemsControl.ItemContainerStyle>
            <Style>
                <Setter Property="Canvas.Left" Value="{Binding Left}" />
                <Setter Property="Canvas.Top" Value="{Binding Top}" />
            </Style>
        </ItemsControl.ItemContainerStyle>


    </ItemsControl>

    </Grid>

Thanks for your help!

Steve Burns

[Tina Stancheva]

Hello Steven Burns,

There is actually no benefit in using our Drag and Drop Framework for simply re-positioning an element since it's intended for more or less changing the parents of objects (which you are clearly not doing). It would be more appropriate if you subscribe to the MouseLeftButtonUp/Down events of the visual element that can be used for dragging your UserControl. With this approach you can change the position of the dragged element within the parent Canvas while the user is dragging.

Please consider this alternative approach and let me know what you think.

Regards,
Tina Stancheva
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

[Steve]

Tina,

 

Thanks for your tip.  I was able to make it work with the MouseLeftButtonUp/Down events .

Steve Burns