Desktop Alert+ Customization

[Sarah]

Hi,

1-How can I implement the following two images in WPF desktop alert?

2-Is it possible to adjust the height automatically based on the content?

[Dinko]

Hello Sarah,

1-How can I implement the following two images in WPF desktop alert?

To add an image to your DesktopAlert control you can take a look at Key Properties article in our section. Then you can go to the Icon topic and see how to add an image in your code.

2-Is it possible to adjust the height automatically based on the content?

The default style of the RadDesktopAlert control sets a fixed value for its Height property. To have the alert automatically size to its content, you can define a new Style for the RadDesktopAlert element and set the Height property to NaN:

<Style TargetType="telerikNavigation:RadDesktopAlert">
	<Setter Property="Height" Value="NaN"/>
</Style>

As the alert is shown in a separate window, you should define the Style in the App.xaml file, in order to be applied to the created RadDesktopAlert instance.

In addition to this, I attached a sample solution where this logic is implemented.

[Sarah]

Hello

Thank you for your answer.

1-  The source code that you attached is .net core and I could not run it. Is it possible to put a source for .net framework 4.6?
2-Is it possible to put another picture next to the title??

3- What is the name of the following theme?

[Dinko]

Hello Sarah,

2-Is it possible to put another picture next to the title?

If you want to add it in the header of the alert, you can use the Header property and instead of a string pass an UI element that shows the picture and the text. Here is an example in C# code how you can achieve this:

private void ShowAlert_Click(object sender, RoutedEventArgs e)
{
	RadDesktopAlertManager manager = new RadDesktopAlertManager();

	var alert = new RadDesktopAlert();
	{
		alert.Header = CreateAlertHeaderContent("MAIL NOTIFICATION");
		alert.Content = "Hello, Here are two things that we noticed today on our daily meeting.";
	};

	manager.ShowAlert(alert);
}

private UIElement CreateAlertHeaderContent(string text)
{
	var textBlock = new TextBlock() { Text = text };

	var image = new Image()
	{
		Source = new BitmapImage(new Uri("C:\\Users\\dihristo\\source\\repos\\Week 12\\Monday\\DesktopAlert_AddImage\\weather.png", UriKind.RelativeOrAbsolute)),
		Width = 30,
		Height = 30
	};

	var stackPanel = new StackPanel() { Orientation = Orientation.Horizontal };
	stackPanel.Children.Add(image);
	stackPanel.Children.Add(textBlock);

	return stackPanel;
}

3- What is the name of the following theme?

The following theme is VisualStudio2013.

1-  The source code that you attached is .net core and I could not run it. Is it possible to put a source for .net framework 4.6?

I prepared a sample solution using .NET 4.6.

[Sarah]

Hi,

Thank you for your reply
1- As shown in the figure below, there is a long distance between the title and the close button. How can I remove this empty space so that more characters can be placed in the title?
2- How can I change the color of the X in the close button?

 var alert = new RadDesktopAlert();
            {
                alert.Header = CreateAlertHeaderContent("MAIL NOTIFICATION  MAIL NOTIFICATION  MAIL22 NOTIFICATION");
                alert.Content = "Hello, Here are two things that we noticed today on our daily meeting.";
                alert.CanAutoClose = false;
            };

3-How can I reduce the distance between the title and the content?

 

[Dinko]

Hi Sarah,

1- As shown in the figure below, there is a long distance between the title and the close button. How can I remove this empty space so that more characters can be placed in the title?

To remove the empty space between the title and the close button you can subscribe to the Loaded event of the RadDesktopAlert. After that you could take the TextBlock with ChildrenOfType method. When you get the RadDesktopAlert text block in order to remove the empty space you could take the TextBlock ContentPresenter with ParentOfType method and change the Margin property value.

alert.Loaded += RemoveHeaderEmptySpace;

private void ModifyCloseButtonAndRemoveHeaderEmptySpace(object sender, RoutedEventArgs e)
{
        var textBlock = this.alert.ChildrenOfType<TextBlock>().FirstOrDefault();
        var parent = textBlock.ParentOfType<ContentPresenter>();
	parent.Margin = new Thickness(0, 0, 25, 0);
}

In order to place more characters in the title you can replace title text empty spaces with "\x00A0" if you set your Header property in the C# code. If you set it in the XAML you can replace empty spaces with " ". This needs to be done in order to make the Header text just a single word and use the TextTrimming property to trim the text by characters instead of white spaces.

2- How can I change the color of the X in the close button?

In order to achieve this requirement, you could subscribe to the Loaded event of the RadDesktopAlert and take the close button with the ChildrenOfType method and change Background and Foreground properties values.

