<UserControl x:Class="ControlExplorer.Controls.Chart.Selection"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:c1chart="using:C1.Xaml.Chart"
    xmlns:c1flex="using:C1.Xaml.FlexGrid"
    mc:Ignorable="d" 
    FontFamily="{StaticResource PhoneFontFamilyNormal}"
    Foreground="{StaticResource PhoneForegroundBrush}"
    d:DesignHeight="480" d:DesignWidth="480">

    <UserControl.Resources>
        <Style x:Key="selected" TargetType="Path" >
            <Setter Property="Fill" Value="{StaticResource PhoneAccentBrush}" />
        </Style>
        <DataTemplate x:Key="label">
            <Border x:Name="border" Background="#B2FFFFFF" BorderBrush="#E59AA5A4" BorderThickness="1" Padding="5">
                <Border.Triggers>
                    <EventTrigger RoutedEvent="Border.Loaded">
                        <BeginStoryboard>
                            <Storyboard>
                                <DoubleAnimation Storyboard.TargetProperty="Opacity" Storyboard.TargetName="border" Duration="00:00:1" From="0" To="1" />
                            </Storyboard>
                        </BeginStoryboard>
                    </EventTrigger>
                </Border.Triggers>
                <!-- rotate label -->
                <!--<Border.Triggers>
                    <EventTrigger RoutedEvent="Border.Loaded">
                        <BeginStoryboard>
                            <Storyboard>
                                <DoubleAnimation Storyboard.TargetProperty="(RenderTransform).RotateTransform.Angle" Storyboard.TargetName="border" Duration="00:00:1" From="0" To="360" />
                            </Storyboard>
                        </BeginStoryboard>
                    </EventTrigger>
                </Border.Triggers>
                <Border.RenderTransform>
                    <RotateTransform Angle="0" CenterX="0.5" CenterY="0.5" />
                </Border.RenderTransform>-->
                <TextBlock Text="{Binding Value}" FontSize="16" HorizontalAlignment="Center"/>
            </Border>
        </DataTemplate>

    </UserControl.Resources>

    <Grid x:Name="LayoutRoot">
        <Grid.RowDefinitions>
            <RowDefinition />
            <RowDefinition Height="Auto"/>
            <RowDefinition />
        </Grid.RowDefinitions>
        <c1chart:C1Chart x:Name="c1Chart1" Margin="10 20 10 5" Palette="Module" >
            <c1chart:C1Chart.Data>
                <c1chart:ChartData ItemNameBinding="{Binding Name}" SelectionAction="Tap">
                    <c1chart:ChartData.Children>
                        <c1chart:DataSeries ValueBinding="{Binding Price}" 
                            SelectedItemStyle="{StaticResource selected}"
                            SelectedItemLabelTemplate="{StaticResource label}" 
                            SymbolSize="20 20">
                        </c1chart:DataSeries>
                    </c1chart:ChartData.Children>
                </c1chart:ChartData>
            </c1chart:C1Chart.Data>
        </c1chart:C1Chart>
        <TextBlock Grid.Row="1" Margin="12" TextAlignment="Center" Text="Tap to select element" />
        <c1flex:C1FlexGrid x:Name="flexGrid" SelectionMode="Row" SelectionBackground="{StaticResource PhoneAccentBrush}" CursorBackground="{StaticResource PhoneAccentBrush}" Margin="20" Grid.Row="2"/>
    </Grid>

</UserControl>
