NotifyIcon RadHyperlink command not calling Viewmodel

[Ravi]

We are working on project and using Telerik with MVVM approach using Prism framework.
We want to notify user about some tasks or messages for which we have used RadNotifyIcon.
We are able to notify user but we want to give a link in the notification on click of which user will be redirected to some internal Menu page(a XAML page within the application).
For Menu control we have used Rad Navigation View(Hamburger Menu) and it is working fine when navigated from one menu to another.
We are facing a challenge in achieving the same using PRSIM MVVM approach. We are not getting the click event(Command) of the hyperlink present in NotifyIcon to ViewModel to navigate to the view.
Kindly help us to achieve this. Below is our code let us know where are we going wrong or is there any other way to navigate to existing view using Radnotifyicon link click?

We have tried RadHyperlink control as well as RadRadioButton. Both are not working

Below is the designer code:

<UserControl
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"
    xmlns:av="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:prism="http://prismlibrary.com/"
    mc:Ignorable="av" x:Class="Voyager.Views.Notifications"
    prism:ViewModelLocator.AutoWireViewModel="True"
             av:DesignWidth="718.431" av:DesignHeight="416.528">
    <UserControl.Resources>
        <DataTemplate x:Key="CalloutContentTemplate">
            <StackPanel Width="300">
                <telerik:RadButton Cursor="Hand" IsBackgroundVisible="False"
                                   Padding="0" VerticalAlignment="Top" HorizontalAlignment="Right"
                                   Command="{x:Static telerik:WindowCommands.Close}">
                    <telerik:RadGlyph Glyph="&#xE11B;"/>
                </telerik:RadButton>
                <Image Source="/Images/Splash3.PNG" />
                <TextBlock TextWrapping="Wrap" MaxWidth="200" x:Name="Notification" FontWeight="Bold"  Margin="0 0 0 10"/>

<!--<telerik:RadHyperlinkButton x:Name="RadHyperlinkButton1" Content="Click here to open Telerik WPF Documentation"  Command="{Binding MyCommand}" CommandParameter="InternetUsage"-->
                <telerik:RadRadioButton Command="{Binding MyCommand}"
                                    CommandParameter="InternetUsage"
                                    Tag="ACTIVITIES" Style="{StaticResource RadRadioButtonLargeStyle}"/>
            </StackPanel>
        </DataTemplate>
        <DataTemplate x:Key="NotifyIconPopupContentTemplate">
            <telerik:RadCallout x:Name="CalloutButton"  ArrowAnchorPoint="0.8,1.1"
                                ArrowBasePoint1="1,0.5"
                                ArrowBasePoint2="0.6,0.5"
                                ArrowType="Triangle"
                                Padding="10 15"
                                TextAlignment="Left"
                                Margin="30"
                                ContentTemplate="{StaticResource CalloutContentTemplate}"/>
        </DataTemplate>
    </UserControl.Resources>
    <Grid HorizontalAlignment="Center" VerticalAlignment="Center" FocusManager.FocusedElement="{Binding ElementName=ShowNotifyIconButton}">
        <Border BorderThickness="1" BorderBrush="#33000000" Width="500">
            <StackPanel VerticalAlignment="Stretch">
                <TextBlock HorizontalAlignment="Center" Foreground="#FF333333" Margin="0 30 0 35" FontSize="24" Text="Welcome to RadNotifyIcon demos"/>
                <TextBlock HorizontalAlignment="Center" Margin="0 0 0 10" FontSize="16" Text="Click on the button below to show the NotifyIcon in the tray area."/>
                <TextBlock HorizontalAlignment="Center" Foreground="#FF0099BC" FontSize="12" Text="Note, that the icon may be hidden in the overflow area of the notification tray."/>
                <telerik:RadButton x:Name="ShowNotifyIconButton"
                                   Loaded="OnShowNotifyIconButtonLoaded"
                                   HorizontalAlignment="Center" MinWidth="170" Margin="0 40 0 30" Content="Show NotifyIcon" Click="OnShowNotifyIconButtonClick" />
                <telerik:RadNotifyIcon x:Name="NotifyIcon"
                                       ShowTrayIcon="True"
                                       TrayIconSource="/Images/voyager_icon_green.ico"
                                       PopupContentTemplate="{StaticResource NotifyIconPopupContentTemplate}" PopupShowDuration="10000" TrayIconMouseUp="NotifyIcon_TrayIconMouseUp"/>
            </StackPanel>
        </Border>
    </Grid>
</UserControl>

Below is the ViewModel code:

 

   public class NotificationsViewModel : BindableBase
    {
        public IRegionManager _regionManager = null;
        public NotificationsViewModel(IRegionManager regionManager)
        {
            _regionManager = regionManager;
            MyCommand = new DelegateCommand<string>(OnCommandExecuted);
        }
        private void OnCommandExecuted(string url)
        {
            Navigate(url);
        }

        public ICommand MyCommand { get; set; }
        public void Navigate(string navigatePath)
        {
            _regionManager.RequestNavigate("ContentRegion", navigatePath);
        }
    }

 

 

[Dilyan Traykov]

Hello Ravi,

Thank you for the provided code snippet.

