<UserControl x:Class="Wpf.CartesianChart.UIElements.UiElementsAndEventsExample"
             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="clr-namespace:LiveCharts.Wpf;assembly=LiveCharts.Wpf"
             xmlns:uiElements="clr-namespace:Wpf.CartesianChart.UIElements"
             mc:Ignorable="d" 
             d:DesignHeight="300" d:DesignWidth="300">
    <UserControl.DataContext>
        <uiElements:UiElementsViewModel></uiElements:UiElementsViewModel>
    </UserControl.DataContext>
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto"></ColumnDefinition>
            <ColumnDefinition Width="*"></ColumnDefinition>
        </Grid.ColumnDefinitions>
        <ListBox Width="120" Margin="10" ItemsSource="{Binding Values}" 
                 SelectedItem="{Binding SelectedPoint, Mode=TwoWay}">
            <ListBox.ItemTemplate>
                <DataTemplate>
                    <TextBlock Text="{Binding DateTime, StringFormat={}{0:dd MMM}}"/>
                </DataTemplate>
            </ListBox.ItemTemplate>
        </ListBox>
        <lvc:CartesianChart Grid.Column="1" VisualElements="{Binding Visuals}">
            <lvc:CartesianChart.Series>
                <lvc:LineSeries Values="{Binding Values}" PointGeometry="{x:Null}" Fill="Transparent"></lvc:LineSeries>
            </lvc:CartesianChart.Series>
            <lvc:CartesianChart.AxisX>
                <lvc:Axis LabelFormatter="{Binding Formatter}" LabelsRotation="-90">
                    <lvc:Axis.Separator>
                        <lvc:Separator Step="{Binding Step}"/>
                    </lvc:Axis.Separator>
                </lvc:Axis>
            </lvc:CartesianChart.AxisX>
        </lvc:CartesianChart>
    </Grid>
</UserControl>
