How To Customize DragImpossibleIcon ??

2 posts, 0 answers
  1. Claudio
    Claudio avatar
    9 posts
    Member since:
    Feb 2009

    Posted 21 Jan 2011 Link to this post

    Hi , here is my code :
    //Set up a drag cue:   
                    TreeViewDragCue cue = new TreeViewDragCue();
                      
                    //Here we need to choose a template for the items:   
                    System.Windows.Media.SolidColorBrush b = new System.Windows.Media.SolidColorBrush(System.Windows.Media.Colors.Transparent);
                    cue.BorderBrush = b;
                    BitmapImage bitmapImage = new BitmapImage();
                    bitmapImage.UriSource = new Uri(App.Current.Host.Source, "../Images/Error.png");
                    Image newImage = new Image() { Source = bitmapImage };
      
                    cue.Opacity = 0.5;
                    cue.DropPossibleIcon = newImage;
    but the icon visualized is the same as defalut icon.. why ??? And ho to Customize ItemTemple without anything.. empty.. without border. ?
    Thx in advance
  2. Petar Mladenov
    Admin
    Petar Mladenov avatar
    2891 posts

    Posted 25 Jan 2011 Link to this post

    Hi Claudio,

    Playing with the DragAndDropManager events is not acceptable when a visual appearance change is needed. Instead, editing the style of the TreeViewDragCue via Expression Blend is preferred like so:
    <LinearGradientBrush x:Key="TreeView_DragContainerFormOuterBorder" EndPoint="0.5,1" StartPoint="0.5,0">
                   <GradientStop Color="#FFFDBA64" Offset="0.493"/>
                   <GradientStop Color="#FFDCD09F" Offset="1"/>
                   <GradientStop Color="#FFDCD09F" Offset="0"/>
               </LinearGradientBrush>
               <LinearGradientBrush x:Key="RadTreeView_DragContainerFormInnerBackground" EndPoint="0.5,1" StartPoint="0.5,0">
                   <GradientStop Color="#FFFFD9AA" Offset="0"/>
                   <GradientStop Color="#FFFEE07A" Offset="1"/>
                   <GradientStop Color="#FFFFBC6F" Offset="0.5"/>
                   <GradientStop Color="#FFFFAB3F" Offset="0.5"/>
               </LinearGradientBrush>
               <LinearGradientBrush x:Key="RadTreeView_DragContainerFormInnerBorder" EndPoint="0.5,1" StartPoint="0.5,0">
                   <GradientStop Color="#FFFFFFFF" Offset="0"/>
                   <GradientStop Color="#FFFEF6B2" Offset="1"/>
               </LinearGradientBrush>
               <LinearGradientBrush x:Key="RadTreeView_DragItemsCountFillBrush" EndPoint="0.5,1" StartPoint="0.5,0">
                   <GradientStop Color="#FF00AEFF" Offset="0"/>
                   <GradientStop Color="#FF002D8F" Offset="1"/>
               </LinearGradientBrush>
               <SolidColorBrush x:Key="RadTreeView_DragItemsCountBorderBrush" Color="#FFFFFFFF"/>
               <SolidColorBrush x:Key="RadTreeView_DragItemsCountTextBrush" Color="#FFFFFFFF"/>
               <LinearGradientBrush x:Key="RadTreeView_DragTooltipFormFillBrush" EndPoint="0.5,0.034" StartPoint="0.5,0.966">
                   <GradientStop Color="#FFE4E5F0" Offset="0"/>
                   <GradientStop Color="#FFFFFFFF" Offset="1"/>
               </LinearGradientBrush>
               <SolidColorBrush x:Key="Header2ForegroundBrush" Color="#FF000000"/>
               <SolidColorBrush x:Key="RadTreeView_ForbiddenDragIcon1" Color="#4C000000"/>
               <SolidColorBrush x:Key="RadTreeView_ForbiddenDragIcon2" Color="#FFFF0000"/>
               <SolidColorBrush x:Key="RadTreeView_ForbiddenDragIcon3" Color="#FFFF0000"/>
               <SolidColorBrush x:Key="RadTreeView_ForbiddenDragIcon4" Color="#FFFFFFFF"/>
               <LinearGradientBrush x:Key="RadTreeView_ForbiddenDragIcon5" EndPoint="0.5,1" StartPoint="0.5,0">
                   <GradientStop Color="#FF2F0101" Offset="0"/>
                   <GradientStop Color="#FFFF0000" Offset="1"/>
               </LinearGradientBrush>
               <SolidColorBrush x:Key="RadTreeView_InsertDragIcon1" Color="#FF9D9D9D"/>
               <LinearGradientBrush x:Key="RadTreeView_InsertDragIcon2" EndPoint="0,0.5" StartPoint="1,0.5">
                   <GradientStop Color="#FFFA8C3B" Offset="1"/>
                   <GradientStop Color="#FFFA8C3B" Offset="0"/>
               </LinearGradientBrush>
               <SolidColorBrush x:Key="RadTreeView_InsertDragStrokeIcon2" Color="#FFFFFFFF"/>
               <Style  TargetType="telerik:TreeViewDragCue">
                   <Setter Property="IsHitTestVisible" Value="False"/>
                   <Setter Property="Padding" Value="3"/>
                   <Setter Property="BorderBrush" Value="{StaticResource TreeView_DragContainerFormOuterBorder}"/>
                   <Setter Property="Background" Value="{StaticResource RadTreeView_DragContainerFormInnerBackground}"/>
                   <Setter Property="Template">
                       <Setter.Value>
                           <ControlTemplate TargetType="telerik:TreeViewDragCue">
                               <StackPanel>
                                   <VisualStateManager.VisualStateGroups>
                                       <VisualStateGroup x:Name="DropStates">
                                           <VisualState x:Name="DropPossible"/>
                                           <VisualState x:Name="DropImpossible">
                                               <Storyboard>
                                                   <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" Storyboard.TargetName="DropImpossibleIconElement">
                                                       <DiscreteObjectKeyFrame KeyTime="0" Value="Visible"/>
                                                   </ObjectAnimationUsingKeyFrames>
                                                   <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" Storyboard.TargetName="DropPossibleIconElement">
                                                       <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed"/>
                                                   </ObjectAnimationUsingKeyFrames>
                                               </Storyboard>
                                           </VisualState>
                                       </VisualStateGroup>
                                   </VisualStateManager.VisualStateGroups>
                                   <Grid HorizontalAlignment="Left" Visibility="{TemplateBinding DragPreviewVisibility}">
                                       <Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="1" CornerRadius="3" Opacity="0.8">
                                           <Border BorderBrush="{StaticResource RadTreeView_DragContainerFormInnerBorder}" BorderThickness="1" Background="{TemplateBinding Background}" CornerRadius="2">
                                               <ItemsPresenter Margin="{TemplateBinding Padding}"/>
                                           </Border>
                                       </Border>
                                       <Grid x:Name="DraggedItemsCountContainer" HorizontalAlignment="Center" Height="Auto" Visibility="Collapsed" VerticalAlignment="Center" Width="Auto">
                                           <Rectangle Fill="{StaticResource RadTreeView_DragItemsCountFillBrush}" RadiusY="2" RadiusX="2" Stroke="{StaticResource RadTreeView_DragItemsCountBorderBrush}"/>
                                           <TextBlock x:Name="DraggedItemsCountText" Foreground="{StaticResource RadTreeView_DragItemsCountTextBrush}" HorizontalAlignment="{TemplateBinding HorizontalAlignment}" Margin="3" Text="5" VerticalAlignment="{TemplateBinding VerticalAlignment}"/>
                                       </Grid>
                                   </Grid>
                                   <Grid Margin="0 2 0 0" Visibility="{TemplateBinding DragTooltipVisibility}">
                                       <Grid.ColumnDefinitions>
                                           <ColumnDefinition Width="Auto"/>
                                           <ColumnDefinition Width="Auto"/>
                                       </Grid.ColumnDefinitions>
                                       <Rectangle Grid.ColumnSpan="2" Fill="{StaticResource RadTreeView_DragTooltipFormFillBrush}" RadiusY="3" RadiusX="3" Stroke="{TemplateBinding BorderBrush}" StrokeThickness="1" StrokeLineJoin="Bevel"/>
                                       <ContentPresenter x:Name="DropImpossibleIconElement" ContentTemplate="{TemplateBinding DropImpossibleIconTemplate}" Content="{TemplateBinding DropImpossibleIcon}" Margin="5,0" Visibility="Collapsed"/>
                                       <ContentPresenter x:Name="DropPossibleIconElement" ContentTemplate="{TemplateBinding DropPossibleIconTemplate}" Content="{TemplateBinding DropPossibleIcon}" Margin="5,0"/>
                                       <StackPanel Grid.Column="1" MinHeight="20" Orientation="Horizontal" VerticalAlignment="Center">
                                           <ContentControl ContentTemplate="{TemplateBinding DragActionContentTemplate}" Content="{TemplateBinding DragActionContent}" Foreground="{StaticResource Header2ForegroundBrush}" VerticalAlignment="Center"/>
                                           <ContentPresenter ContentTemplate="{TemplateBinding DragTooltipContentTemplate}" Content="{TemplateBinding DragTooltipContent}" Margin="0,0,5,0" VerticalAlignment="Center"/>
                                       </StackPanel>
                                   </Grid>
                               </StackPanel>
                           </ControlTemplate>
                       </Setter.Value>
                   </Setter>
                   <Setter Property="DropImpossibleIcon" Value="The icon is assigned as DataTemplate because assigning as Content triggers a bug in Silverlight"/>
                   <Setter Property="DropImpossibleIconTemplate">
                       <Setter.Value>
                           <DataTemplate>
                               <!--<Grid>
                                   <Path Data="M 9603.25,-9232.61C 9599.62,-9232.61 9596.66,-9235.57 9596.66,-9239.21C 9596.66,-9242.85 9599.62,-9245.81 9603.25,-9245.81C 9606.9,-9245.81 9609.85,-9242.85 9609.85,-9239.21C 9609.85,-9235.57 9606.9,-9232.61 9603.25,-9232.61 Z " Fill="{StaticResource RadTreeView_ForbiddenDragIcon1}" Height="13.197" Margin="1.33, 1.08, 0, 0" Stretch="Fill" Width="13.195"/>
                                   <Path Data="M 9605.12,-9238.52L 9605.14,-9238.55C 9605.42,-9239.07 9605.58,-9239.66 9605.58,-9240.29C 9605.58,-9242.31 9603.94,-9243.94 9601.93,-9243.94C 9601.3,-9243.94 9600.71,-9243.78 9600.19,-9243.5L 9600.16,-9243.48L 9605.12,-9238.52 Z " Fill="{StaticResource RadTreeView_ForbiddenDragIcon2}" Height="5.418" Margin="4.83, 2.95, 0, 0" Stretch="Fill" Width="5.417"/>
                                   <Path Data="M 9601.93,-9236.64C 9602.56,-9236.64 9603.15,-9236.8 9603.67,-9237.08L 9603.89,-9237.22L 9602.88,-9238.24C 9602.34,-9238.78 9601.79,-9239.32 9601.24,-9239.86L 9598.83,-9242.2L 9598.72,-9242.03C 9598.44,-9241.51 9598.28,-9240.92 9598.28,-9240.29C 9598.28,-9238.28 9599.92,-9236.64 9601.93,-9236.64 Z " Fill="{StaticResource RadTreeView_ForbiddenDragIcon3}" Height="5.555" Margin="2.95, 4.69, 0, 0" Stretch="Fill" Width="5.604"/>
                                   <Path Data="M 9601.93,-9233.69C 9598.29,-9233.69 9595.33,-9236.65 9595.33,-9240.29C 9595.33,-9243.93 9598.29,-9246.89 9601.93,-9246.89C 9605.57,-9246.89 9608.53,-9243.93 9608.53,-9240.29C 9608.53,-9236.65 9605.57,-9233.69 9601.93,-9233.69 Z " Fill="{StaticResource RadTreeView_ForbiddenDragIcon4}" Height="13.197" Stretch="Fill" Width="13.195"/>
                                   <Path Data="M 9605.12,-9238.52L 9605.14,-9238.55C 9605.42,-9239.07 9605.58,-9239.66 9605.58,-9240.29C 9605.58,-9242.31 9603.94,-9243.94 9601.93,-9243.94C 9601.3,-9243.94 9600.71,-9243.78 9600.19,-9243.5L 9600.16,-9243.48M 9601.93,-9236.64C 9602.56,-9236.64 9603.15,-9236.8 9603.67,-9237.08L 9603.89,-9237.22L 9602.88,-9238.24C 9602.34,-9238.78 9601.79,-9239.32 9601.24,-9239.86L 9598.83,-9242.2L 9598.72,-9242.03C 9598.44,-9241.51 9598.28,-9240.92 9598.28,-9240.29C 9598.28,-9238.28 9599.92,-9236.64 9601.93,-9236.64 Z M 9601.93,-9234.76C 9598.88,-9234.76 9596.4,-9237.24 9596.4,-9240.29C 9596.4,-9243.35 9598.88,-9245.82 9601.93,-9245.82C 9604.98,-9245.82 9607.46,-9243.35 9607.46,-9240.29C 9607.46,-9237.24 9604.98,-9234.76 9601.93,-9234.76 Z " Fill="{StaticResource RadTreeView_ForbiddenDragIcon5}" Height="11.064" Margin="1.07,1.07,0,0" Stretch="Fill" Width="11.062"/>
                               </Grid>-->
                           <Image Source="Images/error.png" Width="30" Height="30"/>
                       </DataTemplate>
                       </Setter.Value>
                   </Setter>
                   <Setter Property="DropPossibleIcon" Value="The icon is assigned as DataTemplate because assigning as Content triggers a bug in Silverlight"/>
                   <Setter Property="DropPossibleIconTemplate">
                       <Setter.Value>
                           <DataTemplate>
                               <Grid>
                                   <Path Data="M 9617.85,-9437.65C 9617.38,-9437.65 9616.91,-9437.83 9616.56,-9438.18C 9615.84,-9438.9 9615.84,-9440.06 9616.56,-9440.78L 9617.1,-9441.32L 9613.49,-9441.32C 9612.48,-9441.32 9611.66,-9442.14 9611.66,-9443.16C 9611.66,-9444.17 9612.48,-9444.99 9613.49,-9444.99L 9617.1,-9444.99L 9616.56,-9445.54C 9615.84,-9446.25 9615.84,-9447.41 9616.56,-9448.13C 9617.27,-9448.84 9618.44,-9448.84 9619.15,-9448.13L 9622.82,-9444.45C 9623.54,-9443.74 9623.54,-9442.58 9622.82,-9441.86L 9619.15,-9438.18C 9618.79,-9437.83 9618.32,-9437.65 9617.85,-9437.65 Z " Fill="{StaticResource RadTreeView_InsertDragIcon1}" Height="11.016" Margin="1.246,1.546,0,0" Stretch="Fill" Width="11.704"/>
                                   <Path Data="M 9617.53,-9438.84C 9617.15,-9438.84 9616.77,-9438.98 9616.47,-9439.27C 9615.89,-9439.86 9615.89,-9440.81 9616.47,-9441.4L 9617.59,-9442.51L 9613.17,-9442.51C 9612.34,-9442.51 9611.67,-9443.18 9611.67,-9444.01C 9611.67,-9444.84 9612.34,-9445.51 9613.17,-9445.51L 9617.59,-9445.51L 9616.47,-9446.63C 9615.89,-9447.21 9615.89,-9448.16 9616.47,-9448.75C 9617.06,-9449.33 9618.01,-9449.33 9618.6,-9448.75L 9622.27,-9445.07C 9622.86,-9444.48 9622.86,-9443.54 9622.27,-9442.95L 9618.6,-9439.27C 9618.3,-9438.98 9617.92,-9438.84 9617.53,-9438.84 Z " Fill="{StaticResource RadTreeView_InsertDragIcon2}" Height="11.682" Stretch="Fill" StrokeDashCap="Flat" Stroke="{StaticResource RadTreeView_InsertDragStrokeIcon2}" StrokeThickness="1" StrokeLineJoin="Miter" Width="12.371"/>
                               </Grid>
                           </DataTemplate>
                       </Setter.Value>
                   </Setter>
               </Style>
    Please note that the key of the Style is removed in order to apply cause TreeViewDragCue is never definde in the XAML of the TreeView. You can find the described approach in the attached solution.
    Feel free to ask if you need more info.

    All the best,
    Petar Mladenov
    the Telerik team
    Let us know about your Windows Phone 7 application built with RadControls and we will help you promote it. Learn more>>
  3. DevCraft banner
Back to Top