<Page
    x:Class="BasicLibrarySamples.RadialMenu"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:BasicLibrarySamples"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:c1="using:C1.Xaml" x:Name="page"
    mc:Ignorable="d"
    d:DesignHeight="300"
    d:DesignWidth="400">

    <Page.Resources>
        <Style TargetType="TextBlock" x:Key="TextIconStyle">
            <Setter Property="Margin" Value="-10" />
            <Setter Property="FontSize" Value="20" />
            <Setter Property="FontFamily" Value="Segoe UI Symbol" />
            <Setter Property="FontWeight" Value="Normal" />
            <Setter Property="Foreground" Value="#333333" />
            <Setter Property="HorizontalAlignment" Value="Center" />
            <Setter Property="VerticalAlignment" Value="Center" />
        </Style>
        <Style TargetType="Image" x:Key="MenuIcon">
            <Setter Property="Width" Value="16"/>
            <Setter Property="Height" Value="16"/>
            <Setter Property="Margin" Value="0"/>
        </Style>
    </Page.Resources>
    <Grid>
        <Border Background="LemonChiffon" MinHeight="40" BorderBrush="#969696" 
                BorderThickness="1" Padding="5" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
            <c1:C1ContextMenuService.ContextMenu>
                <c1:C1RadialMenu x:Name="contextMenu" Offset="-130,0" Opened="contextMenu_Opened" 
                                 ItemClick="contextMenu_ItemClick" ItemOpened="contextMenu_ItemOpened" >
                    <c1:C1RadialMenuItem Header="{Binding RadialMenu_MenuItem1_Header_Header,Source={StaticResource BasicLibrarySamplesLocalization}}" SelectedIndex="0" ShowSelectedItem="True" Command="{Binding UndoCommand, ElementName=page}">
                        <c1:C1RadialMenuItem Header="{Binding RadialMenu_MenuItem1_1_Header_Header,Source={StaticResource BasicLibrarySamplesLocalization}}" Command="{Binding UndoCommand, ElementName=page}">
                            <c1:C1RadialMenuItem.Icon>
                                <TextBlock Text="&#xE10E;" Style="{StaticResource TextIconStyle}" />
                            </c1:C1RadialMenuItem.Icon>
                        </c1:C1RadialMenuItem>
                        <c1:C1RadialMenuItem Header="{Binding RadialMenu_MenuItem1_2_Header_Header,Source={StaticResource BasicLibrarySamplesLocalization}}" Command="{Binding RedoCommand, ElementName=page}">
                            <c1:C1RadialMenuItem.Icon>
                                <TextBlock Text="&#xE10D;" Style="{StaticResource TextIconStyle}" />
                            </c1:C1RadialMenuItem.Icon>
                        </c1:C1RadialMenuItem>
                        <c1:C1RadialMenuItem ToolTip="{Binding RadialMenu_MenuItem1_3_ToolTip_ToolTip,Source={StaticResource BasicLibrarySamplesLocalization}}" Command="{Binding ClearFormatCommand, ElementName=page}" DisplayIndex="7">
                            <c1:C1RadialMenuItem.Header>
                                <TextBlock TextWrapping="Wrap" MaxWidth="50" TextAlignment="Center" Text="{Binding RadialMenu_MenuItem1_3_TB_Text,Source={StaticResource BasicLibrarySamplesLocalization}}"/>
                            </c1:C1RadialMenuItem.Header>
                        </c1:C1RadialMenuItem>
                    </c1:C1RadialMenuItem>
                    <c1:C1RadialMenuItem AutoSelect="True" ShowSelectedItem="True" Header="{Binding RadialMenu_MenuItem2_Header_Header,Source={StaticResource BasicLibrarySamplesLocalization}}" SectorCount="8">
                        <c1:C1RadialMenuItem Header="{Binding RadialMenu_MenuItem2_1_Header_Header,Source={StaticResource BasicLibrarySamplesLocalization}}">
                            <c1:C1RadialMenuItem.Icon>
                                <TextBlock Text="&#xE16B;" Style="{StaticResource TextIconStyle}" />
                            </c1:C1RadialMenuItem.Icon>
                        </c1:C1RadialMenuItem>
                        <c1:C1RadialMenuItem Header="{Binding RadialMenu_MenuItem2_2_Header_Header,Source={StaticResource BasicLibrarySamplesLocalization}}">
                            <c1:C1RadialMenuItem.Icon>
                                <TextBlock Text="&#xE16F;" Style="{StaticResource TextIconStyle}" />
                            </c1:C1RadialMenuItem.Icon>
                        </c1:C1RadialMenuItem>
                        <c1:C1RadialMenuItem Header="{Binding RadialMenu_MenuItem2_3_Header_Header,Source={StaticResource BasicLibrarySamplesLocalization}}">
                            <c1:C1RadialMenuItem.Icon>
                                <TextBlock Text="&#xE16D;" Style="{StaticResource TextIconStyle}" />
                            </c1:C1RadialMenuItem.Icon>
                        </c1:C1RadialMenuItem>
                    </c1:C1RadialMenuItem>
                    <c1:C1RadialMenuItem Header="{Binding RadialMenu_MenuItem3_Header_Header,Source={StaticResource BasicLibrarySamplesLocalization}}" SectorCount="6">
                        <c1:C1RadialMenuItem.Icon>
                            <TextBlock Text="&#xE109;" Style="{StaticResource TextIconStyle}" />
                        </c1:C1RadialMenuItem.Icon>
                        <c1:C1RadialMenuItem Header="{Binding RadialMenu_MenuItem3_1_Header_And_ToolTip_Header,Source={StaticResource BasicLibrarySamplesLocalization}}" ToolTip="{Binding RadialMenu_MenuItem3_1_Header_And_ToolTip_ToolTip,Source={StaticResource BasicLibrarySamplesLocalization}}">
                            <c1:C1RadialMenuItem.Icon>
                                <TextBlock Text="&#xE1DA;" Style="{StaticResource TextIconStyle}" />
                            </c1:C1RadialMenuItem.Icon>
                        </c1:C1RadialMenuItem>
                        <c1:C1RadialMenuItem Header="{Binding RadialMenu_MenuItem3_2_Header_And_ToolTip_Header,Source={StaticResource BasicLibrarySamplesLocalization}}" ToolTip="{Binding RadialMenu_MenuItem3_2_Header_And_ToolTip_ToolTip,Source={StaticResource BasicLibrarySamplesLocalization}}">
                            <c1:C1RadialMenuItem.Icon>
                                <TextBlock Text="&#xE132;" Style="{StaticResource TextIconStyle}" />
                            </c1:C1RadialMenuItem.Icon>
                        </c1:C1RadialMenuItem>
                        <c1:C1RadialMenuItem Header="{Binding RadialMenu_MenuItem3_3_Header_Header,Source={StaticResource BasicLibrarySamplesLocalization}}">
                            <c1:C1RadialMenuItem.Icon>
                                <TextBlock Text="&#xE188;" Style="{StaticResource TextIconStyle}" />
                            </c1:C1RadialMenuItem.Icon>
                        </c1:C1RadialMenuItem>
                        <c1:C1RadialMenuItem Header="{Binding RadialMenu_MenuItem3_4_Header_Header,Source={StaticResource BasicLibrarySamplesLocalization}}" >
                            <c1:C1RadialMenuItem.Icon>
                                <TextBlock Text="&#xE1D3;" Style="{StaticResource TextIconStyle}" />
                            </c1:C1RadialMenuItem.Icon>
                        </c1:C1RadialMenuItem>
                    </c1:C1RadialMenuItem>
                    <c1:C1RadialMenuItem Header="{Binding RadialMenu_MenuItem4_Header_Header,Source={StaticResource BasicLibrarySamplesLocalization}}" SectorCount="6">
                        <c1:C1RadialMenuItem Header="{Binding RadialMenu_MenuItem4_1_Header_And_ToolTip_Header,Source={StaticResource BasicLibrarySamplesLocalization}}" ToolTip="{Binding RadialMenu_MenuItem4_1_Header_And_ToolTip_ToolTip,Source={StaticResource BasicLibrarySamplesLocalization}}" DisplayIndex="2">
                            <c1:C1RadialMenuItem.Icon>
                                <TextBlock Text="&#xE10A;" Style="{StaticResource TextIconStyle}" />
                            </c1:C1RadialMenuItem.Icon>
                        </c1:C1RadialMenuItem>
                        <c1:C1RadialMenuItem Header="{Binding RadialMenu_MenuItem4_2_Header_Header,Source={StaticResource BasicLibrarySamplesLocalization}}" >
                            <c1:C1RadialMenuItem.Icon>
                                <TextBlock Text="&#xE107;" Style="{StaticResource TextIconStyle}" />
                            </c1:C1RadialMenuItem.Icon>
                        </c1:C1RadialMenuItem>
                        <c1:C1RadialMenuItem Header="{Binding RadialMenu_MenuItem4_3_Header_Header,Source={StaticResource BasicLibrarySamplesLocalization}}" >
                            <c1:C1RadialMenuItem.Icon>
                                <TextBlock Text="&#xE13E;" Style="{StaticResource TextIconStyle}" />
                            </c1:C1RadialMenuItem.Icon>
                        </c1:C1RadialMenuItem>
                    </c1:C1RadialMenuItem>
                    <c1:C1RadialMenuItem Header="{Binding RadialMenu_MenuItem5_Header_Header,Source={StaticResource BasicLibrarySamplesLocalization}}" >
                        <c1:C1RadialMenuItem.Icon>
                            <TextBlock Text="&#xE115;" Style="{StaticResource TextIconStyle}" />
                        </c1:C1RadialMenuItem.Icon>
                    </c1:C1RadialMenuItem>
                    <c1:C1RadialNumericItem Header="{Binding RadialMenu_MenuItem6_Header_Header,Source={StaticResource BasicLibrarySamplesLocalization}}" Minimum="9" Maximum="72" MarkStartAngle="-128" MarkEndAngle="231" x:Name="fontSize" Value="11">
                        <c1:C1RadialNumericItem.Icon>
                            <TextBlock Style="{StaticResource TextIconStyle}" FontFamily="Segoe UI" FontSize="18">
                                <Run Text="A"/>
                                <Run Text="{Binding Value, ElementName=fontSize}" Typography.Variants="Superscript"/>
                            </TextBlock>
                        </c1:C1RadialNumericItem.Icon>
                        <x:Double>9</x:Double>
                        <x:Double>11</x:Double>
                        <x:Double>13</x:Double>
                        <x:Double>16</x:Double>
                        <x:Double>20</x:Double>
                        <x:Double>36</x:Double>
                        <x:Double>72</x:Double>
                    </c1:C1RadialNumericItem>
                    <c1:C1RadialMenuItem Header="{Binding RadialMenu_MenuItem7_Header_Header,Source={StaticResource BasicLibrarySamplesLocalization}}" ShowSelectedItem="True" AutoSelect="True" SelectedIndex="1" >
                        <c1:C1RadialColorItem x:Name="rainbowItem" ShowSelectedItem="True" AutoSelect="True" IsSelectable="False" >
                            <!-- C1RadialColorItem supports Brushes and Colors as child elements. 
                                 In such case it will auto-generate C1RadialColorItems. 
                                 AccentBrush and tooltip for auto-generated items will be made based on the brush color. -->
                            <SolidColorBrush Color="Red"/>
                            <SolidColorBrush Color="Orange"/>
                            <SolidColorBrush Color="Yellow"/>
                            <SolidColorBrush Color="Green"/>
                            <SolidColorBrush Color="Blue"/>
                            <SolidColorBrush Color="Indigo"/>
                            <SolidColorBrush Color="Violet"/>
                        </c1:C1RadialColorItem>

                        <c1:C1RadialMenuItem Header="{Binding RadialMenu_MenuItem7_1_Header_And_ToolTip_Header,Source={StaticResource BasicLibrarySamplesLocalization}}" ToolTip="{Binding RadialMenu_MenuItem7_1_Header_And_ToolTip_ToolTip,Source={StaticResource BasicLibrarySamplesLocalization}}" Tag="Red" x:Name="fontColorItem" />

                        <c1:C1RadialColorItem x:Name="orangeItem" SelectedIndex="2"
                                      ShowSelectedItem="True" AutoSelect="True" IsSelectable="False">
                            <!-- subitems of the C1RadialColorItem can subscribe on Click event. 
                                 But if they are not subscribed and the parent C1RadialColorItem has ShowSelectedItem="True", 
                                 the parent item will handle clicks. -->
                            <c1:C1RadialColorItem ToolTip="{Binding RadialMenu_RadialColorItem_ToolTip_Yellow_ToolTip,Source={StaticResource BasicLibrarySamplesLocalization}}" Brush="Yellow" IsCheckable="True" GroupName="Orange"/>
                            <c1:C1RadialColorItem ToolTip="{Binding RadialMenu_RadialColorItem_ToolTip_Brown_ToolTip,Source={StaticResource BasicLibrarySamplesLocalization}}" Brush="Brown" IsCheckable="True" GroupName="Orange"/>
                            <c1:C1RadialColorItem ToolTip="{Binding RadialMenu_RadialColorItem_ToolTip_Orange_ToolTip,Source={StaticResource BasicLibrarySamplesLocalization}}" Brush="#FFD46224" IsCheckable="True" GroupName="Orange"/>
                            <c1:C1RadialColorItem ToolTip="{Binding RadialMenu_RadialColorItem_ToolTip_Orange_ToolTip,Source={StaticResource BasicLibrarySamplesLocalization}}" Brush="#FFF37D1F" IsCheckable="True" GroupName="Orange"/>
                            <c1:C1RadialColorItem ToolTip="{Binding RadialMenu_RadialColorItem_ToolTip_Orange_ToolTip,Source={StaticResource BasicLibrarySamplesLocalization}}" Brush="Orange" IsCheckable="True" GroupName="Orange"/>
                            <c1:C1RadialColorItem ToolTip="{Binding RadialMenu_RadialColorItem_ToolTip_Gold_ToolTip,Source={StaticResource BasicLibrarySamplesLocalization}}" Brush="Gold" IsCheckable="True" GroupName="Orange"/>
                            <c1:C1RadialColorItem ToolTip="{Binding RadialMenu_RadialColorItem_ToolTip_LightYellow_ToolTip,Source={StaticResource BasicLibrarySamplesLocalization}}" Brush="#FFF5DD43" IsCheckable="True" GroupName="Orange" />
                            <c1:C1RadialColorItem ToolTip="{Binding RadialMenu_RadialColorItem_ToolTip_LightYellow_ToolTip,Source={StaticResource BasicLibrarySamplesLocalization}}" Brush="#FFF3F393" IsCheckable="True" GroupName="Orange"/>
                        </c1:C1RadialColorItem>

                        <c1:C1RadialColorItem x:Name="redItem" SelectedIndex="5"
                                      ShowSelectedItem="True" AutoSelect="True" IsSelectable="False">
                            <c1:C1RadialColorItem ToolTip="{Binding RadialMenu_RadialColorItem_ToolTip_Rose_ToolTip,Source={StaticResource BasicLibrarySamplesLocalization}}" Brush="#FFFFC7CE" GroupName="Red"/>
                            <c1:C1RadialColorItem ToolTip="{Binding RadialMenu_RadialColorItem_ToolTip_Pink_ToolTip,Source={StaticResource BasicLibrarySamplesLocalization}}" Brush="#FFF77A90" GroupName="Red"/>
                            <c1:C1RadialColorItem ToolTip="{Binding RadialMenu_RadialColorItem_ToolTip_Plum_ToolTip,Source={StaticResource BasicLibrarySamplesLocalization}}" Brush="#FFDE05DE" GroupName="Red"/>
                            <c1:C1RadialColorItem ToolTip="{Binding RadialMenu_RadialColorItem_ToolTip_Purple_ToolTip,Source={StaticResource BasicLibrarySamplesLocalization}}" Brush="#FF811681" GroupName="Red"/>
                            <c1:C1RadialColorItem ToolTip="{Binding RadialMenu_RadialColorItem_ToolTip_DarkRed_ToolTip,Source={StaticResource BasicLibrarySamplesLocalization}}" Brush="DarkRed" GroupName="Red"/>
                            <c1:C1RadialColorItem ToolTip="{Binding RadialMenu_RadialColorItem_ToolTip_DarkRed_ToolTip,Source={StaticResource BasicLibrarySamplesLocalization}}" Brush="#FFC00000" GroupName="Red"/>
                            <c1:C1RadialColorItem ToolTip="{Binding RadialMenu_RadialColorItem_ToolTip_Red_ToolTip,Source={StaticResource BasicLibrarySamplesLocalization}}" Brush="Red" GroupName="Red"/>
                            <c1:C1RadialColorItem ToolTip="{Binding RadialMenu_RadialColorItem_ToolTip_Rose_ToolTip,Source={StaticResource BasicLibrarySamplesLocalization}}" Brush="#FFF6A2A4" GroupName="Red"/>
                        </c1:C1RadialColorItem>

                        <c1:C1RadialColorItem x:Name="greenItem" SelectedIndex="5"
                                      ShowSelectedItem="True" AutoSelect="True" IsSelectable="False">
                            <c1:C1RadialColorItem ToolTip="{Binding RadialMenu_RadialColorItem_ToolTip_Lime_ToolTip,Source={StaticResource BasicLibrarySamplesLocalization}}" Brush="#FF92D050" GroupName="Green"/>
                            <c1:C1RadialColorItem ToolTip="{Binding RadialMenu_RadialColorItem_ToolTip_LightGreen_ToolTip,Source={StaticResource BasicLibrarySamplesLocalization}}" Brush="#FFC6EFCE" GroupName="Green"/>
                            <c1:C1RadialColorItem ToolTip="{Binding RadialMenu_RadialColorItem_ToolTip_Green_ToolTip,Source={StaticResource BasicLibrarySamplesLocalization}}" Brush="#FF00FF00" GroupName="Green"/>
                            <c1:C1RadialColorItem ToolTip="{Binding RadialMenu_RadialColorItem_ToolTip_DarkGreen_ToolTip,Source={StaticResource BasicLibrarySamplesLocalization}}" Brush="#FF1D421E" GroupName="Green"/>
                            <c1:C1RadialColorItem ToolTip="{Binding RadialMenu_RadialColorItem_ToolTip_DarkGreen_ToolTip,Source={StaticResource BasicLibrarySamplesLocalization}}" Brush="#FF1D5A2D" GroupName="Green"/>
                            <c1:C1RadialColorItem ToolTip="{Binding RadialMenu_RadialColorItem_ToolTip_DarkGreen_ToolTip,Source={StaticResource BasicLibrarySamplesLocalization}}" Brush="Green" GroupName="Green"/>
                            <c1:C1RadialColorItem ToolTip="{Binding RadialMenu_RadialColorItem_ToolTip_DarkGreen_ToolTip,Source={StaticResource BasicLibrarySamplesLocalization}}" Brush="#FF008000" GroupName="Green"/>
                            <c1:C1RadialColorItem ToolTip="{Binding RadialMenu_RadialColorItem_ToolTip_DarkGreen_ToolTip,Source={StaticResource BasicLibrarySamplesLocalization}}" Brush="#FF00B050" GroupName="Green"/>
                        </c1:C1RadialColorItem>

                        <c1:C1RadialColorItem x:Name="blueItem" SelectedIndex="0"
                                      ShowSelectedItem="True" AutoSelect="True" IsSelectable="False">
                            <c1:C1RadialColorItem ToolTip="{Binding RadialMenu_RadialColorItem_ToolTip_Blue_ToolTip,Source={StaticResource BasicLibrarySamplesLocalization}}" Brush="Blue" GroupName="Blue"/>
                            <c1:C1RadialColorItem ToolTip="{Binding RadialMenu_RadialColorItem_ToolTip_SlateBlue_ToolTip,Source={StaticResource BasicLibrarySamplesLocalization}}" Brush="MediumSlateBlue" GroupName="Blue"/>
                            <c1:C1RadialColorItem ToolTip="{Binding RadialMenu_RadialColorItem_ToolTip_Turquoise_ToolTip,Source={StaticResource BasicLibrarySamplesLocalization}}" Brush="Turquoise" GroupName="Blue"/>
                            <c1:C1RadialColorItem ToolTip="{Binding RadialMenu_RadialColorItem_ToolTip_Aqua_ToolTip,Source={StaticResource BasicLibrarySamplesLocalization}}" Brush="Aqua" GroupName="Blue"/>
                            <c1:C1RadialColorItem ToolTip="{Binding RadialMenu_RadialColorItem_ToolTip_SkyBlue_ToolTip,Source={StaticResource BasicLibrarySamplesLocalization}}" Brush="SkyBlue" GroupName="Blue"/>
                            <c1:C1RadialColorItem ToolTip="{Binding RadialMenu_RadialColorItem_ToolTip_Purple_ToolTip,Source={StaticResource BasicLibrarySamplesLocalization}}" Brush="#FFAC38AC" AccentBrush="#FF801C80" GroupName="Blue"/>
                            <c1:C1RadialColorItem ToolTip="{Binding RadialMenu_RadialColorItem_ToolTip_DarkPurple_ToolTip,Source={StaticResource BasicLibrarySamplesLocalization}}" Brush="Purple" GroupName="Blue"/>
                            <c1:C1RadialColorItem ToolTip="{Binding RadialMenu_RadialColorItem_ToolTip_DarkBlue_ToolTip,Source={StaticResource BasicLibrarySamplesLocalization}}" Brush="DarkBlue" GroupName="Blue"/>
                        </c1:C1RadialColorItem>
                    </c1:C1RadialMenuItem>
                </c1:C1RadialMenu>
            </c1:C1ContextMenuService.ContextMenu>
            <!-- Note: keyboard events such as pressing Application key only work if visual tree contains some focusable control.
                 So, if we remove C1ListViewer and only leave TexBlock element, context menu won't be shown on Application key. -->
            <c1:C1ListViewer x:Name="text" Foreground="Sienna" HorizontalAlignment="Stretch" VerticalAlignment="Center" Height="75" ZoomMode="Disabled" FontSize="16">
                <TextBlock x:Name="_txt" Text="{Binding RadiaMenu_Desktop_TB_Text,Source={StaticResource BasicLibrarySamplesLocalization}}" 
                           TextWrapping="Wrap" />
            </c1:C1ListViewer>
        </Border>
        <TextBlock x:Name="txt" Foreground="Red" Text="" FontSize="16" VerticalAlignment="Bottom" HorizontalAlignment="Center" Margin="10" />
    </Grid>
</Page>
