<UserControl x:Class="Wpf.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:local="clr-namespace:Wpf.CartesianChart.Energy_Predictions"
             xmlns:lvc="clr-namespace:LiveCharts.Wpf;assembly=LiveCharts.Wpf"
             mc:Ignorable="d" 
             d:DesignHeight="300" d:DesignWidth="6"
             Background="#ECECEC" d:DataContext="{d:DesignInstance local:EnergyPredictionExample}">
    <Grid Margin="20" Width="620">
        <Grid.Effect>
            <DropShadowEffect BlurRadius="15" Direction="-90" RenderingBias="Quality" Opacity=".2" ShadowDepth="1"/>
        </Grid.Effect>
        <Grid.Resources>
            <local:OpacityConverter x:Key="OpacityConverter"></local:OpacityConverter>
            <local:ReverseConverter x:Key="ReverseConverter"></local:ReverseConverter>
        </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}}" PreviewMouseDown="ListBox_OnPreviewMouseDown" 
                             Panel.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="{x:Type ListBoxItem}">
                                <Setter Property="Background" Value="Transparent" />
                                <Setter Property="Template">
                                    <Setter.Value>
                                        <ControlTemplate TargetType="{x:Type ListBoxItem}">
                                            <ContentPresenter />
                                        </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>
</UserControl>
