Triton_160/Common/DataAnalysisControl/Charting/View/PlotView.xaml

<UserControl x:Class="Aitex.UI.Charting.View.PlotView"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             xmlns:sciChart="http://schemas.abtsoftware.co.uk/scichart" 
             xmlns:conv="clr-namespace:Aitex.UI.Charting.Converter"
             mc:Ignorable="d" 
             d:DesignHeight="408" d:DesignWidth="880" FontFamily="Arial,SimSun" FontSize="11">
    <UserControl.Resources>
        <Style TargetType="{x:Type Label}">
            <Setter Property="Foreground" Value="Black"/>
        </Style>
        <conv:Visibility2boolConverter x:Key="vis2bool" />
        <conv:MouseWheelZoomXConverter x:Key="mouseWheelZoomXConverter"/>
        <conv:MouseWheelZoomYConverter x:Key="mouseWheelZoomYConverter"/>
        <conv:boolReverseConverter x:Key="boolReverseConverter"/>
        <conv:bool2VisibilityConverter x:Key="bool2VisibilityConverter"/>
        <conv:PanEnableConverter x:Key="panEnableConverter"/>
        <conv:Bools2BoolConverter x:Key="bools2BoolConverter"/>
        <conv:RolloverDataTimeConverter x:Key="rolloverDataTimeConverter"/>
        <conv:RolloverDataValueConverter x:Key="rolloverDataValueConverter"/>
        <conv:ColorToBrushConverter x:Key="ColorToBrushConverter"/>
        <conv:RolloverDataPointerInfoConverter x:Key="rolloverDataPointerInfoConverter"/>
        
        <!--  Template for the RolloverModifier tooltip to display AxisInfo collection (result of hit test)  -->
        <ControlTemplate x:Key="RolloverLabelTemplate" TargetType="sciChart:TemplatableControl">
            <Border Background="#AAFFFFFF" BorderBrush="{Binding SeriesColor, Converter={StaticResource ColorToBrushConverter}}" BorderThickness="2" CornerRadius="5">
                <StackPanel Margin="5">
                    <TextBlock FontSize="12" FontWeight="Bold" Foreground="{Binding SeriesColor, Converter={StaticResource ColorToBrushConverter}}" Text="{Binding SeriesName}"/>
                    <TextBlock FontSize="11" Foreground="{Binding SeriesColor, Converter={StaticResource ColorToBrushConverter}}">
                        <TextBlock.Text>
                            <MultiBinding Converter="{StaticResource rolloverDataPointerInfoConverter}">
                                <Binding Path="XValue"/>
                                <Binding Path="Value"/>
                                <Binding Path="RenderableSeries"/>
                            </MultiBinding>
                        </TextBlock.Text>
                    </TextBlock>
                </StackPanel>
            </Border>
        </ControlTemplate>
    </UserControl.Resources>
    <Grid Name="chartingView_Top">
        <Grid.RowDefinitions>
            <RowDefinition Height="auto" />
            <RowDefinition Height="400*" />
        </Grid.RowDefinitions>
        <StackPanel Grid.Row="0" Height="22" Orientation="Horizontal" Background="LightGray">
            <Button Width="115" BorderThickness="0.1" Padding="0" IsTabStop="False"
                          Focusable="False" Command="{Binding CommonViewModel.Switch2DataCfgViewCommand}"
                          ToolTip="{DynamicResource GlobalLableConfigDataInfo}" Name="dataButton">
                <Button.Content>
                    <StackPanel Orientation="Horizontal">
                        <Image Source="/DataAnalysisControl;component/Charting/Images/Data.png" Stretch="Fill" Height="16" Width="16" HorizontalAlignment="Left" />
                        <Label Content="{DynamicResource GlobalLableConfigData}" VerticalContentAlignment="Center" Padding="0" />
                    </StackPanel>
                </Button.Content>
            </Button>
            <Button Width="75" BorderThickness="0.1" Padding="0" IsTabStop="False" Click="showAllButton_Click"
                          Focusable="False"
                          ToolTip=" {DynamicResource GlobalLableDisplayAllData} " Name="showAllButton">
                <Button.Content>
                    <StackPanel Orientation="Horizontal">
                        <Image Source="/DataAnalysisControl;component/Charting/Images/zoom_all.png" Stretch="Fill" Height="16" Width="16" HorizontalAlignment="Left" />
                        <Label Content=" 1:1 " VerticalContentAlignment="Center" Padding="0" />
                    </StackPanel>
                </Button.Content>
            </Button>
            <ToggleButton Width="75" BorderThickness="0.1" Padding="0" IsTabStop="False"
                          Focusable="False" IsChecked="True"
                          ToolTip="{DynamicResource GlobalLableDisplayValueInfo}" Name="rolloverButton">
                <ToggleButton.Content>
                    <StackPanel Orientation="Horizontal">
                        <Image Source="/DataAnalysisControl;component/Charting/Images/legend.png" Stretch="Fill" Height="16" Width="16" HorizontalAlignment="Left" />
                        <Label Content="{DynamicResource GlobalLableDisplayValue}" VerticalContentAlignment="Center" Padding="0" />
                    </StackPanel>
                </ToggleButton.Content>
            </ToggleButton>
            <ToggleButton Width="75" BorderThickness="0.1" Padding="0" IsTabStop="False" x:Name="toggleVerticalLine"
                          Focusable="False"
                          ToolTip="" 
                          Command="{Binding ToggleVerticalLineCommand}" CommandParameter="{Binding ElementName=vertical_Line1,Path=IsHidden}">
                <ToggleButton.IsChecked>
                    <MultiBinding Converter="{StaticResource bools2BoolConverter}">
                        <Binding ElementName="vertical_Line1" Path="IsHidden" Mode="OneWay"/>
                        <Binding ElementName="vertical_Line2" Path="IsHidden" Mode="OneWay"/>
                    </MultiBinding>
                </ToggleButton.IsChecked>
                <ToggleButton.Content>
                    <StackPanel Orientation="Horizontal">
                        <Image Source="/DataAnalysisControl;component/Charting/Images/VerticalLine.png" Stretch="Fill" Height="16" Width="16" HorizontalAlignment="Left" />
                        <Label Content="{DynamicResource GlobalLableDisplayRuler}" VerticalContentAlignment="Center" Padding="0" />
                    </StackPanel>
                </ToggleButton.Content>
            </ToggleButton>
            <ToggleButton Width="90" BorderThickness="0.1" Padding="0" IsTabStop="False" Focusable="False" Command="{Binding ToggleXWheelZoomCommand}"
                          ToolTip="{DynamicResource GlobalLableZoomXInfo}">
                <ToggleButton.IsChecked>
                    <MultiBinding Converter="{StaticResource mouseWheelZoomXConverter}" Mode="OneWay">
                        <Binding ElementName="mouseWheelZoomModifier" Path="XyDirection"/>
                        <Binding ElementName="mouseWheelZoomModifier" Path="IsEnabled"/>
                    </MultiBinding>
                </ToggleButton.IsChecked>
                <ToggleButton.Content>
                    <StackPanel Orientation="Horizontal">
                        <Image Source="/DataAnalysisControl;component/Charting/Images/ZoomX.png" Stretch="Fill" Height="16" Width="16" HorizontalAlignment="Left" />
                        <Label Content="{DynamicResource GlobalLableZoomX}" VerticalContentAlignment="Center" Padding="0" />
                    </StackPanel>
                </ToggleButton.Content>
            </ToggleButton>
            <ToggleButton Width="90" BorderThickness="0.1" Padding="0" IsTabStop="False" Focusable="False" Command="{Binding ToggleYWheelZoomCommand}"
                          ToolTip="{DynamicResource GlobalLableZoomYInfo}">
                <ToggleButton.IsChecked>
                    <MultiBinding Converter="{StaticResource mouseWheelZoomYConverter}" Mode="OneWay">
                        <Binding ElementName="mouseWheelZoomModifier" Path="XyDirection"/>
                        <Binding ElementName="mouseWheelZoomModifier" Path="IsEnabled"/>
                    </MultiBinding>
                </ToggleButton.IsChecked>
                <ToggleButton.Content>
                    <StackPanel Orientation="Horizontal">
                        <Image Source="/DataAnalysisControl;component/Charting/Images/ZoomY.png" Stretch="Fill" Height="16" Width="16" HorizontalAlignment="Left" />
                        <Label Content="{DynamicResource GlobalLableZoomY}" VerticalContentAlignment="Center" Padding="0" />
                    </StackPanel>
                </ToggleButton.Content>
            </ToggleButton>
            <ToggleButton Width="75" BorderThickness="0.1" Padding="0" IsTabStop="False" Focusable="False" Command="{Binding ToggleOverViewPanel}" IsChecked="{Binding IsOverViewPanelVisable,Mode=OneWay}" 
                          ToolTip="{DynamicResource GlobalLablePreviewWindowInfo}">
                <ToggleButton.Content>
                    <StackPanel Orientation="Horizontal">
                        <Image Source="/DataAnalysisControl;component/Charting/Images/x_overview.png" Stretch="Fill" Height="19" Width="19" HorizontalAlignment="Left" />
                        <Label Content="{DynamicResource GlobalLablePreviewWindow}" VerticalContentAlignment="Center" Padding="0" />
                    </StackPanel>
                </ToggleButton.Content>
            </ToggleButton>
            <ToggleButton Width="75" BorderThickness="0.1" Padding="0" IsTabStop="False" Focusable="False" IsChecked="{Binding CommonViewModel.IsDataConfigVisiable,Mode=OneWay}"  Command="{Binding CommonViewModel.ToggleDataDisplayPanelCommand}"
                          ToolTip="{DynamicResource GlobalLableDatasetInfo}">
                <ToggleButton.Content>
                    <StackPanel Orientation="Horizontal">
                        <Image Source="/DataAnalysisControl;component/Charting/Images/data_config.png" Stretch="Fill" Height="16" Width="16" HorizontalAlignment="Left" />
                        <Label Content="{DynamicResource GlobalLableDataset}" VerticalContentAlignment="Center" Padding="0" />
                    </StackPanel>
                </ToggleButton.Content>
            </ToggleButton>
        </StackPanel>
        <Grid Name="chartingView_Top_RightRenderingView" Grid.Row="1">
            <Grid.RowDefinitions>
                <RowDefinition Height="500*" />
                <RowDefinition Height="{Binding OverViewPanelHeight}" />
            </Grid.RowDefinitions>
            <!-- Create the chart surface -->
            <sciChart:SciChartSurface Name="sciChart" RenderableSeries="{Binding CommonViewModel.RenderableSeries}" 
                                      sciChart:ThemeManager.Theme="ExpressionLight" 
                                      ClipToBounds="False" 
                                      Padding="0,0,3,0" 
                                      MouseDoubleClick="sciChart_MouseDoubleClick" 
                                      DebugWhyDoesntSciChartRender="False">
                
            <!-- Create an X Axis -->
                <sciChart:SciChartSurface.XAxis>
                    <sciChart:DateTimeAxis DrawMinorTicks="True" 
                                           DrawMinorGridLines="True" 
                                           Margin="0,0,0,0" 
                                           SubDayTextFormatting="MM/dd HH:mm:ss" 
                                           TitleFontSize="10" 
                                           TextFormatting="yyyy/MM/dd HH:mm:ss" 
                                           Id="DefaultAxisId"/>
                </sciChart:SciChartSurface.XAxis>

                <!-- Create a Y Axis -->
                <sciChart:SciChartSurface.YAxis>
                    <sciChart:NumericAxis DrawMinorTicks="True" 
                                          DrawMinorGridLines="True" 
                                          AxisAlignment="Right"
                                          Id="DefaultAxisId">
                        <sciChart:NumericAxis.GrowBy>
                            <sciChart:DoubleRange Min="0.1" Max="0.1"/>
                        </sciChart:NumericAxis.GrowBy>
                    </sciChart:NumericAxis>
                </sciChart:SciChartSurface.YAxis>

                <!--  Vertical Lines Annotations-->
                <sciChart:SciChartSurface.Annotations>
                    <sciChart:VerticalLineAnnotation x:Name="vertical_Line1" X1="{Binding CommonViewModel.Time1,Mode=TwoWay}" X2="{Binding CommonViewModel.Time1,Mode=TwoWay}" Stroke="Red" VerticalAlignment="Stretch" ShowLabel="True" StrokeThickness="1.5" IsEditable="True" LabelTextFormatting="yyyy/MM/dd HH:mm:ss" IsHidden="True" LabelPlacement="Top" FontSize="10" />
                    <sciChart:VerticalLineAnnotation x:Name="vertical_Line2" X1="{Binding CommonViewModel.Time2,Mode=TwoWay}" X2="{Binding CommonViewModel.Time2,Mode=TwoWay}" Stroke="Purple" VerticalAlignment="Stretch" ShowLabel="True" StrokeThickness="1.5" IsEditable="True" LabelTextFormatting="yyyy/MM/dd HH:mm:ss" IsHidden="True" LabelPlacement="Bottom" FontSize="10" />
                </sciChart:SciChartSurface.Annotations>

                <!-- Specify interactivity modifiers -->
                <sciChart:SciChartSurface.ChartModifier>
                    <sciChart:ModifierGroup ExecuteOn="MouseDoubleClick">

                        <!-- Provides selection of series and custom styling to the selected series -->
                        <sciChart:SeriesSelectionModifier ExecuteOn="MouseLeftButton" ReceiveHandledEvents="True">
                            <sciChart:SeriesSelectionModifier.SelectedSeriesStyle>
                                <Style TargetType="sciChart:BaseRenderableSeries">
                                    <Setter Property="SeriesColor" Value="Red"/>
                                    <Setter Property="PointMarkerTemplate">
                                        <Setter.Value>
                                            <ControlTemplate>
                                                <Ellipse Fill="#FFAA00AA" Stroke="Red" Width="8" Height="8"/>
                                            </ControlTemplate>
                                        </Setter.Value>
                                    </Setter>
                                </Style>
                            </sciChart:SeriesSelectionModifier.SelectedSeriesStyle>
                        </sciChart:SeriesSelectionModifier>

                        <sciChart:RubberBandXyZoomModifier x:Name="rubberBandZoomModifier" IsEnabled="True" 
                                                           IsXAxisOnly="False" 
                                                           ZoomExtentsY="False" 
                                                           IsAnimated="True" ExecuteOn="MouseLeftButton" ReceiveHandledEvents="True" />
                        <!--<sciChart:ZoomExtentsModifier x:Name="zoomExtentsModifier" ExecuteOn="MouseDoubleClick"/>-->
                        
                        <!-- Provides a data source for the legend control -->
                        <sciChart:LegendModifier GetLegendDataFor="AllSeries" x:Name="legendModifier"/>
                        <!--<sciChart:RubberBandXyZoomModifier IsEnabled="True" IsXAxisOnly="True"/>-->
                        <!--<sciChart:CursorModifier IsEnabled="True"
                                                 ShowAxisLabels="True"
                                                 ShowTooltip="True" />-->

                        <!--自由平移-->
                        <sciChart:ZoomPanModifier x:Name="zoomPanModifier" IsEnabled="True" ExecuteOn="MouseRightButton" ClipModeX="None" />

                        <!--移动鼠标时动态显示当前数据值-->
                        <sciChart:RolloverModifier x:Name="rolloverModifier" 
                                                   UseInterpolation="False" FontSize="9" IsEnabled="True" 
                                                   DrawVerticalLine="False" FontFamily="Arial,SimSun" 
                                                   SnapsToDevicePixels="False"
                                                   TooltipLabelTemplate="{StaticResource RolloverLabelTemplate}" ShowAxisLabels="False" />
                        
                        <!--<sciChart:LegendModifier x:Name="legendModifier" GetLegendDataFor="AllSeries"/>-->
                        <!--<sciChart:RubberBandXyZoomModifier IsXAxisOnly="True"/>-->
                        <!--<sciChart:XAxisDragModifier/>-->
                        <!--<sciChart:YAxisDragModifier/>-->

                        <!--<sciChart:ZoomExtentsModifier ExecuteOn="MouseDoubleClick"/>--> <!--双击自动显示全部视图-->
                        <!--<sciChart:ZoomPanModifier ExecuteOn="MouseLeftButton"/>-->

                        <!--
                        <sciChart:XAxisDragModifier x:Name="xAxisDragModifier" IsEnabled="True" ClipModeX="None"/>
                        <sciChart:YAxisDragModifier x:Name="yAxisRightDragmodifier" IsEnabled="True" YAxisId="DefaultAxisId"/>
                        -->
                        <sciChart:MouseWheelZoomModifier x:Name="mouseWheelZoomModifier" XyDirection="XDirection"/> <!--滚轮滚动进行缩放操作-->
                        <!--
                        <sciChart:ZoomPanModifier ReceiveHandledEvents="True"></sciChart:ZoomPanModifier>
                        <sciChart:ZoomExtentsModifier ExecuteOn="MouseDoubleClick"/>
                        -->
                    </sciChart:ModifierGroup>
                </sciChart:SciChartSurface.ChartModifier>

            </sciChart:SciChartSurface>

            <sciChart:SciChartLegend x:Name="legendControl" Visibility="Hidden"
                                     Grid.Row="0" Margin="5,5" ShowVisibilityCheckboxes="True" 
                                     LegendData="{Binding LegendData, ElementName=legendModifier, Mode=OneWay}" 
                                     FontSize="10" FontWeight="Light" />

            <sciChart:SciChartOverview Grid.Row="1"  
                                       ParentSurface="{Binding ElementName=sciChart}"
                                       SelectedRange="{Binding ElementName=sciChart, Path=XAxis.VisibleRange, Mode=TwoWay}" 
                                       sciChart:ThemeManager.Theme="ExpressionLight" BorderThickness="0,1,0,0" />

            <!-- Define a panel to display rollover results -->
            <Border BorderBrush="#55000000" BorderThickness="2" Background="#77FFFFFF" 
                    VerticalAlignment="Top" CornerRadius="5"
                    Margin="5,5,50,0" Padding="2" HorizontalAlignment="Left" 
                    Visibility="{Binding ElementName=rolloverButton,Path=IsChecked,Converter={StaticResource bool2VisibilityConverter}}">
                <ItemsControl DataContext="{Binding ElementName=rolloverModifier}" 
                              ItemsSource="{Binding SeriesData.SeriesInfo}">
                    <ItemsControl.ItemTemplate>
                        <DataTemplate>
                            <Grid Height="13" Opacity="0.9">
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="20"/>
                                    <ColumnDefinition Width="126"/>
                                    <ColumnDefinition Width="110"/>
                                    <ColumnDefinition Width="*"/>
                                </Grid.ColumnDefinitions>
                                <TextBlock Grid.Column="0" Background="{Binding SeriesColor, Converter={StaticResource ColorToBrushConverter}}" Text="  " Margin="0" Height="8" />
                                <TextBlock Grid.Column="1" Text="{Binding XValue,Converter={StaticResource rolloverDataTimeConverter}}" Margin="0" FontSize="9" FontFamily="Arial,SimSun" />
                                <TextBlock Grid.Column="2" Margin="0" FontSize="9" FontFamily="Arial,SimSun">
                                    <TextBlock.Text>
                                        <MultiBinding Converter="{StaticResource rolloverDataValueConverter}">
                                            <Binding Path="Value"/>
                                            <Binding Path="RenderableSeries"/>
                                        </MultiBinding>
                                    </TextBlock.Text>
                                </TextBlock>
                                <TextBlock Grid.Column="3" Text="{Binding SeriesName}" Margin="0" FontSize="9" FontFamily="Arial,SimSun"  HorizontalAlignment="Left"/>
                            </Grid>
                        </DataTemplate>
                    </ItemsControl.ItemTemplate>
                </ItemsControl>
            </Border>

        </Grid>
    </Grid>
</UserControl>