With this particular setup, you need to explicitly define the DataContext of the RadCallout and its content as they cannot be inferred implicitly:

        <DataTemplate x:Key="CalloutContentTemplate">
            <StackPanel Width="300" DataContext="{Binding DataContext, RelativeSource={RelativeSource AncestorType=telerik:RadCallout}}">
                <telerik:RadButton Cursor="Hand" Content="Close" IsBackgroundVisible="False"
                                   Padding="0" VerticalAlignment="Top" HorizontalAlignment="Right"
                                   Command="{x:Static telerik:WindowCommands.Close}">
                    <!--<telerik:RadGlyph Glyph="&#xE11B;"/>-->
                </telerik:RadButton>
                <!--<Image Source="/Images/Splash3.PNG" />-->
                <TextBlock TextWrapping="Wrap" MaxWidth="200" x:Name="Notification" FontWeight="Bold"  Margin="0 0 0 10"/>

                <!--<telerik:RadHyperlinkButton x:Name="RadHyperlinkButton1" Content="Click here to open Telerik WPF Documentation"  Command="{Binding MyCommand}" CommandParameter="InternetUsage"-->
                <telerik:RadRadioButton Content="{Binding Title}" Command="{Binding MyCommand}"
                                    CommandParameter="InternetUsage"
                                    Tag="ACTIVITIES"/>
            </StackPanel>
        </DataTemplate>
        <DataTemplate x:Key="NotifyIconPopupContentTemplate">
            <telerik:RadCallout x:Name="CalloutButton" 
                                DataContext="{Binding DataContext, RelativeSource={RelativeSource AncestorType=HeaderedContentControl}}"
                                ArrowAnchorPoint="0.8,1.1"
                                ArrowBasePoint1="1,0.5"
                                ArrowBasePoint2="0.6,0.5"
                                ArrowType="Triangle"
                                Padding="10 15"
                                TextAlignment="Left"
                                Margin="30"
                                ContentTemplate="{StaticResource CalloutContentTemplate}"/>
        </DataTemplate>

I'm attaching a small sample project where doing so seems to correctly invoke the custom command defined in the main viewmodel.

Please give the same approach a try and let me know if it works in your original application as well.

Regards,
Dilyan Traykov
Progress Telerik

[Ravi]

Thanks for solution. We were able to navigate to the required screen. However post navigating to the screen, notifyicon popup is not getting closed. Please let us know how to close the notifyicon popup from view model post Navigation.

We know we will not get notifyicon instance in viewmodel class. Hence we are struggling to close. We wanted to implement entire functionality of RadNotifyIcon control from viewmodel and remove all code from code behind cs file.

We have tried this but we are not able to call NotifyIcon from ViewModel at particular intervals of time. Also we do not have anything mentioned in documentation.

 

Let us know if it is possible to implement. If yes, Please provide some sample. 

 

[Dilyan Traykov]

Hello Ravi,

If I correctly understand your requirement, you can close the notify icon after the button is clicked by invoking an additional command via the EventToCommandBehavior helper class:

                <telerik:RadRadioButton Content="{Binding Title}" Command="{Binding MyCommand}"
                                    CommandParameter="InternetUsage"
                                    Tag="ACTIVITIES">
                    <telerik:EventToCommandBehavior.EventBindings>
                        <telerik:EventBinding EventName="MouseLeftButtonUp" Command="{x:Static telerik:WindowCommands.Close}" RaiseOnHandledEvents="True" />
                    </telerik:EventToCommandBehavior.EventBindings>
                </telerik:RadRadioButton>

I've updated the sample project to demonstrate this approach. Please give it a try and let me know if it works for you.

Regards,
Dilyan Traykov
Progress Telerik

[Ravi]

Hello Dilyan,

Thanks a lot for the solution. We were able to close the Popup.

Also we need to implement entire functionality of RadNotifyIcon control from viewmodel and remove all code from code behind cs file.

Please let us know if the same can be achieved. If so, please provide us a sample project 

Thanks & Regards,

Ravi

 

 

 

[Dilyan Traykov]

Hello Ravi,

I'm happy to hear that you can now close the popup as expected.

To follow the MVVM pattern and remove the code from the code-behind file, you can create a service class responsible for showing the icon as so:

    public interface INotificationService
    {
        void ShowPopup();
    }

    public class NotificationService : INotificationService
    {
        public NotificationService(RadNotifyIcon icon)
        {
            this.NotifyIcon = icon;
        }

        public void ShowPopup()
        {
            if (!this.NotifyIcon.ShowTrayIcon)
            {
                this.NotifyIcon.AddIcon();
            }

            this.NotifyIcon.ShowPopup();
        }

        public RadNotifyIcon NotifyIcon { get; }
    }

You can then use this class in your viewmodel by creating an additional command and invoking it when the button is clicked:

        public MainWindowViewModel(IRegionManager regionManager, INotificationService notificationService)
        {
            _regionManager = regionManager;
            _notificationService = notificationService;
            MyCommand = new DelegateCommand<string>(OnCommandExecuted);
            CloseIconCommand = new DelegateCommand<object>(OnCloseIconCommandExecuted);
            ShowNotificationCommand = new DelegateCommand<object>(OnShowNotificationCommandExecuted);
        }

        private void OnShowNotificationCommandExecuted(object obj)
        {
            this._notificationService.ShowPopup();
        }

I am, however, uncertain which is the best way to pass the service with the RadNotifyIcon to the viewmodel, but you can forward this inquiry to the Prism team to get further assistance. I do hope you find this suggestion helpful, though.

Regards,
Dilyan Traykov
Progress Telerik