Hi.
I have an WPF application with a Scatter Chart. I would like to dynamically change the width and height of a rectangular marker on the Scatter Chart in C#. Is that possible?
Thanks in advance,
Hello,
You can use the MarkerSize property to increase or decrease the size of the marker e.g. in a button click event.
private void button1_Click(object sender, RoutedEventArgs e){ xamChart1.Series[0].Marker.MarkerSize = 10;}
Regards
Vlad
Vlad,
Thanks for the quick reply.
Setting the MarkerSize to a larger number is just making a square marker a larger square marker.
I am using a MarkerTemplate to make a Rectangular Marker with a specified width and height:
<DataTemplate DataType="{x:Type igCA:MarkerTemplate}"> <Rectangle Stroke="{Binding Path=Stroke}" Fill="{Binding Path=Fill}" Width="10" Height="2" /></DataTemplate>
In code, I would like to modify each marker's width and height based on other settings in my application and then update chart to display the new marker rectangles.
Is this possible?
Thanks,
Sue
Sue,
The only way I can think this is possible is to bind the Tag property of the Marker to an object which expose two properties e.g. (width and height) and bind them to the Width and Height of the Rectangle.
However I was not able to achieve such binding because the Marker object does not provide a template. So I tried another implementation involving the Tag property of the Rectangle :
<DataTemplate DataType="{x:Type my:MarkerTemplate}"> <Rectangle Loaded="Rectangle_Loaded" Height="{Binding Path=Tag.Height, RelativeSource={RelativeSource Self}}" Width="{Binding Path=Tag.Width, RelativeSource={RelativeSource Self}}" Stroke="{Binding Path=Stroke}" Fill="{Binding Path=Fill}"> <Rectangle.Tag> <local:WidthHeight Width="5" Height="3"/> </Rectangle.Tag> </Rectangle> </DataTemplate>
Where WidthHeight is a sample class with two double properties Width and Height. In the Rectangle_Loaded event you can change the Tag and based on the DataPoint.
Hope this would work for your scenario. Let me know if you have any questions with this matter.
Regards Vlad
This was exactly my idea at first so I don't see anything wrong with your code. However I don't think this could work because of way the Marker object is generated, If you would like to add such functionality in the next release please submit a feature request on the following webpage :
http://devcenter.infragistics.com/Protected/RequestFeature.aspx
I think your suggesting will work for my scenario but I'm stuck on changing the tag value in the template (or perhaps I misunderstood.)
Using your suggestion, I've set up a simple sample app to try to change the shape of the rectangle with a test button to kick it off.
My code and XAML is below. It stops trying to get to the TemplateParent of the marker of a particular data point.
Can you see what I might be doing wrong?
Here is my test button click code:
private void button1_Click(object sender, RoutedEventArgs e) { DataPoint dp = xamChart1.Series[0].DataPoints[0]; WidthHeight newWidthHeight = new WidthHeight(); newWidthHeight.Width = 40; dp.Marker.TemplatedParent.SetValue(TagProperty, newWidthHeight); }
Here is my XAML:
<Window x:Class="CreateDynamicRectanglesForObjects.Window1" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:igCA="http://infragistics.com/Chart" xmlns:local='clr-namespace:CreateDynamicRectanglesForObjects' Title="Window1" Height="477" Width="720" xmlns:my="clr-namespace:Infragistics.Windows.Chart;assembly=Infragistics3.Wpf.Chart.v9.1"> <Window.Resources> <DataTemplate DataType="{x:Type igCA:MarkerTemplate}"> <Rectangle Loaded="Rectangle_Loaded" Height="{Binding Path=Tag.Height, RelativeSource={RelativeSource Self}}" Width="{Binding Path=Tag.Width, RelativeSource={RelativeSource Self}}" Stroke="{Binding Path=Stroke}" Fill="{Binding Path=Fill}"> <Rectangle.Tag> <local:WidthHeight Width="10" Height="30"/> </Rectangle.Tag> </Rectangle> </DataTemplate> </Window.Resources> <Grid> <Grid Margin="2,4,0,0" Name="grid1"> <igCA:XamChart Margin="16,77,28,143" Name="xamChart1" ChartRendered="xamChart1_ChartRendered"> <igCA:XamChart.Series> <igCA:Series ChartType="Scatter" > <igCA:Series.DataPoints> <igCA:DataPoint> <igCA:DataPoint.Marker> <igCA:Marker UseDataTemplate="True" /> </igCA:DataPoint.Marker> <igCA:DataPoint.ChartParameters> <igCA:ChartParameter Type="ValueX" Value="1"/> <igCA:ChartParameter Type="ValueY" Value="5"/> </igCA:DataPoint.ChartParameters> </igCA:DataPoint> <igCA:DataPoint> <igCA:DataPoint.ChartParameters> <igCA:ChartParameter Type="ValueX" Value="2"/> <igCA:ChartParameter Type="ValueY" Value="3"/> </igCA:DataPoint.ChartParameters> </igCA:DataPoint> <igCA:DataPoint> <igCA:DataPoint.ChartParameters> <igCA:ChartParameter Type="ValueX" Value="3/> <igCA:ChartParameter Type="ValueY" Value="9"/> </igCA:DataPoint.ChartParameters> </igCA:DataPoint> </igCA:Series.DataPoints> </igCA:Series> </igCA:XamChart.Series> </igCA:XamChart> <Button Height="23" HorizontalAlignment="Right" Margin="0,0,94,114" Name="button1" VerticalAlignment="Bottom" Width="75" Click="button1_Click">Test It</Button> </Grid> </Grid></Window>
Here is my WidthHeight class:
using System;using System.Collections.Generic;using System.Linq;using System.Text;namespace CreateDynamicRectanglesForObjects{ public class WidthHeight { private double myWidth = 10; private double myHeight = 5; public double Width { get { return myWidth; } set { myWidth = value; } } public double Height { get { return myHeight ; } set { myHeight = value; } } }}