WinRT界面控件Essential Studio使用教程：时间范围上实现标签自定义-控件新闻-慧都网

WinRT界面控件Essential Studio使用教程：时间范围上实现标签自定义

原创|使用教程|编辑：郝浩|2013-07-08 14:23:22.000|阅读 217 次

概述：在前面的文章中说明了界面控件Essential Studio for WinRT(XAML)中的SfDateTimeRangeNavigator控件的使用示例，下面来看看如何在时间范围控件上实现标签自定义。

自定义标签

在Essential Studio for WinRT(XAML)的SfDateTimeRangeNavigator控件可以帮助用户以简化的方式可视化大数据，在更高层次和低层次的条形是表示数据时间跨度的，在默认情况下会自动计算的时间跨度，对于给定的数据会提供适当的时间格式和间隔。

间隔属性有以下几种类型Year、Quarter、Month、Week、Day、Hour。

<syncfusion:SfDateTimeRangeNavigator x:Name="rangepicker" ItemsSource="{Binding power}"  XBindingPath="Date" >
            <syncfusion:SfDateTimeRangeNavigator.Intervals> 
                <syncfusion:Interval IntervalType="Quarter"/>
                <syncfusion:Interval IntervalType="Month"/>
            </syncfusion:SfDateTimeRangeNavigator.Intervals>
            <syncfusion:SfDateTimeRangeNavigator.Content>
                <syncfusion:SfChart   >
                    <syncfusion:SfChart.PrimaryAxis>
                        <syncfusion:CategoryAxis Visibility="Collapsed" />
                    </syncfusion:SfChart.PrimaryAxis>
                    <syncfusion:SfChart.SecondaryAxis>
                        <syncfusion:NumericalAxis Visibility="Collapsed" />
                    </syncfusion:SfChart.SecondaryAxis>
                    <syncfusion:FastLineBitmapSeries XBindingPath="Date" ItemsSource="{Binding power}" YBindingPath="Value">
                        </syncfusion:FastLineBitmapSeries>
                </syncfusion:SfChart>
                </syncfusion:SfDateTimeRangeNavigator.Content>
        </syncfusion:SfDateTimeRangeNavigator>

在下面的截图中显示了季度和月份的时间间隔。

WinRT界面控件Essential Studio使用教程：时间范围上实现标签自定义

当用用下面的格式放大时，自动时间跨度格式会简化数据的可视化表示。

WinRT界面控件Essential Studio使用教程：时间范围上实现标签自定义

标签样式自定义

使用LabelBarStyle属性可以实现标签样式自定义，这个可以应用到更高层的条形或更低层级的条形。

<chart:SfDateTimeRangeNavigator.HigherLevelBarStyle>
                    <chart:LabelBarStyle Background="Red" LabelHorizontalAlignment="Left">
                        <chart:LabelBarStyle.LabelStyle>
                            <Style TargetType="TextBlock">
                                <Setter Property="FontSize" Value="10"/>
                            </Style>
                        </chart:LabelBarStyle.LabelStyle>
                    </chart:LabelBarStyle>
  </chart:SfDateTimeRangeNavigator.HigherLevelBarStyle>

下面的屏幕快照显示的是标签水平对齐方式设置为左。

WinRT界面控件Essential Studio使用教程：时间范围上实现标签自定义