Dynamic Tabs

While working on part of a project - I wanted to use tabs, but they had to be generated dynamically. Even though we went with another way to do this I didn't want to lose the code I had found to make the tabs show up dynamically (now, just need to set aside time and figure out more on the TabItem Content)

(I'm going to make a separate post for the styling, since I was fortunate and found some of the templates I needed. I don't want to lose those either)

The actual XAML is only a Grid, with a reference to some data to use to fill out the tabs and a TabControl that contains the TabItems.

For this practice/test/will this ever work trial - I made an observable collection in the codebehind of the control itself.

Afterwards, I managed to come up with a foreach statement that would create and add the tabs to the main TabControl. It does assign a style to the tabs as well - I'm still figuring out the TabContent area. But baby steps :)

Now, time to document the style - and how I finally got into the tabs themselves.

Circular ListBox

I've been working with Silverlight, and I have been challenging myself to make my code cleaner for the controls and have the computer/system do more of the thinking. It's definitely a challenge to keep making the code smaller and cleaner for each of my controls.

Was playing with a few codes and putting the ideas together:

Today, merging a Simple Radial Panel and a more advanced Radial Panel with styling the way a list is presented.  I'm not listing the code for the RadialPanel, the links explain the process a lot better than I can.

Below is a screenshot of the final styled list.

This was a less intimidating way for me to look into styling with more code behind and try to cut down on the amount of XAML I have in any one control (data templates, etc).

The first step was to create the RadialPanel class (from this Blog Post).

Once defined, I was able to set a new ItemsPanelTemplate in a style that set the RadialPanel as the base for the ListBox - as well as set a DataTemplate for the list items so I could read the information straight from a List<>.

 <Style x:Key="RoundListOne" TargetType="ListBox">
        <Setter Property="ItemsPanel">
            <Setter.Value>
                <ItemsPanelTemplate>
                    <local:RadialPanel Width="350" Height="350" RenderTransformOrigin="0.5,0.5">
                        <local:RadialPanel.RenderTransform>
                            <CompositeTransform ScaleX="0.9" ScaleY="0.9"/>
                        </local:RadialPanel.RenderTransform>
                    </local:RadialPanel>
                </ItemsPanelTemplate>
            </Setter.Value>
        </Setter>
        <Setter Property="ItemTemplate">
            <Setter.Value>
                <DataTemplate>
                    <StackPanel Orientation="Vertical" Tag="{Binding Path=colorValue}">
                        <Ellipse Name="colorSwatch" HorizontalAlignment="Center"
                                Width="30" Height="30" Fill="{Binding Path=colorValue}"/>
                        <TextBlock HorizontalAlignment="Center" Foreground="Gray"
                                Text="{Binding Path=colorName}"
                                VerticalAlignment="Center" Margin="5,0,0,0"/>
                    </StackPanel>
                   
                </DataTemplate>
            </Setter.Value>
        </Setter>
    </Style>
    <Style x:Key="ListBoxItemContainerStyle" TargetType="ListBoxItem">
        <Setter Property="HorizontalAlignment" Value="Stretch"/>
        <Setter Property="VerticalAlignment" Value="Stretch"/>
    </Style>

Below is the XAML for the Color Wheel - it's just a ListBox

<Grid x:Name="LayoutRoot">
        <ListBox Name="CircularList"
            ItemContainerStyle="{StaticResource ListBoxItemContainerStyle}"
            Style="{StaticResource RoundListOne}"
            HorizontalAlignment="Center" VerticalAlignment="Center"
            Margin="10,19,164,18" UseLayoutRounding="False" Width="466" Height="443"
            SelectedValuePath="{Binding Path=colorValue}" BorderBrush="{x:Null}"
            SelectedValue="{Binding Path=colorValue}" SelectionChanged="changePreview" >
        </ListBox>
        <TextBox HorizontalAlignment="Left" Name="ColorPreview"
            TextWrapping="Wrap" Text="Color Formula Here"
            VerticalAlignment="Top" Margin="396,207,0,0"
            Width="136" Height="38" TextAlignment="Center"/>
    </Grid>


The code behind for the ListBox:

using System;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Ink;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using System.Windows.Data;


namespace PracticeControls
{
    public partial class CircularPicker : UserControl
    {
        public CircularPicker()
        {
            // Required to initialize variables
            InitializeComponent();
           
            this.Loaded += new RoutedEventHandler(populateList);
        }
       
