DynamicDataDisplay学习之路(二)-xml中常用方法

之前有使用步骤，使用的是源码示例： DynamicDataDisplay学习之路（一）

今天讲讲xaml中用到的东西：

目录

1，绘图仪的主X、Y轴

2，标题

3，常数线

4，十字光标【CursorCoordinateGraph 】

5，轴线上显示光标位置【AxisCursorGraph 】

6，数据跟随图【DataFollowChart】​

---

1，绘图仪的主X、Y轴

<!--主X轴刻度[默认显示]-->
<d3:ChartPlotter.MainHorizontalAxis>
    <!--
        常规刻度[默认显示]
            Visibility:是否显示刻度轴[Visible,Hidden]
            ShowMinorTicks:是否显示短刻度线
            Height:刻度轴高度，0就相当于隐藏刻度轴
    -->
    <d3:HorizontalAxis Visibility="Visible"  ShowMinorTicks="False" Height="20"/>

    <!--整数刻度-->
    <!--<d3:HorizontalIntegerAxis/>-->
    <!--时间轴[年月日时分秒]刻度-->
    <!--<d3:HorizontalDateTimeAxis/>
    <!--<d3:HorizontalTimeSpanAxis/>-->
</d3:ChartPlotter.MainHorizontalAxis>

<!--主Y轴刻度[默认显示]-->
<d3:ChartPlotter.MainVerticalAxis>
    <d3:VerticalAxis Visibility="Hidden"/>
</d3:ChartPlotter.MainVerticalAxis>

2，标题

<!--绘图仪主标题-->
<d3:Header TextBlock.FontSize="20">Very simple chart</d3:Header>
<!--Y轴标题-->
<d3:VerticalAxisTitle>Sine value</d3:VerticalAxisTitle>
<!--X轴标题-->
<d3:HorizontalAxisTitle>Sine argument</d3:HorizontalAxisTitle>

3，常数线

<!--
    垂直于Y轴
        Value:对应的Y轴刻度值
        Stroke:画线的颜色
        StrokeThickness:画线的厚度
        StrokeDashArray:画虚线
-->
<d3:HorizontalLine Value="1" Stroke="Aqua" StrokeThickness="1" StrokeDashArray="4,5" />
<!--垂直于X轴-->
<d3:VerticalLine />

4，十字光标【CursorCoordinateGraph 】

<!-- 
    十字光标                   
        AutoHide: 鼠标离开绘图仪时是否自动隐藏光标行。[默认：True]
        Position: 光标的位置(在AutoHide=False的时候有效)
        FollowMouse: 是否跟随鼠标光标位置。[默认：True]
        CustomXFormat: X标签的自定义格式字符串。
        CustomYFormat: Y标签的自定义格式字符串。
        XTextMapping: x label-函数的文本映射，该函数方法根据数据中鼠标的x坐标生成文本。
        YTextMapping: y label-函数的文本映射，该函数方法根据数据中鼠标的x坐标生成文本。
        ShowHorizontalLine: 是否显示水平线
        ShowVerticalLine: 是否显示竖线
        LineStroke: 光标线的颜色
        LineStrokeThickness: 光标线的粗细
        LineStrokeDashArray:创建虚线
-->
<d3:CursorCoordinateGraph  AutoHide="False"  CustomXFormat="a" LineStroke="Aqua"/>

CursorCoordinateGraph 显示时间：可借鉴：在cs类中更改显示字符串  ，修改源代码来实现 横坐标显示日期 

5，轴线上显示光标位置【AxisCursorGraph 】

<!--
    两条轴上的线，显示当前光标位置
        ShowHorizontalLine:是否显示在X轴上光标的位置
        ShowVerticalLine:是否显示在Y轴上光标的位置
-->
<d3:AxisCursorGraph ShowHorizontalLine="True" />

6，数据跟随图【DataFollowChart】

在源代码示例 【LineTestSample】中有演示跟代码

<!--
    [Gets or sets]
        PointSource:数据点源
        DataTemplate:创建标记的模板[MarkerTemplate]
    [Gets]
        MarkerPosition:标点位置
-->
<d3:ChartPlotter Name="plotter" Margin="0,5,0,0">                
    <d3:LineGraph Name="lineGraph" Stroke="OrangeRed" StrokeThickness="1"/>

    <d3:VerticalLine x:Name="vLine1" Value="{Binding ElementName=dataFollowChart, Path=MarkerPosition.X}" StrokeThickness="2" Stroke="Violet" StrokeDashArray="4,5" IsEnabled="False" />
    <d3:HorizontalLine x:Name="hLine1" Value="{Binding ElementName=dataFollowChart, Path=MarkerPosition.Y}" StrokeThickness="2" Stroke="Violet" StrokeDashArray="4,5" IsEnabled="False" />

    <d3:DataFollowChart Name="dataFollowChart" PointSource="{Binding ElementName=lineGraph}" >
        <DataTemplate>
            <Grid d3:ViewportPanel.ScreenOffsetY="16">
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto"/>
                    <RowDefinition Height="Auto"/>
                </Grid.RowDefinitions>
                <Rectangle RadiusX="3" RadiusY="3" Stroke="LightGray" Fill="#99FFFFFF" Grid.Row="0" Grid.RowSpan="2"/>
                <Ellipse Width="10" Height="10" Fill="LightGreen" Stroke="Green" Grid.Row="0"/>
                <TextBlock Name="tb" Margin="2,15,2,0" Grid.Row="1">
                    <TextBlock Text="{Binding Position.X, StringFormat=G3}"/>;
                    <TextBlock Text="{Binding Position.Y, StringFormat=G3}"/>
                </TextBlock>
            </Grid>
        </DataTemplate>
    </d3:DataFollowChart>               
</d3:ChartPlotter>