WPF Toolkit Datagrid with checkbox: How to implement and receive the value?

Question

My datagrid is not going to read any value from database, but just need to read a list of text to be the option name. how to implement it in wpf ? i mean i don't know what the xaml for this and code to read the option reply back by the end user. this will be the exact grid view:

------------------
checkbox | Black
------------------
checkbox | White
------------------
checkbox | Blue
------------------
checkbox | Green
------------------
checkbox | Grey
------------------
checkbox | Orange
------------------  

if the user selected and clicked on submit button, i need someway to read user checked value. may i know how could i implement this or is there any better way for this function ? Thank you for reply.

The file after edit with solution:

<Window
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:my="clr-namespace:ColorBox"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d"
    x:Class="ColorBox.backoption"
    x:Name="Window"
    Title="backoption"
    Width="977" Height="637" Background="#FF333333" xmlns:WPFtoolkit="http://schemas.microsoft.com/wpf/2008/toolkit">
    <DataTemplate DataType="{x:Type my:MyType}">
    <Grid x:Name="LayoutRoot">
    <Grid Margin="43,101,42,48">

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

                                <CheckBox Checked="{Binding Path=Checked}"/>
                                <TextBox Text="{Binding Path=Permission}"/>
                            </Grid>

                    </Grid>
     </Grid>
            </TabItem>
            <TabItem Header="TabItem">
                <Grid Background="#FFE5E5E5"/>
            </TabItem>
        </TabControl>
    </Grid>
    </DataTemplate>
</Window>

and the code behind the wpf file :

namespace ColorBox
{
    public partial class backoption: Window
    {
        public backoption()
        {
            this.InitializeComponent();

            // Insert code required on object creation below this point.
            MyType Beta = new MyType();
            Beta.Checked = false;
            Beta.Permission = "Hello";

        }
    }

    public class MyType
    {
        public bool Checked { get; set; }
        public string Permission { get; set; }
    }
}

Answer 1

You can bind a list with your data (colors) using DataTemplates. Your data template will be:

<DataTemplate DataType="{x:Type my:MyType}">
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto"/>
            <ColumnDefinition Width="*"/>
        </Grid.ColumnDefinitions>

        <CheckBox Grid.Column="0" IsChecked="{Binding Path=Selected}"/>
        <TextBlock Grid.Column="1" Text="{Binding Path=ColorName}"/>
    </Grid>
</DataTemplate>

Your class will be:

public class MyType // Should implement INotifyPropertyChanged.
{
    public bool Selected {get; set;}
    public string ColorName {get;set;}

    //....
}

And all the rest is to add your "MyType"s list to ViewModel and bind it as ItemsSource to your items container.