如何给样式到WPF工具包图表(How to give Style to WPF Toolkit Ch

我在我的WPF应用程序中使用WPF工具包图与饼图。

我想通过默认的白色背景透明的饼图图片更换..

如何给样式来实现这一目标

Answer 1:

如果你看了可视化树，你会发现，你必须改变网格和边界的背景属性来更改背景透明（在下面的图片以黄色突出显示的元素）。

要做到这一点，你可以改变颜色Loaded事件。 首先，你必须找到EdgePanel名称为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);               
    }
}

Helper类找到在这种情况下，子元素EdgePanel ：

class VisualHelper
{
    public static T FindChild<T>(DependencyObject parent, string childName) where T : DependencyObject
    {
        if (parent == null) return null;

        T foundChild = null;

        int childrenCount = VisualTreeHelper.GetChildrenCount(parent);
        for (int i = 0; i < childrenCount; i++)
        {
            var child = VisualTreeHelper.GetChild(parent, i);
            T childType = child as T;
            if (childType == null)
            {
                foundChild = FindChild<T>(child, childName);
                if (foundChild != null) break;
            }
            else if (!string.IsNullOrEmpty(childName))
            {
                var frameworkElement = child as FrameworkElement;
                if (frameworkElement != null && frameworkElement.Name == childName)
                {
                    foundChild = (T)child;
                    break;
                }
            }
            else
            {
                foundChild = (T)child;
                break;
            }
        }
        return foundChild;
    }
}

Answer 2:

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元素。

文章来源: How to give Style to WPF Toolkit Chart