<UserControl x:Class="WSDDBBrowser.PgMonitorChartView"
             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:Controls="http://metro.mahapps.com/winfx/xaml/controls"
            xmlns:lvc="clr-namespace:LiveCharts.Wpf;assembly=LiveCharts.Wpf"
            xmlns:iconPacks="http://metro.mahapps.com/winfx/xaml/iconpacks"
             xmlns:local="clr-namespace:WSDDBBrowser"
             mc:Ignorable="d" 
             d:DesignHeight="450" d:DesignWidth="800">
    <Grid>
        <ScrollViewer Margin="0,10,0,0" VerticalScrollBarVisibility="Auto">
            <StackPanel >
                <StackPanel Orientation="Horizontal">
                    <Controls:ToggleSwitch Margin="{StaticResource ControlMargin}" 
                                       Header="单选模式"
                                       IsChecked="{Binding IsSingleSelectMode}" 
                                                   OffLabel="关"
                                   OnLabel="开"
                                   Style="{StaticResource MahApps.Metro.Styles.ToggleSwitch.Win10}" />
                    <Button  Style="{StaticResource ButtonStyle_empty}" Margin="5" VerticalAlignment="Bottom" Click="ButtonJpgClick" >
                        <StackPanel VerticalAlignment="Center">
                            <iconPacks:PackIconFontAwesome Kind="CameraRetroSolid" Foreground="{DynamicResource AccentColorBrush}" Height="35" Width="35" HorizontalAlignment="Center"/>
                            <TextBlock Text="输出jpg" Foreground="{DynamicResource GrayBrush2}"/>
                        </StackPanel>
                    </Button>
                </StackPanel>

                <ItemsControl ItemsSource="{Binding RecordCollections}" Margin="{StaticResource ControlMargin}">
                    <ItemsControl.Resources>

                    </ItemsControl.Resources>
                    <ItemsControl.ItemsPanel>
                        <ItemsPanelTemplate>
                            <WrapPanel Orientation="Horizontal" />
                        </ItemsPanelTemplate>
                    </ItemsControl.ItemsPanel>
                    <ItemsControl.ItemTemplate>
                        <DataTemplate>
                            <Button Style="{StaticResource ButtonStyle_empty}" Tag="{Binding .}" Margin="2" Height="36" Width="80"  HorizontalAlignment="Left" Click="ButtonChartSelect_Click">
                                <Border x:Name="border" Background="{Binding ColorBrush}" BorderThickness="2" BorderBrush="{StaticResource GrayBrush8}" >
                                    <Viewbox Margin="3">
                                        <TextBlock x:Name="tb" Text="{Binding DeviceName}" FontSize="20" Foreground="{StaticResource WhiteBrush}" FontWeight="Bold"  VerticalAlignment="Center" HorizontalAlignment="Center"  />
                                    </Viewbox>
                                </Border>
                            </Button>
                            <DataTemplate.Triggers>
                                <DataTrigger Binding="{Binding IsVisibile}" Value="False">
                                    <Setter TargetName="border" Property="Background" Value="{StaticResource WhiteBrush}"/>
                                    <Setter TargetName="border" Property="BorderBrush" Value="{Binding ColorBrush}"/>
                                    <Setter TargetName="border" Property="BorderThickness" Value="3"/>
                                    <Setter TargetName="tb" Property="Foreground" Value="{Binding ColorBrush}"/>
                                </DataTrigger>
                            </DataTemplate.Triggers>
                        </DataTemplate>
                    </ItemsControl.ItemTemplate>
                </ItemsControl>

                <Border Margin="{StaticResource ControlMargin}">
                    <ItemsControl x:Name="charts" ItemsSource="{Binding RecordCollections}" Background="White">
                        <ItemsControl.Resources>

                        </ItemsControl.Resources>
                        <ItemsControl.ItemsPanel>
                            <ItemsPanelTemplate>
                                <StackPanel/>
                            </ItemsPanelTemplate>
                        </ItemsControl.ItemsPanel>
                        <ItemsControl.ItemTemplate>
                            <DataTemplate>
                                <StackPanel Margin="{StaticResource ControlMargin}" Visibility="{Binding IsVisibile,Converter={StaticResource visbilityconv},ConverterParameter=Collapsed}">
                                    <TextBlock Text="{Binding DeviceName}" Style="{StaticResource TitleStyle}" HorizontalAlignment="Center"/>
                                    <lvc:CartesianChart  Hoverable="False" DisableAnimations="True" DataTooltip="{x:Null}" Height="300" >
                                        <lvc:CartesianChart.Series>
                                            <lvc:LineSeries 
                                            Values="{Binding Values}" 
                                            Fill="Transparent" 
                                            Stroke="{Binding ColorBrush}" 
                                            StrokeThickness="3"
                                            LineSmoothness ="0"
                                            PointGeometry ="{x:Null}"
                                            Configuration="{Binding Mapper}"
                                            />
                                        </lvc:CartesianChart.Series>
                                        <lvc:CartesianChart.AxisX>
                                            <lvc:Axis LabelFormatter="{Binding XFormatter}">
                                                <lvc:Axis.Separator>
                                                    <lvc:Separator Stroke="{StaticResource GrayBrush9}"/>
                                                </lvc:Axis.Separator>
                                            </lvc:Axis>
                                        </lvc:CartesianChart.AxisX>
                                        <lvc:CartesianChart.AxisY>
                                            <lvc:Axis MinValue="{Binding YMin}" MaxValue="{Binding YMax}" >
                                                <lvc:Axis.Resources>
                                                    <Style TargetType="lvc:AxisSection" x:Key="AxisSectionStyle">
                                                        <Setter Property="StrokeThickness" Value="0.5"/>
                                                        <Setter Property="DataLabel" Value="True"/>
                                                        <Setter Property="DisableAnimations" Value="True"/>
                                                        <Setter Property="DataLabelForeground" Value="White"/>
                                                        <Setter Property="Opacity" Value="0.5"/>
                                                        <Setter Property="Panel.ZIndex" Value="1"/>
                                                    </Style>
                                                </lvc:Axis.Resources>
                                                <lvc:Axis.Sections>
                                                    <lvc:AxisSection Style="{StaticResource AxisSectionStyle}"
                                                            Value="{Binding ToleranceYMax}"  
                                                            Stroke="{StaticResource ControlsValidationBrush}"
                                                            />
                                                    <lvc:AxisSection Style="{StaticResource AxisSectionStyle}"
                                                            Value="{Binding ToleranceYMin}"  
                                                            Stroke="{StaticResource ControlsValidationBrush}"
                                                            />
                                                </lvc:Axis.Sections>
                                                <lvc:Axis.Separator>
                                                    <lvc:Separator Stroke="{StaticResource GrayBrush9}"/>
                                                </lvc:Axis.Separator>
                                            </lvc:Axis>
                                        </lvc:CartesianChart.AxisY>
                                    </lvc:CartesianChart>
                                </StackPanel>

                            </DataTemplate>
                        </ItemsControl.ItemTemplate>
                    </ItemsControl>
                </Border>
            </StackPanel>
        </ScrollViewer>

    </Grid>
</UserControl>
