RibbonButton stays highlighted if it is dragged

[Andreas]

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

[Tina Stancheva]

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

[Andreas]

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

[Tina Stancheva]

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

[Andreas]

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