locked
How to bind items in Canvas with a specified item location? RRS feed

  • Question

  • How to bind items in Canvas with a specified Canvas.Left and Canvas.Right? The following code won't work, all items were appeared in one location.

            <ItemsControl ItemsSource="{Binding Path=Companies}" >
                <ItemsControl.ItemsPanel>
                    <ItemsPanelTemplate>
                        <Canvas  />
                    </ItemsPanelTemplate>
                </ItemsControl.ItemsPanel>
                <ItemsControl.ItemTemplate>
                    <DataTemplate>
                        <Button Content="{Binding}" 
                            Canvas.Left="{Binding Path=Latitude}" Canvas.Top="{Binding Path=Longitude}"
                                 Width="75" Height="23"  
                                />
                    </DataTemplate>
                </ItemsControl.ItemTemplate>
            </ItemsControl>



    Saturday, June 2, 2012 11:36 AM

Answers

  • Hi Youte,

    Canvas.Left gets or sets a value that represents the distance between the left side of an element and the left side of its parent Canvas. So it cannot find the one which defined in ItemsPanelTemplate. You may try the code below with a Canvas outside the Button.

    MainPage.xaml

     <ItemsControl x:Name="itemscontr" ItemsSource="{Binding}" >
                <!--<ItemsControl.ItemsPanel>
                    <ItemsPanelTemplate>
                        <Canvas Background="Azure" x:Name="canvas" Height="400" Width="400" />
                    </ItemsPanelTemplate>
                </ItemsControl.ItemsPanel>-->
                <ItemsControl.ItemTemplate>
                    <DataTemplate>
                       <Canvas >                         <Button Content="{Binding Companies}" 
                            Canvas.Left="{Binding Path=Latitude}" Canvas.Top="{Binding Path=Longitude}"  />
                        </Canvas>                 </DataTemplate>
                </ItemsControl.ItemTemplate>
            </ItemsControl>    

    Code:

     public partial class MainPage : UserControl
        {
            public MainPage()
            {
                InitializeComponent();
               this.DataContext = AllItems.GetItems();
            }
        }
    
        public class AllItems
        {
            public string Companies { get; set; }
            public int Latitude { get; set; }
            public int Longitude { get; set; }
    
            public static ObservableCollection<AllItems> GetItems()
            {
                ObservableCollection<AllItems> items = new ObservableCollection<AllItems>();
                items.Add(new AllItems()
                {
                    Companies = "Company1",
                    Latitude = 30,
                    Longitude = 40
    
                });
                items.Add(new AllItems()
               {
                   Companies = "Company2",
                   Latitude = 50,
                   Longitude = 60
    
               });
                items.Add(new AllItems()
               {
                   Companies = "Company3",
                   Latitude = 70,
                   Longitude = 100
    
               });
                return items;
            }
        }

    Best Regards,

    Monday, June 4, 2012 12:46 AM
    Moderator

All replies

  • Hi Youte,

    Canvas.Left gets or sets a value that represents the distance between the left side of an element and the left side of its parent Canvas. So it cannot find the one which defined in ItemsPanelTemplate. You may try the code below with a Canvas outside the Button.

    MainPage.xaml

     <ItemsControl x:Name="itemscontr" ItemsSource="{Binding}" >
                <!--<ItemsControl.ItemsPanel>
                    <ItemsPanelTemplate>
                        <Canvas Background="Azure" x:Name="canvas" Height="400" Width="400" />
                    </ItemsPanelTemplate>
                </ItemsControl.ItemsPanel>-->
                <ItemsControl.ItemTemplate>
                    <DataTemplate>
                       <Canvas >                         <Button Content="{Binding Companies}" 
                            Canvas.Left="{Binding Path=Latitude}" Canvas.Top="{Binding Path=Longitude}"  />
                        </Canvas>                 </DataTemplate>
                </ItemsControl.ItemTemplate>
            </ItemsControl>    

    Code:

     public partial class MainPage : UserControl
        {
            public MainPage()
            {
                InitializeComponent();
               this.DataContext = AllItems.GetItems();
            }
        }
    
        public class AllItems
        {
            public string Companies { get; set; }
            public int Latitude { get; set; }
            public int Longitude { get; set; }
    
            public static ObservableCollection<AllItems> GetItems()
            {
                ObservableCollection<AllItems> items = new ObservableCollection<AllItems>();
                items.Add(new AllItems()
                {
                    Companies = "Company1",
                    Latitude = 30,
                    Longitude = 40
    
                });
                items.Add(new AllItems()
               {
                   Companies = "Company2",
                   Latitude = 50,
                   Longitude = 60
    
               });
                items.Add(new AllItems()
               {
                   Companies = "Company3",
                   Latitude = 70,
                   Longitude = 100
    
               });
                return items;
            }
        }

    Best Regards,

    Monday, June 4, 2012 12:46 AM
    Moderator
  • Dear Haixia Xie, I want to bind all items into one canvas.

    Monday, June 4, 2012 5:09 AM
  • Hi Youte,

    As mentioned above, Canvas.Left( Canvas.Top) represents the distance between the top( left) of an element and the top( left) of its parent Canvas. So if you want bind all items into one Canvas, you should put those items in one Canvas, but it may result in inconvenient binding. You may have a try.

    Best Regards,

    Tuesday, June 5, 2012 4:25 AM
    Moderator
  • that works but I'm confused.

    Wednesday, June 6, 2012 9:40 AM