Silverlight 4 Pie Chart Customization – Palett color, Silce color change, Observable collection and 2 color pie chart
Silverlight 4 Pie Chart Customization – Palett color, Silce color change, Observable collection and 2 color pie chart.
Output:
Silverlight Pie chart customization
using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using System.Windows.Threading;
using System.Collections.ObjectModel;
using System.Windows.Controls.DataVisualization.Charting;
using System.Windows.Controls.DataVisualization;
namespace SL4Test
{
public partial class MainPage : UserControl
{
private ObservableCollection w;
public MainPage()
{
InitializeComponent();
PopulateChart();
}
private void PopulateChart()
{
//Set chart color palette
//We just want 2 colors red and green
ResourceDictionaryCollection palette = new ResourceDictionaryCollection();
for (int i = 0; i <= 1; i++)
{
byte r;
byte g;
if (i == 0) {r= Convert.ToByte(255);} else{ r = Convert.ToByte(0);}
if (i == 0) { g = Convert.ToByte(0); } else { g = Convert.ToByte(255); }
byte b = Convert.ToByte(0);
Style style = new Style(typeof(Control));
style.Setters.Add(new Setter(BackgroundProperty,
new SolidColorBrush(Color.FromArgb(255, r, g, b))));
//style.Setters.Add(new Setter(TemplateProperty, this.Resources["PieDataPointTemplate"]));
ResourceDictionary dictionary = new ResourceDictionary();
dictionary.Add("DataPointStyle", style);
palette.Add(dictionary);
}
//Set the Chart Grid Background to transparent
Style style1 = new Style(typeof(Grid));
style1.Setters.Add(new Setter(Grid.BackgroundProperty, Colors.Transparent.ToString()));
this.mychart.PlotAreaStyle = style1;
//Set the new ( 2 color) palette to chart object
this.mychart.Palette = palette;
this.w = new ObservableCollection
{
new Counter { Name = "a", Current =0 },
new Counter { Name = "b", Current = 100 }
};
this.DataContext = this.w;
TestDispatcherTimer();
}
private void TestDispatcherTimer()
{
DispatcherTimer timer = new DispatcherTimer();
int iLast = 0;
int iTotal = 100;
if (timer.IsEnabled) timer.Stop(); else timer.Start();
timer.Tick +=
delegate(object s, EventArgs args)
{
iLast += 10;
iTotal -= 10;
if (iTotal == 0) timer.Stop();
w.Clear();
this.mychart.DataContext = null;
w.Add(new Counter { Name = "a", Current = iLast });
w.Add(new Counter { Name = "b", Current = iTotal });
this.mychart.DataContext = w;
this.mychart.Palette = new Collection(mychart.Palette);
};
timer.Interval = new TimeSpan(0, 0, 1); // one second
timer.Start();
}
}
public class Counter
{
public string Name { get; set; }
public int Current { get; set; }
}
}
<UserControl x:Class="SL4Test.MainPage"
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"
mc:Ignorable="d"
d:DesignHeight="300" d:DesignWidth="400" xmlns:toolkit="http://schemas.microsoft.com/winfx/2006/xaml/presentation/toolkit"
xmlns:System_Windows_Controls_DataVisualization_Charting_Primitives="clr-namespace:System.Windows.Controls.DataVisualization.Charting.Primitives;assembly=System.Windows.Controls.DataVisualization.Toolkit"
>
<UserControl.Resources>
<Style x:Key="ChartStyle1" TargetType="toolkit:Chart">
<Setter Property="BorderBrush" Value="Black"/>
<Setter Property="BorderThickness" Value="1"/>
<Setter Property="IsTabStop" Value="False"/>
<Setter Property="Padding" Value="10"/>
<Setter Property="Palette">
<Setter.Value>
<toolkit:ResourceDictionaryCollection>
<ResourceDictionary>
<RadialGradientBrush x:Key="Background" Center="0.075,0.015" GradientOrigin="-0.1,-0.1" RadiusY="0.9" RadiusX="1.05">
<GradientStop Color="#FFB9D6F7"/>
<GradientStop Color="#FF284B70" Offset="1"/>
</RadialGradientBrush>
<Style x:Key="DataPointStyle" TargetType="Control">
<Setter Property="Background" Value="{StaticResource Background}"/>
</Style>
<Style x:Key="DataShapeStyle" TargetType="Shape">
<Setter Property="Stroke" Value="{StaticResource Background}"/>
<Setter Property="StrokeThickness" Value="2"/>
<Setter Property="StrokeMiterLimit" Value="1"/>
<Setter Property="Fill" Value="{StaticResource Background}"/>
</Style>
</ResourceDictionary>
<ResourceDictionary>
<RadialGradientBrush x:Key="Background" Center="0.075,0.015" GradientOrigin="-0.1,-0.1" RadiusY="0.9" RadiusX="1.05">
<GradientStop Color="#FFFBB7B5"/>
<GradientStop Color="#FF702828" Offset="1"/>
</RadialGradientBrush>
<Style x:Key="DataPointStyle" TargetType="Control">
<Setter Property="Background" Value="{StaticResource Background}"/>
</Style>
<Style x:Key="DataShapeStyle" TargetType="Shape">
<Setter Property="Stroke" Value="{StaticResource Background}"/>
<Setter Property="StrokeThickness" Value="2"/>
<Setter Property="StrokeMiterLimit" Value="1"/>
<Setter Property="Fill" Value="{StaticResource Background}"/>
</Style>
</ResourceDictionary>
<ResourceDictionary>
<RadialGradientBrush x:Key="Background" Center="0.075,0.015" GradientOrigin="-0.1,-0.1" RadiusY="0.9" RadiusX="1.05">
<GradientStop Color="#FFB8C0AC"/>
<GradientStop Color="#FF5F7143" Offset="1"/>
</RadialGradientBrush>
<Style x:Key="DataPointStyle" TargetType="Control">
<Setter Property="Background" Value="{StaticResource Background}"/>
</Style>
<Style x:Key="DataShapeStyle" TargetType="Shape">
<Setter Property="Stroke" Value="{StaticResource Background}"/>
<Setter Property="StrokeThickness" Value="2"/>
<Setter Property="StrokeMiterLimit" Value="1"/>
<Setter Property="Fill" Value="{StaticResource Background}"/>
</Style>
</ResourceDictionary>
<ResourceDictionary>
<RadialGradientBrush x:Key="Background" Center="0.075,0.015" GradientOrigin="-0.1,-0.1" RadiusY="0.9" RadiusX="1.05">
<GradientStop Color="#FFFDE79C"/>
<GradientStop Color="#FFF6BC0C" Offset="1"/>
</RadialGradientBrush>
<Style x:Key="DataPointStyle" TargetType="Control">
<Setter Property="Background" Value="{StaticResource Background}"/>
</Style>
<Style x:Key="DataShapeStyle" TargetType="Shape">
<Setter Property="Stroke" Value="{StaticResource Background}"/>
<Setter Property="StrokeThickness" Value="2"/>
<Setter Property="StrokeMiterLimit" Value="1"/>
<Setter Property="Fill" Value="{StaticResource Background}"/>
</Style>
</ResourceDictionary>
<ResourceDictionary>
<RadialGradientBrush x:Key="Background" Center="0.075,0.015" GradientOrigin="-0.1,-0.1" RadiusY="0.9" RadiusX="1.05">
<GradientStop Color="#FFA9A3BD"/>
<GradientStop Color="#FF382C6C" Offset="1"/>
</RadialGradientBrush>
<Style x:Key="DataPointStyle" TargetType="Control">
<Setter Property="Background" Value="{StaticResource Background}"/>
</Style>
<Style x:Key="DataShapeStyle" TargetType="Shape">
<Setter Property="Stroke" Value="{StaticResource Background}"/>
<Setter Property="StrokeThickness" Value="2"/>
<Setter Property="StrokeMiterLimit" Value="1"/>
<Setter Property="Fill" Value="{StaticResource Background}"/>
</Style>
</ResourceDictionary>
<ResourceDictionary>
<RadialGradientBrush x:Key="Background" Center="0.075,0.015" GradientOrigin="-0.1,-0.1" RadiusY="0.9" RadiusX="1.05">
<GradientStop Color="#FFB1A1B1"/>
<GradientStop Color="#FF50224F" Offset="1"/>
</RadialGradientBrush>
<Style x:Key="DataPointStyle" TargetType="Control">
<Setter Property="Background" Value="{StaticResource Background}"/>
</Style>
<Style x:Key="DataShapeStyle" TargetType="Shape">
<Setter Property="Stroke" Value="{StaticResource Background}"/>
<Setter Property="StrokeThickness" Value="2"/>
<Setter Property="StrokeMiterLimit" Value="1"/>
<Setter Property="Fill" Value="{StaticResource Background}"/>
</Style>
</ResourceDictionary>
<ResourceDictionary>
<RadialGradientBrush x:Key="Background" Center="0.075,0.015" GradientOrigin="-0.1,-0.1" RadiusY="0.9" RadiusX="1.05">
<GradientStop Color="#FF9DC2B3"/>
<GradientStop Color="#FF1D7554" Offset="1"/>
</RadialGradientBrush>
<Style x:Key="DataPointStyle" TargetType="Control">
<Setter Property="Background" Value="{StaticResource Background}"/>
</Style>
<Style x:Key="DataShapeStyle" TargetType="Shape">
<Setter Property="Stroke" Value="{StaticResource Background}"/>
<Setter Property="StrokeThickness" Value="2"/>
<Setter Property="StrokeMiterLimit" Value="1"/>
<Setter Property="Fill" Value="{StaticResource Background}"/>
</Style>
</ResourceDictionary>
<ResourceDictionary>
<RadialGradientBrush x:Key="Background" Center="0.075,0.015" GradientOrigin="-0.1,-0.1" RadiusY="0.9" RadiusX="1.05">
<GradientStop Color="#FFB5B5B5"/>
<GradientStop Color="#FF4C4C4C" Offset="1"/>
</RadialGradientBrush>
<Style x:Key="DataPointStyle" TargetType="Control">
<Setter Property="Background" Value="{StaticResource Background}"/>
</Style>
<Style x:Key="DataShapeStyle" TargetType="Shape">
<Setter Property="Stroke" Value="{StaticResource Background}"/>
<Setter Property="StrokeThickness" Value="2"/>
<Setter Property="StrokeMiterLimit" Value="1"/>
<Setter Property="Fill" Value="{StaticResource Background}"/>
</Style>
</ResourceDictionary>
<ResourceDictionary>
<RadialGradientBrush x:Key="Background" Center="0.075,0.015" GradientOrigin="-0.1,-0.1" RadiusY="0.9" RadiusX="1.05">
<GradientStop Color="#FF98C1DC"/>
<GradientStop Color="#FF0271AE" Offset="1"/>
</RadialGradientBrush>
<Style x:Key="DataPointStyle" TargetType="Control">
<Setter Property="Background" Value="{StaticResource Background}"/>
</Style>
<Style x:Key="DataShapeStyle" TargetType="Shape">
<Setter Property="Stroke" Value="{StaticResource Background}"/>
<Setter Property="StrokeThickness" Value="2"/>
<Setter Property="StrokeMiterLimit" Value="1"/>
<Setter Property="Fill" Value="{StaticResource Background}"/>
</Style>
</ResourceDictionary>
<ResourceDictionary>
<RadialGradientBrush x:Key="Background" Center="0.075,0.015" GradientOrigin="-0.1,-0.1" RadiusY="0.9" RadiusX="1.05">
<GradientStop Color="#FFC1C0AE"/>
<GradientStop Color="#FF706E41" Offset="1"/>
</RadialGradientBrush>
<Style x:Key="DataPointStyle" TargetType="Control">
<Setter Property="Background" Value="{StaticResource Background}"/>
</Style>
<Style x:Key="DataShapeStyle" TargetType="Shape">
<Setter Property="Stroke" Value="{StaticResource Background}"/>
<Setter Property="StrokeThickness" Value="2"/>
<Setter Property="StrokeMiterLimit" Value="1"/>
<Setter Property="Fill" Value="{StaticResource Background}"/>
</Style>
</ResourceDictionary>
<ResourceDictionary>
<RadialGradientBrush x:Key="Background" Center="0.075,0.015" GradientOrigin="-0.1,-0.1" RadiusY="0.9" RadiusX="1.05">
<GradientStop Color="#FFADBDC0"/>
<GradientStop Color="#FF446A73" Offset="1"/>
</RadialGradientBrush>
<Style x:Key="DataPointStyle" TargetType="Control">
<Setter Property="Background" Value="{StaticResource Background}"/>
</Style>
<Style x:Key="DataShapeStyle" TargetType="Shape">
<Setter Property="Stroke" Value="{StaticResource Background}"/>
<Setter Property="StrokeThickness" Value="2"/>
<Setter Property="StrokeMiterLimit" Value="1"/>
<Setter Property="Fill" Value="{StaticResource Background}"/>
</Style>
</ResourceDictionary>
<ResourceDictionary>
<RadialGradientBrush x:Key="Background" Center="0.075,0.015" GradientOrigin="-0.1,-0.1" RadiusY="0.9" RadiusX="1.05">
<GradientStop Color="#FF2F8CE2"/>
<GradientStop Color="#FF0C3E69" Offset="1"/>
</RadialGradientBrush>
<Style x:Key="DataPointStyle" TargetType="Control">
<Setter Property="Background" Value="{StaticResource Background}"/>
</Style>
<Style x:Key="DataShapeStyle" TargetType="Shape">
<Setter Property="Stroke" Value="{StaticResource Background}"/>
<Setter Property="StrokeThickness" Value="2"/>
<Setter Property="StrokeMiterLimit" Value="1"/>
<Setter Property="Fill" Value="{StaticResource Background}"/>
</Style>
</ResourceDictionary>
<ResourceDictionary>
<RadialGradientBrush x:Key="Background" Center="0.075,0.015" GradientOrigin="-0.1,-0.1" RadiusY="0.9" RadiusX="1.05">
<GradientStop Color="#FFDCDCDC"/>
<GradientStop Color="#FF757575" Offset="1"/>
</RadialGradientBrush>
<Style x:Key="DataPointStyle" TargetType="Control">
<Setter Property="Background" Value="{StaticResource Background}"/>
</Style>
<Style x:Key="DataShapeStyle" TargetType="Shape">
<Setter Property="Stroke" Value="{StaticResource Background}"/>
<Setter Property="StrokeThickness" Value="2"/>
<Setter Property="StrokeMiterLimit" Value="1"/>
<Setter Property="Fill" Value="{StaticResource Background}"/>
</Style>
</ResourceDictionary>
<ResourceDictionary>
<RadialGradientBrush x:Key="Background" Center="0.075,0.015" GradientOrigin="-0.1,-0.1" RadiusY="0.9" RadiusX="1.05">
<GradientStop Color="#FFF4F4F4"/>
<GradientStop Color="#FFB7B7B7" Offset="1"/>
</RadialGradientBrush>
<Style x:Key="DataPointStyle" TargetType="Control">
<Setter Property="Background" Value="{StaticResource Background}"/>
</Style>
<Style x:Key="DataShapeStyle" TargetType="Shape">
<Setter Property="Stroke" Value="{StaticResource Background}"/>
<Setter Property="StrokeThickness" Value="2"/>
<Setter Property="StrokeMiterLimit" Value="1"/>
<Setter Property="Fill" Value="{StaticResource Background}"/>
</Style>
</ResourceDictionary>
<ResourceDictionary>
<RadialGradientBrush x:Key="Background" Center="0.075,0.015" GradientOrigin="-0.1,-0.1" RadiusY="0.9" RadiusX="1.05">
<GradientStop Color="#FFF4F4F4"/>
<GradientStop Color="#FFA3A3A3" Offset="1"/>
</RadialGradientBrush>
<Style x:Key="DataPointStyle" TargetType="Control">
<Setter Property="Background" Value="{StaticResource Background}"/>
</Style>
<Style x:Key="DataShapeStyle" TargetType="Shape">
<Setter Property="Stroke" Value="{StaticResource Background}"/>
<Setter Property="StrokeThickness" Value="2"/>
<Setter Property="StrokeMiterLimit" Value="1"/>
<Setter Property="Fill" Value="{StaticResource Background}"/>
</Style>
</ResourceDictionary>
</toolkit:ResourceDictionaryCollection>
</Setter.Value>
</Setter>
<Setter Property="TitleStyle">
<Setter.Value>
<Style TargetType="toolkit:Title">
<Setter Property="Width" Value="0"/>
<Setter Property="Height" Value="0"/>
</Style>
</Setter.Value>
</Setter>
<Setter Property="LegendStyle">
<Setter.Value>
<Style TargetType="toolkit:Legend">
<Setter Property="Width" Value="0"/>
<Setter Property="Height" Value="0"/>
</Style>
</Setter.Value>
</Setter>
<Setter Property="ChartAreaStyle">
<Setter.Value>
<Style TargetType="Panel">
<Setter Property="MinWidth" Value="100"/>
<Setter Property="MinHeight" Value="75"/>
</Style>
</Setter.Value>
</Setter>
<Setter Property="PlotAreaStyle">
<Setter.Value>
<Style TargetType="Grid">
</Style>
</Setter.Value>
</Setter>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="toolkit:Chart">
<Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="0" Background="{TemplateBinding Background}" Padding="{TemplateBinding Padding}">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<toolkit:Title Content="{TemplateBinding Title}" Style="{TemplateBinding TitleStyle}"/>
<Grid Margin="0,15,0,15" Grid.Row="1">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<toolkit:Legend x:Name="Legend" Grid.Column="1" Header="{TemplateBinding LegendTitle}" Style="{TemplateBinding LegendStyle}"/>
<System_Windows_Controls_DataVisualization_Charting_Primitives:EdgePanel x:Name="ChartArea" Style="{TemplateBinding ChartAreaStyle}">
<Grid Style="{TemplateBinding PlotAreaStyle}" Canvas.ZIndex="-1"/>
<Border BorderBrush="#FF919191" BorderThickness="0" Canvas.ZIndex="10"/>
</System_Windows_Controls_DataVisualization_Charting_Primitives:EdgePanel>
</Grid>
</Grid>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</UserControl.Resources>
<Grid x:Name="LayoutRoot" Background="White">
<Image Source="11.jpg" Height="Auto" Width="Auto"></Image>
<toolkit:Chart x:Name="mychart" Style="{StaticResource ChartStyle1}" HorizontalAlignment="Left" VerticalAlignment="Top" Opacity="1" Padding="0" BorderThickness="0" Margin="50">
<toolkit:PieSeries ItemsSource="{Binding}"
IndependentValueBinding="{Binding Name}"
DependentValueBinding="{Binding Current}" Width="Auto" Height="Auto" VerticalContentAlignment="Center" Opacity="1" Margin="0" Background="#01000000" BorderThickness="0">
<toolkit:PieSeries.BorderBrush>
<SolidColorBrush />
</toolkit:PieSeries.BorderBrush>
</toolkit:PieSeries>
</toolkit:Chart>
</Grid>
</UserControl>
leave a comment