永利最大(官方)网站

    风格化的WPF应用程序，使它看起来类似于 Expression Blend 似乎是一种比较常见情况，你甚至可以自动下载几个Chart FX for WPF图表控件中被称为“WPF Futures”和“WPF Themes” 的开放源码项目，其中包含了Expression黑色样式作，作为可以在你的应用程序中使用的样式。

     如果您使用这些项目之一，将可以自动的定义所有常用的控件（列表框、 标签、 滑块等），同时也会影响您的图表的外观，最后的效果如下：

     为了使图表看起来与应用程序已经集成，我们要做的第一件事就是更改用于所有元素的笔刷 （条形图、 背景、 标题、 点标签等），为了做到这一点，我们将对所有图表的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中改变图表调色板的引用资源。

<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>

     值得注意的是，这个调色板已经进行了消减，所以会有几个条目消失。

     结合一个简单的风格和使用相同的颜色/梯度做一个更大的改变，但是依然有需要改进的地方。在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>

    我们现在来设置边框属性：

<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>