如何将样式赋予WPF工具包图表

Question

我在WPF应用程序中使用带有PieChart的WPF工具包图表。

我想在PieChart Picture ..中默认将白色背景更改为透明。

如何赋予Style实现

Answer 1

WPF旨在允许您通过XAML设置控件样式;不是代码。通过样式化也可以在饼图中使绘图区域和图例透明。遗憾的是，无法使用属性控制绘图区域周围的边框，而是必须修改整个控件模板。最后使用样式可能就像编写后面的代码一样乏味，修改了可视化树，但至少对我来说，它仍然感觉像是一种更干净的方法。

<chartingToolkit:Chart>
  <chartingToolkit:Chart.PlotAreaStyle>
    <Style TargetType="Grid">
      <Setter Property="Background" Value="Transparent"/>
    </Style>
  </chartingToolkit:Chart.PlotAreaStyle>

  <chartingToolkit:Chart.LegendStyle>
    <Style TargetType="visualizationToolkit:Legend">
      <Setter Property="Margin" Value="15,0"/>
      <Setter Property="VerticalAlignment" Value="Center"/>
      <Setter Property="BorderBrush" Value="Transparent"/>
      <Setter Property="Background" Value="Transparent"/>
    </Style>
  </chartingToolkit:Chart.LegendStyle>

  <chartingToolkit:Chart.Style>
    <Style TargetType="chartingToolkit:Chart">
      <Setter Property="Template">
        <Setter.Value>
          <ControlTemplate TargetType="chartingToolkit:Chart">
            <Border Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Padding="{TemplateBinding Padding}">
              <Grid>
                <Grid.RowDefinitions>
                  <RowDefinition Height="Auto" />
                  <RowDefinition Height="*" />
                </Grid.RowDefinitions>

                <visualizationToolkit:Title Content="{TemplateBinding Title}" Style="{TemplateBinding TitleStyle}" />

                <!-- Use a nested Grid to avoid possible clipping behavior resulting from ColumnSpan+Width=Auto -->
                <Grid Grid.Row="1" Margin="0,15,0,15">
                  <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*" />
                    <ColumnDefinition Width="Auto" />
                  </Grid.ColumnDefinitions>

                  <visualizationToolkit:Legend x:Name="Legend" Title="{TemplateBinding LegendTitle}" Style="{TemplateBinding LegendStyle}" Grid.Column="1" />
                  <chartingprimitives:EdgePanel x:Name="ChartArea" Style="{TemplateBinding ChartAreaStyle}">
                    <Grid Canvas.ZIndex="-1" Style="{TemplateBinding PlotAreaStyle}" />
                    <!--<Border Canvas.ZIndex="10" BorderBrush="#FF919191" BorderThickness="1" />-->
                  </chartingprimitives:EdgePanel>
                </Grid>
              </Grid>
            </Border>
          </ControlTemplate>
        </Setter.Value>
      </Setter>
    </Style>
  </chartingToolkit:Chart.Style>

  <chartingToolkit:PieSeries ... />
</chartingToolkit:Chart>

修改PlotAreaStyle和LegendStyle以使其透明。通过修改图表的ControlTemplate并简单地注释掉有问题的Border元素，删除了绘图区域周围的边框。

Answer 2

如果您查看了可视树，则会发现必须更改网格和边框的背景属性以将背景更改为透明（下图中以黄色突出显示的元素）。

为此，您可以在Loaded事件中更改颜色。首先，您必须找到名为EdgePanel的{​​{1}}，之后您必须更改网格和边框的颜色。如果您还要将ChartArea的背景设置为透明，则必须找到Legend元素并设置相应的属性。

Legend

代码隐藏：

<DVC:Chart Canvas.Top="80" Canvas.Left="10" Name="mcChart" 
   Width="400" Height="250"
   Background="Orange"
   Loaded="mcChart_Loaded">            
    <DVC:Chart.Series>
        <DVC:PieSeries Title="Experience" 
            ItemsSource="{StaticResource FruitCollection}"
            IndependentValueBinding="{Binding Path=Name}"
            DependentValueBinding="{Binding Path=Share}">                
        </DVC:PieSeries>
    </DVC:Chart.Series>           
</DVC:Chart>

帮助类在这种情况下查找子元素private void mcChart_Loaded(object sender, RoutedEventArgs e) { EdgePanel ep = VisualHelper.FindChild<EdgePanel>(sender as Chart, "ChartArea"); if (ep != null) { var grid = ep.Children.OfType<Grid>().FirstOrDefault(); if (grid != null) { grid.Background = new SolidColorBrush(Colors.Transparent); } var border = ep.Children.OfType<Border>().FirstOrDefault(); if (border != null) { border.BorderBrush = new SolidColorBrush(Colors.Transparent); } } Legend legend = VisualHelper.FindChild<Legend>(sender as Chart, "Legend"); if (legend != null) { legend.Background = new SolidColorBrush(Colors.Transparent); legend.BorderBrush = new SolidColorBrush(Colors.Transparent); } } ：

EdgePanel