<UserControl x:Class="Wpf.PanelExample"
             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"
             xmlns:lvc="clr-namespace:LiveCharts.Wpf;assembly=LiveCharts.Wpf"
             mc:Ignorable="d" 
             d:DesignHeight="300" d:DesignWidth="300"
             Background="#303030">
    <UserControl.DataContext>
        <local:DarkPanelControlVm></local:DarkPanelControlVm>
    </UserControl.DataContext>
    <UserControl.Resources>
        <Style TargetType="TextBlock" >
            <Setter Property="Foreground" Value="White"></Setter>
        </Style>
        <Style TargetType="lvc:ColumnSeries">
            <Setter Property="DataLabels" Value="True"></Setter>
            <Setter Property="FontSize" Value="13"></Setter>
            <Setter Property="Foreground" Value="White"></Setter>
            <Setter Property="LabelsPosition" Value="Top"></Setter>
        </Style>
        <Style TargetType="lvc:LineSeries">
            <Setter Property="FontSize" Value="13"></Setter>
            <Setter Property="Foreground" Value="White"></Setter>
            <Setter Property="Fill" Value="Transparent"></Setter>
            <Setter Property="Stroke" Value="#99ffffff"></Setter>
            <Setter Property="StrokeThickness" Value="4"></Setter>
            <Setter Property="PointGeometry" Value="{x:Null}"></Setter>
        </Style>
        <Style TargetType="lvc:PieSeries">
            <Setter Property="StrokeThickness" Value="0"></Setter>
        </Style>
        <Style TargetType="lvc:Axis">
            <Setter Property="FontSize" Value="14"></Setter>
            <Setter Property="ShowLabels" Value="False"></Setter>
            <Setter Property="Separator">
                <Setter.Value>
                    <lvc:Separator IsEnabled="False"></lvc:Separator>
                </Setter.Value>
            </Setter>
        </Style>
        <Style TargetType="lvc:AngularGauge">
            <Setter Property="NeedleFill" Value="#FF8F00"></Setter>
            <Setter Property="SectionsInnerRadius" Value=".5"></Setter>
        </Style>
        <Style TargetType="lvc:Gauge">
            <Setter Property="GaugeBackground" Value="#30ffffff"></Setter>
        </Style>
    </UserControl.Resources>
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition></ColumnDefinition>
            <ColumnDefinition></ColumnDefinition>
            <ColumnDefinition></ColumnDefinition>
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"></RowDefinition>
            <RowDefinition Height=".4*"></RowDefinition>
            <RowDefinition></RowDefinition>
        </Grid.RowDefinitions>
        <TextBlock Grid.ColumnSpan="3" HorizontalAlignment="Center" FontSize="20" Margin="0 0 0 20">Dark Control Panel</TextBlock>
        <lvc:CartesianChart Grid.Row="1" Grid.Column="0">
            <lvc:CartesianChart.Series>
                <lvc:ColumnSeries Values="1,2,3,4,5,6,7,8"></lvc:ColumnSeries>
                <lvc:LineSeries Values="{Binding Line1}"></lvc:LineSeries>
            </lvc:CartesianChart.Series>
            <lvc:CartesianChart.AxisX>
                <lvc:Axis ShowLabels="True" Labels="Jan, Feb, Mar, Apr, May, Jun, Jul, Ago" LabelsRotation="-15">
                    <lvc:Axis.Separator>
                        <lvc:Separator Step="1" IsEnabled="False"></lvc:Separator>
                    </lvc:Axis.Separator>
                </lvc:Axis>
            </lvc:CartesianChart.AxisX>
            <lvc:CartesianChart.AxisY>
                <lvc:Axis MinValue="0"></lvc:Axis>
            </lvc:CartesianChart.AxisY>
        </lvc:CartesianChart>
        <lvc:PieChart Grid.Row="1" Grid.Column="1" LegendLocation="Right" InnerRadius="60" Series="{Binding PieSeries}"
                      DataTooltip="{x:Null}" Hoverable="True">
            <lvc:PieChart.ChartLegend>
                <lvc:DefaultLegend Foreground="White"></lvc:DefaultLegend>
            </lvc:PieChart.ChartLegend>
        </lvc:PieChart>
        <lvc:AngularGauge Grid.Row="1" Grid.Column="2" Value="{Binding AngularGaugeValue}">
            <lvc:AngularGauge.Sections>
                <lvc:AngularSection FromValue="0" ToValue="80" Fill="#505050"></lvc:AngularSection>
                <lvc:AngularSection FromValue="80" ToValue="100" Fill="#353535"></lvc:AngularSection>
            </lvc:AngularGauge.Sections>
        </lvc:AngularGauge>
        <Grid Grid.Column="0" Grid.Row="2">
            <Grid.RowDefinitions>
                <RowDefinition Height=".3*"></RowDefinition>
                <RowDefinition Height=".3*"></RowDefinition>
                <RowDefinition Height=".6*"></RowDefinition>
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition></ColumnDefinition>
                <ColumnDefinition></ColumnDefinition>
            </Grid.ColumnDefinitions>
            <lvc:Gauge Grid.Row="0" Grid.Column="0" Value=".20"  Uses360Mode="True" Margin="5" LabelFormatter="{Binding Formatter}"/>
            <lvc:Gauge Grid.Row="0" Grid.Column="1" Value=".80"  Uses360Mode="True" Margin="5" LabelFormatter="{Binding Formatter}"
                       FromColor="IndianRed" ToColor="IndianRed"/>
            <lvc:Gauge Grid.Row="1" Grid.Column="0" Value=".70"  Uses360Mode="True" Margin="5" LabelFormatter="{Binding Formatter}"
                       FromColor="LightSeaGreen" ToColor="LightSeaGreen"/>
            <lvc:Gauge Grid.Row="1" Grid.Column="1" Value=".36"  Uses360Mode="True" Margin="5" LabelFormatter="{Binding Formatter}"
                       FromColor="White" ToColor="White"/>
            <lvc:CartesianChart Grid.Row="2" Grid.Column="0" Grid.ColumnSpan="2" Margin="10">
                <lvc:CartesianChart.Series>
                    <lvc:LineSeries Fill="#30ffffff" Values="{Binding DynamicValues}"></lvc:LineSeries>
                </lvc:CartesianChart.Series>
                <lvc:CartesianChart.AxisY>
                    <lvc:Axis ShowLabels="True"></lvc:Axis>
                </lvc:CartesianChart.AxisY>
            </lvc:CartesianChart>
        </Grid>
        <lvc:GeoMap Grid.Row="2" Grid.Column="1" Grid.ColumnSpan="2" Margin="10" Background="Transparent"
                    HeatMap="{Binding GeoValues}" Source="Maps/World.xml" />
    </Grid>
</UserControl>

