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.