RibbonButton stays highlighted if it is dragged

5 posts, 1 answers
  1. Andreas
    Andreas avatar
    36 posts
    Member since:
    Sep 2008

    Posted 15 Feb 2012 Link to this post

    Hi,

    I am currently developing a small flowchart tool. Therefore I use a menu consisting of several RibbonButtons. The user can drag a button from the menu onto a canvas and drop it there. The problem is now, that the dragged button is still highlighted if the left mouse-button is released on the canvas to drop it there. The result is a menu with a lot of highlighted buttons (view attached picture).

    Is there a way to release the selection of the button manually? Or does anyone know another solution to this problem.

    Thanks for your help,
    Andreas
  2. Tina Stancheva
    Admin
    Tina Stancheva avatar
    3298 posts

    Posted 20 Feb 2012 Link to this post

    Hi Andreas,

    The issue is caused by the fact that the buttons remain in their mouse over visual state. But you can manually set their state back to normal on DragCompleted:

    public void OnDragCompleted(object sender, Telerik.Windows.DragDrop.DragDropCompletedEventArgs args)
    {
        VisualStateManager.GoToState((args.Data as RadRibbonButton), "Normal", false);
    }


    However, as you said you need to create a flow chart, it would be easier to take advantage of the new Telerik Diagraming Framework. You can examine its demo here - if you open the Backstage menu of the RibbonView you'll find a couple of flow chart samples that can get you started. You can also examine the online documentation of the framework here.

    All the best,
    Tina Stancheva
    the Telerik team
    Sharpen your .NET Ninja skills! Attend Q1 webinar week and get a chance to win a license! Book your seat now >>
  3. DevCraft banner
  4. Andreas
    Andreas avatar
    36 posts
    Member since:
    Sep 2008

    Posted 20 Feb 2012 Link to this post

    Hi,

    setting the visual state did only partly solve the problem. The dragged button is deselected now, but the RadRibbonGroup to which the button belongs is still highlighted. Setting the visual state of the group didn't help.

    Here the essential parts of the XAML:
    <DataTemplate x:Name="ButtonTemplate">
       <telerikRibbon:RadRibbonButton HorizontalContentAlignment="Stretch" Loaded="MenuItem_Loaded" Command="{Binding ButtonClickCommand}">
         <StackPanel Orientation="Vertical" Width="70">
         <Image Source="{Binding ImgSource}" Margin="0,0,4,0" Height="18" Width="18" HorizontalAlignment="Center"></Image>
         <TextBlock Text="{Binding Text}" HorizontalAlignment="Center"></TextBlock>
         </StackPanel>
       </telerikRibbon:RadRibbonButton>
    </DataTemplate>
    ......
    <StackPanel Grid.Column="0" Grid.Row="0" Orientation="Horizontal" Margin="3,1,0,0" >
       <telerikRibbon:RadRibbonGroup x:Name="GroupEdit" Header="{Binding TXT020, Source={StaticResource DesignerWindowResources}}" ItemsSource="{Binding EditItems}" ItemTemplate="{StaticResource ButtonTemplate}"/>
       <telerikRibbon:RadRibbonGroup x:Name="GroupItems" Header="{Binding TXT021, Source={StaticResource DesignerWindowResources}}" ItemsSource="{Binding MenuItems}" ItemTemplate="{StaticResource ButtonTemplate}" />
    </StackPanel>

    Thanks for your help,
    Andreas
  5. Answer
    Tina Stancheva
    Admin
    Tina Stancheva avatar
    3298 posts

    Posted 23 Feb 2012 Link to this post

    Hi Andreas,

    The issue with the RibbonGroup is caused again by the fact that during the drag process the control doesn't receive a MouseLeave event to notify it that the mouse over state has finished. However using the VisualStateManager can help again. However as an uncollapsed RadRibbonGroup is represented by the GroupChrome control, you need to change its state:
    public void OnDragCompleted(object sender, Telerik.Windows.DragDrop.DragDropCompletedEventArgs args)
    {
        VisualStateManager.GoToState((args.Data as RadRibbonButton), "Normal", false);
        GroupChrome groupChromeElement = (args.OriginalSource as RadRibbonButton).ParentOfType<GroupChrome>();
        VisualStateManager.GoToState(groupChromeElement, "Normal", false);
     
    }

    Give this a try and let me know if it helps.

    Regards,
    Tina Stancheva
    the Telerik team
    Sharpen your .NET Ninja skills! Attend Q1 webinar week and get a chance to win a license! Book your seat now >>
  6. Andreas
    Andreas avatar
    36 posts
    Member since:
    Sep 2008

    Posted 23 Feb 2012 Link to this post

    Hi Tina,

    thanks, it works.

    Thank you also for the hint to Telerik Diagraming Framework. I will have a look at it.

    Kind regards,
    Andreas
Back to Top
DevCraft banner