locked
Is it possible to create multiple rectangles with a data binding? RRS feed

  • Question


  • <Grid Grid.Row="1" DataContext="{Binding HotspotItems }"> <Grid.Resources> <DataTemplate x:Key="CBTemplate"> <Grid> <Rectangle Fill="Red" Opacity="0.5" Margin="{Binding Margin}" Width="{Binding Width}" Height="{Binding Height}" /> </Grid> </DataTemplate> </Grid.Resources> </Grid>

    I tried with the code above but it doesn't work.


    Tuesday, January 14, 2014 7:31 AM

Answers

  • There are several things wrong with your sample code.

    Your Grid is empty. If you want to display a list of items, then you'll need some sort of ItemsControl. I think that the following XAML will suit your need:

    <Page.Resources>
        <DataTemplate x:Key="HotspotTemplate">
            <Border Background="Red"
                    Margin="{Binding Margin}"
                    Width="{Binding Width}"
                    Height="{Binding Height}" />
        </DataTemplate>
    </Page.Resources>
    
    <ItemsControl x:Name="Content"
                    ItemTemplate="{StaticResource HotspotTemplate}">
        <ItemsControl.ItemsPanel>
            <ItemsPanelTemplate>
                <Canvas />
            </ItemsPanelTemplate>
        </ItemsControl.ItemsPanel>
    </ItemsControl>

    To hook the list to the control, you don't set the DataContext, but the ItemsSource. So your C# should have the following line:

    Content.ItemsSource = hl;

    Last but not least, you should use real properties for data binding, not variables (you probably have notifications about this in the output window while running). This is how your HotspotItem class may look like:

    public class HotspotItem
    {
        public Thickness Margin { get; set; }
        public double Width { get; set; }
        public double Height { get; set; }
        public String ActionID;
        public String ActionParameter;
    }

    Good luck!

    • Marked as answer by Joshua.Heller Tuesday, January 14, 2014 8:53 PM
    Tuesday, January 14, 2014 1:05 PM

All replies

  • That would work if the Margin property in the ViewModel would be a Thickness instance instead of a number. Otherwise you must use a valueconverter:

    public class MarginConverter : IValueConverter
    {
        public object Convert(object value, Type targetType, object parameter, string language)
        {
            return new Thickness((double)value);
        }
    
        public object ConvertBack(object value, Type targetType, object parameter, string language)
        {
            // not applicable
            return value;
        }
    }

    Tuesday, January 14, 2014 9:36 AM
  • Thank you for the quick answer. I still can't get it to work. Do you have any idea why?

    C#:

    public sealed partial class BlankPage1 : Page
    {
        public BlankPage1()
        {
            this.InitializeComponent();
    
            HotspotItem h1 = new HotspotItem();
            h1.Margin = new Thickness();
            h1.Margin.Top = 10;
            h1.Margin.Left = 20;
            h1.Width = 100;
            h1.Height = 20;
    
            List<HotspotItem> hl = new List<HotspotItem>();
            hl.Add(h1);
    
            Content.DataContext = hl;
        }
    }

    XAML:

    <Page
        x:Class="Pitcher_Impact.BlankPage1"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="using:Pitcher_Impact"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        mc:Ignorable="d">
    
        <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}" x:Name="Content">
            <Grid.Resources>
                <DataTemplate x:Key="HotspotTemplate">
                    <Grid>
                        <Rectangle Fill="Red"  
                                Opacity="0.5"
                                Margin="{Binding Margin}"
                                Width="{Binding Width}"
                                Height="{Binding Height}" />
                    </Grid>
                </DataTemplate>
            </Grid.Resources>
        </Grid>
    </Page>

    HotspotItem:

    public class HotspotItem
    {
        public Thickness Margin;
        public double Width;
        public double Height;
        public String ActionID;
        public String ActionParameter;
    }



    Tuesday, January 14, 2014 11:47 AM
  • There are several things wrong with your sample code.

    Your Grid is empty. If you want to display a list of items, then you'll need some sort of ItemsControl. I think that the following XAML will suit your need:

    <Page.Resources>
        <DataTemplate x:Key="HotspotTemplate">
            <Border Background="Red"
                    Margin="{Binding Margin}"
                    Width="{Binding Width}"
                    Height="{Binding Height}" />
        </DataTemplate>
    </Page.Resources>
    
    <ItemsControl x:Name="Content"
                    ItemTemplate="{StaticResource HotspotTemplate}">
        <ItemsControl.ItemsPanel>
            <ItemsPanelTemplate>
                <Canvas />
            </ItemsPanelTemplate>
        </ItemsControl.ItemsPanel>
    </ItemsControl>

    To hook the list to the control, you don't set the DataContext, but the ItemsSource. So your C# should have the following line:

    Content.ItemsSource = hl;

    Last but not least, you should use real properties for data binding, not variables (you probably have notifications about this in the output window while running). This is how your HotspotItem class may look like:

    public class HotspotItem
    {
        public Thickness Margin { get; set; }
        public double Width { get; set; }
        public double Height { get; set; }
        public String ActionID;
        public String ActionParameter;
    }

    Good luck!

    • Marked as answer by Joshua.Heller Tuesday, January 14, 2014 8:53 PM
    Tuesday, January 14, 2014 1:05 PM
  • It works. Thank you very much for your help. 
    Tuesday, January 14, 2014 8:53 PM