Menu icon image binding and visibility

2 posts, 0 answers
  1. Ryan
    Ryan avatar
    33 posts
    Member since:
    May 2009

    Posted 17 Jun 2010 Link to this post

    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> 



  2. Pana
    Admin
    Pana avatar
    748 posts

    Posted 22 Jun 2010 Link to this post

    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
Back to Top