Question

I have the following structure in XAML:

<Grid>
  <ItemsControl x:Name="Items" ItemsSource="{Binding Path=Pages}" Grid.Row="0" Grid.Column="0">
    <ItemsControl.ItemsPanel>
      <ItemsPanelTemplate>
        <StackPanel Orientation="Vertical" />
      </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>

    <ItemsControl.ItemTemplate>
      <DataTemplate>
        <!-- Display a white page for each page item -->
        <local:PageView Margin="0, 25, 0, 0" />
      </DataTemplate>
    </ItemsControl.ItemTemplate>
  </ItemsControl>

  <!-- Layer used for displaying preview of drawn shape -->
  <local:PreviewLayer x:Name="PreviewLayer" Grid.Row="0" Grid.Column="0"/>
</Grid>

The customer will be drawing on the preview layer a shape, let suppose a rectangle. Once the drawing is done, the shape will be added to the page below the shape.

My problem is the X,Y of the resulting rectangle is in the coordinate system of the PreviewLayer. How can I convert the bounds of a rectangle from the PreviewLayer to a PageView?

I am currently getting the needed pageView by using (the page variable is obtained elsewhere)

UIElement pageView = (UIElement)this.Items.ItemContainerGenerator.ContainerFromItem(page);

But I don’t know how to get the coordinate of the pageView returned. Using Canvas.GetLeft(pageView) returns NaN.

How can I get the pageView bounds?

Answer 1

I was able to figure it out by using TranslateToPoint. At first it wasn’t working, until I figured that ContainerFromItem returns a container of the item (which is logical if you read the name of the function, but I guess this went over my head).

Getting the first child of of the container returned the element I needed for TranslateToPoint.