none
Problem with ItemsControl

    Question

  • <Grid>
      <Grid.Resources>
        <src:Tasks x:Key="myTodoList"/>
      </Grid.Resources>  
      <ItemsControl Margin="10" Width="400" 
                ItemsSource="{Binding Source={StaticResource myTodoList}}">
        <!--Use the Template property to specify a ControlTemplate to define
        the appearance of an ItemsControl. The ItemsPresenter uses the specified
        ItemsPanelTemplate (defined below) to layout the items. If an
        ItemsPanelTemplate is not specified, the default is used. (For ItemsControl,
        the default is an ItemsPanelTemplate that specifies a StackPanel that
        arranges items vertically.)-->
        <ItemsControl.Template>
          <ControlTemplate TargetType="ItemsControl">
            <Border BorderBrush="Aqua" BorderThickness="1" CornerRadius="15">
              <ItemsPresenter/>
            </Border>
          </ControlTemplate>
        </ItemsControl.Template>
        <!--Use the ItemsPanel property to specify an ItemsPanelTemplate
        that defines the panel that is used to hold the generated items.
        In other words, use this property if you want to affect
        how the items are laid out.-->
        <ItemsControl.ItemsPanel>
          <ItemsPanelTemplate>
            <StackPanel Orientation="Horizontal"/>
          </ItemsPanelTemplate>
        </ItemsControl.ItemsPanel>
        <!--Use the ItemTemplate to set a DataTemplate to define
        the appeatance of the data objects. This DataTemplate
        specifies that each data object appears with the Proriity
        and TaskName on top of a silver ellipse.-->
        <ItemsControl.ItemTemplate>
          <DataTemplate>
            <Grid Width="70" Margin="5">
              <Ellipse Fill="Silver"/>
              <StackPanel>
                <TextBlock Margin="3,3,3,0" FontSize="12" HorizontalAlignment="Center"
                       Text="{Binding Path=Priority}"/>
                <TextBlock Margin="3,0,3,7" FontSize="12" HorizontalAlignment="Center"
                       Text="{Binding Path=TaskName}"/>
              </StackPanel>
            </Grid>
          </DataTemplate>
        </ItemsControl.ItemTemplate>
      </ItemsControl>
    </Grid>
     
     
    public class Task : INotifyPropertyChanged
    {
        private string name;
        private int priority;
    
    
        public event PropertyChangedEventHandler PropertyChanged;
    
        public Task()
        {
        }
    
        public Task(string name, int priority)
        {
            this.name = name;
            this.priority = priority;
        }
    
        public override string ToString()
        {
            return name.ToString();
        }
    
        public string TaskName
        {
            get { return name; }
            set
            {
                name = value;
                OnPropertyChanged("TaskName");
            }
        }
    
        public int Priority
        {
            get { return priority; }
            set
            {
                priority = value;
                OnPropertyChanged("Priority");
            }
        }
    
        protected void OnPropertyChanged(string info)
        {
            PropertyChangedEventHandler handler = PropertyChanged;
            if (handler != null)
            {
                handler(this, new PropertyChangedEventArgs(info));
            }
        }
    }
    
    public class Tasks : ObservableCollection<Task>
    {
        public Tasks()
            : base()
        {
            Add(new Task("Shopping", 2));
            Add(new Task("Laundry", 2));
            Add(new Task("Email", 1));
            Add(new Task("Clean", 3));
            Add(new Task("Dinner", 1));
        }
    }
    
    I have taken reference from this link http://msdn.microsoft.com/en-us/library/system.windows.controls.itemscontrol(VS.95).aspx  & using this code.
    But it's not showing me anything.
    Can anyone give me any idea how to solve this problem.
    Thanks ,
    Tanusree
    
    
    Monday, November 03, 2008 8:31 AM

