Bind collection to Grid

Question

У меня есть объект под названием Fly, который имеет свойства Position (Point) и Orientation (double). В моем MainViewModel У меня есть коллекция моего пользовательского объекта Fly под названием Flies.

Вид на муху - изображение .png. Я хочу связать Flies с моим Grid в MainWindow, используя их свойства Position и Orientation для отображения мух на экране.

Я никогда раньше не делал такого рода привязку коллекции. То, что я перед тем, как связать коллекцию с ListBox или ItemsControl:

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

Как я мог связать свои объекты к сетке или любой другой элемент управления, чтобы иметь возможность отображать правильное положение и угловую ориентацию?

Answer 1

Для начала, вы не следует установить ItemsControl.Template свойство, если вы на самом деле не хотите, чтобы определить новый ControlTemplate для него ... нет, конечно, нет смысла в замене по умолчанию ControlTemplate с идентичным одному. Далее, ваш ItemView кажется бессмысленным, если он всего лишь Image ... просто используйте вместо него Image. Таким образом, вы сможете привязать данные к вашим данным.

Существует несколько способов выполнить ваши требования, но вы можете использовать RotateTransform для Orientation и можете использовать TranslateTransform для перемещения предметов. Попробуйте примерно следующее:

<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> 

Answer 2

на основе некоторых предположений от вопроса здесь является то, что вы ищете

<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> 

То, что я сделал

• установить Canvas как ItemsPanel в ItemsControl, которые будут размещены элементы (flies)
• создал стиль, предназначенный для ContentPresenter, который является хостом по умолчанию для элементов в ContentPresenter.
• переплетен с Canvas.Left & Canvas.Top в соответствующую позиции X в & Y
• добавляют RotateTransform для ориентации и переплетен угол ориентации собственности.

Я могу предположить, что мухи должны летать, поэтому в этом случае вы можете захотеть, чтобы изменение X & Y изменило бы положение мухи. но поскольку класс Point не уведомляет об изменениях в дополнительных свойствах, привязка может работать не так, как ожидалось. Таким образом, вы можете создать собственный класс Point с измененными свойствами свойств.