<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 x:Uid="/BasicLibrarySamplesLib/Resources/RadialMenu_MenuItem1_Header" SelectedIndex="0" ShowSelectedItem="True" Command="{Binding UndoCommand, ElementName=page}">
                        <c1:C1RadialMenuItem x:Uid="/BasicLibrarySamplesLib/Resources/RadialMenu_MenuItem1_1_Header" Command="{Binding UndoCommand, ElementName=page}">
                            <c1:C1RadialMenuItem.Icon>
                                <TextBlock Text="&#xE10E;" Style="{StaticResource TextIconStyle}" />
                            </c1:C1RadialMenuItem.Icon>
                        </c1:C1RadialMenuItem>
                        <c1:C1RadialMenuItem x:Uid="/BasicLibrarySamplesLib/Resources/RadialMenu_MenuItem1_2_Header" Command="{Binding RedoCommand, ElementName=page}">
                            <c1:C1RadialMenuItem.Icon>
                                <TextBlock Text="&#xE10D;" Style="{StaticResource TextIconStyle}" />
                            </c1:C1RadialMenuItem.Icon>
                        </c1:C1RadialMenuItem>
                        <c1:C1RadialMenuItem x:Uid="/BasicLibrarySamplesLib/Resources/RadialMenu_MenuItem1_3_ToolTip" Command="{Binding ClearFormatCommand, ElementName=page}" DisplayIndex="7">
                            <c1:C1RadialMenuItem.Header>
                                <TextBlock TextWrapping="Wrap" MaxWidth="50" TextAlignment="Center" x:Uid="/BasicLibrarySamplesLib/Resources/RadialMenu_MenuItem1_3_TB"></TextBlock>
                            </c1:C1RadialMenuItem.Header>
                        </c1:C1RadialMenuItem>
                    </c1:C1RadialMenuItem>
                    <c1:C1RadialMenuItem AutoSelect="True" ShowSelectedItem="True" x:Uid="/BasicLibrarySamplesLib/Resources/RadialMenu_MenuItem2_Header" SectorCount="8">
                        <c1:C1RadialMenuItem x:Uid="/BasicLibrarySamplesLib/Resources/RadialMenu_MenuItem2_1_Header">
                            <c1:C1RadialMenuItem.Icon>
                                <TextBlock Text="&#xE16B;" Style="{StaticResource TextIconStyle}" />
                            </c1:C1RadialMenuItem.Icon>
                        </c1:C1RadialMenuItem>
                        <c1:C1RadialMenuItem x:Uid="/BasicLibrarySamplesLib/Resources/RadialMenu_MenuItem2_2_Header">
                            <c1:C1RadialMenuItem.Icon>
                                <TextBlock Text="&#xE16F;" Style="{StaticResource TextIconStyle}" />
                            </c1:C1RadialMenuItem.Icon>
                        </c1:C1RadialMenuItem>
                        <c1:C1RadialMenuItem x:Uid="/BasicLibrarySamplesLib/Resources/RadialMenu_MenuItem2_3_Header">
                            <c1:C1RadialMenuItem.Icon>
                                <TextBlock Text="&#xE16D;" Style="{StaticResource TextIconStyle}" />
                            </c1:C1RadialMenuItem.Icon>
                        </c1:C1RadialMenuItem>
                    </c1:C1RadialMenuItem>
                    <c1:C1RadialMenuItem x:Uid="/BasicLibrarySamplesLib/Resources/RadialMenu_MenuItem3_Header" SectorCount="6">
                        <c1:C1RadialMenuItem.Icon>
                            <TextBlock Text="&#xE109;" Style="{StaticResource TextIconStyle}" />
                        </c1:C1RadialMenuItem.Icon>
                        <c1:C1RadialMenuItem x:Uid="/BasicLibrarySamplesLib/Resources/RadialMenu_MenuItem3_1_Header_And_ToolTip">
                            <c1:C1RadialMenuItem.Icon>
                                <TextBlock Text="&#xE1DA;" Style="{StaticResource TextIconStyle}" />
                            </c1:C1RadialMenuItem.Icon>
                        </c1:C1RadialMenuItem>
                        <c1:C1RadialMenuItem x:Uid="/BasicLibrarySamplesLib/Resources/RadialMenu_MenuItem3_2_Header_And_ToolTip" >
                            <c1:C1RadialMenuItem.Icon>
                                <TextBlock Text="&#xE132;" Style="{StaticResource TextIconStyle}" />
                            </c1:C1RadialMenuItem.Icon>
                        </c1:C1RadialMenuItem>
                        <c1:C1RadialMenuItem x:Uid="/BasicLibrarySamplesLib/Resources/RadialMenu_MenuItem3_3_Header ">
                            <c1:C1RadialMenuItem.Icon>
                                <TextBlock Text="&#xE188;" Style="{StaticResource TextIconStyle}" />
                            </c1:C1RadialMenuItem.Icon>
                        </c1:C1RadialMenuItem>
                        <c1:C1RadialMenuItem x:Uid="/BasicLibrarySamplesLib/Resources/RadialMenu_MenuItem3_4_Header" >
                            <c1:C1RadialMenuItem.Icon>
                                <TextBlock Text="&#xE1D3;" Style="{StaticResource TextIconStyle}" />
                            </c1:C1RadialMenuItem.Icon>
                        </c1:C1RadialMenuItem>
                    </c1:C1RadialMenuItem>
                    <c1:C1RadialMenuItem x:Uid="/BasicLibrarySamplesLib/Resources/RadialMenu_MenuItem4_Header" SectorCount="6">
                        <c1:C1RadialMenuItem x:Uid="/BasicLibrarySamplesLib/Resources/RadialMenu_MenuItem4_1_Header_And_ToolTip" DisplayIndex="2">
                            <c1:C1RadialMenuItem.Icon>
                                <TextBlock Text="&#xE10A;" Style="{StaticResource TextIconStyle}" />
                            </c1:C1RadialMenuItem.Icon>
                        </c1:C1RadialMenuItem>
                        <c1:C1RadialMenuItem x:Uid="/BasicLibrarySamplesLib/Resources/RadialMenu_MenuItem4_2_Header" >
                            <c1:C1RadialMenuItem.Icon>
                                <TextBlock Text="&#xE107;" Style="{StaticResource TextIconStyle}" />
                            </c1:C1RadialMenuItem.Icon>
                        </c1:C1RadialMenuItem>
                        <c1:C1RadialMenuItem x:Uid="/BasicLibrarySamplesLib/Resources/RadialMenu_MenuItem4_3_Header" >
                            <c1:C1RadialMenuItem.Icon>
                                <TextBlock Text="&#xE13E;" Style="{StaticResource TextIconStyle}" />
                            </c1:C1RadialMenuItem.Icon>
                        </c1:C1RadialMenuItem>
                    </c1:C1RadialMenuItem>
                    <c1:C1RadialMenuItem x:Uid="/BasicLibrarySamplesLib/Resources/RadialMenu_MenuItem5_Header" >
                        <c1:C1RadialMenuItem.Icon>
                            <TextBlock Text="&#xE115;" Style="{StaticResource TextIconStyle}" />
                        </c1:C1RadialMenuItem.Icon>
                    </c1:C1RadialMenuItem>
                    <c1:C1RadialNumericItem x:Uid="/BasicLibrarySamplesLib/Resources/RadialMenu_MenuItem6_Header" 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 x:Uid="/BasicLibrarySamplesLib/Resources/RadialMenu_MenuItem7_Header" 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 x:Uid="/BasicLibrarySamplesLib/Resources/RadialMenu_MenuItem7_1_Header_And_ToolTip"  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 x:Uid="/BasicLibrarySamplesLib/Resources/RadialMenu_RadialColorItem_ToolTip_Yellow" Brush="Yellow" IsCheckable="True" GroupName="Orange"/>
                            <c1:C1RadialColorItem x:Uid="/BasicLibrarySamplesLib/Resources/RadialMenu_RadialColorItem_ToolTip_Brown" Brush="Brown" IsCheckable="True" GroupName="Orange"/>
                            <c1:C1RadialColorItem x:Uid="/BasicLibrarySamplesLib/Resources/RadialMenu_RadialColorItem_ToolTip_Orange" Brush="#FFD46224" IsCheckable="True" GroupName="Orange"/>
                            <c1:C1RadialColorItem x:Uid="/BasicLibrarySamplesLib/Resources/RadialMenu_RadialColorItem_ToolTip_Orange" Brush="#FFF37D1F" IsCheckable="True" GroupName="Orange"/>
                            <c1:C1RadialColorItem x:Uid="/BasicLibrarySamplesLib/Resources/RadialMenu_RadialColorItem_ToolTip_Orange" Brush="Orange" IsCheckable="True" GroupName="Orange"/>
                            <c1:C1RadialColorItem x:Uid="/BasicLibrarySamplesLib/Resources/RadialMenu_RadialColorItem_ToolTip_Gold" Brush="Gold" IsCheckable="True" GroupName="Orange"/>
                            <c1:C1RadialColorItem x:Uid="/BasicLibrarySamplesLib/Resources/RadialMenu_RadialColorItem_ToolTip_LightYellow" Brush="#FFF5DD43" IsCheckable="True" GroupName="Orange" />
                            <c1:C1RadialColorItem x:Uid="/BasicLibrarySamplesLib/Resources/RadialMenu_RadialColorItem_ToolTip_LightYellow" Brush="#FFF3F393" IsCheckable="True" GroupName="Orange"/>
                        </c1:C1RadialColorItem>

                        <c1:C1RadialColorItem x:Name="redItem" SelectedIndex="5"
                                      ShowSelectedItem="True" AutoSelect="True" IsSelectable="False">
                            <c1:C1RadialColorItem x:Uid="/BasicLibrarySamplesLib/Resources/RadialMenu_RadialColorItem_ToolTip_Rose" Brush="#FFFFC7CE" GroupName="Red"/>
                            <c1:C1RadialColorItem x:Uid="/BasicLibrarySamplesLib/Resources/RadialMenu_RadialColorItem_ToolTip_Pink" Brush="#FFF77A90" GroupName="Red"/>
                            <c1:C1RadialColorItem x:Uid="/BasicLibrarySamplesLib/Resources/RadialMenu_RadialColorItem_ToolTip_Plum" Brush="#FFDE05DE" GroupName="Red"/>
                            <c1:C1RadialColorItem x:Uid="/BasicLibrarySamplesLib/Resources/RadialMenu_RadialColorItem_ToolTip_Purple" Brush="#FF811681" GroupName="Red"/>
                            <c1:C1RadialColorItem x:Uid="/BasicLibrarySamplesLib/Resources/RadialMenu_RadialColorItem_ToolTip_DarkRed" Brush="DarkRed" GroupName="Red"/>
                            <c1:C1RadialColorItem x:Uid="/BasicLibrarySamplesLib/Resources/RadialMenu_RadialColorItem_ToolTip_DarkRed" Brush="#FFC00000" GroupName="Red"/>
                            <c1:C1RadialColorItem x:Uid="/BasicLibrarySamplesLib/Resources/RadialMenu_RadialColorItem_ToolTip_Red" Brush="Red" GroupName="Red"/>
                            <c1:C1RadialColorItem x:Uid="/BasicLibrarySamplesLib/Resources/RadialMenu_RadialColorItem_ToolTip_Rose" Brush="#FFF6A2A4" GroupName="Red"/>
                        </c1:C1RadialColorItem>

                        <c1:C1RadialColorItem x:Name="greenItem" SelectedIndex="5"
                                      ShowSelectedItem="True" AutoSelect="True" IsSelectable="False">
                            <c1:C1RadialColorItem x:Uid="/BasicLibrarySamplesLib/Resources/RadialMenu_RadialColorItem_ToolTip_Lime" Brush="#FF92D050" GroupName="Green"/>
                            <c1:C1RadialColorItem x:Uid="/BasicLibrarySamplesLib/Resources/RadialMenu_RadialColorItem_ToolTip_LightGreen" Brush="#FFC6EFCE" GroupName="Green"/>
                            <c1:C1RadialColorItem x:Uid="/BasicLibrarySamplesLib/Resources/RadialMenu_RadialColorItem_ToolTip_Green" Brush="#FF00FF00" GroupName="Green"/>
                            <c1:C1RadialColorItem x:Uid="/BasicLibrarySamplesLib/Resources/RadialMenu_RadialColorItem_ToolTip_DarkGreen" Brush="#FF1D421E" GroupName="Green"/>
                            <c1:C1RadialColorItem x:Uid="/BasicLibrarySamplesLib/Resources/RadialMenu_RadialColorItem_ToolTip_DarkGreen" Brush="#FF1D5A2D" GroupName="Green"/>
                            <c1:C1RadialColorItem x:Uid="/BasicLibrarySamplesLib/Resources/RadialMenu_RadialColorItem_ToolTip_DarkGreen" Brush="Green" GroupName="Green"/>
                            <c1:C1RadialColorItem x:Uid="/BasicLibrarySamplesLib/Resources/RadialMenu_RadialColorItem_ToolTip_DarkGreen" Brush="#FF008000" GroupName="Green"/>
                            <c1:C1RadialColorItem x:Uid="/BasicLibrarySamplesLib/Resources/RadialMenu_RadialColorItem_ToolTip_DarkGreen" Brush="#FF00B050" GroupName="Green"/>
                        </c1:C1RadialColorItem>

                        <c1:C1RadialColorItem x:Name="blueItem" SelectedIndex="0"
                                      ShowSelectedItem="True" AutoSelect="True" IsSelectable="False">
                            <c1:C1RadialColorItem x:Uid="/BasicLibrarySamplesLib/Resources/RadialMenu_RadialColorItem_ToolTip_Blue" Brush="Blue" GroupName="Blue"/>
                            <c1:C1RadialColorItem x:Uid="/BasicLibrarySamplesLib/Resources/RadialMenu_RadialColorItem_ToolTip_SlateBlue" Brush="MediumSlateBlue" GroupName="Blue"/>
                            <c1:C1RadialColorItem x:Uid="/BasicLibrarySamplesLib/Resources/RadialMenu_RadialColorItem_ToolTip_Turquoise" Brush="Turquoise" GroupName="Blue"/>
                            <c1:C1RadialColorItem x:Uid="/BasicLibrarySamplesLib/Resources/RadialMenu_RadialColorItem_ToolTip_Aqua" Brush="Aqua" GroupName="Blue"/>
                            <c1:C1RadialColorItem x:Uid="/BasicLibrarySamplesLib/Resources/RadialMenu_RadialColorItem_ToolTip_SkyBlue" Brush="SkyBlue" GroupName="Blue"/>
                            <c1:C1RadialColorItem x:Uid="/BasicLibrarySamplesLib/Resources/RadialMenu_RadialColorItem_ToolTip_Purple" Brush="#FFAC38AC" AccentBrush="#FF801C80" GroupName="Blue"/>
                            <c1:C1RadialColorItem x:Uid="/BasicLibrarySamplesLib/Resources/RadialMenu_RadialColorItem_ToolTip_DarkPurple" Brush="Purple" GroupName="Blue"/>
                            <c1:C1RadialColorItem x:Uid="/BasicLibrarySamplesLib/Resources/RadialMenu_RadialColorItem_ToolTip_DarkBlue" 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"  x:Uid="/BasicLibrarySamplesLib/Resources/RadiaMenu_Desktop_TB"
                           TextWrapping="Wrap" />
            </c1:C1ListViewer>
        </Border>
        <TextBlock x:Name="txt" Foreground="Red" Text="" FontSize="16" VerticalAlignment="Bottom" HorizontalAlignment="Center" Margin="10" />
    </Grid>
</Page>
