Menu icon image binding and visibility

[Ryan]

1) When I bind the menu icon to an image which is defined as a StaticResource, the image does not appear but I can see the text "pack:" What am I doing wrong?

2) I want to bind the visibility to the underlying datasource using the BooleanToVisibilityConverter, so that when a menu item is selected the image is visible. I know how to use the converter but where in xaml do I set the binding.

Datasource:

public partial class Toolbar : UserControl
    {
        public Toolbar()
        {
            InitializeComponent();

            this.zoomMenu.ItemsSource = GetZoomMenuItems();
        }

        private ObservableCollection<ZoomMenuItem> GetZoomMenuItems()
        {
            return new ObservableCollection<ZoomMenuItem>()
            {
                new ZoomMenuItem(){ IsSelected=false, ZoomSetting=10, ZoomSettingText="10%" },
                new ZoomMenuItem(){ IsSelected=false, ZoomSetting=25, ZoomSettingText="25%" },
                new ZoomMenuItem(){ IsSelected=false, ZoomSetting=50, ZoomSettingText="50%" },
                new ZoomMenuItem(){ IsSelected=false, ZoomSetting=75, ZoomSettingText="75%" },
                new ZoomMenuItem(){ IsSelected=false, ZoomSetting=100, ZoomSettingText="100%" },
                new ZoomMenuItem(){ IsSelected=false, ZoomSetting=200, ZoomSettingText="200%" },
                new ZoomMenuItem(){ IsSelected=false, ZoomSetting=400, ZoomSettingText="400%" },
                new ZoomMenuItem(){ IsSelected=false, ZoomSetting=600, ZoomSettingText="600%" },
                new ZoomMenuItem(){ IsSelected=false, ZoomSetting=800, ZoomSettingText="800%" }
            };
        }
    }

Menu:

<BitmapImage x:Key="tickImage" UriSource="../Images/tick.png" DecodePixelWidth="10"/>

<Style x:Key="ZoomMenuItemStyle" TargetType="telerikNav:RadMenuItem">
            <Setter Property="Icon" Value="{Binding Source={StaticResource tickImage}}" />
</Style>

<HierarchicalDataTemplate
            x:Key="zoomMenuItemTemplate"
            ItemsSource="{Binding ZoomMenuItem}">
            <TextBlock Text="{Binding ZoomSettingText}" />
</HierarchicalDataTemplate>

<telerik:RadDropDownButton
                x:Name="RadDropBtnZoom"
                Height="20"
                Width="15">
                <telerik:RadDropDownButton.DropDownContent>
                    <telerikNav:RadContextMenu
                        x:Name="zoomMenu"
                        Width="75"
                        BorderThickness="0"
                        ItemContainerStyle="{StaticResource ZoomMenuItemStyle}"
                        ItemTemplate="{StaticResource zoomMenuItemTemplate}">
                    </telerikNav:RadContextMenu>
                </telerik:RadDropDownButton.DropDownContent>
</telerik:RadDropDownButton>

[Pana]

Hello Ryan,

I am attaching an example with Zoom menu and Style for the RadMenuItems to change the Tick with Image. This means that the mark displayed when the menu IsSelected=true is altered in the template and the IsChecked is bound to IsSelected of the ViewModel.

Best wishes,
Panayot
the Telerik team