如何給樣式到WPF工具包圖表

Question

我使用WPF工具包圖與餅圖在我的WPF應用程序。

我想通過默認的白色背景透明的餅圖圖片更換..

如何給樣式來實現這一

Answer 1

如果你看了可視化樹，你會發現，你必須改變的背景屬性網格和邊框將背景更改爲透明（下圖中以黃色突出顯示的元素）。

要做到這一點，你可以在Loaded事件改變顏色。首先，您必須找到名稱爲ChartArea的EdgePanel，之後您必須更改網格和邊框的顏色。如果您還想將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元素，可以刪除繪圖區域周圍的邊框。