How can I create an ItemsControl that displays each "item" as a point in the PolyLine?

I am very confused by the MSDN samples. And all the patterns I find usually revolve around text elements in the StackPanel or something similar simple.

Given an array of numbers as ItemsSource -

ItemsSource = { 25 , 50 , 75 }

      

the ItemsControl should only use this:

<PolyLine Points="0,25 1,50 2,75" />

      

As shown, each element must be translated to a point where the "x" value is the position of the position in the list of elements, and the "y" value is the interpreted numeric value of the element itself.

If the ItemsPanelTemplate is absolutely necessary, I think it would be what could have the least impact on the layout of a single PolyLine - a simple Grid, perhaps without explicit column or row definitions.

But I have no idea how to implement ItemsPanelTemplate OR ItemsPresenter OR ItemTemplate in this scenario.

Can anyone point me in the right direction?

+2


source to share


3 answers


What you are asking is possible, but not very simple ... Bae Stolnitz has written a series of articles about binding a Polygon multipoint collection to a data source, you can get some ideas from it.



0


source


I am assuming you are trying to create a control that displays a line graph. You can look at the WPF Toolkit chart controls , specifically the LineSeries

. The source code is available for download, and you can learn a little about how to create WPF controls by looking at it. However, the approach is not as simple as simply binding a set of numbers to PolyLine

.



0


source


Here's an example

<ItemsControl
    x:Name="ic">
    <ItemsControl.Resources>
        <local:DatumToPositionConverter x:Key="datumToPositionConverter" />
    </ItemsControl.Resources>
    <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
            <VirtualizingStackPanel Orientation="Horizontal" />
        </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>
    <ItemsControl.ItemTemplate>
        <DataTemplate>
            <Grid>
                <Ellipse
                    Width="2"
                    Height="2"
                    Fill="Red"
                    Margin="{Binding Converter={StaticResource datumToPositionConverter}}"
                    />
            </Grid>
        </DataTemplate>
    </ItemsControl.ItemTemplate>
</ItemsControl>

      

A transducer is used to convert data to position.

public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
{
    double d;
    if (double.TryParse(value.ToString(), out d))
        return new Thickness(0, 0, 0, d);
    else
        return new Thickness();
}

      

0


source







All Articles