<UserControl 
    x:Class="ControlExplorer.Controls.Chart.Labels"
    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:c1chart="using:C1.Xaml.Chart"
    xmlns:local="using:ControlExplorer.Controls.Chart"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d" d:DesignHeight="800" d:DesignWidth="480">
    <UserControl.Resources>
        <!--<c1chart:DataPointConverter x:Key="fc"/>-->
        <Style TargetType="c1chart:C1Chart">
            <Setter Property="Margin" Value="0 0 0 10" />
        </Style>
    </UserControl.Resources>
    <Pivot>
        <PivotItem Header="simple">
            <!-- simple labels -->
            <c1chart:C1Chart x:Name="c1ChartStatic" ChartType="Column" Palette="Module">
                <c1chart:C1Chart.Resources>
                    <DataTemplate x:Key="SimpleLabel">
                        <Border x:Name="border" Background="Transparent" BorderThickness="0">
                            <!--<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>-->
                            <!--<TextBlock Margin="10 5" FontSize="16" Text="{Binding Converter={StaticResource fc}, ConverterParameter=Series: \{#SeriesLabel\}\{#NewLine\}Value: \{#Value\}}" />-->
                            <TextBlock Margin="10 5" FontSize="16" Text="{Binding Value}" />
                        </Border>
                    </DataTemplate>
                </c1chart:C1Chart.Resources>
                <c1chart:C1Chart.Data>
                    <c1chart:ChartData>
                        <c1chart:ChartData.Children>
                            <c1chart:DataSeries Label="s1" Values="3.1 5 7.6" PointLabelTemplate="{StaticResource SimpleLabel}" SymbolStroke="Transparent"/>
                            <c1chart:DataSeries Label="s2" Values="4 8 6.2" PointLabelTemplate="{StaticResource SimpleLabel}" SymbolStroke="Transparent"/>
                            <c1chart:DataSeries Label="s1" Values="2 6.5 4.9" PointLabelTemplate="{StaticResource SimpleLabel}" SymbolStroke="Transparent"/>
                            <c1chart:DataSeries Label="s2" Values="1 4 2.4" PointLabelTemplate="{StaticResource SimpleLabel}" SymbolStroke="Transparent"/>
                        </c1chart:ChartData.Children>
                    </c1chart:ChartData>
                </c1chart:C1Chart.Data>
                <c1chart:C1Chart.View>
                    <c1chart:ChartView PlotBackground="Gainsboro">
                        <c1chart:ChartView.AxisY>
                            <c1chart:Axis Max="10" MajorTickThickness="0" MinorTickThickness="0">
                                <c1chart:Axis.AxisLine>
                                    <Line StrokeThickness="0" />
                                </c1chart:Axis.AxisLine>
                            </c1chart:Axis>
                        </c1chart:ChartView.AxisY>
                        <c1chart:ChartView.AxisX>
                            <c1chart:Axis MinorGridStrokeThickness="0" MajorGridStrokeThickness="0" MinorTickThickness="0" MajorUnit="1"/>
                        </c1chart:ChartView.AxisX>
                    </c1chart:ChartView>
                </c1chart:C1Chart.View>
                <c1chart:C1ChartLegend Margin="24,8,8,8" Position="Top" Orientation="Horizontal" HorizontalAlignment="Right" />
            </c1chart:C1Chart>
        </PivotItem>
        <PivotItem Header="line">
            <!-- line labels -->
            <c1chart:C1Chart x:Name="c1ChartLine" ChartType="Line" Margin="0, 0, 15, 10">
                <c1chart:C1Chart.Resources>
                    <DataTemplate x:Key="LineLabel">
                        <Border Background="{Binding Series.ConnectionStroke}" BorderThickness="1" BorderBrush="Black" c1chart:PlotElement.LabelOffset="15, -20" c1chart:PlotElement.LabelAlignment="Auto">
                            <c1chart:PlotElement.LabelLine>
                                <Line Stroke="Black" StrokeThickness="1" />
                            </c1chart:PlotElement.LabelLine>
                            <TextBlock Margin="10 5" FontSize="16" Text="{Binding Value}" />
                        </Border>
                    </DataTemplate>
                </c1chart:C1Chart.Resources>
                <c1chart:C1Chart.Data>
                    <c1chart:ChartData>
                        <c1chart:ChartData.Children>
                            <c1chart:DataSeries Label="s1" Values="3.1 5 7.6" ConnectionStroke="#FFD6C256" PointLabelTemplate="{StaticResource LineLabel}" />
                            <c1chart:DataSeries Label="s2" Values="4 8 6.2" ConnectionStroke="#FF81AC4D"  PointLabelTemplate="{StaticResource LineLabel}" />
                            <c1chart:DataSeries Label="s1" Values="2 6.5 4.9" ConnectionStroke="#FF4AAABF"  PointLabelTemplate="{StaticResource LineLabel}" />
                            <c1chart:DataSeries Label="s2" Values="1 4 2.4" PointLabelTemplate="{StaticResource LineLabel}" ConnectionStroke="#FF876BB9" />
                        </c1chart:ChartData.Children>
                    </c1chart:ChartData>
                </c1chart:C1Chart.Data>
                <c1chart:C1ChartLegend Margin="24,8,8,8" Position="TopLeft"  Orientation="Horizontal" HorizontalAlignment="Right" />
            </c1chart:C1Chart>
        </PivotItem>
        <PivotItem Header="pie">
            <!-- pie labels -->
            <c1chart:C1Chart ChartType="Pie" Palette="Origin">
                <c1chart:C1Chart.Resources>
                    <local:DoubleFormatter x:Key="formatter" />
                </c1chart:C1Chart.Resources>
                <c1chart:C1Chart.Data>
                    <c1chart:ChartData>
                        <c1chart:ChartData.Children>
                            <c1chart:DataSeries Values="14 11 7 6 3" SymbolStrokeThickness="0">
                                <c1chart:DataSeries.PointLabelTemplate>
                                    <DataTemplate>
                                        <TextBlock Text="{Binding PercentageSeries, Converter={StaticResource formatter}, ConverterParameter=p2}" FontSize="16" c1chart:PlotElement.LabelOffset="-40, 0" c1chart:PlotElement.LabelAlignment="Auto" />
                                    </DataTemplate>
                                </c1chart:DataSeries.PointLabelTemplate>
                            </c1chart:DataSeries>
                        </c1chart:ChartData.Children>
                    </c1chart:ChartData>
                </c1chart:C1Chart.Data>
                <c1chart:C1ChartLegend Position="Bottom"  Orientation="Horizontal"/>
            </c1chart:C1Chart>
        </PivotItem>
        <PivotItem Header="doughnut">
            <!-- exploded doughnut labels -->
            <c1chart:C1Chart ChartType="PieExplodedDoughnut" Palette="Technic" Margin="28 0 28 10">
                <c1chart:C1Chart.Resources>
                    <local:DoubleFormatter x:Key="formatter" />
                </c1chart:C1Chart.Resources>
                <c1chart:C1Chart.Data>
                    <c1chart:ChartData>
                        <c1chart:ChartData.Children>
                            <c1chart:DataSeries Label="Items" Values="14 11 88 6 3" SymbolStrokeThickness="0">
                                <c1chart:DataSeries.PointLabelTemplate>
                                    <DataTemplate>
                                        <Border Background="#FFB8B8B8" c1chart:PlotElement.LabelOffset="48, 0" c1chart:PlotElement.LabelAlignment="Auto" Padding="3">
                                            <c1chart:PlotElement.LabelLine>
                                                <Line Stroke="#FFB8B8B8" StrokeThickness="1" />
                                            </c1chart:PlotElement.LabelLine>
                                            <StackPanel HorizontalAlignment="Center">
                                                <TextBlock FontSize="16" Text="{Binding PercentageSeries, Converter={StaticResource formatter}, ConverterParameter=p2}"/>
                                                <TextBlock FontSize="16" Text="{Binding Value}" TextAlignment="Center" />
                                            </StackPanel>
                                        </Border>
                                    </DataTemplate>
                                </c1chart:DataSeries.PointLabelTemplate>
                            </c1chart:DataSeries>
                        </c1chart:ChartData.Children>
                    </c1chart:ChartData>
                </c1chart:C1Chart.Data>
                <c1chart:C1ChartLegend Position="Bottom"  Orientation="Horizontal"/>
            </c1chart:C1Chart>
        </PivotItem>
        <PivotItem Header="stacked">
            <!-- stacked labels -->
            <c1chart:C1Chart ChartType="ColumnStacked" Palette="Civic">
                <c1chart:C1Chart.Resources>
                    <DataTemplate x:Key="InnerLabel">
                        <TextBlock Margin="10 5" FontSize="16" Text="{Binding Value}" c1chart:PlotElement.LabelOffset="-10 -5" c1chart:PlotElement.LabelAlignment="MiddleCenter"/>
                    </DataTemplate>
                </c1chart:C1Chart.Resources>
                <c1chart:C1Chart.Data>
                    <c1chart:ChartData>
                        <c1chart:ChartData.Children>
                            <c1chart:DataSeries Label="s1" Values="3.1 5 7.6" PointLabelTemplate="{StaticResource InnerLabel}" SymbolStroke="Transparent"/>
                            <c1chart:DataSeries Label="s2" Values="4 8 6.2" PointLabelTemplate="{StaticResource InnerLabel}" SymbolStroke="Transparent"/>
                            <c1chart:DataSeries Label="s1" Values="2 6.5 4.9" PointLabelTemplate="{StaticResource InnerLabel}" SymbolStroke="Transparent"/>
                            <c1chart:DataSeries Label="s2" Values="1 4 2.4" PointLabelTemplate="{StaticResource InnerLabel}" SymbolStroke="Transparent"/>
                        </c1chart:ChartData.Children>
                    </c1chart:ChartData>
                </c1chart:C1Chart.Data>
                <c1chart:C1Chart.View>
                    <c1chart:ChartView PlotBackground="Gainsboro">
                        <c1chart:ChartView.AxisY>
                            <c1chart:Axis MajorTickThickness="0" MinorTickThickness="0">
                                <c1chart:Axis.AxisLine>
                                    <Line StrokeThickness="0" />
                                </c1chart:Axis.AxisLine>
                            </c1chart:Axis>
                        </c1chart:ChartView.AxisY>
                        <c1chart:ChartView.AxisX>
                            <c1chart:Axis MinorGridStrokeThickness="0" MajorGridStrokeThickness="0" MinorTickThickness="0" MajorUnit="1"/>
                        </c1chart:ChartView.AxisX>
                    </c1chart:ChartView>
                </c1chart:C1Chart.View>
                <c1chart:C1ChartLegend Margin="24,8,8,8" Position="Top" Orientation="Horizontal" HorizontalAlignment="Right" />
            </c1chart:C1Chart>
        </PivotItem>
    </Pivot>


</UserControl>
