There is no built in marker, so change size of marker is extremely hard

Can you guys put the default marker as built in marker? this is very hard to change the marker size. you need to make the different Path for different size for different symbol.

Hello Gordon

When creating the data for a path, you can make all the values between 0 and 1. So The path will essentially be in a 1 pixel square allowing it to scale easily. Set the Stretch of the Path to be Uniform so that the path data scales based on the width and height of the path. Then you can use the same path data and simply change the width and height of the path to get any size you need. You can see this is what we are doing in the sample explorer around lines 2012 - 2101 of App.xaml.

-Jason

Hi Jason,

I still don't get it how to change the symbol size. I tried many ways but no luck.

Here is what I want to do:

In a Chart, I have many lines/scatter series, each line will have different symbol size, say from 10 to 20. How do I set them dynamically by code or xaml. Some example will be very helpful.

Thanks

Gordon

Hello Gordon

The next nightly build will include a SymbolSize property on all data series that can display data point symbols. This is an integer property which sets both the width and height of the symbol.

When you create the symbol style, you'll want to make it scalable so that it renders correctly at all sizes. In other words, don't include any hard coded sizes in the symbol template. If your symbol is an ellipse, simply include the ellipse in the symbol template and don't set its size. It will automatically be stretched to the SymbolSize you set on the data series. If you are using a Path for the symbol, you should set the Stretch property to Fill or Uniform so that it can scale to the symbol size. Here is an example of a symbol style that looks like a cross (X symbol):

<Style x:Key="CrossSymbolStyle" TargetType="ms:DataPoint">
  <Setter Property="Width" Value="18" />
  <Setter Property="Height" Value="18" />
  <Setter Property="Margin" Value="-9,-9,9,9" />
  <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="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" 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>

Note that the Width, Height and Margin setters are useful as default values for the legend icon which is also created using this symbol style. Now you can use this one symbol style for all your data series, but can set a different SymbolSize for each series.

Let me know if you need help creating a symbol style.

Jason Fauchelle

Thanks a lot, Jason. It is working now.

However, The problem is that the symbol size on the legend is not changed though.

Can we change the size/color for each individual point on a series derived from PointBaseSeries?

Thanks

Gordon.

Hello Gordon

In the next nightly build, legend icons for point series will also be sized based on the SymbolSize property. To use this, make sure your point styles don't have setters for Width, Height and Margin, otherwise the legend icons will use those values instead.

You can change the size and color of symbols within the same series by including converters in the symbol style. This may mean you'd need a different symbol style for different series if they each have different logic for the size and color. In the code I sent last time, there is a Path that has the Fill property binding to the Background property of the ChartSymbol. You'll want to change this to be a binding to a property on the data point model class and use a converter to return the appropriate brush. This explanation is rather general because there are many types of logic you could use to choose the size and color. If you need help with creating a converter and binding to the right property in the symbol style, please describe what logic you want to use and I'll help you out. You'll also need to consider what you want the legend icons to look like. Alternatively, you could hide the legend or individual legend items.

Jason Fauchelle

Thanks Jason.

Here is what I want to do for the symbols here:

I have a class contains 3 properties (see below), the Weight property indicates how important the point is. The large the weight, the more important it is. If we can change the symbol size according to weight and SymbolSize we set at the dataseries level, (and the legend just show the default SymbolSize would be good enough) it would be awsome.

I tried to manipulate the DataPoint's width and height in the ScatterSeries, but it seemed does not have effects.

If you can give us more detailed information or sample code to do that, then it would be greatly appreciated.

Thanks

Gordon

public class MyPoint
    {
        #region Fields
        private DateTime time = new DateTime(2011, 7, 20);
        private float y = float.NaN;
        private float weight = 1;
        #endregion

        #region Constructors
        private MyPoint()
        {
        }

        public MyPoint(DateTime tValue, float yValue, float wValue)
        {
            time = tValue;
            y = yValue;
            weight = wValue;
        }
        #endregion

        #region Properties

        public DateTime Time
        {
            get { return time; }
            set { time = value;}
        }


        public float Y
        {
            get { return y; }
        }

        public float Weight
        {
            get { return weight; }
            set
            {
                weight = value;
            }
        }
        #endregion
    }

Hello Gordon

The simplest way for the Weight property to effect the size of the symbol is to have the Weight property directly represent the size in pixels of the symbol. To wire this up, you'd bind the width and height of the root element in the symbol template to the Weight property. Here's an example:

  <Style x:Key="TriangleChartSymbolStyle" TargetType="ms:ChartSymbol">
    <Setter Property="Template">
      <Setter.Value>
        <ControlTemplate TargetType="ms:ChartSymbol">
          <Path Fill="{TemplateBinding Background}" Width="{Binding Weight}" Height="{Binding Weight}"
                Stroke="{TemplateBinding BorderBrush}" StrokeThickness="1"
                Data="M 4 0 L 8 7 L 0 7 Z" Stretch="Uniform" />
        </ControlTemplate>
      </Setter.Value>
    </Setter>
  </Style>

See the width and height of the Path are binding to the Weight property.

