MenuItemsSource

With the Q3 2015 release version of UI for WPF the ability to place a DropDownButton with menu inside RadDeskotopAlert next to the close button is now available.

By default the button is not visible. In order to visualize it the ShowMenuButton property needs to be set to true - its default value is false. As soon as the property gets set to true a DropDownButton with an empty menu will be visualized.

You could populate the menu either using the MenuItemsSource property or the ItemContainerStyle:

• Using the MenuItemsSource

• Using the ItemContainerStyle

Using the MenuItemsSource

In order to display items inside the menu using the MenuItemsSource property of RadDesktopAlert you need to set it with a collection of DesktopAlertMenuItems. The data that is displayed inside the menu of RadDesktopAlert has a hierarchical structure – thus each item may come with a set of items on its own.

The DesktopAlertMenuItem is a class that contains the information for the menu items:

• Header –it represents the header of the menu item.
• IsSeparator – indicates whether the menu item is a separator.
• IsCheckable – indicates whether the menu item could be checked.
• IsChecked - indicates whether the menu item is checked.
• IconUrl – represents the url of the image that represents the icon of the menu item.
• Command - this is the command that will be executed when the command source gets invoked.
• CommandParameter - a data defined by the user that could be passed to the command when it is executed.

So, in order to set the MenuItemsSource a sample date needs to be created as shown below:

Preparing the data

public static ObservableCollection<DesktopAlertMenuItem> GetDesktopAlertMenuItems() 
{ 
    ObservableCollection<DesktopAlertMenuItem> items = new ObservableCollection<DesktopAlertMenuItem>(); 
    DesktopAlertMenuItem copyItem = new DesktopAlertMenuItem() 
    { 
        Header = "Copy", 
    }; 
    items.Add(copyItem); 
    DesktopAlertMenuItem pasteItem = new DesktopAlertMenuItem() 
    { 
        Header = "Paste", 
    }; 
    items.Add(pasteItem); 
    DesktopAlertMenuItem separatorItem = new DesktopAlertMenuItem() 
    { 
        IsSeparator = true 
    }; 
    items.Add(separatorItem); 
    DesktopAlertMenuItem cutItem = new DesktopAlertMenuItem() 
    { 
        Header = "Cut", 
    }; 
    items.Add(cutItem); 
    return items; 
} 

Public Function GetDesktopAlertMenuItems() As ObservableCollection(Of DesktopAlertMenuItem) 
    Dim items As New ObservableCollection(Of DesktopAlertMenuItem)() 
    Dim copyItem As New DesktopAlertMenuItem() With {.Header = "Copy"} 
    items.Add(copyItem) 
    Dim pasteItem As New DesktopAlertMenuItem() With {.Header = "Paste"} 
    items.Add(pasteItem) 
    Dim separatorItem As New DesktopAlertMenuItem() With {.IsSeparator = True} 
    items.Add(separatorItem) 
    Dim cutItem As New DesktopAlertMenuItem() With {.Header = "Cut"} 
    items.Add(cutItem) 
    Return items 
End Function 

Finally, you need to pass the generated collection to the MenuItemsSource:

Setting MenuItemsSource

alert.MenuItemsSource = GetDesktopAlertMenuItems(); 

alert.MenuItemsSource = GetDesktopAlertMenuItems() 

Figure 2: RadDesktopAlert with set MenuItemsSource

Using MenuItemContainerStyle

In order to visualize the data in the menu of RadDeskotopAlert you could also use the ItemContainerStyle. The following sample Style could be used to visualize the data:

Setting MenuItemsSource_

<Style x:Key="DesktopAlertMenuItemContainerStyle" TargetType="telerik:RadMenuItem"> 
    <Setter Property="Header" Value="{Binding Header}"/> 
    <Setter Property="Command" Value="{Binding Command}" /> 
    <Setter Property="CommandParameter" Value="{Binding CommandParameter}" /> 
    <Setter Property="IsSeparator" Value="{Binding IsSeparator}" /> 
    <Setter Property="IsCheckable" Value="{Binding IsCheckable}" /> 
    <Setter Property="IsChecked" Value="{Binding IsChecked}" /> 
    <Setter Property="Icon" Value="{Binding IconUrl}" /> 
    <Setter Property="IconTemplate"> 
        <Setter.Value> 
            <DataTemplate> 
                <Image Source="{Binding}" Stretch="None"/> 
            </DataTemplate> 
        </Setter.Value> 
    </Setter> 
</Style> 

In order to use the created style with RadDeskotopAlert , you have to set its MenuItemContainerStyle property.

Setting MenuItemContainerStyle

var alert = new RadDesktopAlert(); 
alert.ShowMenuButton = true; 
alert.MenuItemsSource = GetDesktopAlertMenuItems(); 
alert.MenuItemContainerStyle = this.Resources["DesktopAlertMenuItemContainerStyle"] as Style; 

Dim alert = New RadDesktopAlert() 
alert.ShowMenuButton = True 
alert.MenuItemsSource = GetDesktopAlertMenuItems() 
alert.MenuItemContainerStyle = TryCast(Me.Resources("DesktopAlertMenuItemContainerStyle"), Style) 

See Also

• Overview

• Getting Started