How to make RadTileViewItem header clickable + draggable

[Huy]

Thanks telerik team for being extremely helpful
I'm having another issue and hope that someone can help me with

I want to make the header of the radtileviewitem clickable (i.e. clicking on the header will fire up the same event as clicking on the content area)
I did tried setting the template under headerstyle to a button, but doing this, I will lose the dragging ability on the tileviewitem

Is there a way for me to achieve both (clickable + draggable header) ?
Thanks

[Martin Ivanov]

Hello Huy,

In order to subscribe for an event that is executed when you click on the header of the RadTileViewItem you can register a class handler. Here is an example in code:

public partial class MainWindow : Window
{
    public MainWindow()
    {
        InitializeComponent();

        EventManager.RegisterClassHandler(typeof(TileViewItemHeader), TileViewItemHeader.MouseLeftButtonDownEvent, new MouseButtonEventHandler(OnMouseDown));
    }

    private void OnMouseDown(object sender, MouseButtonEventArgs e)
    {
       // do something
    }
}

I hope this helps in your case.

Regards,
Martin
Telerik

 

 

[Huy]

Hi Martin,

Thanks for the solution, but it does not entirely solve my problem
OnMouseDown will be fired every time I click on the header, even when I just want to drag the tile
I want to simulate the click event (i.e. it only fires when I LeftMouseDown + LeftMouseUp on the same spot)
From your code, I can come up with a workaround as follow:

public MainWindow()    {
    InitializeComponent();
    EventManager.RegisterClassHandler(typeof(TileViewItemHeader), TileViewItemHeader.MouseLeftButtonDownEvent, new MouseButtonEventHandler(OnMouseDown));
    EventManager.RegisterClassHandler(typeof(TileViewItemHeader), TileViewItemHeader.MouseLeftButtonUpEvent, new MouseButtonEventHandler(OnMouseUp));
}

private void OnMouseDown(...)
{
    // Record mouse position 1
}

private void OnMouseUp(...)
{
    // Record mouse position 2
    // if mouse pos 1 == mouse pos 2 --> do something
}

Not sure if there is a better solution out there?

[Huy]

The reason I don't like this solution is too much code behind
Is there anyway I can do all this in xaml? Or I have to create a custom control that inherits from telerik:RadTileViewItem?

[Martin Ivanov]

Hi Huy,

The RadTileView doesn't support such click event out of the box and there is no an easy approach that can be used to achieve your requirement only in XAML. However, as I can see you came up with a solution that works in your case and it is not complex.

Note that the MouseUp event will be called only if the TileViewItem is not dragged (i.e. only when is clicked). Therefore you can use only this event and skip the MouseDown. This behavior is caused by the fact that when you start dragging the item captures the mouse and the MouseUp of the header is never fired.

If you are using the MVVM pattern and you don't want to use the code-behind at all you can try to use the EventToCommand behavior and add an ICommand from your view model that will be executed when the mouse is up. Basically you can extract the ControlTemplate of the RadTileViewItem and add the behavior inside the TileViewItemHeader element.

<tileView:TileViewItemHeader x:Name="HeaderPart" ContentTemplate="{TemplateBinding HeaderTemplate}" Content="{TemplateBinding Header}">
    <telerik:EventToCommandBehavior.EventBindings>
        <telerik:EventBinding Command="{Binding DataContext.ItemClickCommand, RelativeSource={RelativeSource AncestorType=telerik:RadTileView}}" EventName="MouseUp" />
    </telerik:EventToCommandBehavior.EventBindings>
</tileView:TileViewItemHeader>

You can see this approach demonstrated in the attached project. Please give it a try and let me know if it works for you.

Regards,
Martin
Telerik

 

 

[Huy]

Hey Martin I really like the solution you provided
Thanks for the support

Cheers :)