Add to displayed list upon button click

Question

I am trying to work through coding a point of sale type interface with WPF C#. What I am trying to accomplish is when a button on the right is clicked, information gets added to the (textbox? some sort of container?) left. This would be where you could see the enumerated list of items on an order. My guess is it would involved a instantiated classes/arrays/collection or something like that. End goal would include being able to tie the information to different waiters and such, but the primary focus for now is just add stuff to the region on the left when the button is clicked. I am new to UI, but have some experience with Java. Here is what I have currently:

I am not concerned so much with the removal of items, because once I figure out how to add, it should be apparent how to remove.

The coding I have is all visual, which I doubt is very helpful but will supply it regardless:

<Window x:Class="Text_Box_with_Buttons.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:local="clr-namespace:Text_Box_with_Buttons"
    mc:Ignorable="d"
    Title="MainWindow" Height="350" Width="525">

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*"/>
        <ColumnDefinition Width="*"/>
    </Grid.ColumnDefinitions>

    <Border BorderBrush="Black" BorderThickness="0 0 2 0">
        <StackPanel Grid.Column="0" Margin="10">
            <Button Margin="10" Height="20" Content="Remove selected entry"/>
            <Border BorderBrush="Red" BorderThickness="2">

                <TextBlock
               HorizontalAlignment="Center"
               Margin="10"
               >
               Instance of text 1<LineBreak/>
               Instance of text 2<LineBreak/>
               Instance of text 1<LineBreak/>
               Instance of text 2<LineBreak/>
               Instance of text 1<LineBreak/>
                </TextBlock>
            </Border>

        </StackPanel>
    </Border>

    <StackPanel
        Grid.Column="1" 
            Margin="10"
            VerticalAlignment="Center"
                >

        <Button
            x:Name="Button1"
            Margin="0 0 0 5"
            Content="Add instance of text"
            Height="70"
            Width="120"
            Click="Button1Click"
            />

        <Button
            x:Name="Button2"
            Margin="0 5 0 0"
            Height="70"
            Width="120"
            Content="Add different instance"
            Click="Button2Click"
            />

    </StackPanel>
</Grid>
</Window>

I have spent a few days searching around YouTube to try and find the answer and have found some videos on data binding, but these are usually just showing a slider value bound to a text box. There was also a series on how to build a chat application, but I either couldn't find it in there or didn't understand which component was what I was looking for.

It seems like a simple concept, but even simple concepts can have quite an elaborate implementation. Any and all help appreciated.

Thank you!

Answer 1

Jeremy H., try this

<Window x:Class="WpfApplication2.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:WpfApplication2"
        xmlns:GUI="clr-namespace:GUILIb;assembly=GUILIb"
        mc:Ignorable="d"
        Title="MainWindow" x:Name="MyWindow" Height="350" Width="525" DataContext="{Binding ElementName=MyWindow}">
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="*"/>
        </Grid.ColumnDefinitions>

        <Border BorderBrush="Black" BorderThickness="0 0 2 0">
            <StackPanel Grid.Column="0" Margin="10">
                <Button Margin="10" Height="20" Content="Remove selected entry"/>
                <Border BorderBrush="Red" BorderThickness="2">
                    <ListBox ItemsSource="{Binding Items}"/>
                </Border>

            </StackPanel>
        </Border>

        <StackPanel
        Grid.Column="1" 
            Margin="10"
            VerticalAlignment="Center"
                >

            <Button
            x:Name="Button1"
            Margin="0 0 0 5"
            Content="Add instance of text"
            Height="70"
            Width="120"
            />

            <Button
            x:Name="Button2"
            Margin="0 5 0 0"
            Height="70"
            Width="120"
            Content="Add different instance"
            />

        </StackPanel>
    </Grid>
</Window>

and code behind

ObservableCollection<string> _items = new ObservableCollection<string>()
        {
            "item 1", "item 2", "item 3"
        };
        public ObservableCollection<string> Items
        {
            get { return _items; }
        }

And you must implement INotifyPropertyChanged to dynamically update your list in UI after changes.

Answer 2

Dennis' answer is best - you should read up on data binding and MVVM for the best and cleanest solution.

For a quick way to do exactly what you're asking..

1 - Assign the TextBlock a name.

<TextBlock x:Name="MyTextBox" HorizontalAlignment="Center" Margin="10" />

2 - In your button click events, you can use that name and set the .Text property.

//Put this in your ButtonClick method
MyTextBox.Text += "\nInstance of Text 1";

Answer 3

You need some ItemsControl to display items collection, e.g. ListBox.

Real-life WPF application requires data binding and MVVM, so, first of all, I strongly recommend you to read about these things.

In short, you need a view model to hold items collection. "Add" button will fire a command, which will add item to items collection ("Remove" will remove item respectively). Items collection will be bound to ListBox or something similar.