Can't get examples to run. (Resources couldn't be resolved & missing Build* functions)

Hi there,

i've just loaded the Mindscape WPF Elements trial and want to test how to work with it. But I can't get even the examples to run because of problems with the static resources and the Build* commands which are used in the examples.

In Visual Studio I get messages like "The resource 'AxisStyle' could not be resolved" and "The name 'BuildScatterData' does not exist in the current context" and aren't able to build it. If I remove the BuildScatterData command I can build but when I try to run it I get the exception: "Provide value on 'System.Windows.StaticResourceExtension' threw an exception"

Here's what I've done:

• created a new WPF Application in Visual Studio 2010
• added the Mindscape.WpfElements.dll to the references
• added the namespace xmlns:ms="http://namespaces.mindscape.co.nz/wpf"
• copied the code from the examples to the xaml and the cs files

Thanks for your help!

MainWindow.xaml:

    <Window x:Class="WpfApplication1.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:ms="http://namespaces.mindscape.co.nz/wpf"
        Title="MainWindow" Height="350" Width="525">
    <Grid>
        <ms:Chart Name="Chart" Title="Height vs. weight of males">
            <ms:ScatterSeries ItemsSource="{Binding Data1}" SeriesBrush="{Binding Palette[0]}" SymbolStyle="{StaticResource CrossChartSymbolStyle}"
                        Title="age 20 - 30" />
            <ms:ScatterSeries ItemsSource="{Binding Data2}" SeriesBrush="{Binding Palette[1]}" SymbolStyle="{StaticResource CrossChartSymbolStyle}"
                        Title="age 30 - 40" />
            <ms:ScatterSeries ItemsSource="{Binding Data3}" SeriesBrush="{Binding Palette[2]}" SymbolStyle="{StaticResource CrossChartSymbolStyle}" 
                        Title="age 40 - 50" />
            <ms:ScatterSeries ItemsSource="{Binding Data4}" SeriesBrush="{Binding Palette[3]}" SymbolStyle="{StaticResource CrossChartSymbolStyle}"
                        Title="age 50 - 60" />
            <ms:Chart.BackgroundElements>
                <ms:ChartGrid MinorHorizontalGridLineBrush="#EFEFEF" MinorVerticalGridLineBrush="#EFEFEF" />
            </ms:Chart.BackgroundElements>
            <ms:Chart.XAxis>
                <ms:ChartAxis Title="Weight (Kg)" Minimum="74" Maximum="221" Style="{StaticResource AxisStyle}" />
            </ms:Chart.XAxis>
            <ms:Chart.YAxis>
                <ms:ChartAxis Title="Height (cm)" Minimum="99" Maximum="171" Style="{StaticResource AxisStyle}" />
            </ms:Chart.YAxis>
        </ms:Chart>
    </Grid>
</Window>

MainWindow.cs:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;
using Mindscape.WpfElements.Charting;

namespace WpfApplication1
{
    /// <summary>
    /// Interaktionslogik für MainWindow.xaml
    /// </summary>
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();

            BuildScatterData(4, 10, 100, 170, 75, 220);

            DataContext = this;
        }

        private void ApplySymbolStyle(string name)
        {
            Style style = GetSymbolStyle(name);
            foreach (DataSeries series in Chart.Series)
            {
                PointSeriesBase pointSeries = series as PointSeriesBase;
                pointSeries.SymbolStyle = style;
            }
        }

        private Style GetSymbolStyle(string name)
        {
            switch (name)
            {
                case "Cross":
                    return FindResource("CrossChartSymbolStyle") as Style;
                case "Plus":
                    return FindResource("PlusChartSymbolStyle") as Style;
                case "Diamond":
                    return FindResource("DiamondChartSymbolStyle") as Style;
                case "Triangle":
                    return FindResource("TriangleChartSymbolStyle") as Style;
                case "Square":
                    return FindResource("SquareChartSymbolStyle") as Style;
                case "Circle":
                    return FindResource("CircleChartSymbolStyle") as Style;
                case "Ring":
                    return FindResource("RingChartSymbolStyle") as Style;
            }
            return null;
        }

        private void SymbolStyle_SelectionChanged(object sender, SelectionChangedEventArgs e)
        {
            ListBox listBox = sender as ListBox;
            ListBoxItem item = listBox.SelectedItem as ListBoxItem;
            string name = item.Content as string;
            ApplySymbolStyle(name);
        }
    }
}

Hello Josch

