How to make RadTileViewItem header clickable + draggable

6 posts, 1 answers
  1. Huy
    Huy avatar
    10 posts
    Member since:
    Jul 2014

    Posted 31 Jul 2014 Link to this post

    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
  2. Martin
    Admin
    Martin avatar
    1101 posts

    Posted 05 Aug 2014 Link to this post

    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.
     
  3. UI for WPF is Visual Studio 2017 Ready
  4. Huy
    Huy avatar
    10 posts
    Member since:
    Jul 2014

    Posted 05 Aug 2014 in reply to Martin Link to this post

    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?


  5. Huy
    Huy avatar
    10 posts
    Member since:
    Jul 2014

    Posted 05 Aug 2014 Link to this post

    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?
  6. Answer
    Martin
    Admin
    Martin avatar
    1101 posts

    Posted 08 Aug 2014 Link to this post

    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.
     
  7. Huy
    Huy avatar
    10 posts
    Member since:
    Jul 2014

    Posted 08 Aug 2014 in reply to Martin Link to this post

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

    Cheers :)
Back to Top
UI for WPF is Visual Studio 2017 Ready