ItemsControl, имеющий несколько DataTemplate в WPF - PullRequest
Новая
       46

ItemsControl, имеющий несколько DataTemplate в WPF

0 голосов
/ 21 марта 2019

Я бы хотел нарисовать на холсте разные формы.Как сделать объект из ArrowsItems ObservableCollection и CircleItems ObservableCollecton видимым на холсте?Я также создаю коллекцию Shapes ObservableCollection, включающую все элементы Circle и Arrows.Я думаю, что причина, вероятно, в привязке данных, но не знаю, где.

Цель - возможность генерировать и затем программно рисовать круги и стрелки. 

  <Button Grid.Row="1" MaxWidth="1000" Command="{Binding CreateEllipse}">Utwórz</Button>
        <Viewbox Grid.Row="2" Margin="0 20 0 0" Stretch="Uniform" StretchDirection="Both" VerticalAlignment="Stretch">
          <ItemsControl Name="Shape" ItemsSource="{Binding Shapes}">
            <ItemsControl.ItemsPanel>
              <ItemsPanelTemplate>
                <Canvas Width="2000" Height="1200" />
              </ItemsPanelTemplate>
            </ItemsControl.ItemsPanel>
            <ItemsControl.ItemContainerStyle>
              <Style TargetType="ContentPresenter">
                <Setter Property="Canvas.Left" Value="{Binding X, Mode=TwoWay}"/><Setter Property="Canvas.Top" Value="{Binding Y, Mode=TwoWay}"/>
              </Style>
            </ItemsControl.ItemContainerStyle>
            <ItemsControl.Resources>
              <DataTemplate DataType="{x:Type core:CircleItem}">
                <Viewbox Width="{Binding Width}" Height="{Binding Height}">
                  <!--MouseMove="Viewbox_MouseMove"-->
                  <i:Interaction.Triggers>
                    <i:EventTrigger EventName="MouseMove">
                      <i:InvokeCommandAction Command="{Binding DataContext.MyCommand, ElementName=Shape}" CommandParameter="{Binding}" />
                    </i:EventTrigger>
                  </i:Interaction.Triggers>

                  <i:Interaction.Behaviors>
                    <local:DragBehavior/>
                  </i:Interaction.Behaviors>
                  <Grid>
                    <Grid.RenderTransform>
                      <TranslateTransform X="{Binding TransformX}" Y="{Binding TransformY}" />
                    </Grid.RenderTransform>
                    <Ellipse Width="{Binding Width}" Height="{Binding Height}" Fill="{Binding Color}" />
                    <TextBlock HorizontalAlignment="Center" Text="{Binding Text}" TextAlignment="Center" VerticalAlignment="Center" />
                  </Grid>
                </Viewbox>
              </DataTemplate>
              <DataTemplate DataType="{x:Type core:ArrowItem}">
                <Line X1="{Binding X1}" Y1="{Binding Y1}" X2="{Binding X2}" Y2="{Binding Y2}" Stroke="{Binding Color}" StrokeThickness="{Binding StrokeThickness}" />
              </DataTemplate>
            </ItemsControl.Resources>
          </ItemsControl>
        </Viewbox>

Также в моей ViewModel: 

public ObservableCollection<CircleItem> CircleItems { get; set; }
public ObservableCollection<ArrowItem> ArrowItems { get; set; }
public CompositeCollection Shapes { get; set; }

И после добавления некоторых объектов CircleItemкласс для CircleItems и ArrowItem для ArrowItems: 

    CompositeCollection coll = new CompositeCollection();
    coll.Add(new CollectionContainer() { Collection = CircleItems });
    coll.Add(new CollectionContainer() { Collection = ArrowItems });
    Shapes = coll;

Ответы [ 2 ]

0 голосов
/ 22 марта 2019

Убедитесь, что вы инициализируете свойство Shapes, прежде чем модель представления будет назначена для DataContext. Все свойства коллекции должны быть доступны только для чтения, в противном случае вам придется запустить уведомление об изменении свойства от их установщиков. 

public class ViewModel
{
    public ObservableCollection<CircleItem> CircleItems { get; }
        = new ObservableCollection<CircleItem>();

    public ObservableCollection<ArrowItem> ArrowItems { get; }
        = new ObservableCollection<ArrowItem>();

    public CompositeCollection Shapes { get; }
        = new CompositeCollection();

    public ViewModel()
    {
        Shapes.Add(new CollectionContainer { Collection = CircleItems });
        Shapes.Add(new CollectionContainer { Collection = ArrowItems });
    }
}
0 голосов
/ 21 марта 2019

Если я вас правильно понял, вы хотите иметь разные шаблоны для разных типов данных. Это довольно легко получить. Один из способов (возможно, самый простой):

  • создавать шаблоны данных для каждого типа, который вы хотите показать

  • создайте некоторый шаблон данных, который выберет подходящий шаблон: 

    <!-- Data template for arrows -->
<DataTemplate x:Key="ArrowsDataTemplate" DataType="{x:Type core:ArrowItem}">
    <!-- Create here your template for arrows -->
</DataTemplate>

<!-- create data templates for other stuff and then "selector" data template -->
<DataTemplate x:Key="ContentDataTemplate">
    <ContentPresenter x:Name="itemContentPresenter"
                      ContentTemplate="{StaticResource CircleDataTemplate}" <!-- just the default one -->
                      Content="{TemplateBinding Content}"/>
    <DataTemplate.Triggers>
        <DataTrigger Binding="{Binding MyItemTypeAsEnum}" Value="Arrow">
            <Setter TargetName="itemContentPresenter" Property="ContentTemplate" Value="{StaticResource ArrowsDataTemplate"/> 
        </DataTrigger>
    </DataTemplate.Triggers>
</DataTemplate>


<!-- Now in your control (for example content control), where you show this stuff, do: -->
<ContentControl ContentTemplate="{StaticResource ContentDataTemplate}"/>

Теперь я предположил, что у вас есть один базовый элемент со свойством MyItemTypeAsEnum, который даст вам Circle для CircleItem, Arrow для ArrowItem и т. Д. Но если у вас нет такого свойства, вы сможете получить логическое значение из вашей модели представления это скажет вам, если этот элемент круг или нет и т. д.

В вашем основном элементе управления, когда вы показываете thigs, вы должны установить ContentTemplate для вашего шаблона «селектора».

...