RadDesktopAlert MVVM - Handle Button Click

2 Answers 54 Views

DesktopAlert

Joel asked on 22 May 2024, 06:00 PM

I am attempting to use the desktop alert but instead of reacting to a click on the content I want a button. How do I route this?

View Model Method; show the alert (works)

        private void ShowAlert()
        {
            if (IsShowAlert &&
                AlertTitle.IsNotNullOrEmpty() &&
                AlertText.IsNotNullOrEmpty())
            {
                // Create a new BitmapImage
                BitmapImage bitmap = new BitmapImage();
                bitmap.BeginInit();
                bitmap.UriSource = new Uri("pack://application:,,,/Images/GSI_Cloud_256.ico");
                bitmap.EndInit();

                var image = new System.Windows.Controls.Image() { Source = bitmap };

                desktopAlertManager.ShowAlert(new DesktopAlertParameters
                {
                    Header = AlertTitle,
                    Content = AlertText,
                    Icon = image,
                    IconColumnWidth = 48,
                    IconMargin = new Thickness(10, 0, 20, 0),
                    ShowDuration = AlertShowDuration,
                    Command = new DelegateCommand(OnAlertCommandExecuted)
                });
            }
        }

Respond to the Button Press:

        private void OnAlertCommandExecuted(object param)
        {
            IsShowTrayApp = true;
        }

Alert Style with a Button:

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                    xmlns:telerikNavigation="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.Navigation">

    <SolidColorBrush x:Key="DesktopAlert_BorderBrush" Color="#FF848484"/>
    <LinearGradientBrush x:Key="DesktopAlert_Background" EndPoint="0.5,1" StartPoint="0.5,0">
        <GradientStop Color="Cornsilk" Offset="0"/>
        <GradientStop Color="#FFD4D4D4" Offset="1"/>
    </LinearGradientBrush>
    <SolidColorBrush x:Key="DesktopAlert_InnerBorderBrush" Color="#FFFFFFFF"/>
    <CornerRadius x:Key="DesktopAlert_CornerRadius">1</CornerRadius>
    <SolidColorBrush x:Key="DesktopAlert_ButtonIconStroke" Color="#FFFFFFFF"/>
    <LinearGradientBrush x:Key="DesktopAlert_ButtonIconFill" EndPoint="0.5,1" StartPoint="0.5,0">
        <GradientStop Color="#FF282828"/>
        <GradientStop Color="#FF7C7C7C" Offset="1"/>
    </LinearGradientBrush>

    <DataTemplate x:Key="RadDesktopAlertHeaderTemplate">
        <Grid 
            x:Name="Header" 
            Grid.Column="1" 
            Grid.Row="0" 
            VerticalAlignment="Top" 
            HorizontalAlignment="Stretch"
            Background="{StaticResource ContainerHeaderBackgroundBrush}">

            <StackPanel
                HorizontalAlignment="Left"
                Orientation="Horizontal">

                <Grid>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="30" />
                        <ColumnDefinition Width="*" />
                    </Grid.ColumnDefinitions>

                    <Image 
                        RenderOptions.BitmapScalingMode="Fant"
                        Margin="5 0 5 0"
                        Source="/Images/GSI_Cloud_256.ico"/>

                    <Label
                        Grid.Column="1"
                        Foreground="White"
                        FontWeight="SemiBold"
                        FontSize="14"
                        VerticalContentAlignment="Center"
                        VerticalAlignment="Center"/>
                </Grid>
                
            </StackPanel>

            <StackPanel
                HorizontalAlignment="Right"
                Orientation="Horizontal">

                <Button Height="30" Width="30"  
	                x:Name="DesktopAlert_CloseButton" 
                    Content="🗙"
                    Background="Transparent"
                    BorderThickness="0"
                    Foreground="White"
                    FontSize="20"
                    Margin="0 -3 0 0"
                    FontWeight="Bold"
                    Command="{x:Static telerikNavigation:DesktopAlertCommands.Close}" />

            </StackPanel>

            <ContentPresenter 
                Content="{Binding}" 
                TextBlock.FontWeight="Bold" 
                Margin="0 0 0 0" 
                MinHeight="{Binding ActualHeight, ElementName=DesktopAlert_CloseButton}" Grid.RowSpan="2" VerticalAlignment="Top">

                <ContentPresenter.Resources>
                    <Style TargetType="{x:Type TextBlock}">
                        <Setter Property="TextWrapping" Value="Wrap"/>
                        <Setter Property="Foreground" Value="White" />
                        <Setter Property="VerticalAlignment" Value="Center" />
                        <Setter Property="HorizontalAlignment" Value="Left" />
                        <Setter Property="Margin" Value="30 0 0 0" />
                    </Style>
                </ContentPresenter.Resources>
            </ContentPresenter>

        </Grid>
    </DataTemplate>

    <ControlTemplate x:Key="RadDesktopAlertTemplate" TargetType="{x:Type telerikNavigation:RadDesktopAlert}">
        <Grid x:Name="LayoutRoot">
            <Border Background="White"
                    BorderThickness="{TemplateBinding BorderThickness}" 
                    CornerRadius="{StaticResource DesktopAlert_CornerRadius}">

                <Border BorderBrush="{StaticResource DesktopAlert_InnerBorderBrush}" BorderThickness="1">
                    <Grid>
                        <Grid.RowDefinitions>
                            <RowDefinition Height="Auto"/>
                            <RowDefinition Height="*"/>
                            <RowDefinition Height="26" />
                        </Grid.RowDefinitions>
                        
                        <ContentPresenter 
                            ContentTemplate="{TemplateBinding HeaderTemplate}" 
                            Grid.Column="1" 
                            Content="{TemplateBinding Header}" 
                            Grid.Row="0" VerticalAlignment="Top"/>

                        <ContentPresenter 
                            x:Name="Content" 
                            Cursor="Hand" 
                            Grid.Column="1" 
                            HorizontalAlignment="Center" 
                            Margin="0 7 0 0" Grid.Row="1" VerticalAlignment="Top">

                            <ContentPresenter.Resources>
                                <Style TargetType="{x:Type TextBlock}">
                                    <Setter Property="TextWrapping" Value="Wrap"/>
                                    <Setter Property="TextTrimming" Value="CharacterEllipsis"/>
                                    <Setter Property="HorizontalAlignment" Value="Center" />
                                    <Setter Property="FontSize" Value="14" />
                                </Style>
                            </ContentPresenter.Resources>
                        </ContentPresenter>

                        <Grid Grid.Row="2">
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="*" />
                                <ColumnDefinition Width="*" />
                                <ColumnDefinition Width="126" />
                            </Grid.ColumnDefinitions>

                            <Button
                                Style="{StaticResource ButtonStyle}"
                                Grid.Column="2"
                                Content="Open" 
                                Command="{Binding OnAlertCommandExecuted}"/>
                        </Grid>
                    </Grid>
                </Border>
            </Border>
        </Grid>
    </ControlTemplate>

    <Style TargetType="{x:Type telerikNavigation:RadDesktopAlert}">
        <Setter Property="Padding" Value="10 8"/>
        <Setter Property="Opacity" Value="0.9"/>
        <Setter Property="SnapsToDevicePixels" Value="True"/>
        <Setter Property="FontFamily" Value="Segoe UI"/>
        <Setter Property="FontSize" Value="14"/>
        <Setter Property="Background" Value="Transparent"/>
        <Setter Property="BorderBrush" Value="{StaticResource DesktopAlert_BorderBrush}"/>
        <Setter Property="BorderThickness" Value="1"/>
        <Setter Property="Width" Value="360"/>
        <Setter Property="Height" Value="130"/>
        <Setter Property="Template" Value="{StaticResource RadDesktopAlertTemplate}"/>
        <Setter Property="HeaderTemplate" Value="{StaticResource RadDesktopAlertHeaderTemplate}"/>
    </Style>
