Themes | Visiblox Gallery
In Visiblox Charts you can load a theme which can contain styles for all the chart components.
By applying a theme, you can completely alter the look and feel of your charts.
This example also demonstrates a column chart with a StylingMode of PerPoint, where each column is coloured differently. Also, data labels are attached to the line series points.
XAML + CODE +XAML
<UserControl x:Class="Visiblox.Charts.Examples.ThemedChart.ThemedChartExample"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:charts="clr-namespace:Visiblox.Charts;assembly=Visiblox.Charts"
xmlns:local="clr-namespace:Visiblox.Charts.Examples.ThemedChart"
mc:Ignorable="d">
<UserControl.Resources>
<Style x:Key="NoBorder" TargetType="Border">
<Setter Property="BorderThickness" Value="0" />
</Style>
<local:DataItemList x:Key="Data">
<local:DataItem DisplayName="Internet Explorer" Percentage="43" />
<local:DataItem DisplayName="Firefox" Percentage="28" />
<local:DataItem DisplayName="Chrome" Percentage="18" />
<local:DataItem DisplayName="Safari" Percentage="7" />
<local:DataItem DisplayName="Opera" Percentage="4" />
</local:DataItemList>
<local:DataItemList x:Key="CumulativeData">
<local:DataItem DisplayName="Internet Explorer" Percentage="0.43" />
<local:DataItem DisplayName="Firefox" Percentage="0.71" />
<local:DataItem DisplayName="Chrome" Percentage="0.89" />
<local:DataItem DisplayName="Safari" Percentage="0.96" />
<local:DataItem DisplayName="Opera" Percentage="1" />
</local:DataItemList>
</UserControl.Resources>
<charts:Theme x:Name="Theme">
<ContentControl>
<StackPanel x:Name="LayoutRoot" Orientation="Vertical" Background="White">
<!-- Set up the chart -->
<!-- Ultimate Trial users should add 'ValidationKey="ENTER TRIAL LICENSE KEY HERE"' to each Chart declaration. -->
<charts:Chart Width="600" Height="350" x:Name="Chart" Title="Internet Browser Market Share"
PlotAreaBorderStyle="{StaticResource NoBorder}" LegendVisibility="Collapsed" >
<charts:Chart.SecondaryYAxis>
<charts:LinearAxis ShowMinorTicks="False" ShowMajorTicks="false" MajorTickInterval="0.1" MinorTickInterval="0.01" ShowAxis="False">
<charts:LinearAxis.Range>
<charts:DoubleRange Minimum="0" Maximum="1"/>
</charts:LinearAxis.Range>
</charts:LinearAxis>
</charts:Chart.SecondaryYAxis>
<charts:Chart.YAxis>
<charts:LinearAxis ShowMinorTicks="False" ShowMajorTicks="false" MajorTickInterval="10" MinorTickInterval="1">
<charts:LinearAxis.Range>
<charts:DoubleRange Minimum="0" Maximum="100"/>
</charts:LinearAxis.Range>
</charts:LinearAxis>
</charts:Chart.YAxis>
<charts:Chart.Series>
<charts:LineSeries ShowPoints="True" ShowDataLabels="True" LabelMaxWidth="100" LabelFormatString="p">
<charts:LineSeries.DataSeries>
<charts:BindableDataSeries Title="CumulativeData" ItemsSource="{StaticResource CumulativeData}"
XValueBinding="{Binding Path=DisplayName}" YValueBinding="{Binding Path=Percentage}" />
</charts:LineSeries.DataSeries>
</charts:LineSeries>
<charts:ColumnSeries ToolTipEnabled="True" StylingMode="PerPoint">
<!-- Defining the data source using data binding -->
<charts:ColumnSeries.DataSeries>
<charts:BindableDataSeries Title="Data" ItemsSource="{StaticResource Data}"
XValueBinding="{Binding Path=DisplayName}" YValueBinding="{Binding Path=Percentage}"/>
</charts:ColumnSeries.DataSeries>
</charts:ColumnSeries>
</charts:Chart.Series>
</charts:Chart>
<StackPanel x:Name="Buttons" Orientation="Horizontal" Background="White" HorizontalAlignment="Center">
<RadioButton Tag="Default.xaml" IsChecked="True" Checked="Theme_Check" Margin="10" GroupName="Buttons">Default Theme</RadioButton>
<RadioButton Tag="Midnight.xaml" Click="Theme_Check" Margin="10" GroupName="Buttons">Midnight Theme</RadioButton>
<RadioButton Tag="Sunrise.xaml" Click="Theme_Check" Margin="10" GroupName="Buttons">Sunrise Theme</RadioButton>
</StackPanel>
</StackPanel>
</ContentControl>
</charts:Theme>
</UserControl>
^ Back To Top
Code
using System;
using System.Collections.Generic;
using System.Windows;
using System.Windows.Controls;
namespace Visiblox.Charts.Examples.ThemedChart
{
/// <summary>
/// An example to theme a bar chart by simply providing the address of
/// the desired resource dictionary
/// </summary>
public partial class ThemedChartExample : UserControl
{
private string resourceBase = "/Visiblox.Charts.Examples.Silverlight.Premium;component/ThemedChart/Assets/Themes/";
public ThemedChartExample()
{
InitializeComponent();
Chart.Series[0].YAxis = Chart.SecondaryYAxis;
}
/// <summary>
/// Radio Button handler to apply selected theme to the chart
/// </summary>
private void Theme_Check(object sender, RoutedEventArgs e)
{
var button = (RadioButton)sender;
if (button.IsChecked == true && Theme != null)
{
string tag = button.Tag == null ? "Default.xaml" : button.Tag.ToString();
string theme = string.Format("{0}{1}", resourceBase, tag);
Theme.ThemeUri = new Uri(theme, UriKind.Relative);
}
}
}
// Data Model
public class DataItemList : List<DataItem> { }
public class DataItem
{
public string DisplayName { get; set; }
public double Percentage { get; set; }
public DataItem() { }
}
}
^ Back To Top
Real Charting Power...
View Features and Try for Free
Chart Types
See example charts and download sample source code
Line And Area Charts
Bar And Column Charts
Financial Charts
Other Charts
Developer Features
Check out chart features and technical documentation
High Performance
Customised Look And Feel
Application Development
Other Features
