LightningChart Support Forums

Posted: **Tue Aug 01, 2017 2:54 pm**

Hello,
I am developing an application in WPF (mvvm) in which I use LightningChart. Unfortunately, built-in styles do not match the rest of the app. I wanted to use my own styles defined in ResourceDictionary but it is not working.

For example:

Code: Select all

   ... 
   xmlns:chart="http://schemas.arction.com/semibindablecharting/ultimate/
   ...

    <SolidColorBrush x:Key="ThemeDarkBackgroundBrush" Color="#46494c" />
    <SolidColorBrush x:Key="ThemeLightBackgroundBrush" Color="#4c5c68" />

    <chart:Fill x:Key="ViewBackgroundStyle" Color="#4ddcdcdd" GradientFill="Solid" />

    <Style TargetType="{x:Type chart:ViewXY}">
        <Setter Property="GraphBackground" Value="{DynamicResource ViewBackgroundStyle}"/>
    </Style>

    <Style TargetType = "{x: Type chart: AxisTitle}">
        <Setter Property = "Color" Value = "Red" />
        <Setter Property = "Text" Value = "Red" />
    </ Style>

    <Style TargetType = "{x: Type chart: AxisXTitle}">
        <Setter Property = "Color" Value = "Red" />
    </ Style>

    <Style TargetType = "{x: Type chart: AxisX}">
        <Setter Property = "AxisColor" Value = "Red" />
    </ Style>

    <Style TargetType = "{x: Type ListView}">
        <Setter Property = "Background" Value = "{DynamicResource ThemeLightBackgroundBrush}" />
    </ Style>

    <Style TargetType = "{x: Type GridViewColumnHeader}">
        <Setter Property = "Background" Value = "{DynamicResource ThemeDarkBackgroundBrush}" />
    </ Style>

This styling works for all build in XAML controls, but unfortunately for the LightningChart not.

My YAxis collection is dynamic (binded to AxisYCollection) and I can not set each axis in XAML separately, but I dont want to set my styles in the View Model class .

Does anyone know if it is possible to use style in XAML without referring directly to objects in code-behind like:

Code: Select all

YAxis.MajorGrid.Color = new Color (35, 255, 255, 255);

Here is my chart definition of XAML

Code: Select all

<Lcusb: LightningChartUltimate
            Grid.Column = "1">

            <Lcusb: LightningChartUltimate.ViewXY>
                <Lcusb: ViewXY PointLineSeries = "{Binding LineSeries}"
                              YAxes = "{Binding LineSeriesYAxes}"
                              XAxes = "{Binding LineSeriesXAxes}"
                              LegendBoxes = "{Binding LineSeriesSegmentsLegends}">

                    <Lcusb: ViewXY.ZoomPanOptions>
                        <Lcusb: ZoomPanOptions
                            RightToLeftZoomAction = "RectangleZoomIn"
                            MouseWheelZooming = "Horizontal"
                            PanDirection = "Horizontal"
                            AxisMouseWheelAction = "None"
                            LeftMouseButtonAction = "Zoom"
                            RectangleZoomDirection = "Horizontal"
                            RightMouseButtonAction = "Mr."
                            ShiftEnabled = "False"
                            AltEnabled = "False"
                            CtrlEnabled = "False" />
                    </lcusb:ViewXY.ZoomPanOptions>
                    <Lcusb: ViewXY.AxisLayout>
                        <Lcusb: AxisLayout
                            YAxesLayout = "Segmented"
                            SegmentsGap = "30"
                            Segments = "{Binding LineSeriesSegments}">
                        </ Lcusb: AxisLayout>
                    </lcusb:ViewXY.AxisLayout>
                </ Lcusb: ViewXY>
            </lcusb:LightningChartUltimate.ViewXY>
        </ Lcusb: LightningChartUltimate>

Thanks in advance

Posted: **Wed Aug 02, 2017 12:02 pm**

Hello,

LightningChart, unfortunately, does not support the Styling for WPF. However, we consider to include that feature at some point.
You can try to create resources separately and make binding to them, for example:

- I have placed a chart in a Grid container.
- Created a resource for Data

Code: Select all

<Grid.Resources>
  <lcu:SeriesPointCollection x:Key="Points">
    <lcu:SeriesPoint/>
    <lcu:SeriesPoint X="10" Y="15"/>
    <lcu:SeriesPoint X="20" Y="25"/>
  </lcu:SeriesPointCollection>
</Grid.Resources>

- Created a binding from StaticResource

Code: Select all

<lcu:ViewXY.PointLineSeries>
    <lcu:PointLineSeries Points="{Binding Mode=OneWay, Source={StaticResource Points}}"/>
</lcu:ViewXY.PointLineSeries>

I am sure, you can do in the same way with all the other properties.

Best regards,
Nikolai

LightningChart Support Forums

Styling chart in XAML

Styling chart in XAML

Re: Styling chart in XAML