風格化的WPF應(yīng)用程序，使它看起來類似于 Expression Blend 似乎是一種比較常見情況，你甚至可以自動下載幾個Chart FX for WPF圖表控件中被稱為“WPF Futures”和“WPF Themes” 的開放源碼項目，其中包含了Expression黑色樣式作，作為可以在你的應(yīng)用程序中使用的樣式。

    如果您使用這些項目之一，將可以自動的定義所有常用的控件（列表框、 標簽、 滑塊等），同時也會影響您的圖表的外觀，最后的效果如下：

  ;  為了使圖表看起來與應(yīng)用程序已經(jīng)集成，我們要做的第一件事就是更改用于所有元素的筆刷 （條形圖、 背景、 標題、 點標簽等），為了做到這一點，我們將對所有圖表的app.xaml 添加一個樣式：

xmlns:cfx="//schemas.softwarefx.com/chartfx/wpf/80"
xmlns:cfxMotifs=//schemas.softwarefx.com/chartfx/wpf/80/motifs
<Style x:Key="{x:Type cfx:Chart}" TargetType="{x:Type cfx:Chart}">
  <Setter Property="Template" Value="{x:Static cfxMotifs:Simple.ChartTemplate}"/>
  <Setter Property="Palette" Value="{StaticResource PaletteExpressionDark}"/>
</Style>

    第一個setter將從默認類中變換圖表的模版到一個更為簡單的模板，這個操作將會刪除在底部以及在類似3D面上的反射。第二個setter就是在app.xaml中改變圖表調(diào)色板的引用資源。

<cfx:Palette x:Key="PaletteExpressionDark">
  <cfx:Palette.SeriesFill>
    <Brush>#5372B0</Brush>
    <Brush>#FFEC35</Brush>
    …
  </cfx:Palette.SeriesFill>
  <cfx:Palette.SeriesStroke>
    <Brush>#324468</Brush>
    <Brush>#897E1C</Brush>
    …
  </cfx:Palette.SeriesStroke>
  <cfx:Palette.SeriesForegroundInside>
    <Brush>#FF385516</Brush>
    <Brush>#FF575113</Brush>
    …
  </cfx:Palette.SeriesForegroundInside>
  <cfx:Palette.Foreground>#FFFFFFFF</cfx:Palette.Foreground>
  <cfx:Palette.Background>#FF333333</cfx:Palette.Background>
  <cfx:Palette.Border>…</cfx:Palette.Border>
  <cfx:Palette.PointLabelForeground>#FFFFFFFF</cfx:Palette.PointLabelForeground>
  <cfx:Palette.PointLabelForegroundInside>
       #FFFFFFFF
  </cfx:Palette.PointLabelForegroundInside>
  <cfx:Palette.Axis>#BDBDBD</cfx:Palette.Axis>
  <cfx:Palette.AxisGridLines>#FF8B8B8B</cfx:Palette.AxisGridLines>
  …
  <cfx:Palette.PlotArea>#40595959</cfx:Palette.PlotArea>
  <cfx:Palette.MainArea>Transparent</cfx:Palette.MainArea>
  <cfx:Palette.Title>#DFDFDF</cfx:Palette.Title>
  <cfx:Palette.LegendForeground>#DFDFDF</cfx:Palette.LegendForeground>
  <cfx:Palette.DataViewBackground>#40595959</cfx:Palette.DataViewBackground>
  …
  <cfx:Palette.ToolTipForeground>#EEEEEE</cfx:Palette.ToolTipForeground>
  <cfx:Palette.View3DAmbientLight>#808080</cfx:Palette.View3DAmbientLight>
  <cfx:Palette.ThumbStroke>#FFD1D1D1</cfx:Palette.ThumbStroke>
  <cfx:Palette.SelectionFill>#8C00AEFF</cfx:Palette.SelectionFill>
  …
</cfx:Palette>

    值得注意的是，這個調(diào)色板已經(jīng)進行了消減，所以會有幾個條目消失。

    結(jié)合一個簡單的風格和使用相同的顏色/梯度做一個更大的改變，但是依然有需要改進的地方。在Chart FX for WPF中，你可以修改邊界外觀，不用擔心其他元素的問題。

<cfx:ControlTemplateBorder x:Key="BorderDark">
  <cfx:ControlTemplateBorder.Template>
    <ControlTemplate TargetType="{x:Type cfx:ChartBorder}">
      <ControlTemplate.Resources>
        <Thickness x:Key="cfxBorderThickness">1</Thickness>
        <Style x:Key="cfxInternalBorderStyle" TargetType="{x:Type ContentControl}">
          <Setter Property="Template">
            <Setter.Value>
              <ControlTemplate TargetType="{x:Type ContentControl}">
                <Border CornerRadius="2"
                    BorderBrush="{Binding Path=Palette.AlternateBorder}"
                         RelativeSource={RelativeSource TemplatedParent},                                       
                    Background="{TemplateBinding Background}"  BorderThickness="1">
                  <ContentPresenter Margin="{TemplateBinding Padding}"/>
                </Border>
              </ControlTemplate>
            </Setter.Value>
          </Setter>
        </Style>
        <CornerRadius x:Key="cfxCornerRadius">2</CornerRadius>
      </ControlTemplate.Resources>
      <Border cfx:Chart.PanelName="BorderChild"
            BorderBrush="{TemplateBinding BorderBrush}"
            Background="{TemplateBinding Background}" CornerRadius="2"
            BorderThickness="{TemplateBinding BorderThickness}" />
    </ControlTemplate>
  </cfx:ControlTemplateBorder.Template>