To expand on this, you mentioned you want both the Weight property on the data point and the SymbolSize property to effect the size. You'd do this by implementing an IValueConverter. This would take in the Weight value, modify it in some way and return the result. Next is the question of how to incorporate the SymbolSize value in the conversion logic. There are 3 main ways that I can think of. The easiest way is simply not to use the SymbolSize property itself, and instead hard code the desired SymbolSize value in the converter. The second idea is to put a property on the converter to set the symbol size value. In this case, you can use the same converter implementation for varying symbol size values. Rather than reading from the SymbolSize property from the data series, you would set the symbol size property on the converter. The final idea fully fits your description, but this may not be worth it if the other 2 approaches will work. In this idea, rather than implementing IValueConverter, you would implement IMultiValueConverter. This will allow you to bind the width and height properties to 2 values. The first binding will be the usual binding to the Weight property. For the second binding, you'd go through the DataSeries property on the ChartSymbol to get the SymbolSize property. Now in the converter you have both Weight and SymbolSize values you need to calculate and return the pixel size of the symbol.

Finally I'll mention how to center the symbol around the rendered position. You've probably noticed this is usually done by setting the margin. With varying symbol sizes this won't be convenient though. Instead, you can use a Grid as the root element of the symbol template. By setting the Margin of the grid to something like -20, it will expand evenly around the rendering position. Now within the Grid you'd have you Path which you can center inside the grid using the HorizontalAlignment and VerticalAlignment properties. The Width and Height bindings will be on the Path. Also, use a setter to set the Margin to 0. Here is some example code of this:

  <Style x:Key="TriangleChartSymbolStyle" TargetType="ms:ChartSymbol">
    <Setter Property="Margin" Value="0" />
    <Setter Property="Template">
      <Setter.Value>
        <ControlTemplate TargetType="ms:ChartSymbol">
          <Grid Margin="-20">
            <Path Fill="{TemplateBinding Background}" Width="{Binding Weight}" Height="{Binding Weight}"
                  VerticalAlignment="Center" HorizontalAlignment="Center"
                  Stroke="{TemplateBinding BorderBrush}" StrokeThickness="1"
                  Data="M 4 0 L 8 7 L 0 7 Z" Stretch="Uniform" />
          </Grid>
        </ControlTemplate>
      </Setter.Value>
    </Setter>
  </Style>

Jason Fauchelle

Thanks Jason,

It is very close to my solution with a few problem:

1) The Symbol is not exactly in the point

2) What if the next data point does not have "Weight" property, but has "PureWeight" and I want to have PureWeight as the symbol size.

3) The symbols on the legend will have the size of which is huge. I want to be able to set the Margin according to the SymbolSize of the series. How to do this if I don't want to put extra properties into MyPoint class?

Here is how I modify the App.Xaml on symbols with your suggestions:

<Style x:Key="SymbolStyleBase" TargetType="ms:DataPoint">

        <Setter Property="Margin" Value="0" />
        <Setter Property="SnapsToDevicePixels" Value="True" />
        <Setter Property="BorderBrush" Value="Transparent" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="ms:DataPoint">

                    <Grid Margin="-10"> <--this decides the size of symbols on the Legend-->
                        <Path Name="Shape" Width="{Binding Weight}" Height="{Binding Weight}"                    
                          Stroke="{TemplateBinding Background}" StrokeThickness="2" VerticalAlignment="Center" HorizontalAlignment="Center"                
                          Data="{TemplateBinding Tag}" Stretch="Uniform" /> 
                    </Grid> 

                    <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>

See the attached file for screenshot.

Hello Gordon

1) Instead of what I mentioned previously, remove the margin from the path, then set the width and height of the symbol using setters to be at least the largest possible pixel size of a symbol. You'll also need to set the margin. Here is an example:

<Setter Property="Width" Value="30" />
<Setter Property="Height" Value="30" />
<Setter Property="Margin" Value="-15,-15,15,15" />

2) One way to do this is to also have an EffectiveWeight property which holds the actual weight that should effect the size of the symbol. Then in the xaml, you'd bind to this EffectiveWeight property. If you don't want to add additional properties to your model, then instead, you'd need to implement an IMultiValueConverter that takes in both the Weight and PureWeight property values and works out which value should be used.

3) To fix the legend size problem, you can include a trigger which sets the size of the symbol if the DataContext is null. This is an indication that the symbol template is being used in the legend. Here is an example:

<Trigger Property="DataContext" Value="{x:Null}">
  <Setter Property="Width" Value="8" />
  <Setter Property="Height" Value="8" />
</Trigger>

If you've set the SymbolSize property, then this trigger will also cause the SymbolSize to be applied to the legend symbol no-matter what size you use in setters.

Let me know if there are still some minor details to resolve.

Jason Fauchelle

Hi Jason,

1) I tried it before and tried it again, it does not work, if the symbol size is bigger, it will get trunked.

2) it seemed not the solution. Since MyPoint class can have X, Y and Weight properties and the MyOtherPoint class has X, Y, and Pureweight properties (up to the clients) and I want it handle both class in the graph.

3) Tried it, not work.

Hello Gordon

I have attached a sample that I think demonstrates roughly what you want to achieve. The symbols appear to be centered correctly, the chart is plotting 2 different types of data point models, and the legend size is controlled.

1) I've set the width, height and margin of the symbol style to make sure it's centered correctly. The width and height that you set should be at least the largest pixel size you want for symbols.

2) Rather than binding the Width and Height of the path directly to the Weight property, I now bind the Width and Height to the data context (model object) and use a converter to check the type of the model object and return the appropriate property value.

3) The converter is also used to return a constant size for legend item symbols.

Notice that I haven't used the SymbolSize feature here. If you also need the SymbolSize feature to effect the sizes of the symbols and need help with doing this. Please describe exactly how you want both the SymbolSize and Weight values to be used to calculate the size.

Jason Fauchelle