WPF selectable table fields

Question

I am brand new to WPF and am trying to implement some sort of table (or I don't know how to implement it if not a table), that has its fields selectable (like in the this example - click the Open App icon and then File->New Project and if you click a table field you will see it coloring blue or going back white) and after they have been selected, to send some signals through the USB port with each columns fields.

Now my question is: How could I implement this table (or whatever)?
And another question would be: How could I browse the array (or whatever I would use to memorize states of the fields)?

Thank you in advance for everybody.

Answer 1

Simple example :D

Set a breakpoint for the Check status button clicked event so you can check which buttons are ticked or not.

Code:

using System.Collections.ObjectModel;
using System.ComponentModel;
using System.Runtime.CompilerServices;
using System.Windows;

namespace WpfApplication1
{
    public partial class MainWindow
    {
        public MainWindow()
        {
            InitializeComponent();
            Loaded += MainWindow_Loaded;
        }

        private void MainWindow_Loaded(object sender, RoutedEventArgs e)
        {
            var clickableGrid = new ClickableGrid(3, 3);
            DataContext = clickableGrid;
        }

        private void ButtonBase_OnClick(object sender, RoutedEventArgs e)
        {
            var clickableGrid = (ClickableGrid) DataContext;
            ObservableCollection<MyItem> observableCollection = clickableGrid.MyItems;
        }
    }

    public class ClickableGrid : INotifyPropertyChanged
    {
        private int _columns;
        private ObservableCollection<MyItem> _myItems;
        private int _rows;

        public ClickableGrid(int columns, int rows)
        {
            Columns = columns;
            Rows = rows;
            UpdateArray();
        }

        public ObservableCollection<MyItem> MyItems
        {
            get { return _myItems; }
            set
            {
                _myItems = value;
                OnPropertyChanged();
            }
        }

        public int Columns
        {
            get { return _columns; }
            set
            {
                _columns = value;
                OnPropertyChanged();
            }
        }

        public int Rows
        {
            get { return _rows; }
            set
            {
                _rows = value;
                OnPropertyChanged();
            }
        }

        public event PropertyChangedEventHandler PropertyChanged;

        private void UpdateArray()
        {
            int columns = Columns;
            int rows = Rows;
            if (columns <= 0) columns = 1;
            if (rows <= 0) rows = 1;

            var observableCollection = new ObservableCollection<MyItem>();
            for (int i = 0; i < columns*rows; i++)
            {
                observableCollection.Add(new MyItem());
            }
            MyItems = observableCollection;
        }

        protected virtual void OnPropertyChanged([CallerMemberName] string propertyName = null)
        {
            PropertyChangedEventHandler handler = PropertyChanged;
            if (handler != null) handler(this, new PropertyChangedEventArgs(propertyName));
        }
    }

    public class MyItem : INotifyPropertyChanged
    {
        private bool _isTicked;

        public bool IsTicked
        {
            get { return _isTicked; }
            set
            {
                _isTicked = value;
                OnPropertyChanged();
            }
        }

        public event PropertyChangedEventHandler PropertyChanged;

        protected virtual void OnPropertyChanged([CallerMemberName] string propertyName = null)
        {
            PropertyChangedEventHandler handler = PropertyChanged;
            if (handler != null) handler(this, new PropertyChangedEventArgs(propertyName));
        }

        public override string ToString()
        {
            return string.Format("IsTicked: {0}", _isTicked);
        }
    }
}

XAML:

<Window x:Class="WpfApplication1.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:wpfApplication1="clr-namespace:WpfApplication1"
        Title="MainWindow"
        Width="525"
        Height="350"
        mc:Ignorable="d">

    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="1*" />
            <RowDefinition Height="Auto" />
        </Grid.RowDefinitions>

        <ItemsControl ItemsSource="{Binding MyItems}" d:DataContext="{d:DesignInstance wpfApplication1:ClickableGrid}">
            <ItemsControl.ItemsPanel>
                <ItemsPanelTemplate>
                    <UniformGrid Columns="{Binding Columns}"
                                 IsItemsHost="True"
                                 Rows="{Binding Rows}" />
                </ItemsPanelTemplate>
            </ItemsControl.ItemsPanel>
            <ItemsControl.ItemTemplate>
                <DataTemplate DataType="wpfApplication1:MyItem">
                    <ToggleButton x:Name="toggleButton" IsChecked="{Binding Path=IsTicked}" />
                </DataTemplate>
            </ItemsControl.ItemTemplate>
        </ItemsControl>
        <Button Grid.Row="1"
                Click="ButtonBase_OnClick"
                Content="Check status" />
    </Grid>
</Window>