        void populateList(object sender, RoutedEventArgs e)
        {
            PracticeData practiceData = new PracticeData();
           
            CircularList.DataContext = practiceData;
            CircularList.ItemsSource = practiceData._colorChoices;
            CircularList.SelectedValuePath = "colorValue";
        }

        private void changePreview(object sender, System.Windows.Controls.SelectionChangedEventArgs e)
        {
            // TODO: Add event handler implementation here.
            var colorchoice = CircularList.SelectedItem;
            var colorname = CircularList.SelectedValue;
            ColorPreview.Text = colorname.ToString();
           
            string backgroundColor = colorname.ToString();
            var backgroundValue = backgroundColor.Replace("#",string.Empty);
           
            byte a = (byte)(Convert.ToUInt32(backgroundValue.Substring(0,2),16));
            byte r = (byte)(Convert.ToUInt32(backgroundValue.Substring(2,2),16));
            byte g = (byte)(Convert.ToUInt32(backgroundValue.Substring(4,2),16));
            byte b = (byte)(Convert.ToUInt32(backgroundValue.Substring(6,2),16));
           
            SolidColorBrush previewBrush = new SolidColorBrush(Color.FromArgb(a,r,g,b));
            ColorPreview.Background = previewBrush;
        }
    }
}

The data is a very basic List< >:
 
public class ColorValues
        {
            public string colorValue {get; set;}
            public string colorName {get; set;}
        }
       
        private readonly List<ColorValues> _colorValues = new List<ColorValues>
        {
            new ColorValues {colorValue="#FFFF0000",colorName="Red"},
            new ColorValues {colorValue="#FFFF3300",colorName="Vermillion"},
            new ColorValues {colorValue="#FFFF6600",colorName="Amber"},
            new ColorValues {colorValue="#FFFFCC00",colorName="Gold"},
            new ColorValues {colorValue="#FFFFFF00",colorName="Yellow"},
            new ColorValues {colorValue="#FFCCFF00",colorName="Apple"},
            new ColorValues {colorValue="#FF66FF00",colorName="Chartreuse"},
            new ColorValues {colorValue="#FF33FF00",colorName="Lime"},
            new ColorValues {colorValue="#FF00FF00",colorName="Green"},
            new ColorValues {colorValue="#FF00FF33",colorName="Mint"},
            new ColorValues {colorValue="#FF00FF66",colorName="Jade"},
            new ColorValues {colorValue="#FF00FFCC",colorName="Turquoise"},
            new ColorValues {colorValue="#FF00FFFF",colorName="Cyan"},
            new ColorValues {colorValue="#FF00CCFF",colorName="Azure"},
            new ColorValues {colorValue="#FF0066FF",colorName="Sapphire"},
            new ColorValues {colorValue="#FF0033FF",colorName="Cobalt"},
            new ColorValues {colorValue="#FF0000FF",colorName="Blue"},
            new ColorValues {colorValue="#FF6600FF",colorName="Violet"},
            new ColorValues {colorValue="#FF9900FF",colorName="Purple"},
            new ColorValues {colorValue="#FFCC00FF",colorName="Orchid"},
            new ColorValues {colorValue="#FFFF00FF",colorName="Magenta"},
            new ColorValues {colorValue="#FFFF00CC",colorName="Fuchsia"},
            new ColorValues {colorValue="#FFFF0066",colorName="Carmine"},
            new ColorValues {colorValue="#FFFF0033",colorName="Scarlet"},
        };
       
        public List<ColorValues> _colorChoices
        {
            get {return _colorValues;}
        }
       
        private ColorValues _colorOptions;
       
        public ColorValues ColorOptions
        {
            get {return _colorOptions;}
            set
            {
                _colorOptions = value;
                PropertyChanged(this, new PropertyChangedEventArgs("ColorValues"));
            }
           
        }

You can see the working example here. Going to be playing with this idea some more, not sure with what or how but so far it's been fun customizing the basic ListBox this way.

Scaling and Orienting mobile website

Was having a few issues with a website (current project) scaling correctly when the user switched the orientation on their phone/tablet from portrait to landscape (and vice versa).

Turns out, that once the site was loaded the browser kept the size of the displayed page to that size even after the device was rotated. The culprit was my meta tag! (for shame!)

By reducing what I had in there - I ended up getting the result I wanted and using even less code than before!

