天天看點

WPF程式設計,Live Charts使用說明(4)——主題色彩尺寸筆觸比如自定樣式

可以為應用程式中的任何圖表設定預設樣式,必須根據需要選擇顔色,大小和筆觸。

色彩

這組顔色将是系列中的預設顔色,當系列數大于主題中的顔色數時,這些顔色将重複。

  • 材質,基于Google的材質設計
  • 基于MoedernUi設計的Metro
  • 藍色藍調
  • 白色,淺色刻度
  • 黑色,深色的刻度

尺寸

尺寸決定字号的軸和Series.DataLabels,它也設定的預設大小Series.PointGeometrySize,選項是小的(S),中(M)和大(L)。

筆觸

定義了Axis.Separator筆觸粗細和筆劃破折号數組,還定義了預設的 Series.StrokeThickness屬性,選項為light,normal和bold。

比如

解決方案資料總管中,打開App.xaml并将ResourceDictionary添加到您的應用程式資源中,在此字典中選擇顔色集,大小和權重,如下面的代碼所示,在這種情況下,我們使用的是材料設計顔色,中等大小和正常重量。

<Application x:Class = “ Wpf.App” 
  xmlns = “ http://schemas.microsoft.com/winfx/2006/xaml/presentation”
  xmlns:x = “ http://schemas.microsoft.com/winfx/2006/xaml”
  StartupUri = “ MainWindow.xaml” >
    <Application.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
               
                <!-選擇顔色設定,選項為材料,地鐵,藍色,白色和黑色->
                
                <!-材料設計顔色-> <ResourceDictionary 來源= “ pack:// application:,,, / LiveCharts.Wpf; component / Themes / Colors / material.xaml” />  
                <!-地鐵顔色-> <!-<ResourceDictionary Source =“ pack:// application:,,, / LiveCharts.Wpf; component / Themes / Colors / metro.xaml” />->
                <!-藍色漸變-> <!-<ResourceDictionary Source =“ pack:// application:,,, / LiveCharts.Wpf; component / Themes / Colors / blue.xaml” />->
                <!-白色漸變-> <!-<ResourceDictionary Source =“ pack:// application:,,, / LiveCharts.Wpf; component / Themes / Colors / white.xaml” />->
                <!-黑色漸變-> <!-<ResourceDictionary Source =“ pack:// application:,,, / LiveCharts.Wpf; component / Themes / Colors / black.xaml” />->
                
                <!-選擇大小,選項為小,中和大->
                
                <!-small-> <!-<ResourceDictionary Source =“ pack:// application:,,, / LiveCharts.Wpf; component / Themes / Size / s.xaml” />->
                <!- medium- > <ResourceDictionary 來源= “ pack:// application:,,, / LiveCharts.Wpf; component / Themes / Size / m.xaml” />  
                <!-large-> <!-<ResourceDictionary Source =“ pack:// application:,,, / LiveCharts.Wpf; component / Themes / Size / l.xaml” />->
                
                <!-選擇重量,選項為淺色,普通和粗體->
                <!-light-> <!-<ResourceDictionary Source =“ pack:// application:,,, / LiveCharts.Wpf; component / Themes / Weight / light.xaml” />->
                <!- normal- > <ResourceDictionary 來源= “ pack:// application:,,, / LiveCharts.Wpf; component / Themes / Weight / normal.xaml” />  
                <!-bold-> <!-<ResourceDictionary Source =“ pack:// application:,,, / LiveCharts.Wpf; component / Themes / Weight / bold.xaml” />->
                
                <!-還要添加基本主題,這始終是必需的->
                <ResourceDictionary 源= “ pack:// application:,,, / LiveCharts.Wpf; component / Themes / base.xaml” />  
 
                
            </ResourceDictionary.MergedDictionaries>
        </ ResourceDictionary>
    </Application.Resources>
</ Application>
           

自定樣式