alert.Loaded += ModifyCloseButton;

private void ModifyCloseButtonAndRemoveHeaderEmptySpace(object sender, RoutedEventArgs e)
{
	var closeButton = this.alert.ChildrenOfType<RadButton>().FirstOrDefault(x => x.Name == "DesktopAlert_CloseButton");
	closeButton.Background = Brushes.Red;
	closeButton.Foreground = Brushes.GreenYellow;
}

This is the result after the changes:

I addition to this, I prepared a sample solution where this behavior is implemented.

[Sarah]

Hello, thank you for your reply
After the user clicks on the alert content, the alert is closed. How to prevent this? Just click on the close button to close the alert.

[Stenly]

Hello Sarah,

To prevent the RadDesktopAlert from closing when pressing the content, derive from the RadDesktopAlert class and override the OnMouseLeftButtonUp method as follows:

public partial class MyAlert : RadDesktopAlert
{
    protected override void OnMouseLeftButtonUp(MouseButtonEventArgs e)
    {
    }
}

I hope the provided information will be of help to you.

[Sarah]

Hi Stenly,

Thank you for your reply.
1-I had trouble using your suggestion. Is it possible to update the source you provided earlier with your solution?

https://www.telerik.com/forums/attachments/1118925

2-What is the name of the theme in the image below?

 

[Stenly]

Hello Sarah,

I have modified the sample project to include the suggestion from my previous reply and have attached it for you to test.

Regarding the image, the theme that is applied to the RadDesktopAlert is our Office_Black theme.

[Sarah]

Hi Stenly,

Thank you for your reply.
I used your code and encountered a few issues
For example, the height of the Alert is not set automatically. Or padding around the header, content that should be reduced.

[Stenly]

Hello Sarah,

For the height question,  since the RadDesktopAlert is derived and that type is used, the Style that targets it and sets the Height property to Auto will not work. In order to apply this setting, use the following Style:

<Style TargetType="local:MyAlert">
    <Setter Property="Height" Value="NaN"/>
</Style>

For the padding, modify the values of the new Thickness instance for the Margin property of the ContentPresenter element that is retrieved in the Loaded event of the custom RadDesktopAlert.

private void ModifyCloseButtonAndRemoveHeaderEmptySpace(object sender, RoutedEventArgs e)
{
    var closeButton = this.alert.ChildrenOfType<RadButton>().FirstOrDefault(x => x.Name == "DesktopAlert_CloseButton");
    closeButton.Background = Brushes.Red;
    closeButton.Foreground = Brushes.GreenYellow;

    var textBlock = this.alert.ChildrenOfType<TextBlock>().FirstOrDefault();
    var parent = textBlock.ParentOfType<ContentPresenter>();
    //Modify the Thickness instance's values
    parent.Margin = new Thickness(0, 0, 25, 0);
}

To reduce the distance between the title and the content, retrieve ContentPresenter with x:Name="Content" and set a new Thickness instance to its Margin property. The current value is "0, 7, 0, 0".

private void ModifyCloseButtonAndRemoveHeaderEmptySpace(object sender, RoutedEventArgs e)
{
    var closeButton = this.alert.ChildrenOfType<RadButton>().FirstOrDefault(x => x.Name == "DesktopAlert_CloseButton");
    closeButton.Background = Brushes.Red;
    closeButton.Foreground = Brushes.GreenYellow;

    var textBlock = this.alert.ChildrenOfType<TextBlock>().FirstOrDefault();
    var parent = textBlock.ParentOfType<ContentPresenter>();
    parent.Margin = new Thickness(0, 0, 25, 0);

    ContentPresenter contentContentPresenter = this.alert.ChildrenOfType<ContentPresenter>().FirstOrDefault(x => x.Name == "Content");

    if (contentContentPresenter != null)
    {
        contentContentPresenter.Margin = new Thickness(0);
    }
}

I hope this information will be of help to you.

[Sarah]

Hi Stenly,

Thank you for your reply.
Using your code, the height will be set automatically and thank you for your guidance.
Where should I use the ModifyCloseButtonAndRemoveHeaderEmptySpace method?

[Stenly]

Hello Sarah,

The ModifyCloseButtonAndRemoveHeaderEmptySpace method is the event handler for the Loaded event of the RadDesktopAlert control. In this scenario, this approach is used to modify some of the elements of the control, in order to achieve your requirements.

I hope the provided information will be of help to you.

[Sarah]

Hello
I used Telerik DesktopAlert in WPF. I shared the exe folder in the LAN and the client executes the file. Unfortunately, sometimes the exe file is closed, while my code does not have any errors. Is it possible that this closure is due to the use of the Telerik component under the network(LAN)?