彩票走势图

WPF图表控件Chart FX使用方法系列:如何最小化图例空间

原创|使用教程|编辑:郝浩|2013-02-21 10:19:47.000|阅读 843 次

概述:在WPF图表控件Chart FX使用方法系列中我们为大家介绍了一系列Chart FX for WPF的使用方法。有时候图表图例的尺寸将会约束到图表,这个主要是因为会占用太多的空间,在今天的文章中,一起来探讨几个解决这个问题的方法。

# 慧都年终大促·界面/图表报表/文档/IDE等千款热门软控件火热促销中 >>

相关链接:

    在WPF图表控件Chart FX使用方法系列中我们为大家介绍了一系列Chart FX for WPF的使用方法。有时候图表图例的尺寸将会约束到图表,这个主要是因为会占用太多的空间,在今天的文章中,一起来探讨几个解决这个问题的方法。

风格化标题来模仿图例的样式

    在Chart FX for WPF中,标题都是全部可以样式化的,虽然通常标题都是字符串,但是实际上你也可以在标题中使用任何的WPF 视觉效果,这种方法就有一个问题,你必须编写很多关于标题的信息,比如说系列的数量、颜色等,这样的话,将会导致很多不适用的且大数据量的代码信息,而且将不会有高亮的效果。

在标题下方显示图例

    删除图例边框,并将图例的边框停靠到顶部。

<cfx:Chart.Titles>
    <cfx:Title>Sales in 1998</cfx:Title>
  </cfx:Chart.Titles>
  <cfx:Chart.LegendBox>
    <cfx:LegendBox cfx:Chart.DockBorder="None" DockPanel.Dock="Top" />
  </cfx:Chart.LegendBox>

WPF图表控件Chart FX使用方法系列:如何最小化图例空间

    值得注意的是,默认的类样式会在区域空间外较大的绘制主要的标题,但是如果你比较喜欢将这两个放在一起,你可以修改图例中的目标面板,如果没有产生想要的效果,你可以更新生成的方式:

<cfx:Chart.LegendBox>
    <cfx:LegendBox cfx:Chart.DockBorder="None" DockPanel.Dock="Top"
                   cfx:Chart.TargetPanel="Titles-0" />
  </cfx:Chart.LegendBox>

WPF图表控件Chart FX使用方法系列:如何最小化图例空间

将标题和图例放在一行中:

如果序列的数量比较小的话,就可以将标题和图例结合起来:

<Style x:Key="LegendTitleStyle" TargetType="{x:Type ItemsControl}">
  <Setter Property="Template">
    <Setter.Value>
      <ControlTemplate>
        <StackPanel Orientation="Horizontal">
          <StackPanel Orientation="Horizontal" IsItemsHost="True"
                              VerticalAlignment="Top" />
          <TextBlock VerticalAlignment="Top" Text="{Binding Path=Tag}"/>
        </StackPanel>
      </ControlTemplate>
    </Setter.Value>
  </Setter>
</Style>
<DataTemplate x:Key="LegendTitleItem">
  <StackPanel Orientation="Horizontal">
    <StackPanel.Resources>
      <cfxConverters:BoolToVisibilityConverter x:Key="BoolToVisibility"/>
    </StackPanel.Resources>
    <StackPanel VerticalAlignment="Top" x:Name="textAndLine">
      <Border Background="Transparent">
        <ContentControl IsHitTestVisible="false" Content="{Binding Path=Content}"
                        ContentTemplate="{Binding Path=ContentTemplate}"
                        Foreground="{Binding Path=Foreground}"
                        FontFamily="{Binding Path=FontFamily}"
                        FontSize="{Binding Path=FontSize}"
                        FontStyle="{Binding Path=FontStyle}"
                        FontWeight="{Binding Path=FontWeight}"/>
      </Border>
      <Rectangle Fill="{Binding Path=Stroke}" Height="3"/>
    </StackPanel>
    <TextBlock Text=" "/> 
    <TextBlock Text="Vs " IsHitTestVisible="false"
               Visibility="{Binding Path=LastInGroup,
                            Converter={StaticResource BoolToVisibility},
                            ConverterParameter=false}"/>
  </StackPanel>
  <DataTemplate.Triggers>
    <DataTrigger Binding="{Binding Path=Dimmed}">
      <DataTrigger.Value>
        <sys:Boolean>True</sys:Boolean>
      </DataTrigger.Value>
      <Setter Property="Opacity" Value="0.25" TargetName="textAndLine" />
    </DataTrigger>
  </DataTemplate.Triggers>
</DataTemplate>
  <cfx:Chart.LegendBox>
    <cfx:LegendBox cfx:Chart.DockBorder="None" DockPanel.Dock="Top"
                   Tag="Sales in 1998"
                   ContainerStyle="{StaticResource LegendTitleStyle}">
      <cfx:LegendBox.ItemAttributes>
        <cfx:LegendItemAttributes cfx:LegendItemAttributes.LegendItemType="Series"
                                  Template="{StaticResource LegendTitleItem}"/>
      </cfx:LegendBox.ItemAttributes>
    </cfx:LegendBox>
  </cfx:Chart.LegendBox>

WPF图表控件Chart FX使用方法系列:如何最小化图例空间


标签:

本站文章除注明转载外,均为本站原创或翻译。欢迎任何形式的转载,但请务必注明出处、不得修改原文相关链接,如果存在内容上的异议请邮件反馈至chenjj@cahobeh.cn

文章转载自:慧都控件

为你推荐

  • 推荐视频
  • 推荐活动
  • 推荐产品
  • 推荐文章
  • 慧都慧问
扫码咨询


添加微信 立即咨询

电话咨询

客服热线
023-68661681

TOP