Answers

  • This is my code working well using SL2 RTW:

    <UserControl x:Class="SilverlightApplication4.Page"

    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

    xmlns:src="clr-namespace:SilverlightApplication4"

    Width="400" Height="300">

    <Grid x:Name="LayoutRoot" Background="White">

    <Grid>

    <Grid.Resources>

    <src:Tasks x:Key="myTodoList"/>

    </Grid.Resources>

    <ItemsControl Margin="10" Width="400"

    ItemsSource="{Binding Source={StaticResource myTodoList}}">

    <!--Use the Template property to specify a ControlTemplate to define

    the appearance of an ItemsControl. The ItemsPresenter uses the specified

    ItemsPanelTemplate (defined below) to layout the items. If an

    ItemsPanelTemplate is not specified, the default is used. (For ItemsControl,

    the default is an ItemsPanelTemplate that specifies a StackPanel that

    arranges items vertically.)-->

    <ItemsControl.Template>

    <ControlTemplate TargetType="ItemsControl">

    <Border BorderBrush="Aqua" BorderThickness="1" CornerRadius="15">

    <ItemsPresenter/>

    </Border>

    </ControlTemplate>

    </ItemsControl.Template>

    <!--Use the ItemsPanel property to specify an ItemsPanelTemplate

    that defines the panel that is used to hold the generated items.

    In other words, use this property if you want to affect

    how the items are laid out.-->

    <ItemsControl.ItemsPanel>

    <ItemsPanelTemplate>

    <StackPanel Orientation="Horizontal"/>

    </ItemsPanelTemplate>

    </ItemsControl.ItemsPanel>

    <!--Use the ItemTemplate to set a DataTemplate to define

    the appeatance of the data objects. This DataTemplate

    specifies that each data object appears with the Proriity

    and TaskName on top of a silver ellipse.-->

    <ItemsControl.ItemTemplate>

    <DataTemplate>

    <Grid Width="70" Margin="5">

    <Ellipse Fill="Silver"/>

    <StackPanel>

    <TextBlock Margin="3,3,3,0" FontSize="12" HorizontalAlignment="Center"

    Text="{Binding Path=Priority}"/>

    <TextBlock Margin="3,0,3,7" FontSize="12" HorizontalAlignment="Center"

    Text="{Binding Path=TaskName}"/>

    </StackPanel>

    </Grid>

    </DataTemplate>

    </ItemsControl.ItemTemplate>

    </ItemsControl>

    </Grid>

    </Grid>

    </UserControl>

     

    namespace SilverlightApplication4

    {

    public partial class Page : UserControl

    {

    public Page()

    {

    InitializeComponent();

    }

    }

    public class Task : INotifyPropertyChanged

    {

    private string name;private int priority;

     

    public event PropertyChangedEventHandler PropertyChanged;

    public Task()

    {

    }

    public Task(string name, int priority)

    {

    this.name = name;this.priority = priority;

    }

    public override string ToString()

    {

    return name.ToString();

    }

    public string TaskName

    {

    get { return name; }

    set

    {

    name =
    value;OnPropertyChanged("TaskName");

    }

    }

    public int Priority

    {

    get { return priority; }

    set

    {

    priority =
    value;OnPropertyChanged("Priority");

    }

    }

    protected void OnPropertyChanged(string info)

    {

    PropertyChangedEventHandler handler = PropertyChanged;if (handler != null)

    {

    handler(
    this, new PropertyChangedEventArgs(info));

    }

    }

    }

    public class Tasks : ObservableCollection<Task>

    {

    public Tasks(): base()

    {

    Add(new Task("Shopping", 2));

    Add(new Task("Laundry", 2));

    Add(new Task("Email", 1));

    Add(new Task("Clean", 3));Add(new Task("Dinner", 1));

    }

    }

    }

    Hope this helps,

    Tuesday, November 04, 2008 8:39 AM

