listbox с двумя различными Datatemplates

Question

необходимо просмотреть два разных элемента управления, которые мне нужно добавить в мой список. Элементы управления типа IControl

так я сделал следующее:

Controls.cs

interface IControl 
{ 
    double X { get; set; } 
    double Y { get; set; } 
} 

class MyButton : Button, IControl, INotifyPropertyChanged 
{ 
    public MyButton(string buttonText, double x, double y) 
    { 
     this.Content = buttonText; 
     this.x = x; 
     this.y = y; 
    } 

    private double x = 0; 
    private double y = 0; 

    public MyButton() 
    { 
    } 

    public double X 
    { 
     get 
     { return x;} 
     set 
     { 
      x = value; 
      OnPropertyChanged("X"); 
     } 
    } 

    public double Y 
    { 
     get { return y;} 
     set 
     { 
      y = value; 
      OnPropertyChanged("Y"); 
     } 
    } 

    } 

class MyLabel : Label, IControl, INotifyPropertyChanged 
{ 
    public MyLabel(int number, double x, double y) 
    { 
     this.Content = number.ToString(CultureInfo.InvariantCulture); 
     this.x = x; 
     this.y = y; 
    } 

    private double x = 0; 
    private double y = 0; 

    public MyLabel() 
    { 
    } 

    public double X 
    { 
     get{ return x;} 
     set 
     { 
      x = value; 
      OnPropertyChanged("X"); 
     } 
    } 
    public double Y 
    { 
     get{ return y;} 
     set 
     { 
      y = value; 
      OnPropertyChanged("Y"); 
     } 
    } 

    } 

теперь ViewModel.cs я есть

class ViewModel 
{ 
    private readonly ObservableCollection<IControl> controls = new ObservableCollection<IControl>(); 
    public ViewModel() 
    { 
     var m1 = new MyButton("Test String inside button",0,0); 
     var m2 = new MyLabel(1123, 0, 80); 
     controls.Add(m1); 
     controls.Add(m2); 
    } 

    public ObservableCollection<IControl> Controls 
    { 
     get {return controls;} 
    } 
} 

и в моем MainWindow. xaml

<ListBox 
     x:Name="listBox" 
     ItemsSource="{Binding Controls}" 
     SelectionMode="Extended" 
     > 
     <ListBox.Resources> 
      <DataTemplate x:Key="buttonTemplate" DataType="{x:Type local:MyButton}"> 
       <Button Content="{Binding}" 
       MouseDown="button_MouseDown" 
       PreviewMouseUp="button_MouseUp" 
       PreviewMouseMove="button_MouseMove" 
       /> 
      </DataTemplate> 

      <DataTemplate x:Key="labelTemplate" DataType="{x:Type local:MyLabel}"> 
       <Label Content="{Binding}" Background="Aqua"/> 
      </DataTemplate> 
     </ListBox.Resources> 
     <ListBox.ItemsPanel> 
      <ItemsPanelTemplate> 
       <Canvas/> 
      </ItemsPanelTemplate> 
     </ListBox.ItemsPanel> 
     <ListBox.ItemContainerStyle> 
      <Style 
       TargetType="ListBoxItem" 
       > 
       <Setter 
        Property="Canvas.Left" 
        Value="{Binding X}" 
        /> 
       <Setter 
        Property="Canvas.Top" 
        Value="{Binding Y}" 
        /> 
      </Style> 
     </ListBox.ItemContainerStyle> 
    </ListBox> 

В списке есть MyButton и MyLabel, которые я добавил к наблюдаемому набору, но в datatemplates ничего не делают. События в buttonTemplate не срабатывают, и фон метки не установлен.

Что не так? любая помощь действительно оценена.

Заранее спасибо

Answer 1

Вы привязки к коллекции IControl, поэтому все, что вы добавить в эту коллекцию, будут рассматриваться как IControl, не он уважал класс (MyButton или MyLabel)

Поэтому на интерфейс, типы этих элементов в списке - IControl, а не MyButton или MyLabel, поэтому стиль не применяется.

Возможно, вам нужно переосмыслить свой дизайн пользовательского интерфейса?

Answer 2

Первая проблема.
Плохая идея, в общем, наследовать типы слоев типа модели от Visual и ее потомков (например, Control). Определить модели вида в поле зрения модели:

// former IControl, renamed to avoid confusing with view layer 
public interface ICanvasItem 
{ 
    object Content { get; set; } 
    double X { get; set; } 
    double Y { get; set; } 
} 

public class MyButton : ICanvasItem, INotifyPropertyChanged { /* ... */} 
public class MyLabel : ICanvasItem, INotifyPropertyChanged { /* ... */} 

Вторая проблема. Поиск шаблонов для управления элементами может быть выполнен тремя способами:

• с использованием ItemTemplate. Это не вариант, так как вам нужны два разных шаблона;
• с использованием DataTemplateSelector через ItemTemplateSelector;
• с использованием шаблонов по умолчанию для каждого типа, объявленных где-то в ресурсных словарях.

Вы почти собираетесь третий путь, но, вы шаблоны имеет ключ, и это не позволяет шаблоны, которые должны применяться по умолчанию. Чтобы это исправить, просто выбросить x:Key атрибуты, и пусть тип будет ключевым шаблон:

<ListBox.Resources> 
     <DataTemplate DataType="{x:Type local:MyButton}"> 
      <Button Content="{Binding Content}" 
      MouseDown="button_MouseDown" 
      PreviewMouseUp="button_MouseUp" 
      PreviewMouseMove="button_MouseMove" 
      /> 
     </DataTemplate> 

     <DataTemplate DataType="{x:Type local:MyLabel}"> 
      <Label Content="{Binding Content}" Background="Aqua"/> 
     </DataTemplate> 
    </ListBox.Resources> 

Подробнее о шаблонах данных можно прочитать здесь: http://msdn.microsoft.com/en-us/library/ms742521%28v=vs.110%29.aspx