<meta name="viewport" content="initial-scale=1.0"> 

Now, it resizes correctly when the user changes the orientation.

Also added another one to make sure that IE uses the highest possible version it is capable of, we had users not see the data because their browsers kept defaulting to compatibility mode. I have no idea why either.

But the meta tag below fixed that issue for us.

<meta http-equiv="X-UA-Compatible" content="IE=edge">
 

Another mysterious windows error... they are good at that.

The Error:

System.Windows.Navigation.PageResourceContentLoader.EndLoad (IAsyncResult asyncResult) at
System.Windows.Navigation.NavigationService.ContentLoader_BeginLoad_Callback (IAsyncResult result) at
System.Windows.Navigation.PageResourceContentLoader.BeginLoad_OnUIThread(AsyncCallback userCallback, PageResourceContentLoaderAsyncResult result) at
System.Windows.Navigation.PageResourceContentLoader <>c DisplayClass4.<BeginLoad> b_0(Object args)

What did I find that caused this? Apparently it has to do with defined styles and other resources that are used to call out brushes, templates and any styles. It seems the key phrase is "PageResourceContentLoader" in this error.

one control based off of a defined control ViewModel had a resource still calling for a UserControl

<cntrl:MyCustomizedControl 
             xmlns:cntrl=application.controlsHere
            .....>
<UserControl.Resources>
<!-- resource definitions -->
</UserControl.Resources>

One other time, the reason was that one of the controls on the page had a missing resource definition. The static resource defining a brush had been moved and it could not find it. Once I was able to get that style back, the error was gone (basically, when you get the message or the underline in code saying the resource cannot be found)

The unseeable Telerik gauge

FINALLY figured out how I can see Telerik radial gauges in Blend, after they have been wired up with the view models, bindings, program architect magic. 

I forgot where I read the small snipped of pure gauge genius - but it suggested removing or moving some Telerik dll's out of your local Program folder and then make sure to relink to the solution's shared dll files. 

After a year of frustration - I just looked at the folder and put it on the desktop.

Opened Blend... I SAW MY GAUGES! 

Doesn't take much to make for a happy day, now - I have a scrollviewer that refuses to behave.

XamlParse Exception for that darn FrameworkElement MeasureOverride

I just wrangled with that fun and oh so detailed error of the XamlParseException that tells you something is wrong with your FrameworkElement MeasureOverride.

