Canvas.Top not rendering

Question

I have a canvas in an itemControl and for the data template I am using ellipses. The position of each ellipse represents a time of day between 6am and 11pm. I am binding that value based on the size on of the canvas and where the time assigned to the ellipse falls. The ellispse top is not moving in the canvas at all. I have tried to remove the binding and use a hard value and it is still in the same place.

Here is the XAML for the container

        <ItemsControl Grid.Column="1" ItemsSource="{Binding AngerData}" VerticalAlignment="Stretch" Canvas.ZIndex="1">
            <ItemsControl.ItemsPanel>
                <ItemsPanelTemplate>
                    <Canvas VerticalAlignment="Stretch"></Canvas>
                </ItemsPanelTemplate>
            </ItemsControl.ItemsPanel>
            <ItemsControl.ItemTemplate>
                <DataTemplate>
                    <Ellipse Height="10" Width="10" Stroke="White" StrokeThickness="1" 
                             Canvas.Top="{Binding Top, Converter={StaticResource ResourceKey=ellipsePositionConverter}, ConverterParameter=Month}" >"
                             Fill="{Binding AngerRating, Converter={StaticResource angerRatingConverter}}"
                             Canvas.ZIndex="100">
                    </Ellipse>
                </DataTemplate>
            </ItemsControl.ItemTemplate>
        </ItemsControl>

Here is the converter which I do not think is the issue given that removing it does not move the position of the ellipse

public class CalendarDayEllipsePositionConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
    {
        double gridPosition = 0;

        if (parameter.ToString().Equals("Month", StringComparison.InvariantCultureIgnoreCase))
        {
            gridPosition = double.Parse(value.ToString()) * 110;
        }

        return gridPosition;
    }

    public object ConvertBack(object value, Type targetTypes, object parameter, System.Globalization.CultureInfo culture)
    {
        throw new NotImplementedException();
    }
}

Any help would be appreciated

Answer 1

Does the Canvas control have a Height set?

Can you put a breakpoint on the first line for Convert method in Converter just to check if it is called?

... Try this instead:

<Canvas VerticalAlignment="Stretch">
            <ItemsControl Grid.Column="1"
                      VerticalAlignment="Stretch"
                      Canvas.ZIndex="1"
                      ItemsSource="{Binding AngerData}">
                <ItemsControl.ItemTemplate>
                    <DataTemplate>
                        <Ellipse Canvas.Top="{Binding 
                                                  Converter={StaticResource ResourceKey=ellipsePositionConverter},
                                                  ConverterParameter=Month}"
                             Width="10"
                             Height="10"
                             Canvas.ZIndex="100"
                             Fill="Red"
                             Stroke="White"
                             StrokeThickness="1" />
                    </DataTemplate>
                </ItemsControl.ItemTemplate>

            </ItemsControl>
        </Canvas>