Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
645
Forcing adjustment of the points in a scatter series
posted

Taking an example that Graham had posted awhile back, I am using a DataTemplate to bind the Width/Height of an Ellipse marker based on the underlying data.  Something like this:

 

<UserControl.Resources>

        <DataTemplate x:Key="bubbleTemplate" >

            <Ellipse Stretch="Fill" 

                     HorizontalAlignment="Stretch" 

                     VerticalAlignment="Stretch" 

                     Fill="{Binding ActualItemBrush}" 

                     Stroke="{Binding Series.ActualMarkerOutline}" 

                     StrokeThickness="0.5" 

                     MinWidth="10" MinHeight="10" 

                     Width="{Binding Item.Width}"

                     Height="{Binding Item.Width}"/>

        </DataTemplate>

    </UserControl.Resources>

 

    <Grid x:Name="LayoutRoot" Background="White">

        <igChart:XamDataChart x:Name="theChart">

            <igChart:XamDataChart.Axes>

                <igChart:NumericXAxis x:Name="xAxis" 

                                      MinimumValue="0" MaximumValue="15"/>

                <igChart:NumericYAxis x:Name="yAxis" 

                                      MinimumValue="0" MaximumValue="15"/>

            </igChart:XamDataChart.Axes>

 

            <igChart:XamDataChart.Series>

                <igChart:ScatterSeries x:Name="scatter"

                                       MarkerTemplate="{StaticResource bubbleTemplate}"

                                       ItemsSource="{Binding}"

                                       XMemberPath="XValue"

                                       YMemberPath="YValue"

                                       XAxis="{Binding ElementName=xAxis}"

                                       YAxis="{Binding ElementName=yAxis}"/>

            </igChart:XamDataChart.Series>

        </igChart:XamDataChart>

    </Grid>

 

 

and in the code behind I have a class with the Width property.

I've got some code that does the hit test on a series left mouse button up and set's the Selected property on the item.  Something like this:

if (hitItems.Count ==1)

{

   var item = e.Item

   MyDataPoint dp  = e.Item as MyDataPoint;

   dp.Selected = !dp.Selected;

}

 

In the MyDataPoint class, I've the Selected and Width properties look like so:

public class MyDataPoint : INotifyPropertyChanged

{

   public event PropertyChangedEventHander PropertyChanged;

 

        public double Width 

        {

            get { return _width; }

            set

            {

                _width = value;

                OnPropertyChanged("Width");

            }

        }

 

        private bool _selected = false;

        public bool Selected

        {

            get { return _selected; }

            set

            { 

                _selected = value;

                if (_selected)

                {

                    Width = SELECTEDSIZE;

                }

                else

                {

                    Width = UNSELECTEDSIZE;

                }

            }

        }

 

 

Now, the idea is that if I a point to Selected, the corresponding marker will change size.  This does work but the behavior that I'm seeing is as follows:

I set point 1 to selected and it resizes but it's center isn't correct.

I set point 2 to selected and now it resizes but it's center isn't correct either.  But point 1 has now adjusted its center to be correct.

Ideas on how to force the series to adjust the point?  

Thanks,

Matt

 

Parents
  • 645
    Verified Answer
    posted

    To make this work correctly, did the following:

    I created a DataTemplate as follows:

    <DataTemplate x:Key="bubbleTemplate">

    <Ellipse Stretch="Fill"

    HorizontalAlignment="Stretch"

    VerticalAlignment="Stretch"

    Fill="{Binding ActualItemBrush}"

    Stroke="{Binding Series.ActualMarkerOutline}"

    StrokeThickness="0.5"

    MinWidth="10" MinHeight="10"

    RenderTransform="{Binding Item.RenderTransform}"/>

    </DataTemplate>

     

    And then in the code behind I have the Selected property drive the RenderTransform property to adjust the size of the ellipse:

     

    public bool Selected

    {

    get { return _selected; }

    set

    {

    _selected = value;

    if (_selected)

    {

    RenderTransform = new ScaleTransform(2.0, 2.0, UNSELECTEDSIZE/2.0, UNSELECTEDSIZE/2.0);

    }

    else

    {

    RenderTransform = null;

    }

    }

    }

     

    The RenderTransform property then just uses the property changed event to adjust the shape associated with this data point:

     

    private Transform _renderTransform;

    public Transform RenderTransform

    {

    get { return _renderTransform; }

    set

    {

    _renderTransform = value;

    OnPropertyChanged("RenderTransform");

    }

    }

    protected void OnPropertyChanged(string name)

    {

    PropertyChangedEventHandler handler = PropertyChanged;

    if (handler != null)

    {

    handler(this, new PropertyChangedEventArgs(name));

    }

    }

     

    Seems to work pretty well.  Note that I don't directly change the Width/Height of the shape, rather I use the ScaleTransform to do this.  There may be different/better ways to do this.  I'd be interested in hearing others' thoughts on this.

    Regards,

    Matt

Reply Children