</cfx:ControlTemplateBorder>
<Style x:Key="{x:Type cfx:Chart}" TargetType="{x:Type cfx:Chart}">
  <Setter Property="Template" Value="{x:Static cfxMotifs:Simple.ChartTemplate}"/>
  <Setter Property="Palette" Value="{StaticResource PaletteExpressionDark}"/>
  <Setter Property="Border" Value="{StaticResource BorderDark}"/>
</Style>

    我們現(xiàn)在來設(shè)置邊框?qū)傩裕?/p>

<ResourceDictionary x:Key="ResourcesDark">
    <Style x:Key="ThumbStyle" TargetType="{x:Type Thumb}" BasedOn="{x:Null}">
      <Setter Property="Template">
        <Setter.Value>…</Setter.Value>
      </Setter>
    </Style>
    <Style x:Key="ScrollRepeatButtonStyle" TargetType="{x:Type RepeatButton}">
      <Setter Property="Template">
        <Setter.Value>…</Setter.Value>
      </Setter>
    </Style>
    <Style TargetType="{x:Type ScrollBar}">
      <Setter Property="Template">
        <Setter.Value>…</Setter.Value>
      </Setter>
    </Style>
  </ResourceDictionary>
  <Style x:Key="{x:Type cfx:Chart}" TargetType="{x:Type cfx:Chart}">
    <Setter Property="Template" Value="{x:Static cfxMotifs:Simple.ChartTemplate}"/>
    <Setter Property="Palette" Value="{StaticResource PaletteExpressionDark}"/>
    <Setter Property="Border" Value="{StaticResource BorderDark}"/>
    <Setter Property="MergeResources" Value="{StaticResource ResourcesDark}"/>
  </Style>

    最終的效果如下所示：

    在這里你可以添加一些簡單的視覺效果：

<ResourceDictionary x:Key="GalleryDark">
  <DataTemplate x:Key="Bar">
    <DataTemplate.Resources>
      <sys:Double x:Key="cfxDefStrokeThickness">1</sys:Double>
      <DataTemplate x:Key="cfxLastStack">…</DataTemplate>
      <DataTemplate x:Key="cfxMiddleStack">…</DataTemplate>
      <DataTemplate x:Key="cfxFirstStack">…</DataTemplate>
    </DataTemplate.Resources>
    <Border x:Name="bar" CornerRadius="2,2,0,0"
          Width="{Binding Path=Width}" Height="{Binding Path=Height}"
          Background="{Binding Path=Fill}" BorderBrush="{Binding Path=Stroke}"
          BorderThickness="{Binding Path=StrokeThickness}"
          Opacity="{Binding Path=Opacity}"
          RenderTransform="{Binding Path=Transform}" />
    <DataTemplate.Triggers>…</DataTemplate.Triggers>
  </DataTemplate>
  <DataTemplate x:Key="Line">
    <DataTemplate.Resources>
      <sys:Double x:Key="cfxDefStrokeThickness">3</sys:Double>
      <sys:Double x:Key="cfxDefMarkerSize">10</sys:Double>
      <sys:String x:Key="pointsCategory">lineShadow</sys:String>
    </DataTemplate.Resources>
    <Canvas Opacity="{Binding Path=Opacity}">
      <Polyline Visibility="{Binding Path=EffectsVisibility}" x:Name="lineShadow"
           Points="{Binding Path=Points}"
           Canvas.Top="{Binding Path=StrokeThickness,
                                  Converter={StaticResource multiplyConverter},
                                  ConverterParameter=1.50}"
           Stroke="#FF000000" StrokeThickness="{Binding Path=StrokeThickness}"
           StrokeDashArray="{Binding Path=StrokeDashArray}" Opacity="0.2">
        <Polyline.BitmapEffect>
          <BlurBitmapEffect Radius="2"/>
        </Polyline.BitmapEffect>
      </Polyline>
      <Polyline Points="{Binding Path=Points}" x:Name="points"
            Stroke="{Binding Path=Stroke}"
            StrokeThickness="{Binding Path=StrokeThickness}"
            StrokeDashArray="{Binding Path=StrokeDashArray}" />
    </Canvas>
    <DataTemplate.Triggers>…</DataTemplate.Triggers>
  </DataTemplate>
</ResourceDictionary>
<Style x:Key="{x:Type cfx:Chart}" TargetType="{x:Type cfx:Chart}">
  <Setter Property="Template" Value="{x:Static cfxMotifs:Simple.ChartTemplate}"/>
  <Setter Property="Palette" Value="{StaticResource PaletteExpressionDark}"/>
  <Setter Property="Border" Value="{StaticResource BorderDark}"/>
  <Setter Property="MergeResources" Value="{StaticResource ResourcesDark}"/>
  <Setter Property="GalleryTemplates" Value="{StaticResource GalleryDark}"/>
  <Setter Property="MarkerTemplates" Value="{x:Static cfx:MarkerTemplates.Simple}"/>
</Style>