Are you experiencing these issues by running the actual SampleExplorer project as well? or are you only seeing these from your project?

In this forum post I'll mention looking at the code from the SampleExplorer. You have access to all the code for the sample explorer by going to the Windows Start Menu -> Mindscape -> WPF Elements -> Samples. This runs up a Visual Studio solution with a few samples including the SampleExplorer.

In the SampleExplorer, there are a lot of different chart demos, and they all display randomly generated data. A lot of the chart demos share the same method for randomly generating the data, so these methods have been put into a base class that all the chart demos extend from. If you open the SampleExplorer demo in visual studio and go to the ScatterChartDemo.xaml.cs file, you will see it extends the ChartDemoBase class. This base class - which is part of the SampleExplorer code, is where the Build* methods are. You'll want to copy the BuildScatterData method into your project.

Similarly, all the charts share similar styles which have all been put in a resource dictionary of the SampleExplorer. To resolve the StaticResourceExtension issue, there are 2 options: 1) In your xaml, you can remove the SymbolStyle from the ScatterSeries, and the Style from the ChartAxis. Or 2) you could find these resources in the sample, and put them in App.xaml of your project. These resource can be found in App.xaml of the SampleExplorer, but I've also pasted them here for convenience. Note that these resources are not required to use our Chart controls. These are just used to get nice visuals in the SampleExplorer - or your own application if you wish to use them.

<DataTemplate x:Key="AxisLabelTemplate">
  <TextBlock Text="{Binding}" FontWeight="Normal" Foreground="{Binding Foreground, RelativeSource={RelativeSource AncestorType={x:Type ms:ChartAxis}}}" />
</DataTemplate>

<Style x:Key="AxisStyle" TargetType="ms:ChartAxis">
  <Setter Property="FontSize" Value="16" />
  <Setter Property="LabelTemplate" Value="{StaticResource AxisLabelTemplate}" />
  <Setter Property="FontWeight" Value="Bold" />
  <Setter Property="FontFamily" Value="Segoe UI" />
</Style>

<Style x:Key="SymbolStyleBase" TargetType="ms:DataPoint">
  <Setter Property="Width" Value="18" />
  <Setter Property="Height" Value="18" />
  <Setter Property="Margin" Value="-8,-8,8,8" />
  <Setter Property="SnapsToDevicePixels" Value="True" />
  <Setter Property="BorderBrush" Value="Transparent" />
  <Setter Property="Template">
    <Setter.Value>
      <ControlTemplate TargetType="ms:DataPoint">
        <Path Name="Shape" Width="{TemplateBinding Width}" Height="{TemplateBinding Height}" Fill="{TemplateBinding Background}"
              Stroke="{TemplateBinding BorderBrush}" StrokeThickness="1"
              Data="{TemplateBinding Tag}" Stretch="Uniform" />
        <ControlTemplate.Triggers>
          <Trigger Property="IsMouseOver" Value="True">
            <Setter TargetName="Shape" Property="Fill" Value="Red" />
            <Setter TargetName="Shape" Property="Stroke" Value="Red" />
          </Trigger>
          <Trigger Property="IsSelected" Value="True">
            <Setter TargetName="Shape" Property="Fill" Value="White" />
            <Setter TargetName="Shape" Property="Stroke" Value="Black" />
          </Trigger>
        </ControlTemplate.Triggers>
      </ControlTemplate>
    </Setter.Value>
  </Setter>
</Style>

<Style x:Key="CrossChartSymbolStyle" TargetType="ms:DataPoint" BasedOn="{StaticResource SymbolStyleBase}">
  <Setter Property="Tag">
    <Setter.Value>
      <PathGeometry Figures="M 0 2 L 2 0 L 4 2 L 6 0 L 8 2 L 6 4 L 8 6 L 6 8 L 4 6 L 2 8 L 0 6 L 2 4 Z" />
    </Setter.Value>
  </Setter>
</Style>

You'll also notice that in the xaml of your project, the ScatterSeries.SeriesBrush properties are binding to a "Palette" collection property. This is also found on the ChartDemoBase class so that in any of the chart demos, the colors of the data points can be changed using the color picker in the options panel on the right. You can replace these bindings with hard coded colors in you application.

Sorry for the confusion caused by copying the code from the SampleExplorer. We will look into ways to improve this experience.

Let me know if you have more questions about the chart controls and I'll be able to help you out.

Jason Fauchelle

Thank you very much Jason!

This helped a lot and I got it working....