<Window xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation" xmlns:local="clr-namespace:RadMenuBound_WPF" xmlns:Telerik_Windows_Controls_Chromes="clr-namespace:Telerik.Windows.Controls.Chromes;assembly=Telerik.Windows.Controls" x:Class="RadMenuBound_WPF.MainWindow"
        Title="MainWindow" Height="350" Width="525">
    
    <Window.Resources>
        <local:ZoomControl x:Key="ZoomLevel" />
		
		<ControlTemplate x:Key="RadZoomMenuItemControlTemplate" TargetType="{x:Type telerik:RadMenuItem}">
    		<Grid x:Name="RootElement">
    			<Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}"/>
    			<Grid Margin="2">
    				<Telerik_Windows_Controls_Chromes:ButtonChrome x:Name="SelectionChrome" Grid.ColumnSpan="3" CornerRadius="1" RenderNormal="False" RenderHighlighted="{TemplateBinding IsHighlighted}">
    					<telerik:StyleManager.Theme>
    						<telerik:Office_BlackTheme/>
    					</telerik:StyleManager.Theme>
    				</Telerik_Windows_Controls_Chromes:ButtonChrome>
    				<Grid x:Name="ContentGrid">
    					<Grid.ColumnDefinitions>
    						<ColumnDefinition Width="26"/>
    						<ColumnDefinition Width="*"/>
    					</Grid.ColumnDefinitions>
						<!-- NOTE: Replaced the Tick
    					<Path x:Name="Tick" Grid.Column="0" Data="M0,5.1L1.7,5.2 3.4,7.1 8,0.4 9.2,0 3.3,10.8z" Fill="{TemplateBinding Foreground}" HorizontalAlignment="Center" Visibility="Collapsed" VerticalAlignment="Center"/>
						-->
						<Image x:Name="Tick" Grid.Column="0" Margin="0 0 4 0" Source="/RadMenuBound_WPF;component/zoom.png" Width="16" Height="16" HorizontalAlignment="Center" Visibility="Collapsed" VerticalAlignment="Center"/>
    					<ContentPresenter x:Name="Icon" Content="{TemplateBinding Icon}" Grid.Column="0" HorizontalAlignment="Center" VerticalAlignment="Center"/>
    					<ContentPresenter x:Name="Content" ContentTemplate="{TemplateBinding HeaderTemplate}" Content="{TemplateBinding Header}" Grid.Column="1" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" RecognizesAccessKey="True" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
    				</Grid>
    			</Grid>
    		</Grid>
    		<ControlTemplate.Triggers>
    			<Trigger Property="IsEnabled" Value="False">
    				<Setter Property="Opacity" TargetName="ContentGrid" Value="0.5"/>
    			</Trigger>
    			<Trigger Property="Icon" Value="{x:Null}">
    				<Setter Property="Visibility" TargetName="Icon" Value="Collapsed"/>
    			</Trigger>
    			<Trigger Property="IsCheckable" Value="True">
    				<Setter Property="Visibility" TargetName="Tick" Value="Visible"/>
    				<Setter Property="Opacity" TargetName="Tick" Value="0"/>
    			</Trigger>
    			<Trigger Property="IsChecked" Value="True">
    				<Setter Property="Visibility" TargetName="Tick" Value="Visible"/>
    				<Setter Property="Opacity" TargetName="Tick" Value="1"/>
    				<Setter Property="Visibility" TargetName="Icon" Value="Collapsed"/>
    			</Trigger>
    		</ControlTemplate.Triggers>
    	</ControlTemplate>
    	<Style x:Key="ZoomRadMenuItemStyle" TargetType="{x:Type telerik:RadMenuItem}">
    		<Setter Property="Header" Value="{Binding DisplayName}" />
    		<Setter Property="IsCheckable" Value="True" />
    		<Setter Property="IsChecked" Value="{Binding IsSelected, Mode=TwoWay}" />
			<Setter Property="Template" Value="{StaticResource RadZoomMenuItemControlTemplate}"/>
    	</Style>
    </Window.Resources>
    
    <Grid>
        <telerik:RadMenu HorizontalAlignment="Stretch" VerticalAlignment="Top">
            <telerik:RadMenuItem Header="View">
                <telerik:RadMenuItem Header="Zoom" ItemsSource="{StaticResource ZoomLevel}" ItemContainerStyle="{DynamicResource ZoomRadMenuItemStyle}" />
            </telerik:RadMenuItem>
        </telerik:RadMenu>
        
        <StackPanel Orientation="Horizontal" HorizontalAlignment="Center" VerticalAlignment="Center">
            <TextBlock Text="Zoom level:" />
            <TextBlock Margin="8 0 0 0" Text="{Binding SelectedZoomLevel.DisplayName, Source={StaticResource ZoomLevel}}" Width="50" />
        </StackPanel>
    </Grid>
</Window>
