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

One thing I'm immediately noticing is that you have `Canvas.Top="Canvas.Top="{Binding`. I think that should just be `Canvas.Top="{Binding`. — oltman, Apr 10 '12 at 21:49
I fixed this bug and it is still doing the same thing. I have tried switching back to a hard coded number and this still does not work. — joshwl2003, Apr 11 '12 at 22:10

Jevgeni Tsaikin · Accepted Answer · 2012-04-12T06:19:39.207

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>

The convert method is always being called and calculating correctly. I tried setting the height of the canvas and then setting the ellipse position to a value and it still displayed in the exact same spot. :( — joshwl2003, Apr 11 '12 at 22:11
Ok, I have found a solution for you :) Instead of using ItemsPanelTemplate wrap ItemsControl with Canvas, something like that: — Jevgeni Tsaikin, Apr 12 '12 at 06:16
Thank you! I have been trying to figure out why this was not working for 3 days! :) — joshwl2003, Apr 12 '12 at 12:58

Canvas.Top not rendering

1 Answers1