</ResourceDictionary>

Joel

commented on 22 May 2024, 06:08 PM

This is a picture of my Alert

Stenly

commented on 24 May 2024, 11:54 AM

Thank you for the provided image and information.

2 Answers, 1 is accepted

answered on 24 May 2024, 11:54 AM

sampleproject.zip

Hello Joel,

This behavior can be achieved via an attached property, which will retrieve the additional "Open" Button element inside the customized ControlTemplate of RadDesktopAlert and set its Command property to the Command property of the control. The reason for this approach is that the elements inside the ControlTemplate of RadDesktopAlert do not have a DataContext, so, directly binding to your Command will not apply it.

With this in mind, the following code snippets show the above suggestion's implementation:

public class RadAlertExtensions
{
    public static bool GetShouldSetCommandToButton(DependencyObject obj)
    {
        return (bool)obj.GetValue(ShouldSetCommandToButtonProperty);
    }

    public static void SetShouldSetCommandToButton(DependencyObject obj, bool value)
    {
        obj.SetValue(ShouldSetCommandToButtonProperty, value);
    }

    public static readonly DependencyProperty ShouldSetCommandToButtonProperty =
        DependencyProperty.RegisterAttached("ShouldSetCommandToButton", typeof(bool), typeof(RadAlertExtensions), new PropertyMetadata(false, OnShouldSetCommandToButtonChanged));

    private static void OnShouldSetCommandToButtonChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
    {
        if ((bool)e.NewValue)
        {
            RadDesktopAlert radDesktopAlert = (RadDesktopAlert)d;

            radDesktopAlert.Loaded += RadDesktopAlert_Loaded;
        }
    }

    private static void RadDesktopAlert_Loaded(object sender, RoutedEventArgs e)
    {
        RadDesktopAlert radDesktopAlert = (RadDesktopAlert)sender;

        //openAlertButton is the additional Button element in the ControlTemplate. I set an x:Name to it, so it can be easily retrieved by the ChildrenOfType method
        Button button = radDesktopAlert.ChildrenOfType<Button>().FirstOrDefault( x=> x.Name == "openAlertButton");

        if (button != null)
        {
            button.Command = radDesktopAlert.Command;
        }

        radDesktopAlert.Loaded -= RadDesktopAlert_Loaded;
    }
}

<Style TargetType="telerikNavigation:RadDesktopAlert">
    <Setter Property="Padding" Value="10 8"/>
    <Setter Property="local:RadAlertExtensions.ShouldSetCommandToButton" Value="True"/>
    <Setter Property="Opacity" Value="0.9"/>
    <Setter Property="SnapsToDevicePixels" Value="True"/>
    <Setter Property="FontFamily" Value="Segoe UI"/>
    <Setter Property="FontSize" Value="14"/>
    <Setter Property="Background" Value="Transparent"/>
    <Setter Property="BorderBrush" Value="{StaticResource DesktopAlert_BorderBrush}"/>
    <Setter Property="BorderThickness" Value="1"/>
    <Setter Property="Width" Value="360"/>
    <Setter Property="Height" Value="130"/>
    <Setter Property="Template" Value="{StaticResource RadDesktopAlertTemplate}"/>
    <Setter Property="HeaderTemplate" Value="{StaticResource RadDesktopAlertHeaderTemplate}"/>
</Style>

With this being said, I have attached a sample project for you to test, which contains the above suggestion's implementation.

Regards,
Stenly
Progress Telerik

A brand new ThemeBuilder course was just added to the Virtual Classroom. The training course was designed to help you get started with ThemeBuilder for styling Telerik and Kendo UI components for your applications. You can check it out at https://learn.telerik.com

answered on 24 May 2024, 11:59 AM

Hello Joel,

I am writing this additional answer to let you know that the suggestion from the previous answer that I provided is not the most optimal one.

Instead of implementing a custom attached property, you could use TemplateBinding on the Command property of the additional Button and set it to the Command property of RadDesktopAlert.

The following code snippet shows this suggestion's implementation:

<ControlTemplate x:Key="RadDesktopAlertTemplate" TargetType="{x:Type telerikNavigation:RadDesktopAlert}">
    <Grid x:Name="LayoutRoot">
        <Border Background="White"
                BorderThickness="{TemplateBinding BorderThickness}" 
                CornerRadius="{StaticResource DesktopAlert_CornerRadius}">

            <Border BorderBrush="{StaticResource DesktopAlert_InnerBorderBrush}" BorderThickness="1">
                <Grid>
                    <Grid.RowDefinitions>
                        <RowDefinition Height="Auto"/>
                        <RowDefinition Height="*"/>
                        <RowDefinition Height="26" />
                    </Grid.RowDefinitions>

                    <ContentPresenter 
                        ContentTemplate="{TemplateBinding HeaderTemplate}" 
                        Grid.Column="1" 
                        Content="{TemplateBinding Header}" 
                        Grid.Row="0" VerticalAlignment="Top"/>

                    <ContentPresenter 
                        x:Name="Content" 
                        Cursor="Hand" 
                        Grid.Column="1" 
                        HorizontalAlignment="Center" 
                        Margin="0 7 0 0" Grid.Row="1" VerticalAlignment="Top">

                        <ContentPresenter.Resources>
                            <Style TargetType="{x:Type TextBlock}">
                                <Setter Property="TextWrapping" Value="Wrap"/>
                                <Setter Property="TextTrimming" Value="CharacterEllipsis"/>
                                <Setter Property="HorizontalAlignment" Value="Center" />
                                <Setter Property="FontSize" Value="14" />
                            </Style>
                        </ContentPresenter.Resources>
                    </ContentPresenter>

                    <Grid Grid.Row="2">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="*" />
                            <ColumnDefinition Width="*" />
                            <ColumnDefinition Width="126" />
                        </Grid.ColumnDefinitions>

                        <Button x:Name="openAlertButton"
                                Grid.Column="2"
                                Content="Open"
                                Command="{TemplateBinding Command}"/>
                    </Grid>
                </Grid>
            </Border>
        </Border>
    </Grid>
</ControlTemplate>

With this being said, could you give this suggestion a try and let me know how it goes?

Regards,
Stenly
Progress Telerik