0

I have foloowing classes: Marker - simple class with X, Y coordinates; Layer - collection of Marker (in future it will contain other data or appearance of markers maybe), Layers - collection of Layer.

In XAML Marker is represented by Ellipse.

I tried using ItemsControl inside another ItemsControl. I had problem with positioning the Marker. I can't set Canvas.Top and Canvas.Left from inner element. In the first ItemsControl it is fine, but in its childs it is impossible.

I tried multiple Canvas overlaping. It looked fine, but there was a problem with Mouse Events. Only the top Canvas could handle them.

How to properly bind collections of collection? Do I have to make temporary collection which will have all elements. Maybe someone have better idea?

public class MarkerClass: INotifyPropertyChanged
{
    public int X
    { get; set; }

    public int Y
    { get; set; }

    public MarkerClass(int x, int y)
    {
         X = x;
         Y = y;
    }
    /*...*/
}

public class LayerClass: INotifyPropertyChanged
{
    public ObservableCollection<MarkerClass> Markers
    { get; set; }

    public LayerClass()
    {
        Markers = new ObservableCollection<MarkerClass>();
    }
    /*...*/
}

public class ViewModel: INotifyPropertyChanged
{
    public ObservableCollection<LayerClass> Layers;

    public ViewModel()
    {
         Layers = new ObservableCollection<LayerClass>();
    }
    /*...*/
}

XAML (try with 2 ItemsControls). Second method I tried was to place Canvas object inside DataTemplate of first ItemControl.

 <Grid>
       <ItemsControl ItemsSource="{Binding Path=Layers}">
            <ItemsControl.ItemsPanel>
                <ItemsPanelTemplate>
                    <Canvas/>
                </ItemsPanelTemplate>
            </ItemsControl.ItemsPanel>                             
            <ItemsControl.ItemTemplate>
                <DataTemplate><!-- Second ItemsControl -->
                    <ItemsControl ItemsSource="{Binding Path=Markers}">
                        <ItemsControl.ItemTemplate>
                            <DataTemplate>
                                  <Ellipse Fill="Black" Width="20" Height="20"></Ellipse>
                            </DataTemplate>                            
                        </ItemsControl.ItemTemplate>
                        <ItemsControl.ItemContainerStyle>
                        <!--This doesn't work in inner ItemsControl -->
                            <Style>
                                  <Setter Property="Canvas.Left" Value="{Binding Path=X}"/>
                                <Setter Property="Canvas.Top" Value="{Binding Path=Y}"/>
                            </Style>
                        </ItemsControl.ItemContainerStyle>
                    </ItemsControl>
                </DataTemplate>
            </ItemsControl.ItemTemplate>
      </ItemsControl>
 </Grid>
krzysnick
  • 127
  • 1
  • 6
  • You should be able to simply bind the outer collection using `DataTemplate`s. In turn the model that represents the nested collection's `DataTemplate` would uses another `ItemsControl` (e.g. `Canvas`). See the marked duplicate for discussion on how that works. – Peter Duniho Nov 14 '15 at 01:02
  • If that does not answer your question, please post a new question that states clearly the difference between the marked duplicate here and your own question. Be sure to include [a good, _minimal_, _complete_ code example](http://stackoverflow.com/help/mcve) that clearly illustrates the question, explaining _precisely_ what that code example does and how that's different from what you want. – Peter Duniho Nov 14 '15 at 01:02

0 Answers0