<UserControl x:Class="MultiChartDemo.MainPage"
    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" 
    mc:Ignorable="d" d:DesignWidth="640" d:DesignHeight="480"
    xmlns:local="clr-namespace:MultiChartDemo"
    xmlns:vc="clr-namespace:Visifire.Charts;assembly=SLVisifire.Charts">
    
    <UserControl.DataContext >
        <local:MainPageViewModel />
    </UserControl.DataContext>

    <UserControl.Resources >
        <local:SeriesTemplateSelector x:Key="chartTemplateSelector">
            
            <local:SeriesTemplateSelector.SalesTemplate>
                <DataTemplate >
                    <vc:DataSeries RenderAs="Line" LegendText="{Binding SalesName}" DataSource="{Binding SalesTotals}" >
                        <vc:DataSeries.DataMappings>
                            <vc:DataMapping MemberName="AxisXLabel" Path="Date"  ></vc:DataMapping>
                            <vc:DataMapping MemberName="YValue" Path="SalesTotal"  ></vc:DataMapping>
                        </vc:DataSeries.DataMappings>
                    </vc:DataSeries>
                </DataTemplate>
            </local:SeriesTemplateSelector.SalesTemplate>

            <local:SeriesTemplateSelector.MedianTemplate>
                <DataTemplate> 
                    <vc:DataSeries RenderAs="Column" LegendText="{Binding SalesName}" DataSource="{Binding SalesTotals}" >
                        <vc:DataSeries.DataMappings>
                            <vc:DataMapping MemberName="AxisXLabel" Path="Date"  ></vc:DataMapping>
                            <vc:DataMapping MemberName="YValue" Path="SalesTotal"  ></vc:DataMapping>
                        </vc:DataSeries.DataMappings>
                    </vc:DataSeries>
              </DataTemplate>
            </local:SeriesTemplateSelector.MedianTemplate>

        </local:SeriesTemplateSelector>

    </UserControl.Resources>

    <Grid x:Name="LayoutRoot">

        <StackPanel Orientation="Vertical" >

            <!-- ======================================= 1st Chart ================================== -->

            <local:MultiChart SeriesSource="{Binding SalesData}" Height="220" Width="400"  Margin="0,5,0,0">

                <local:MultiChart.Titles>
                    <vc:Title Text="Dynamic Multi Lines"></vc:Title>
                </local:MultiChart.Titles>

                <local:MultiChart.SeriesTemplate >
                    <DataTemplate >

                        <vc:DataSeries RenderAs="Line" LegendText="{Binding SalesName}" DataSource="{Binding SalesTotals}">
                            <vc:DataSeries.DataMappings>
                                <vc:DataMapping MemberName="AxisXLabel" Path="Date"  ></vc:DataMapping>
                                <vc:DataMapping MemberName="YValue" Path="SalesTotal"  ></vc:DataMapping>
                            </vc:DataSeries.DataMappings>
                        </vc:DataSeries>

                    </DataTemplate>
                </local:MultiChart.SeriesTemplate>

            </local:MultiChart>
       

        <!-- ======================================= 2nd Chart ================================== -->


            <local:MultiChart SeriesSource="{Binding SalesDataWithMedian}" SeriesTemplateSelector="{StaticResource chartTemplateSelector}" Height="220" Width="400" Margin="0,10,0,0">

                <local:MultiChart.Titles>
                    <vc:Title Text="Dynamic Multi Lines with different DataTemplates"></vc:Title>
                </local:MultiChart.Titles>

            </local:MultiChart>

        </StackPanel>
    </Grid>
</UserControl>
