WPF SQLite ToDo CRUD XAML


This entry is part 2 of 6 in the series WPF SQLite ToDo CRUD

This post is the second of a short series of posts about creating a WPF project that allows a user to create a very simple Windows to-do list program, and manage that list, using SQLite. Let’s start with the model (data). What is this project going to store in the database? This is a simple ToDo list. Below is the class that I added to the WPF program. It’s in a class file called ToDo.cs. The Id in the database will be a primary key that starts at one and increments by one. It is autoincrementing. The user will provide text data for the other two properties: Name and Status. In C# 3.0 and later, auto-implemented properties made property-declaration more concise with getters and setters, as you can see below. Feel free to copy and use this code in your own projects.

Here is the listing of the ToDo.cs file.

namespace ToDoList
{
    class ToDo
    {
        public int Id { get; set; }
        public string  Name { get; set; }
        public string Status { get; set; }
    }
}

Below is the XAML code for the MainWindow.xaml.

<Window x:Class="ToDoList.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:ToDoList"
        mc:Ignorable="d"
        WindowStartupLocation="CenterScreen"
        Title="ToDoList CRUD" Height="400" Width="800">
    <StackPanel Margin="2,2,2,2" Background="AliceBlue">
        <TextBlock TextWrapping="Wrap"  Margin="6,6,6,6" FontSize="13">This is a WPF program that has a SQLite back-end. 
            We are using the micro-ORM Dapper. The data model is a very simple class called ToDo, which has an Id, Name, and Status.
            The only interesting thing about the XAML here is that the ListBox uses an ItemTemplate.  Within that ItemTemplate we have
            a DataTemple with a data type of our model: ToDo. Then we have a StackPanel. 
            Then we have greater than signs in a TextBlock followed by more TextBlocks that
            have a Binding to the properties in the model: Id, Name and Status.
        </TextBlock>
        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition/>
                <ColumnDefinition/>
                <ColumnDefinition/>
            </Grid.ColumnDefinitions>
            <StackPanel Grid.Column="0">
                <Label Margin="20,4,4,4" FontWeight="Bold" FontSize="20">To Do List</Label>
                <ListBox x:Name="listToDoListBox" Width="300" Height="160" SelectionChanged="ListToDoListBox_SelectionChanged">
                    <ListBox.ItemTemplate>
                        <DataTemplate DataType="{x:Type local:ToDo}">
                            <StackPanel Orientation="Horizontal">
                                <TextBlock Text="> "/>
                                <TextBlock Text="{Binding Path=Id}"/>
                                <TextBlock Text="  > "/>
                                <TextBlock Text="{Binding Path=Name}"/>
                                <TextBlock Text="  >  "/>
                                <TextBlock Text="{Binding Path=Status}"/>
                            </StackPanel>
                        </DataTemplate>
                    </ListBox.ItemTemplate>
                </ListBox>
                <Button Margin="6,6,6,6" Name="BtnRefreshList" Width="100" Height="26" Click="BtnRefreshList_Click">Refresh List</Button>
            </StackPanel>
            <StackPanel Grid.Column="1">
                <Label Margin="20,4,4,4" FontWeight="Bold" FontSize="20">Add To Do</Label>
                <StackPanel Orientation="Horizontal">
                    <Label Margin="20,4,4,4">Name</Label>
                    <TextBox Name="txtboxName" Width="120" Height="22"></TextBox>
                </StackPanel>
                <StackPanel Orientation="Horizontal">
                    <Label Margin="20,4,4,4">Status</Label>
                    <TextBox Name="txtboxStatus" Width="120" Height="22"></TextBox>
                </StackPanel>
                <Button Margin="6,16,6,6" Name="BtnAddToDo" Width="100" Height="26" Click="BtnAddToDo_Click">Add ToDo</Button>
            </StackPanel>
            <StackPanel Grid.Column="2">
                <Label Margin="10,4,4,4" FontWeight="Bold" FontSize="20">Edit To Do</Label>
                <StackPanel Orientation="Horizontal">
                    <Label Margin="10,4,4,4">Id</Label>
                    <TextBox Name="txtboxEditId" Width="120" Height="22" IsReadOnly="True" Foreground="DarkGray"></TextBox>
                </StackPanel>
                <StackPanel Orientation="Horizontal">
                    <Label Margin="10,4,4,4">Name</Label>
                    <TextBox Name="txtboxEditName" Width="120" Height="22"></TextBox>
                </StackPanel>
                <StackPanel Orientation="Horizontal">
                    <Label Margin="10,4,4,4">Status</Label>
                    <TextBox Name="txtboxEditStatus" Width="120" Height="22"></TextBox>
                </StackPanel>
                <Button  Margin="6,16,6,6" Name="BtnSaveToDo" Width="100" Height="26" Click="BtnSaveToDo_Click">Save</Button>
                <Button Margin="6,16,6,6" Name="BtnDeleteToDo" Width="100" Height="26" Click="BtnDeleteToDo_Click">Delete</Button>
            </StackPanel>
        </Grid>
    </StackPanel>
</Window>
Series Navigation<< WPF SQLite ToDo CRUD IntroductionWPF SQLite ToDo CRUD SQLite >>