<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="UndoRedo" SelectedIndex="0" ShowSelectedItem="True" Command="{Binding UndoCommand, ElementName=page}">
                        <c1:C1RadialMenuItem Header="Undo" Command="{Binding UndoCommand, ElementName=page}">
                            <c1:C1RadialMenuItem.Icon>
                                <TextBlock Text="&#xE10E;" Style="{StaticResource TextIconStyle}" />
                            </c1:C1RadialMenuItem.Icon>
                        </c1:C1RadialMenuItem>
                        <c1:C1RadialMenuItem Header="Redo" Command="{Binding RedoCommand, ElementName=page}">
                            <c1:C1RadialMenuItem.Icon>
                                <TextBlock Text="&#xE10D;" Style="{StaticResource TextIconStyle}" />
                            </c1:C1RadialMenuItem.Icon>
                        </c1:C1RadialMenuItem>
                        <c1:C1RadialMenuItem ToolTip="Clear Text Formatting" Command="{Binding ClearFormatCommand, ElementName=page}" DisplayIndex="7">
                            <c1:C1RadialMenuItem.Header>
                                <TextBlock TextWrapping="Wrap" MaxWidth="50" TextAlignment="Center">Clear Format</TextBlock>
                            </c1:C1RadialMenuItem.Header>
                        </c1:C1RadialMenuItem>
                    </c1:C1RadialMenuItem>
                    <c1:C1RadialMenuItem AutoSelect="True" ShowSelectedItem="True" Header="Clipboard" SectorCount="8">
                        <c1:C1RadialMenuItem Header="Cut">
                            <c1:C1RadialMenuItem.Icon>
                                <TextBlock Text="&#xE16B;" Style="{StaticResource TextIconStyle}" />
                            </c1:C1RadialMenuItem.Icon>
                        </c1:C1RadialMenuItem>
                        <c1:C1RadialMenuItem Header="Copy">
                            <c1:C1RadialMenuItem.Icon>
                                <TextBlock Text="&#xE16F;" Style="{StaticResource TextIconStyle}" />
                            </c1:C1RadialMenuItem.Icon>
                        </c1:C1RadialMenuItem>
                        <c1:C1RadialMenuItem Header="Paste">
                            <c1:C1RadialMenuItem.Icon>
                                <TextBlock Text="&#xE16D;" Style="{StaticResource TextIconStyle}" />
                            </c1:C1RadialMenuItem.Icon>
                        </c1:C1RadialMenuItem>
                    </c1:C1RadialMenuItem>
                    <c1:C1RadialMenuItem Header="Add" SectorCount="6">
                        <c1:C1RadialMenuItem.Icon>
                            <TextBlock Text="&#xE109;" Style="{StaticResource TextIconStyle}" />
                        </c1:C1RadialMenuItem.Icon>
                        <c1:C1RadialMenuItem Header="New" ToolTip="New Item">
                            <c1:C1RadialMenuItem.Icon>
                                <TextBlock Text="&#xE1DA;" Style="{StaticResource TextIconStyle}" />
                            </c1:C1RadialMenuItem.Icon>
                        </c1:C1RadialMenuItem>
                        <c1:C1RadialMenuItem Header="Existing" ToolTip="Existing Item">
                            <c1:C1RadialMenuItem.Icon>
                                <TextBlock Text="&#xE132;" Style="{StaticResource TextIconStyle}" />
                            </c1:C1RadialMenuItem.Icon>
                        </c1:C1RadialMenuItem>
                        <c1:C1RadialMenuItem Header="Folder">
                            <c1:C1RadialMenuItem.Icon>
                                <TextBlock Text="&#xE188;" Style="{StaticResource TextIconStyle}" />
                            </c1:C1RadialMenuItem.Icon>
                        </c1:C1RadialMenuItem>
                        <c1:C1RadialMenuItem Header="Class">
                            <c1:C1RadialMenuItem.Icon>
                                <TextBlock Text="&#xE1D3;" Style="{StaticResource TextIconStyle}" />
                            </c1:C1RadialMenuItem.Icon>
                        </c1:C1RadialMenuItem>
                    </c1:C1RadialMenuItem>
                    <c1:C1RadialMenuItem Header="File" SectorCount="6">
                        <c1:C1RadialMenuItem Header="Exclude" ToolTip="Exclude From Project" DisplayIndex="2">
                            <c1:C1RadialMenuItem.Icon>
                                <TextBlock Text="&#xE10A;" Style="{StaticResource TextIconStyle}" />
                            </c1:C1RadialMenuItem.Icon>
                        </c1:C1RadialMenuItem>
                        <c1:C1RadialMenuItem Header="Delete">
                            <c1:C1RadialMenuItem.Icon>
                                <TextBlock Text="&#xE107;" Style="{StaticResource TextIconStyle}" />
                            </c1:C1RadialMenuItem.Icon>
                        </c1:C1RadialMenuItem>
                        <c1:C1RadialMenuItem Header="Rename">
                            <c1:C1RadialMenuItem.Icon>
                                <TextBlock Text="&#xE13E;" Style="{StaticResource TextIconStyle}" />
                            </c1:C1RadialMenuItem.Icon>
                        </c1:C1RadialMenuItem>
                    </c1:C1RadialMenuItem>
                    <c1:C1RadialMenuItem Header="Properties">
                        <c1:C1RadialMenuItem.Icon>
                            <TextBlock Text="&#xE115;" Style="{StaticResource TextIconStyle}" />
                        </c1:C1RadialMenuItem.Icon>
                    </c1:C1RadialMenuItem>
                    <c1:C1RadialNumericItem Header="Font Size" 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="Color" 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 ToolTip="Font Color" Tag="Red" x:Name="fontColorItem" Header="Color"/>

                        <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="Yellow" Brush="Yellow" IsCheckable="True" GroupName="Orange"/>
                            <c1:C1RadialColorItem ToolTip="Brown" Brush="Brown" IsCheckable="True" GroupName="Orange"/>
                            <c1:C1RadialColorItem ToolTip="Orange" Brush="#FFD46224" IsCheckable="True" GroupName="Orange"/>
                            <c1:C1RadialColorItem ToolTip="Orange" Brush="#FFF37D1F" IsCheckable="True" GroupName="Orange"/>
                            <c1:C1RadialColorItem ToolTip="Orange" Brush="Orange" IsCheckable="True" GroupName="Orange"/>
                            <c1:C1RadialColorItem ToolTip="Gold" Brush="Gold" IsCheckable="True" GroupName="Orange"/>
                            <c1:C1RadialColorItem ToolTip="Light Yellow" Brush="#FFF5DD43" IsCheckable="True" GroupName="Orange" />
                            <c1:C1RadialColorItem ToolTip="Light Yellow" Brush="#FFF3F393" IsCheckable="True" GroupName="Orange"/>
                        </c1:C1RadialColorItem>

                        <c1:C1RadialColorItem x:Name="redItem" SelectedIndex="5"
                                      ShowSelectedItem="True" AutoSelect="True" IsSelectable="False">
                            <c1:C1RadialColorItem ToolTip="Rose" Brush="#FFFFC7CE" GroupName="Red"/>
                            <c1:C1RadialColorItem ToolTip="Pink" Brush="#FFF77A90" GroupName="Red"/>
                            <c1:C1RadialColorItem ToolTip="Plum" Brush="#FFDE05DE" GroupName="Red"/>
                            <c1:C1RadialColorItem ToolTip="Purple" Brush="#FF811681" GroupName="Red"/>
                            <c1:C1RadialColorItem ToolTip="Dark Red" Brush="DarkRed" GroupName="Red"/>
                            <c1:C1RadialColorItem ToolTip="Dark Red" Brush="#FFC00000" GroupName="Red"/>
                            <c1:C1RadialColorItem ToolTip="Red" Brush="Red" GroupName="Red"/>
                            <c1:C1RadialColorItem ToolTip="Rose" Brush="#FFF6A2A4" GroupName="Red"/>
                        </c1:C1RadialColorItem>

                        <c1:C1RadialColorItem x:Name="greenItem" SelectedIndex="5"
                                      ShowSelectedItem="True" AutoSelect="True" IsSelectable="False">
                            <c1:C1RadialColorItem ToolTip="Lime" Brush="#FF92D050" GroupName="Green"/>
                            <c1:C1RadialColorItem ToolTip="Light Green" Brush="#FFC6EFCE" GroupName="Green"/>
                            <c1:C1RadialColorItem ToolTip="Green" Brush="#FF00FF00" GroupName="Green"/>
                            <c1:C1RadialColorItem ToolTip="Dark Green" Brush="#FF1D421E" GroupName="Green"/>
                            <c1:C1RadialColorItem ToolTip="Dark Green" Brush="#FF1D5A2D" GroupName="Green"/>
                            <c1:C1RadialColorItem ToolTip="Dark Green" Brush="Green" GroupName="Green"/>
                            <c1:C1RadialColorItem ToolTip="Dark Green" Brush="#FF008000" GroupName="Green"/>
                            <c1:C1RadialColorItem ToolTip="Dark Green" Brush="#FF00B050" GroupName="Green"/>
                        </c1:C1RadialColorItem>

                        <c1:C1RadialColorItem x:Name="blueItem" SelectedIndex="0"
                                      ShowSelectedItem="True" AutoSelect="True" IsSelectable="False">
                            <c1:C1RadialColorItem ToolTip="Blue" Brush="Blue" GroupName="Blue"/>
                            <c1:C1RadialColorItem ToolTip="Slate Blue" Brush="MediumSlateBlue" GroupName="Blue"/>
                            <c1:C1RadialColorItem ToolTip="Turquoise" Brush="Turquoise" GroupName="Blue"/>
                            <c1:C1RadialColorItem ToolTip="Aqua" Brush="Aqua" GroupName="Blue"/>
                            <c1:C1RadialColorItem ToolTip="Sky Blue" Brush="SkyBlue" GroupName="Blue"/>
                            <c1:C1RadialColorItem ToolTip="Purple" Brush="#FFAC38AC" AccentBrush="#FF801C80" GroupName="Blue"/>
                            <c1:C1RadialColorItem ToolTip="Dark Purple" Brush="Purple" GroupName="Blue"/>
                            <c1:C1RadialColorItem ToolTip="Dark Blue" 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" Height="100" 
                             VerticalAlignment="Center" ZoomMode="Disabled" FontSize="12">
                <TextBlock x:Name="_txt" Text="Touch:&#10;hold down for a few seconds until the indicator displays." 
                           TextWrapping="Wrap" />
            </c1:C1ListViewer>
        </Border>
        <TextBlock x:Name="txt" Foreground="Red" Text="" FontSize="16" VerticalAlignment="Bottom" HorizontalAlignment="Center" Margin="10" />
    </Grid>
</Page>
