将集合绑定到网格

Question

I have an object called Fly , which has properties Position (Point) and Orientation (double). In my MainViewModel I have a collection of my custom object Fly called Flies .

The View of a fly is a .png image. I want to bind Flies to my Grid in MainWindow using their properties Position and Orientation to display the flies on the screen.

I've never done this kind of binding of a collection before. What I did before is bind a collection to a ListBox or ItemsControl :

        <ItemsControl ItemsSource="{Binding MyCollection}">
        <ItemsControl.Template>
            <ControlTemplate>
                <ScrollViewer>
                    <ItemsPresenter/>
                </ScrollViewer>
            </ControlTemplate>
        </ItemsControl.Template>
        <ItemsControl.ItemTemplate>
            <DataTemplate>
                <local:ItemView/>
            </DataTemplate>
        </ItemsControl.ItemTemplate>
    </ItemsControl>

How could I bind my objects to a Grid or any other control to be able displaying the right position and angular orientation?

Answer 1

based on some assumptions from the question here is what you are looking for

<ItemsControl ItemsSource="{Binding MyCollection}">
    <ItemsControl.Resources>
        <Style TargetType="ContentPresenter">
            <Setter Property="Canvas.Left"
                    Value="{Binding Position.X}" />
            <Setter Property="Canvas.Top"
                    Value="{Binding Position.Y}" />
            <Setter Property="RenderTransform">
                <Setter.Value>
                    <RotateTransform Angle="{Binding Orientation}" />
                </Setter.Value>
            </Setter>
        </Style>
    </ItemsControl.Resources>
    <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
            <Canvas />
        </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>
    <ItemsControl.ItemTemplate>
        <DataTemplate>
            <local:ItemView />
        </DataTemplate>
    </ItemsControl.ItemTemplate>
</ItemsControl>

What I have done

• set the Canvas as the ItemsPanel of the ItemsControl which will host the items (flies)
• created a style targeting ContentPresenter which is the default host for the items in ContentPresenter.
• binded the Canvas.Left & Canvas.Top to respective Position's X & Y
• added RotateTransform for the orientation and binded the angle to Orientation property.

I can assume that the flies are supposed to fly, so in that case you may want that changing X & Y would change the fly position. but since Point class do not notify the changes to the sub properties, binding may not work as expected. So as a suggestion you may want to create your own Point class with property changed notifications.

Answer 2

To start with, you shouldn't set the ItemsControl.Template property unless you actually want to define a new ControlTemplate for it... there is certainly no point in replacing the default ControlTemplate with an identical one. Next, your ItemView seems pointless if it is just an Image ... just use an Image instead. In this way, you'll be able to data bind your properties properly.

There are several ways to acheive your requirements, but you could use a RotateTransform for the Orientation and could use a TranslateTransform to move the items. Try something like this:

<ItemsControl ItemsSource="{Binding MyCollection}">
    <ItemsControl.ItemTemplate>
        <DataTemplate>
            <Image Source="/Images/Fly.png">
                <Image.RenderTransform>
                    <TransformGroup>
                        <RotateTransform Angle="{Binding Orientation}" />
                        <TranslateTransform X="{Binding Position.X}"
                            Y="{Binding Position.Y}" />
                    </TransformGroup>
                </Image.RenderTransform>
            </Image>
        </DataTemplate>
    </ItemsControl.ItemTemplate>
</ItemsControl>