This is a migrated thread and some comments may be shown as answers.

How to make RadTileViewItem header clickable + draggable

5 Answers 127 Views
TileView
This is a migrated thread and some comments may be shown as answers.
Huy
Top achievements
Rank 1
Huy asked on 31 Jul 2014, 08:57 PM
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

5 Answers, 1 is accepted

Sort by
0
Martin Ivanov
Telerik team
answered on 05 Aug 2014, 12:55 PM
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
 
Check out Telerik Analytics, the service which allows developers to discover app usage patterns, analyze user data, log exceptions, solve problems and profile application performance at run time. Watch the videos and start improving your app based on facts, not hunches.
 
0
Huy
Top achievements
Rank 1
answered on 05 Aug 2014, 03:40 PM
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?


0
Huy
Top achievements
Rank 1
answered on 05 Aug 2014, 03:43 PM
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?
0
Accepted
Martin Ivanov
Telerik team
answered on 08 Aug 2014, 07:47 AM
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
 
Check out Telerik Analytics, the service which allows developers to discover app usage patterns, analyze user data, log exceptions, solve problems and profile application performance at run time. Watch the videos and start improving your app based on facts, not hunches.
 
0
Huy
Top achievements
Rank 1
answered on 08 Aug 2014, 03:18 PM
Hey Martin I really like the solution you provided
Thanks for the support

Cheers :)
Tags
TileView
Asked by
Huy
Top achievements
Rank 1
Answers by
Martin Ivanov
Telerik team
Huy
Top achievements
Rank 1
Share this question
or