How to bind a list of items to textbox inside stackpanel

Question

I am new to Windows app development and trying to achieve something to display like this:

Tag no:1 Tag no:2 Tag no:3 //Left End of screen

Tag no:4 Tag no:5 ...so on.

Some like this :

enter image description here

I am doing this in Windows 10 universal app development.

Thanks in advance.

My Xaml code:

 <StackPanel Orientation="Horizontal">
      <TextBlock Text="{x:Bind comment_tags}" />
 </StackPanel>

My c# code:

    public List<string> comments_tags = new List<string>();
    public MainPage()
    {
        this.InitializeComponent();
        for(int i =0; i < 20; i++)
        {
            comments_tags.Add("Tag no: " + i);
        }

     }

New approach i tried:

    public List<Border> comment_tags = new List<Border>();

        for (int i = 0; i < 20; i++)
        {
            Border b_temp = new Border();
            b_temp.CornerRadius = new CornerRadius(3);
            b_temp.Background = new SolidColorBrush(Colors.Aqua);
            TextBlock t = new TextBlock();
            t.Text = "Tag no: " + i;
            t.Foreground = new SolidColorBrush(Colors.Aqua)
            b_temp.Child = t;
            comments_tags.Add(b_temp);
        }

Its also help full if we are able to bind this to xaml controls "public List comments_tags = new List();" — djkpA, Jul 07 '15 at 09:46
Hope you may get it now By seeing my new approach . Thanks alot. — djkpA, Jul 07 '15 at 10:07
Yeah i tried it. It didn't Bind the Strings to Textblock.Its showing empty style boxes — djkpA, Jul 07 '15 at 10:19
it works fine on my machine, may be you have missed something, show us your code. — Muds, Jul 07 '15 at 10:20
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/82580/discussion-between-javvaji-kiran-and-muds). — djkpA, Jul 07 '15 at 10:23

score 5 · Accepted Answer · edited Jan 23 '22 at 10:52

your approach to deal with tags is not correct here, you do not want a text box here, you need a control that can understand what a tag is and how to deal with it.

Have a look here and here to understand how to implement this.

or a minimal implementation could be

<ItemsControl ItemsSource="{Binding Items}">
        <ItemsControl.ItemsPanel>
            <ItemsPanelTemplate>
                <StackPanel Orientation="Horizontal"/>
            </ItemsPanelTemplate>
        </ItemsControl.ItemsPanel>

        <ItemsControl.ItemTemplate>
            <DataTemplate>
                <Border BorderBrush="PowderBlue" CornerRadius="5" BorderThickness="2" Height="45" Margin="5" >
                    <TextBlock Text="{Binding}" VerticalAlignment="Center" Margin="5"/>
                </Border>
            </DataTemplate>
        </ItemsControl.ItemTemplate>
    </ItemsControl>

And code behind would be

 public MainWindow()
    {
        InitializeComponent();
        Items = new[] {"ABC", "DEF"};
        this.DataContext = this;
    }
    public string[] Items
    { get; set; }

`ItemsSource="{Binding Items}"` is correct for WPF - as the question is tagged - while `x:Bind` *may* alternatively be used in UWP. — Clemens, Jan 23 '22 at 11:08

score 1 · Answer 2 · answered Jul 07 '15 at 08:30

You cannot bind a List of strings directly to a TextBox control. As TextBox control displays only one string, all the items of a list can be added to a property which is a string and that property should be used to bind text to the TextBox.

You can bind Text to a TextBox as given below:

XAML

 <StackPanel Orientation="Horizontal">
      <TextBlock Text="{Binding TBProperty}" />
 </StackPanel>

C#

 public List<string> comments_tags = new List<string>();

        public string TBProperty
        {
            get;
            set;
        }

        public MainWindow()
        {
            InitializeComponent();

            this.DataContext = this;

            for (int i = 0; i < 20; i++)
            {
                comments_tags.Add("Tag no: " + i);
            }

            foreach (string comment in comments_tags)
            {
                TBProperty += comment + " ";
            }

        }

Thanks Akansha .. But i need to style each tag with border something like that .. I think this doesn't work with this process ... if possible please mention that also. — djkpA, Jul 07 '15 at 09:22

How to bind a list of items to textbox inside stackpanel

2 Answers2