<Page
    x:Class="BasicLibrarySamples.RadialPanelSample"
    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"
    mc:Ignorable="d"
    xmlns:c1="using:C1.Xaml">
    <Page.Resources>

        <!-- template used for items in the panel -->
        <Style x:Key="panelItemStyle" TargetType="ContentControl">
            <Setter Property="FontFamily" Value="Segoe UI Symbol" />
            <Setter Property="FontSize" Value="32"/>
            <Setter Property="Foreground" Value="WhiteSmoke"/>
            <Setter Property="HorizontalContentAlignment" Value="Right"/>
            <Setter Property="VerticalContentAlignment" Value="Center"/>
            <Setter Property="Margin" Value="0,0,10,0"/>
            <Setter Property="Padding" Value="0"/>
            <Setter Property="Width" Value="160"/>
        </Style>
        <Style x:Key="NarrowLayoutpanelItemStyle" TargetType="ContentControl">
            <Setter Property="FontFamily" Value="Segoe UI Symbol" />
            <Setter Property="FontSize" Value="32"/>
            <Setter Property="Foreground" Value="WhiteSmoke"/>
            <Setter Property="HorizontalContentAlignment" Value="Right"/>
            <Setter Property="VerticalContentAlignment" Value="Center"/>
            <Setter Property="Margin" Value="0,0,10,0"/>
            <Setter Property="Padding" Value="0"/>
            <Setter Property="Width" Value="110"/>
        </Style>
    </Page.Resources>
    <Grid>
        <Ellipse x:Name="ellipse" Stroke="#9DCFC3" StrokeThickness="45" Height="320" Width="320" 
                 Fill="#2C383D"
                 VerticalAlignment="Center" HorizontalAlignment="Center"/>
        <c1:C1RadialPanel x:Name="radialPanel" Height="320" Width="320" StartAngle="-60" EndAngle="300" 
                          VerticalAlignment="Center" HorizontalAlignment="Center">
            <ContentControl x:Name="contentControl" Style="{StaticResource panelItemStyle}" Foreground="#FFFFFF">
                <StackPanel Orientation="Horizontal">
                    <TextBlock x:Name="startAngleTxt" FontSize="22" FontFamily="Segoe UI" FontWeight="Light" x:Uid="/BasicLibrarySamplesLib/Resources/RadialPanelSample_TB" Margin="0 3 10 0"/>
                    <TextBlock Text="&#xE111;" Foreground="#2C383D"/>
                </StackPanel>
            </ContentControl>
            <ContentControl  x:Name="contentControl1" Style="{StaticResource panelItemStyle}" Content="&#xE111;"/>
            <ContentControl  x:Name="contentControl2" Style="{StaticResource panelItemStyle}" Content="&#xE111;"/>
            <ContentControl  x:Name="contentControl3" Style="{StaticResource panelItemStyle}" Content="&#xE111;"/>
            <ContentControl  x:Name="contentControl4" Style="{StaticResource panelItemStyle}" Content="&#xE111;"/>
            <ContentControl  x:Name="contentControl5" Style="{StaticResource panelItemStyle}" Content="&#xE111;"/>
            <ContentControl  x:Name="contentControl6" Style="{StaticResource panelItemStyle}" Content="&#xE111;"/>
            <ContentControl  x:Name="contentControl7" Style="{StaticResource panelItemStyle}" Content="&#xE111;"/>
            <ContentControl  x:Name="contentControl8" Style="{StaticResource panelItemStyle}" Content="&#xE111;"/>
            <ContentControl  x:Name="contentControl9"  Style="{StaticResource panelItemStyle}" Content="&#xE111;"/>
            <ContentControl  x:Name="contentControl10" Style="{StaticResource panelItemStyle}" Content="&#xE111;"/>
            <ContentControl  x:Name="contentControl11" Style="{StaticResource panelItemStyle}" Content="&#xE111;"/>
        </c1:C1RadialPanel>
        <VisualStateManager.VisualStateGroups>
            <VisualStateGroup>
                <VisualState x:Name="WideLayout">
                    <VisualState.StateTriggers>
                        <AdaptiveTrigger MinWindowWidth="540"/>
                    </VisualState.StateTriggers>
                </VisualState>
                <VisualState x:Name="MiddleLayout">
                    <VisualState.StateTriggers>
                        <AdaptiveTrigger MinWindowWidth="480"/>
                    </VisualState.StateTriggers>
                    <VisualState.Setters>
                        <Setter Target="ellipse.Width" Value="220"/>
                        <Setter Target="ellipse.Height" Value="220"/>
                        <Setter Target="radialPanel.Width" Value="220"/>
                        <Setter Target="radialPanel.Height" Value="220"/>
                        <Setter Target="startAngleTxt.FontSize" Value="13"/>
                        <Setter Target="startAngleTxt.Margin" Value="0,5,8,0"/>
                        <Setter Target="contentControl.Style" Value="{StaticResource NarrowLayoutpanelItemStyle}"/>
                        <Setter Target="contentControl1.Style" Value="{StaticResource NarrowLayoutpanelItemStyle}"/>
                        <Setter Target="contentControl2.Style" Value="{StaticResource NarrowLayoutpanelItemStyle}"/>
                        <Setter Target="contentControl3.Style" Value="{StaticResource NarrowLayoutpanelItemStyle}"/>
                        <Setter Target="contentControl4.Style" Value="{StaticResource NarrowLayoutpanelItemStyle}"/>
                        <Setter Target="contentControl5.Style" Value="{StaticResource NarrowLayoutpanelItemStyle}"/>
                        <Setter Target="contentControl6.Style" Value="{StaticResource NarrowLayoutpanelItemStyle}"/>
                        <Setter Target="contentControl7.Style" Value="{StaticResource NarrowLayoutpanelItemStyle}"/>
                        <Setter Target="contentControl8.Style" Value="{StaticResource NarrowLayoutpanelItemStyle}"/>
                        <Setter Target="contentControl9.Style" Value="{StaticResource NarrowLayoutpanelItemStyle}"/>
                        <Setter Target="contentControl10.Style" Value="{StaticResource NarrowLayoutpanelItemStyle}"/>
                        <Setter Target="contentControl11.Style" Value="{StaticResource NarrowLayoutpanelItemStyle}"/>

                    </VisualState.Setters>
                </VisualState>
                <VisualState x:Name="NarrowLayout">
                    <VisualState.StateTriggers>
                        <AdaptiveTrigger MinWindowWidth="0"/>
                    </VisualState.StateTriggers>
                    
                </VisualState>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>
    </Grid>
</Page>
