Drag&Drop tile does not show image when MaximizeMode==One

[HDC]

Hi,

I have two TileViews on my page. First one "PhotoTiles" has MaximizeMode==One, Second one "SelectedPhotoTiles" has MaximizeMode="Zero"

When i drag foto's from PhotoTiles to SelectedPhotoTiles, the photo on the tile is not shown as i drag. But when i drag tile from SelectedPhotoTiles to PhotoTiles, the photo on the tyle is shown as i drag. When i switch the maximize properties between the two, i see exactly the opposite... This makes me thing there is a bug in the code when you drag a tile from a TileView with MaximizeMode==One

<telerik:RadTileView x:Name="PhotoTiles"
ItemsSource="{Binding Photos, Mode=OneWay}"
TilesStateChanged="RadTileViewTilesStateChanged" Grid.Row="1"
PreservePositionWhenMaximized ="True"
telerik:TileViewPanel.IsVirtualized ="True"
IsAutoScrollingEnabled="True"
MinimizedColumnWidth ="180"
MinimizedRowHeight ="155"
RowHeight =" 155"
ColumnWidth = "180"
ColumnsCount = "5"
ContentTemplate = "{StaticResource PhotoTemplate}"
ItemTemplate = "{StaticResource PhotoHeaderTemplate}"
MaximizeMode = "One"
MinimizedItemsPosition="Bottom"
SelectionMode="Extended"
IsSelectionEnabled="True">

<telerik:RadTileView x:Name="SelectedPhotoTiles" ItemsSource="{Binding SelectedPhotos, Mode=OneWay}"
PreservePositionWhenMaximized ="True"
telerik:TileViewPanel.IsVirtualized ="True"
IsAutoScrollingEnabled="True"
TileStateChangeTrigger ="SingleClick"
MinimizedColumnWidth ="180"
MinimizedRowHeight ="155"
RowHeight =" 155"
ColumnWidth = "180"
RowsCount="1"
ContentTemplate = "{StaticResource PhotoTemplate}"
ItemTemplate = "{StaticResource PhotoHeaderTemplate}"
MaximizeMode = "Zero"
MinimizedItemsPosition="Bottom"
SelectionChanged="SelectedPhotoTiles_SelectionChanged"
SelectionMode="Extended"
IsSelectionEnabled="True"
>

This are the templates:

<DataTemplate x:Key="PhotoHeaderTemplate">
           <TextBlock Text="{Binding Description}" />
       </DataTemplate>

       <tileview:TileToFluideStateConverter x:Key="tileConverter" />

       <DataTemplate x:Key="PhotoTemplate">
           <telerik:RadFluidContentControl ContentChangeMode="Manual" TransitionDuration="0:0:.5"
                   State="{Binding State, Converter={StaticResource tileConverter}}">

               <telerik:RadFluidContentControl.SmallContent>
                   <Image Source="{Binding Image}" Stretch="Uniform"/>
               </telerik:RadFluidContentControl.SmallContent>

               <telerik:RadFluidContentControl.Content>
                   <Image Source="{Binding Image}" Stretch="Uniform"/>
               </telerik:RadFluidContentControl.Content>

               <telerik:RadFluidContentControl.LargeContent>
                       <Image Source="{Binding Image}" />
               </telerik:RadFluidContentControl.LargeContent>
           </telerik:RadFluidContentControl>
       </DataTemplate>

The code i use for dragging is (taken from a telerik sample):

private void OnDragQuery(object sender, DragDropQueryEventArgs e)
   {
     if (e.Options.Status == DragStatus.DragQuery)
     {
       RadTileViewItem draggedItem = e.Options.Source as RadTileViewItem;
       RadTileViewItem tile = new RadTileViewItem();
       tile.Header = (e.Options.Source.DataContext as Model.Photo).Description;

       tile.Width = 185;
       tile.Height = 155;

       ContentControl dragCue = new ContentControl();
       dragCue.Content = tile;
       e.Options.DragCue = dragCue;
     }
     e.QueryResult = true;
     e.Handled = true;
   }

Is this a bug, or am i missing something?

[Zarko]

Hello Peter,
I'm not sure what exactly the problem is because I couldn't reproduce is but you may try to set and image of the dragging item instead of a new RadTileViewItem.
For further references could you please examine the attached project and if you need further help please feel free to ask.

Kind regards,
Zarko
the Telerik team

[HDC]

Hi Zarko,

Thank you for the demo.

I have run it but i don't see any pictures on any of the tiles.

My point is the following... i can drag & drop tiles from tileview B to the tileview A with the image intact while dragging, but when i drag tiles from Tileview A to Tileview B, the image is not shown while i drag.

I'm using the same event methods for both drag & drop operations, so how come, one of them works ok and the other one does not?

How come when i make MaximizeMode == Zero on both, then it will show the image while dragging in both directions!

There definately must be something going on here.

Best Regards,

Peter

[HDC]

i just noticed something else... when an item is minimized and i drag the item by the header then the image is displayed while dragging. But when i drag the item by the image (so click on the image, hold and start dragging) then the dragged item becomes blank even if it is minimized.

But when the item is maximized it is always blank, even if it is dragged by the header.

In att. i am including some screen shots to make it more clear.

In dd1, i am dragging a minimized item by the header ==> Picture is displayed
in dd2, i am dragging a minimized item by the header ==> Picture is not displayed
in dd3, i am dragging a maximized item by the header ==> Picture is not displayed

[HDC]

Hi Zarko,

I misunderstood what you were trying to tell me, your code does solve the problem. I remain of the oppinion that something strange is going on but your solution is workable.

However, the problem is when an item is maximized, the dragged item is way to big. So i worked a bit on your code and below code fits my requirements somewhat better:

private void OnDragQuery(object sender, DragDropQueryEventArgs e)
    {
      UIElement draggingElement = null;

      if (e.Options.Status == DragStatus.DragQuery)
      {
        RadTileViewItem draggedItem = e.Options.Source as RadTileViewItem;
        if (draggedItem != null)
        {
          if (draggedItem.TileState == TileViewItemState.Maximized)
          {
            BitmapImage bmp = new BitmapImage() { UriSource = new Uri((draggedItem.Content as Photo).Image, UriKind.Absolute) };

            Image draggingImage = new Image() { Source = bmp, Height=155, Width=185 };

            RadTileViewItem tile = new RadTileViewItem();
            tile.Header = (e.Options.Source.DataContext as Model.Photo).Description;
            tile.Content = draggingImage;

            draggingElement = tile;
          }
          else
          {

            WriteableBitmap writeableBitmap = new WriteableBitmap(draggedItem, null);
            Image draggingImage = new Image() { Source = writeableBitmap };
            draggingElement = draggingImage;
          }
        }
      }
      CreateDragImage(draggingElement, e);
    }

    private void CreateDragImage(UIElement draggingImage, DragDropQueryEventArgs e)
    {
      if (draggingImage!=null)
      {
        ContentControl dragCue = new ContentControl();
        dragCue.Content = draggingImage;
        e.Options.DragCue = dragCue;
      }
      e.QueryResult = true;
      e.Handled = true;
    }

Thanks a lot for your help!