<UserControl
    x:Class="ChartSamples.Labels"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:ChartSamples"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:c1="using:C1.Xaml.Chart"
    mc:Ignorable="d"
    d:DesignHeight="300"
    d:DesignWidth="400"
    HorizontalAlignment="Stretch" VerticalAlignment="Stretch"
    HorizontalContentAlignment="Stretch" VerticalContentAlignment="Stretch">

    <Grid x:Name="LayoutRoot">
        <FlipView >
            <FlipViewItem>
                <!-- simple labels -->
                <c1:C1Chart x:Name="c1ChartStatic" ChartType="Column" Palette="Module" FontSize="16" Margin="20">
                    <c1:C1Chart.Resources>
                        <local:DoubleFormatter x:Key="formatter" />
                        <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>
                                <StackPanel>
                                    <TextBlock FontSize="24" Margin="2" Foreground="{ThemeResource ApplicationForegroundThemeBrush}" Text="{Binding Value, Converter={StaticResource formatter}, ConverterParameter=n2}" />
                                    <TextBlock Text="{Binding PercentageSeries, Converter={StaticResource formatter}, ConverterParameter=p2}" Foreground="{ThemeResource ApplicationForegroundThemeBrush}" />
                                </StackPanel>
                            </Border>
                        </DataTemplate>
                    </c1:C1Chart.Resources>
                    <c1:C1Chart.Data>
                        <c1:ChartData>
                            <c1:ChartData.Children>
                                <c1:DataSeries Label="s1" Values="3.1 5 7.6 2.5" PointLabelTemplate="{StaticResource SimpleLabel}" SymbolStroke="Transparent"/>
                                <c1:DataSeries Label="s2" Values="4 8 6.2 3.8" PointLabelTemplate="{StaticResource SimpleLabel}" SymbolStroke="Transparent"/>
                                <c1:DataSeries Label="s1" Values="2 6.5 4.9 5.4" PointLabelTemplate="{StaticResource SimpleLabel}" SymbolStroke="Transparent"/>
                                <c1:DataSeries Label="s2" Values="1 4 2.4 4.1" PointLabelTemplate="{StaticResource SimpleLabel}" SymbolStroke="Transparent"/>
                            </c1:ChartData.Children>
                        </c1:ChartData>
                    </c1:C1Chart.Data>
                    <c1:C1Chart.View>
                        <c1:ChartView PlotBackground="Gainsboro">
                            <c1:ChartView.AxisY>
                                <c1:Axis Max="10" MajorTickThickness="0" MinorTickThickness="0">
                                    <c1:Axis.AxisLine>
                                        <Line StrokeThickness="0" />
                                    </c1:Axis.AxisLine>
                                </c1:Axis>
                            </c1:ChartView.AxisY>
                            <c1:ChartView.AxisX>
                                <c1:Axis MinorGridStrokeThickness="0" MajorGridStrokeThickness="0" MinorTickThickness="0" MajorUnit="1"/>
                            </c1:ChartView.AxisX>
                        </c1:ChartView>
                    </c1:C1Chart.View>
                    <c1:C1ChartLegend Margin="24,8,8,8" Position="Top" Orientation="Horizontal" HorizontalAlignment="Right" />
                </c1:C1Chart>
            </FlipViewItem>
            <FlipViewItem>
                <!-- line labels -->
                <c1:C1Chart x:Name="c1ChartLine" ChartType="Line" FontSize="16" Margin="20 20 40 20">
                    <c1:C1Chart.Resources>
                        <DataTemplate x:Key="LineLabel">
                            <Border Background="{Binding Series.ConnectionStroke}" BorderThickness="1" BorderBrush="Black" c1:PlotElement.LabelOffset="15, -20" c1:PlotElement.LabelAlignment="Auto">
                                <c1:PlotElement.LabelLine>
                                    <Line Stroke="Black" StrokeThickness="1" />
                                </c1:PlotElement.LabelLine>
                                <TextBlock Margin="10 5" FontSize="16" Text="{Binding Value}" />
                            </Border>
                        </DataTemplate>
                    </c1:C1Chart.Resources>
                    <c1:C1Chart.Data>
                        <c1:ChartData>
                            <c1:ChartData.Children>
                                <c1:DataSeries Label="s1" Values="3.1 5 7.6 2.5" ConnectionStroke="#FFD6C256" PointLabelTemplate="{StaticResource LineLabel}" />
                                <c1:DataSeries Label="s2" Values="4 8 6.2 3.8" ConnectionStroke="#FF81AC4D"  PointLabelTemplate="{StaticResource LineLabel}" />
                                <c1:DataSeries Label="s1" Values="2 6.5 4.9 5.4" ConnectionStroke="#FF4AAABF"  PointLabelTemplate="{StaticResource LineLabel}" />
                                <c1:DataSeries Label="s2" Values="1 4 2.4 4.1" ConnectionStroke="#FF876BB9" PointLabelTemplate="{StaticResource LineLabel}" />
                            </c1:ChartData.Children>
                        </c1:ChartData>
                    </c1:C1Chart.Data>
                    <c1:C1ChartLegend Margin="24,8,8,8" Position="TopLeft"  Orientation="Horizontal" HorizontalAlignment="Right" />
                </c1:C1Chart>
            </FlipViewItem>
            <FlipViewItem>
                <!-- pie labels -->
                <c1:C1Chart ChartType="Pie" Palette="Origin" FontSize="16" Margin="10">
                    <c1:C1Chart.Resources>
                        <local:DoubleFormatter x:Key="formatter" />
                    </c1:C1Chart.Resources>
                    <c1:C1Chart.Data>
                        <c1:ChartData>
                            <c1:ChartData.Children>
                                <c1:DataSeries Values="14 11 7 6 3" SymbolStrokeThickness="0">
                                    <c1:DataSeries.PointLabelTemplate>
                                        <DataTemplate>
                                            <TextBlock Text="{Binding PercentageSeries, Converter={StaticResource formatter}, ConverterParameter=p2}" FontSize="16" c1:PlotElement.LabelOffset="-50, 0" c1:PlotElement.LabelAlignment="Auto" />
                                        </DataTemplate>
                                    </c1:DataSeries.PointLabelTemplate>
                                </c1:DataSeries>
                            </c1:ChartData.Children>
                        </c1:ChartData>
                    </c1:C1Chart.Data>
                    <c1:C1ChartLegend Position="Bottom"  Orientation="Horizontal"/>
                </c1:C1Chart>
            </FlipViewItem>
            <FlipViewItem>
                <!-- exploded doughnut labels -->
                <c1:C1Chart ChartType="PieExplodedDoughnut" Palette="Technic" FontSize="16" Margin="28 0 28 10">
                    <c1:C1Chart.Resources>
                        <local:DoubleFormatter x:Key="formatter" />
                    </c1:C1Chart.Resources>
                    <c1:C1Chart.Data>
                        <c1:ChartData>
                            <c1:ChartData.Children>
                                <c1:DataSeries Label="Items" Values="14 11 88 6 3" SymbolStrokeThickness="0">
                                    <c1:DataSeries.PointLabelTemplate>
                                        <DataTemplate>
                                            <Border Background="#FFB8B8B8" c1:PlotElement.LabelOffset="48, 0" c1:PlotElement.LabelAlignment="Auto" Padding="3">
                                                <c1:PlotElement.LabelLine>
                                                    <Line Stroke="#FFB8B8B8" StrokeThickness="1" />
                                                </c1: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>
                                    </c1:DataSeries.PointLabelTemplate>
                                </c1:DataSeries>
                            </c1:ChartData.Children>
                        </c1:ChartData>
                    </c1:C1Chart.Data>
                    <c1:C1ChartLegend Position="Bottom"  Orientation="Horizontal"/>
                </c1:C1Chart>
            </FlipViewItem>
            <FlipViewItem>
                <!-- stacked labels -->
                <c1:C1Chart ChartType="ColumnStacked" Palette="Civic" FontSize="16" Margin="20">
                    <c1:C1Chart.Resources>
                        <DataTemplate x:Key="InnerLabel">
                            <TextBlock Margin="10 5" FontSize="16" Text="{Binding Value}" c1:PlotElement.LabelOffset="-10 -5" c1:PlotElement.LabelAlignment="MiddleCenter"/>
                        </DataTemplate>
                    </c1:C1Chart.Resources>
                    <c1:C1Chart.Data>
                        <c1:ChartData>
                            <c1:ChartData.Children>
                                <c1:DataSeries Label="s1" Values="3.1 5 7.6 2.5" PointLabelTemplate="{StaticResource InnerLabel}" SymbolStroke="Transparent"/>
                                <c1:DataSeries Label="s2" Values="4 8 6.2 3.8" PointLabelTemplate="{StaticResource InnerLabel}" SymbolStroke="Transparent"/>
                                <c1:DataSeries Label="s1" Values="2 6.5 4.9 5.4" PointLabelTemplate="{StaticResource InnerLabel}" SymbolStroke="Transparent"/>
                                <c1:DataSeries Label="s2" Values="1 4 2.4 4.1" PointLabelTemplate="{StaticResource InnerLabel}" SymbolStroke="Transparent"/>
                            </c1:ChartData.Children>
                        </c1:ChartData>
                    </c1:C1Chart.Data>
                    <c1:C1Chart.View>
                        <c1:ChartView PlotBackground="Gainsboro">
                            <c1:ChartView.AxisY>
                                <c1:Axis MajorTickThickness="0" MinorTickThickness="0">
                                    <c1:Axis.AxisLine>
                                        <Line StrokeThickness="0" />
                                    </c1:Axis.AxisLine>
                                </c1:Axis>
                            </c1:ChartView.AxisY>
                            <c1:ChartView.AxisX>
                                <c1:Axis MinorGridStrokeThickness="0" MajorGridStrokeThickness="0" MinorTickThickness="0" MajorUnit="1"/>
                            </c1:ChartView.AxisX>
                        </c1:ChartView>
                    </c1:C1Chart.View>
                    <c1:C1ChartLegend Margin="24,8,8,8" Position="Top" Orientation="Horizontal" HorizontalAlignment="Right" />
                </c1:C1Chart>
            </FlipViewItem>
        </FlipView>
        
    </Grid>
</UserControl>
