How can I create an ItemsControl that renders each "item" as a point on a PolyLine?

Question

I'm very confused by the MSDN samples. And all the samples I find generally revolve around text items in a StackPanel or something similarly simple.

Given an array of numbers as the ItemsSource -

ItemsSource = { 25 , 50 , 75 }

the ItemsControl should procuce only this:

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

As shown, each item needs to be translated into a point - where the "x" value is the item's position in the item list, and the 'y' value is the interpreted numeric value of the item itself.

If an ItemsPanelTemplate is absolutely required, I guess it would be something that would have the smallest effect over layout of a single PolyLine - a simple Grid, perhaps, without any 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?

Answer 1

What you ask is possible but not very straightforward... Bea Stollnitz wrote a series of articles about binding a Polygon's point collection to a data source, you can probably get some ideas from it.

Answer 2

My guess is that you are trying to create control that displays a line graph. You can have a look at the WPF Toolkit charting controls, in particular the LineSeries class. The source code is available for download and you can learn quite a bit about how to create WPF controls by looking at it. However, the approach is not as straightforward as simply binding a collection of numbers to a PolyLine.

Answer 3

Here is a sample

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

The converter is used to convert the 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();
}