After hitting my head on my desk, cursing in my mind (cubicles aren't very private) and wanting to chuck my computer through the window, I figured it out.

This probably won't work for everyone, but it could be a good starting point. In my codebehind I had a SizeChanged declared.

public myControl()
{
    InitializeComponent();
    this.SizeChanged += new SizeChangedEventHandler(myControl_SizeChanger);
}

Once I commented out (and then got rid of) the size changed event, the error went away.

to get the autosizing I wanted on this control, in the main "header" (that's what I call the code at the top that declares all of the xmlns values), I set a DESIGN height and width instead of simply stating Height and Width :

Example:

<UserControl x:Class="application.myClass"
                     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                     mc:Ignorable="d"  d:DesignHeight="100" d:DesignWidth="100">

.... rest of code here
</UserControl>

More resizing "fun"

Turns out that the project I am currently on has controls with a SizeChanged event already coded into them. 

Our developer noticed this when the app kept refreshing layout over and over and over and over again. So, the solution for these pages was to use MeasureOverride

protected override Size MeasureOverride(Size availableSize)
{
     this.LayoutRoot.Height = availableSize.Height;
     this.LayoutRoot.Width = availableSize.Width;
     return base.MeasureOverride(availablesSize);
}

Here is a link with some more information on how this operates. Luckily - I didn't need to have any other code with this one on those pages.

Silverlight layout resizing

On my current project, we need the pages to be able to resize and display the controls in the most efficient way depending on the current size the user is viewing the application. 

I found one great way here - where using LayoutRoot.SizeChanged and LayoutRoot.LayoutUpdated did a great job in updating the page and making sure that it filled out the screen as expected. What wasn't expected was how it did not work in development for some reason. According to what I was told, it kept looping with another function used and the page wouldn't stop reloading.

Hopefully, I'll be able to get this other way to work, I have mixed the LayoutRoot.SizeChanged with the App.Current.Host.ContentResized where the page will now look to see if the overall browser window has been resized and not look towards the application's main page. Hopefully this will work. (I am so crossing my fingers)

So, the updated way I have it now is:

public MyPage()
{
      InitializeComponent();
    
   // this function is to make sure the controls are the correct size when the page is loading up
     this.Loaded += new RoutedEventHandler(startupLayoutSize);

    // this has the page checking if the overall window has resized, if so then update the sizes of the controls
     App.Current.Host.Content.Resized += new EventHandler(Content_Resized);

// below checks the page size also but it depends on if the overall LayoutRoot of the page has changed
     LayoutRoot.SizeChanged += LayoutRoot_SizeChanged;
}


// even though I am not checking if the main page itself has changed size, I am wanting to
// know the ActualHeight and ActualWidth of the content frame this page is displayed in
MainPage mainPage = (MainPage)Application.Current.RootVisual;


void Content_Resized(object sender, EventArgs e)
{
     Frame pageContainer = mainPage.FindName("PageFrame") as Frame;
     var pageHeight = pageContainer.ActualHeight;
     var pageWidth = pageContainer.ActualWidth;

     this.LayoutRoot.Height = pageHeight;
     this.LayoutRoot.Width = pageWidth;
     
     // many of the controls are in this border and I want them sized proportionally to this border
     var myBorder = pageSideBorder.ActualWidth;

     // I have it set to center horizontally, so when I set the width to 10 less than the actual width
     // of the border, it has the visual effect of adding padding to each side.
     // this does NOT scale the control like ScaleX and ScaleY in a RenderTransform
     controlOne.VerticalAlignment =  VerticalAlignment.Center;
     controlOne.HorizontalAlignment = HorizontalAlignment.Center;
     controlOne.Width = myBorder - 10;
}

     bool updating;
     int layoutUpdated, sizeChanged;

 

// this function also sizes the same controls, but does it when the page loads so they are seen correctly
// when the user first views the page
void startupLayoutSize(object sender, RoutedEventArgs e)
{
     var myBorder = pageSideBorder.ActualWidth;

     controlOne.VerticalAlignment =  VerticalAlignment.Center;
     controlOne.HorizontalAlignment = HorizontalAlignment.Center;
     controlOne.Width = myBorder - 10;
}

// this one does check to see if the size of the LayoutRoot in the main page has changed, but
// it does not look at if the layout is updating
public void LayoutRoot_SizeChanged(object sender, SizeChangedEventArgs e)
{
      MainPage chartMainPage = sender as MainPage;

     if (!updating)
     {
        ++sizeChanged;
        updateContent()
     }
}

// I have the same function but without the EventArgs e
// I will try later to see if I need to do this, but for now it works and that is half of my battle. 
// OK, right now it IS the battle.
private void updateContent( )
{
     Frame pageContainer = mainPage.FindName("PageFrame") as Frame;
     var pageHeight = pageContainer.ActualHeight;
     var pageWidth = pageContainer.ActualWidth;

     this.LayoutRoot.Height = pageHeight;
     this.LayoutRoot.Width = pageWidth;
     
     // many of the controls are in this border and I want them sized proportionally to this border
     var myBorder = pageSideBorder.ActualWidth;

     // I have it set to center horizontally, so when I set the width to 10 less than the actual width
     // of the border, it has the visual effect of adding padding to each side.
     // this does NOT scale the control like ScaleX and ScaleY in a RenderTransform
     controlOne.VerticalAlignment =  VerticalAlignment.Center;
     controlOne.HorizontalAlignment = HorizontalAlignment.Center;
     controlOne.Width = myBorder - 10;
}

Now, hopefully this "solution" will work - and then I have this as reference for later. If not - then this is a reference of what I started with and was still an oops moment. (and will be updated)

Error 2103 Revisited

More accurately, it revisited me again.

Every time I search for another answer, I usually get the setting for the startup - and I always check and mine has always been ok. Very frustrating.

This time, it was an error in my resource dictionary (XAML) on one of my styles. There were elements the style was bound to that had been removed.

This gave me the "Catastrophic Error" and when trying to run I got the dreaded 2103 code.

I remembered the last style I had added, and looked over that since Silverlight ran right before the changes were saved. The elements of the style had that squiggly line (in VisualStudio 2010 - it's one of my "technical" terms) that let me know where the error was.

General Silverlight Chart Construction

Using the default Microsoft Style for the Charts and will be updating with expanded information as time allows.

The current layout is rough, but I wanted to get a start on this since I know I will be adding a lot as I get the time to compile my notes and create the images to help. 
 

<!--
// (c) Copyright Microsoft Corporation.
// This source is subject to the Microsoft Public License (Ms-PL).
// Please see http://go.microsoft.com/fwlink/?LinkID=131993 for details.
// All other rights reserved.
-->

<ResourceDictionary
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:datavis="clr-namespace:System.Windows.Controls.DataVisualization"
    xmlns:charting="clr-namespace:System.Windows.Controls.DataVisualization.Charting"
    xmlns:chartingprimitives="clr-namespace:System.Windows.Controls.DataVisualization.Charting.Primitives">

    <Style TargetType="charting:Chart">
        <Setter Property="BorderBrush" Value="Black"/>
        <Setter Property="BorderThickness" Value="1"/>
        <Setter Property="IsTabStop" Value="False"/>
        <Setter Property="Padding" Value="10"/>

This is the default palette used in the standard charts. As a series is added, the chart will go to the next color (example: Series[0] will be Blue, and Series [0] will be Red. The image above is a quick graphic reference of the default colors.

. 
        <Setter Property="Palette">
            <Setter.Value>
                <datavis:ResourceDictionaryCollection>
                    <!-- Blue -->
                    <ResourceDictionary>
                        <RadialGradientBrush x:Key="Background" GradientOrigin="-0.1,-0.1"  

                                             Center="0.075,0.015" RadiusX="1.05" RadiusY="0.9">
                            <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>
                    <!-- Red -->
                    <ResourceDictionary>
                        <RadialGradientBrush x:Key="Background" GradientOrigin="-0.1,-0.1" 

                                             Center="0.075,0.015" RadiusX="1.05" RadiusY="0.9">
                            <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>
                    <!-- Light Green -->
                    <ResourceDictionary>
                        <RadialGradientBrush x:Key="Background" GradientOrigin="-0.1,-0.1" 

                                             Center="0.075,0.015" RadiusX="1.05" RadiusY="0.9">
                            <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>
                    <!-- Yellow -->
                    <ResourceDictionary>
                        <RadialGradientBrush x:Key="Background" GradientOrigin="-0.1,-0.1"  

                                             Center="0.075,0.015" RadiusX="1.05" RadiusY="0.9">
                            <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>
                    <!-- Indigo -->
                    <ResourceDictionary>
                        <RadialGradientBrush x:Key="Background" GradientOrigin="-0.1,-0.1" 

                                                                                                       Center="0.075,0.015" RadiusX="1.05" RadiusY="0.9">
                            <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>
                    <!-- Magenta -->
                    <ResourceDictionary>
                        <RadialGradientBrush x:Key="Background" GradientOrigin="-0.1,-0.1" 

                                             Center="0.075,0.015" RadiusX="1.05" RadiusY="0.9">
                            <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>
                    <!-- Dark Green -->
                    <ResourceDictionary>
                        <RadialGradientBrush x:Key="Background" GradientOrigin="-0.1,-0.1"  

                                             Center="0.075,0.015" RadiusX="1.05" RadiusY="0.9">
                            <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>
                    <!-- Gray Shade -->
                    <ResourceDictionary>
                        <RadialGradientBrush x:Key="Background" GradientOrigin="-0.1,-0.1"  

                                             Center="0.075,0.015" RadiusX="1.05" RadiusY="0.9">
                            <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>
                    <!-- Blue -->
                    <ResourceDictionary>
                        <RadialGradientBrush x:Key="Background" GradientOrigin="-0.1,-0.1"  

                                                                                                        Center="0.075,0.015" RadiusX="1.05" RadiusY="0.9">
                            <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>
                    <!-- Brown -->
                    <ResourceDictionary>
                        <RadialGradientBrush x:Key="Background" GradientOrigin="-0.1,-0.1"  

                                             Center="0.075,0.015" RadiusX="1.05" RadiusY="0.9">
                            <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>
                    <!-- Cyan -->
                    <ResourceDictionary>
                        <RadialGradientBrush x:Key="Background" GradientOrigin="-0.1,-0.1"  

                                              Center="0.075,0.015" RadiusX="1.05" RadiusY="0.9">
                            <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>
                    <!-- Special Blue -->
                    <ResourceDictionary>
                        <RadialGradientBrush x:Key="Background" GradientOrigin="-0.1,-0.1" 

                                             Center="0.075,0.015" RadiusX="1.05" RadiusY="0.9">
                            <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>
                    <!-- Gray Shade 2 -->
                    <ResourceDictionary>
                        <RadialGradientBrush x:Key="Background" GradientOrigin="-0.1,-0.1" 

                                             Center="0.075,0.015" RadiusX="1.05" RadiusY="0.9">
                            <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>
                    <!-- Gray Shade 3 -->
                    <ResourceDictionary>
                        <RadialGradientBrush x:Key="Background" GradientOrigin="-0.1,-0.1" 

                                             Center="0.075,0.015" RadiusX="1.05" RadiusY="0.9">
                            <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>
                    <!-- Gray Shade 4 -->
                    <ResourceDictionary>
                        <RadialGradientBrush x:Key="Background" GradientOrigin="-0.1,-0.1"  

                                              Center="0.075,0.015" RadiusX="1.05" RadiusY="0.9">
                            <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>
                </datavis:ResourceDictionaryCollection>
            </Setter.Value>
        </Setter>

Below starts the default styles for each element of the chart. The can also be set individually as another style if you want to change one or two elements only.  

<Setter Property="TitleStyle">
            <Setter.Value>
                <Style TargetType="datavis:Title">
                    <Setter Property="FontSize" Value="16"/>
                    <Setter Property="HorizontalAlignment" Value="Center"/>
                    <Setter Property="Margin" Value="0,10,0,10"/>
                </Style>
            </Setter.Value>
        </Setter>
        <Setter Property="LegendStyle">
            <Setter.Value>
                <Style TargetType="datavis:Legend">
                    <Setter Property="Margin" Value="15,0,15,0"/>
                    <Setter Property="VerticalAlignment" Value="Center"/>
                    <Setter Property="BorderBrush" Value="#FFDBDBDB"/>
                    <Setter Property="Background">
                        <Setter.Value>
                            <LinearGradientBrush EndPoint="0.442,0.005" StartPoint="0.558,0.995">
                                <GradientStop Color="#FFDBDBDB"/>
                                <GradientStop Color="#FFFFFFFF" Offset="1"/>
                            </LinearGradientBrush>
                       </Setter.Value>
                    </Setter>
                </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">
                    <Setter Property="Background">
                        <Setter.Value>
                            <LinearGradientBrush EndPoint="0.457,0.296" StartPoint="0.459,1.296">
                                <GradientStop Color="#FFCBCBCB"/>
                                <GradientStop Color="#FFFFFFFF" Offset="1"/>
                            </LinearGradientBrush>
                        </Setter.Value>
                    </Setter>
                </Style>
            </Setter.Value>
        </Setter>

 

This is the main template, layout of the Silverlight chart. The image above gives a simplified graphic representation of how the chart is assembled.

  
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="charting:Chart">
                    <Border
                        Background="{TemplateBinding Background}"
                        BorderBrush="{TemplateBinding BorderBrush}"
                        BorderThickness="{TemplateBinding BorderThickness}"
                        Padding="{TemplateBinding Padding}">
                        <Grid>
                            <Grid.RowDefinitions>
                                <RowDefinition Height="Auto"/>
                                <RowDefinition Height="*"/>
                            </Grid.RowDefinitions>

                            <datavis:Title
                                Content="{TemplateBinding Title}"
                                Style="{TemplateBinding TitleStyle}"/>

                            <!-- Use a nested Grid to avoid possible clipping behavior resulting from ColumnSpan+Width=Auto -->
                            <Grid Grid.Row="1" Margin="0,15,0,15">
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="*"/>
                                    <ColumnDefinition Width="Auto"/>
                                </Grid.ColumnDefinitions>

                                <datavis:Legend x:Name="Legend" 
                                    Header="{TemplateBinding LegendTitle}"
                                    Style="{TemplateBinding LegendStyle}"
                                    Grid.Column="1"/>
                                <chartingprimitives:EdgePanel x:Name="ChartArea" Style="{TemplateBinding ChartAreaStyle}">
                                    <Grid Canvas.ZIndex="-1" Style="{TemplateBinding PlotAreaStyle}" />
                                    <Border Canvas.ZIndex="10" BorderBrush="#FF919191" BorderThickness="1" />
                                </chartingprimitives:EdgePanel>
                            </Grid>
                        </Grid>
                    </Border>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>