All replies

  • Hi Tanusree,

    I've tested the code and it works properly.

    Have you inserted a reference to your namespace in XAML? (Something like xmlns:src="clr-namespace:SilverlightApplication4")

    Have a nice day,

    Monday, November 03, 2008 8:47 AM
  • I have used this namespace, still it's not showing me anything & not even any error.

    I'm using Silverlight2 Beta2.

    Thanks,

    Tanusree

    Monday, November 03, 2008 11:18 PM
  • I have written

    <UserControl x:Class="SLTestSample.Task"
        xmlns=http://schemas.microsoft.com/winfx/2006/xaml/presentation
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:src="clr-namespace:SLTestSample; assemly=SLTestSample"
        Width="370" >

    </UserControl>

    Tuesday, November 04, 2008 1:40 AM
  • This is my code working well using SL2 RTW:

    <UserControl x:Class="SilverlightApplication4.Page"

    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

    xmlns:src="clr-namespace:SilverlightApplication4"

    Width="400" Height="300">

    <Grid x:Name="LayoutRoot" Background="White">

    <Grid>

    <Grid.Resources>

    <src:Tasks x:Key="myTodoList"/>

    </Grid.Resources>

    <ItemsControl Margin="10" Width="400"

    ItemsSource="{Binding Source={StaticResource myTodoList}}">

    <!--Use the Template property to specify a ControlTemplate to define

    the appearance of an ItemsControl. The ItemsPresenter uses the specified

    ItemsPanelTemplate (defined below) to layout the items. If an

    ItemsPanelTemplate is not specified, the default is used. (For ItemsControl,

    the default is an ItemsPanelTemplate that specifies a StackPanel that

    arranges items vertically.)-->

    <ItemsControl.Template>

    <ControlTemplate TargetType="ItemsControl">

    <Border BorderBrush="Aqua" BorderThickness="1" CornerRadius="15">

    <ItemsPresenter/>

    </Border>

    </ControlTemplate>

    </ItemsControl.Template>

    <!--Use the ItemsPanel property to specify an ItemsPanelTemplate

    that defines the panel that is used to hold the generated items.

    In other words, use this property if you want to affect

    how the items are laid out.-->

    <ItemsControl.ItemsPanel>

    <ItemsPanelTemplate>

    <StackPanel Orientation="Horizontal"/>

    </ItemsPanelTemplate>

    </ItemsControl.ItemsPanel>

    <!--Use the ItemTemplate to set a DataTemplate to define

    the appeatance of the data objects. This DataTemplate

    specifies that each data object appears with the Proriity

    and TaskName on top of a silver ellipse.-->

    <ItemsControl.ItemTemplate>

    <DataTemplate>

    <Grid Width="70" Margin="5">

    <Ellipse Fill="Silver"/>

    <StackPanel>

    <TextBlock Margin="3,3,3,0" FontSize="12" HorizontalAlignment="Center"

    Text="{Binding Path=Priority}"/>

    <TextBlock Margin="3,0,3,7" FontSize="12" HorizontalAlignment="Center"

    Text="{Binding Path=TaskName}"/>

    </StackPanel>

    </Grid>

    </DataTemplate>

    </ItemsControl.ItemTemplate>

    </ItemsControl>

    </Grid>

    </Grid>

    </UserControl>

     

    namespace SilverlightApplication4

    {

    public partial class Page : UserControl

    {

    public Page()

    {

    InitializeComponent();

    }

    }

    public class Task : INotifyPropertyChanged

    {

    private string name;private int priority;

     

    public event PropertyChangedEventHandler PropertyChanged;

    public Task()

    {

    }

    public Task(string name, int priority)

    {

    this.name = name;this.priority = priority;

    }

    public override string ToString()

    {

    return name.ToString();

    }

    public string TaskName

    {

    get { return name; }

    set

    {

    name =
    value;OnPropertyChanged("TaskName");

    }

    }

    public int Priority

    {

    get { return priority; }

    set

    {

    priority =
    value;OnPropertyChanged("Priority");

    }

    }

    protected void OnPropertyChanged(string info)

    {

    PropertyChangedEventHandler handler = PropertyChanged;if (handler != null)

    {

    handler(
    this, new PropertyChangedEventArgs(info));

    }

    }

    }

    public class Tasks : ObservableCollection<Task>

    {

    public Tasks(): base()

    {

    Add(new Task("Shopping", 2));

    Add(new Task("Laundry", 2));

    Add(new Task("Email", 1));

    Add(new Task("Clean", 3));Add(new Task("Dinner", 1));

    }

    }

    }

    Hope this helps,

    Tuesday, November 04, 2008 8:39 AM
  • Thanks it's working fine.

    Tuesday, November 04, 2008 9:07 AM
  • Ok.

    Have a nice day,

    Tuesday, November 04, 2008 9:39 AM
  • I have one more problem with ItemsControl when I bind it at runtime.

     

    I used this code

    namespace SilverlightApplication4

    {

    public partial class Page : UserControl

    {

    public Page()

    {

    InitializeComponent();

    StackPanel stp= new StackPanel();

    Canvas canvas = new Canvas();

    ItemsControl itemscontrol = new ItemsControl();

    itemscontrol.itemTemplate = this.Resources["frontTemplate"] as DataTemplate;

    canvas.children.Add(stp);

    stp.children.Add(itemscontrol);

    Tasks d = new Tasks();

    itemscontrol.itemSource = d;

    this.Content = canvas;

    }

    }

    public class Task : INotifyPropertyChanged

    {

    private string name;private int priority;

    public event PropertyChangedEventHandler PropertyChanged;

    public Task()

    {

    }

    public Task(string name, int priority)

    {

    this.name = name;this.priority = priority;

    }

    public override string ToString()

    {

    return name.ToString();

    }

    public string TaskName

    {

    get { return name; }

    set

    {

    name =
    value;OnPropertyChanged("TaskName");

    }

    }

    public int Priority

    {

    get { return priority; }

    set

    {

    priority =
    value;OnPropertyChanged("Priority");

    }

    }

    protected void OnPropertyChanged(string info)

    {

    PropertyChangedEventHandler handler = PropertyChanged;if (handler != null)

    {

    handler(
    this, new PropertyChangedEventArgs(info));

    }

    }

    }

    public class Tasks : ObservableCollection<Task>

    {

    public Tasks(): base()

    {

    Add(
    new Task("Shopping", 2));

    Add(new Task("Laundry", 2));

    Add(new Task("Email", 1));Add(new Task("Clean", 3));Add(new Task("Dinner", 1));

    }

    }

    }

    My xaml code is

    <UserControl>

    <UserControl.Resources>

    <DataTemplate x:key="frontTemplate">

    <StackPanel>
    <TextBlock Margin="3,3,3,0" FontSize="12" HorizontalAlignment="Center"
    Text="{Binding Path=Priority}"/>
    <TextBlock Margin="3,0,3,7" FontSize="12" HorizontalAlignment="Center"
    Text="{Binding Path=TaskName}"/>
    </StackPanel>

    </DataTemplate>

    </UserControl.Resources>

    <UserControl>

    When I bind ItemsControl with d it's giving me error Sys.InvalidOperationException:ManagedRuntimeError error #4004 in control xaml1:

    System.Window.Markup.XamlParseException:

    System.Window.Markup.XamlParseException:

    System.Window.Markup.XamlParseException:

     

    Can u plz help me in this regard.

    Thanks,

    Tanusree

    Tuesday, November 04, 2008 9:54 AM
  • Here you can find the right code (it's case-sensitive):

    <UserControl.Resources>

    <DataTemplate x:Key="frontTemplate">

    <StackPanel>

    <TextBlock Margin="3,3,3,0" FontSize="12" HorizontalAlignment="Center" Text="{Binding Path=Priority}"/>

    <TextBlock Margin="3,0,3,7" FontSize="12" HorizontalAlignment="Center" Text="{Binding Path=TaskName}"/>

    </StackPanel>

    </DataTemplate>

    </UserControl.Resources>

     

    public Page()

    {

    InitializeComponent();

    StackPanel stp = new StackPanel();

    Canvas canvas = new Canvas();

    ItemsControl itemscontrol = new ItemsControl();itemscontrol.ItemTemplate = this.Resources["frontTemplate"] as DataTemplate;

    canvas.Children.Add(stp);

    stp.Children.Add(itemscontrol);

    Tasks d = new Tasks();

    itemscontrol.ItemsSource = d;

    this.Content = canvas;

    }

    Tuesday, November 04, 2008 10:08 AM
  • Hi davidezordan 

    Thanks a lot.

    Now it's working fine.

    Thanks, 

    Tanusree

    Wednesday, November 05, 2008 12:52 AM
  • Hi  davidezordan,

    When I run this code output is coming like this (Vertically)

    Shopping

    Laundry

    Email

    Is there any way to keep this output horizontally like

     Shopping  Laundry  Email .

    Thanks,

    Tanusree

     

    Thursday, November 06, 2008 7:00 AM
  • Hi Tanusree,

    I suggest you to set in XAML all the look of your user-interface.

    If you analize the original code, you can find this way to show your items horizontally:

    <ItemsControl.ItemsPanel>

    <ItemsPanelTemplate>

    <StackPanel Orientation="Horizontal"/>

    </ItemsPanelTemplate>

    </ItemsControl.ItemsPanel>

    Have a nice day,

    Thursday, November 06, 2008 8:18 AM
  • No I want to set it dynamically within that function

    public Page()

    {

    InitializeComponent();

    StackPanel stp = new StackPanel();

    Canvas canvas = new Canvas();

    ItemsControl itemscontrol = new ItemsControl();itemscontrol.ItemTemplate = this.Resources["frontTemplate"] as DataTemplate;

    canvas.Children.Add(stp);

    stp.Children.Add(itemscontrol);

    Tasks d = new Tasks();

    itemscontrol.ItemsSource = d;

    this.Content = canvas;

    }

     

    Thanks,

    Tanusree

    Thursday, November 06, 2008 10:27 AM
  • Hi,

    as reported here http://blog.dobaginski.com/josh/?m=200808 just use this code:

    StringBuilder itemsPanelTemplateXaml = new StringBuilder();

    itemsPanelTemplateXaml.Append("<ItemsPanelTemplate xmlns=\"http://schemas.microsoft.com/winfx/2006/xaml/presentation\">");

    itemsPanelTemplateXaml.Append("<StackPanel Orientation=\"Horizontal\"/>");

    itemsPanelTemplateXaml.Append("</ItemsPanelTemplate>");

    itemscontrol.ItemsPanel=(ItemsPanelTemplate)XamlReader.Load(itemsPanelTemplateXaml.ToString());

    Have a nice day,

    Thursday, November 06, 2008 11:45 AM
  • Hi davidezordan,

    Thanks a lot.

    It's working fine.

    Thanks,

    Tanusree

    Friday, November 07, 2008 12:03 AM
  • Hi davidezordan,

    Is it possible to use TargetUpdated event in any one of the control?

    <UserControl.Resources>

    <DataTemplate x:Key="frontTemplate">

    <Border height=50 width=50>

    <StackPanel>

    <TextBlock Margin="3,3,3,0" FontSize="12" HorizontalAlignment="Center" Text="{Binding Path=Priority}"/>

    <TextBlock Margin="3,0,3,7" FontSize="12" HorizontalAlignment="Center" Text="{Binding Path=TaskName}"/>

    </StackPanel>

    </Border>

    </DataTemplate>

    </UserControl.Resources>

    If possible then how & what namespace I have to include.

    Give me some code example of how to use it.

    Or if there is any other event which works as TargetUpdated event.

    Thanks,

    Tanusree

     

    Tuesday, November 11, 2008 7:48 AM