CODEWITHSUNDEEP
c#xamlitemscontrolwindows-8
ZombieSheep
ZombieSheep

Reputation: 29953

ItemsControl inside existing Canvas

I am trying to accomplish the following.

1) Have a canvas control on my page, with a background image that is scalable and pannable. This works OK with what I have. 2) Display a set of controls within the canvas. This is envisaged to be similar to the way the Bing homepage displays hotspots on the image shown there. The controls need to move around on the canvas as the image is panned/zoomed.

I've tried the following

    <Canvas Name="PanoCanvas" >
        <Canvas.Background>
            <ImageBrush x:Name="PanoImage" ImageSource="/Images/OtherImages/PanoBackound.jpg" Stretch="None" />
        </Canvas.Background>
        <ItemsControl Name="POIPresenter">
            <ItemsControl.ItemTemplate>
                <DataTemplate>
                    <uc:PointOfInterest />
                </DataTemplate>
            </ItemsControl.ItemTemplate>
            <ItemsControl.ItemsPanel>
                <ItemsPanelTemplate>
                    <Canvas />
                </ItemsPanelTemplate>
            </ItemsControl.ItemsPanel>
            <ItemsControl.ItemContainerStyle>
                <Style TargetType="ContentPresenter">
                    <Setter Property="Canvas.Top" Value="{Binding TopPosition}" />
                    <Setter Property="Canvas.Left" Value="{Binding LeftPosition}" />
                </Style>
            </ItemsControl.ItemContainerStyle>
        </ItemsControl>
    </Canvas>

and set the ItemsSource of POIPresenter in code behind, but the user controls are displaying on top of one another on the left (at 0,0).

I have tried moving the canvas declarations inside the ItemsPanelTemplate, but then my declarations to set the scale/centre of the image do not work - they can't find the PanoCanvas control.

Can anyone point out the painfully obvious thing that I'm doing wring here, please?

Thanks in advance.

Upvotes: 2

Views: 1564

Answers (1)

Kent Boogaart
Kent Boogaart

Reputation: 178630

For starters, you can simplify as follows:

<ItemsControl ...>
    <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
            <Canvas>
                <Canvas.Background>...</Canvas.Background>
            </Canvas>
        </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>
</ItemsControl>

That is, use one Canvas instead of two.

Other than that, look for binding errors in the output window. Perhaps the TopPosition and LeftPosition properties aren't being correctly resolved.

Upvotes: 1

Related Questions