<Page x:Class="UWP.CartesianChart.Energy_Predictions.EnergyPredictionExample"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
      xmlns:lvc="using:LiveCharts.Uwp"
             xmlns:interop="using:Windows.UI.Xaml.Interop"
             xmlns:energyPredictions="using:UWP.CartesianChart.Energy_Predictions"

             mc:Ignorable="d" 
             d:DesignHeight="300" d:DesignWidth="600"
             Background="#ECECEC" d:DataContext="{d:DesignInstance energyPredictions:EnergyPredictionExample}">
    <Grid Margin="15">
        <Grid.Resources>
            <energyPredictions:OpacityConverter x:Key="OpacityConverter"></energyPredictions:OpacityConverter>
            <energyPredictions:ReverseConverter x:Key="ReverseConverter"></energyPredictions:ReverseConverter>
            <Style TargetType="lvc:StackedAreaSeries">
                <Setter Property="PointGeometrySize" Value="0"></Setter>
            </Style>
        </Grid.Resources>
        <Border CornerRadius="5" Background="White">
            <Grid>
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto"></RowDefinition>
                    <RowDefinition Height="*"></RowDefinition>
                </Grid.RowDefinitions>
                <TextBlock Grid.Row="0" FontSize="40" Foreground="#404040" Margin="20, 10">Energy Consumption</TextBlock>
                <Canvas Grid.Row="1" Name="Canvas" Margin="-4, 0, 0, 20">
                    <ListBox Name="ListBox" ItemsSource="{Binding Series, Converter={StaticResource ReverseConverter}}"
                             Canvas.ZIndex="1" Canvas.Left="60" Canvas.Top="20" BorderThickness="0" Background="Transparent">
                        <ListBox.ItemTemplate>
                            <DataTemplate>
                                <TextBlock Text="{Binding (lvc:LineSeries.Title)}" 
                                           Foreground="{Binding (lvc:LineSeries.Fill)}"
                                           Opacity="{Binding (lvc:LineSeries.Visibility), Converter={StaticResource OpacityConverter}}"
                                           FontSize="22"/>
                            </DataTemplate>
                        </ListBox.ItemTemplate>
                        <ListBox.ItemContainerStyle>
                            <Style TargetType="ListBoxItem">
                                <Setter Property="Background" Value="Transparent" />
                                <Setter Property="Template">
                                    <Setter.Value>
                                        <ControlTemplate TargetType="ListBoxItem">
                                            <ContentPresenter Tapped="UIElement_OnTapped" />
                                        </ControlTemplate>
                                    </Setter.Value>
                                </Setter>
                            </Style>
                        </ListBox.ItemContainerStyle>
                    </ListBox>

                    <lvc:CartesianChart Height="{Binding ElementName=Canvas, Path=ActualHeight}" Width="{Binding ElementName=Canvas, Path=ActualWidth}"
                                     Series="{Binding Series}" Hoverable="False" DataTooltip="{x:Null}">
                        <lvc:CartesianChart.AxisX>
                            <lvc:Axis IsEnabled="False" ShowLabels="False"></lvc:Axis>
                        </lvc:CartesianChart.AxisX>
                        <lvc:CartesianChart.AxisY>
                            <lvc:Axis IsMerged="True" FontSize="14"></lvc:Axis>
                        </lvc:CartesianChart.AxisY>
                    </lvc:CartesianChart>
                </Canvas>
            </Grid>
        </Border>
    </Grid>
</Page>