可以編寫自己的主題,這是基本骨架的示例:
<Application x:Class="Wpf.App"
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  xmlns:lvc="clr-namespace:LiveCharts.Wpf"
  xmlns:system="clr-namespace:System;assembly=mscorlib"
  StartupUri="MainWindow.xaml">
    <Application.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
               
                <lvc:ColorsCollection x:Key="ColorsCollection">
                    <Color A="255" R="33" G="149" B="242" />
                    <Color A="255" R="243" G="67" B="54" />
                    <Color A="255" R="254" G="192" B="7" />
                    <Color A="255" R="96" G="125" B="138" />
                    <Color A="255" R="232" G="30" B="99" />
                    <Color A="255" R="76" G="174" B="80" />
                    <Color A="255" R="63" G="81" B="180" />
                    <Color A="255" R="204" G="219" B="57" />
                </lvc:ColorsCollection>
 
                <system:Double x:Key="Size">12</system:Double>
 
                <system:Double x:Key="SeparatorStrokeThickness">1.8</system:Double>
                <DoubleCollection x:Key="SeparatorStrokeDashArray">3</DoubleCollection>
                <system:Double x:Key="SeriesStrokeThickness">3.0</system:Double>
 
                <Style TargetType="lvc:CartesianChart">
                    <Setter Property="AnimationsSpeed" Value="0:0:0.420"></Setter>
                    <Setter Property="SeriesColors" Value="{StaticResource ColorsCollection}"/>
                </Style>
 
                <Style TargetType="lvc:Axis">
                    <Setter Property="FontSize" Value="{StaticResource Size}"></Setter>
                    <Setter Property="FontFamily" Value="Calibri"></Setter>
                    <Setter Property="Foreground" Value="#99303030"></Setter>
                </Style>
 
                <Style TargetType="lvc:Separator">
                    <Setter Property="StrokeThickness" Value="{StaticResource SeparatorStrokeThickness}"></Setter>
                    <Setter Property="StrokeDashArray" Value="{StaticResource SeparatorStrokeDashArray}"></Setter>
                    <Setter Property="Stroke" Value="#1A303030"></Setter>
                    <Style.Triggers>
                        <Trigger Property="AxisOrientation" Value="X">
                            <Setter Property="IsEnabled" Value="False"></Setter>
                        </Trigger>
                    </Style.Triggers>
                </Style>
 
                <Style TargetType="lvc:Series" x:Key="SeriesStyle">
                    <Setter Property="FontFamily" Value="Calibri"></Setter>
                    <Setter Property="FontSize" Value="{StaticResource Size}"></Setter>
                    <Setter Property="StrokeThickness" Value="{StaticResource SeriesStrokeThickness}"></Setter>
                </Style>
 
                <Style TargetType="lvc:CandleSeries" BasedOn="{StaticResource SeriesStyle}"/>
                <Style TargetType="lvc:ColumnSeries" BasedOn="{StaticResource SeriesStyle}"/>
                <Style TargetType="lvc:HeatSeries" BasedOn="{StaticResource SeriesStyle}"/>
                <Style TargetType="lvc:LineSeries" BasedOn="{StaticResource SeriesStyle}">
                    <Setter Property="PointGeometrySize" Value="{StaticResource Size}"></Setter>
                </Style>
                <Style TargetType="lvc:StepLineSeries" BasedOn="{StaticResource SeriesStyle}">
                    <Setter Property="PointGeometrySize" Value="{StaticResource Size}"></Setter>
                </Style>
                <Style TargetType="lvc:VerticalLineSeries" BasedOn="{StaticResource SeriesStyle}">
                    <Setter Property="PointGeometrySize" Value="{StaticResource Size}"></Setter>
                </Style>
                <Style TargetType="lvc:OhlcSeries" BasedOn="{StaticResource SeriesStyle}"/>
                <Style TargetType="lvc:RowSeries" BasedOn="{StaticResource SeriesStyle}"/>
                <Style TargetType="lvc:ScatterSeries" BasedOn="{StaticResource SeriesStyle}"/>
                <Style TargetType="lvc:StackedAreaSeries" BasedOn="{StaticResource SeriesStyle}"/>
                <Style TargetType="lvc:StackedColumnSeries" BasedOn="{StaticResource SeriesStyle}"/>
                <Style TargetType="lvc:StackedRowSeries" BasedOn="{StaticResource SeriesStyle}"/>
                <Style TargetType="lvc:VerticalStackedAreaSeries" BasedOn="{StaticResource SeriesStyle}"/>
                
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
    </Application.Resources>
</Application>