DEV Community: VectoArt

Building a Real-Time Day Planner in WPF: From Static Design to Dynamic Data

VectoArt — Mon, 13 Oct 2025 17:54:40 +0000

See the app in action: https://youtu.be/P0J6JZ73m0Q

Desktop applications don’t have to be sluggish or look dated. Using WPF (Windows Presentation Foundation) and C#, we can build highly responsive, modern interfaces that update their data instantly.

This article walks you through the core engineering principles behind creating a beautiful, real-time Day Planner application. We’ll focus on three critical concepts that make this app work seamlessly: MVVM Fundamentals (specifically INotifyPropertyChanged), LINQ for Dynamic Data Counting, and CollectionViewSource for Instant Filtering.

1. The XAML Blueprint: A Responsive, Custom Layout

A great user experience starts with a great layout. In WPF, this means mastering the Grid.

Our application uses a standard two-column layout defined in MainWindow.xaml:

Column 0 (Sidebar): We assign a fixed width of 280 pixels. This ensures our navigation panel is always stable.
Column 1 (Main Content): We use Width="*". The asterisk tells WPF, "Take up all available space." This is the foundation of our responsive design; as the window adjusts, the main content area resizes automatically.

Custom Styling with ControlTemplate
WPF controls are highly customizable. To achieve the clean, rounded look for our sidebar buttons and input controls, we often can’t rely on standard properties like CornerRadius (which isn't available on a base Button). Instead, we create custom Style definitions that use a ControlTemplate.

This allows us to replace the default look of a control with our own structure — usually a Border—and apply properties like CornerRadius and
custom hover Trigger effects to that internal Border.

2. The Core: The Task Model and MVVM Fundamentals

The heart of any real-time application is its data model’s ability to communicate changes to the UI.

In our C# code (MainWindow.xaml.cs), we define the Task model. For this model to work dynamically, it must implement the INotifyPropertyChanged interface.

The Magic of INotifyPropertyChanged
When a user interacts with a task — for example, by checking the IsCompleted checkbox—we need the associated UI elements (like a strikethrough text decoration or a sidebar count) to update immediately.

This is achieved by invoking the OnPropertyChanged() method within the setter of any critical property:

public class Task : INotifyPropertyChanged
{
    // ...
    public bool IsCompleted
    {
        get => _isCompleted;
        set
        {
            if (_isCompleted != value)
            {
                _isCompleted = value;
                OnPropertyChanged(); // <-- This signals the UI to update!
            }
        }
    }
    // ...
}

The ObservableCollection
Our list of tasks is held in an ObservableCollection. Unlike a standard List, the ObservableCollection notifies the UI when an item is added or removed.

By combining INotifyPropertyChanged (for internal task changes) and ObservableCollection (for list changes), we ensure the entire application always reflects the current state of our data.

3. Real-Time Magic: Dynamic Counting with LINQ

The sidebar counters for “My day” or “Work” are powered by the RecalculateCounts method, which runs every time a task is added, removed, or changed.

To filter and count the tasks efficiently, we use LINQ (Language Integrated Query). This allows us to write powerful, SQL-like queries directly in C#.

The Counting Logic
The logic is remarkably clean. We first find all incomplete tasks, then apply specific date or category filters to that subset:

private void RecalculateCounts()
{
    var today = DateTime.Today;
    var nextWeek = today.AddDays(7);

    // 1. Get only incomplete tasks
    var incompleteTasks = Tasks.Where(t => !t.IsCompleted).ToList();

    // 2. Count for 'My day'
    MyDayCount = incompleteTasks.Count(t => t.DueDate.Date == today);

    // 3. Count for 'Next 7 days'
    NextSevenDaysCount = incompleteTasks.Count(t => t.DueDate.Date > today && t.DueDate.Date <= nextWeek);

    // 4. Update the bound strings for the XAML buttons
    MyDayButtonContent = $"My day ({MyDayCount})";
    // ...
}

This ensures the user sees an immediate numerical change in the sidebar as soon as they add a new task or modify a due date.

4. Advanced Interactivity: Converters and Filtering

Two final components bring polish to the application: custom value converters and dynamic list filtering.

Visual Feedback with IValueConverter
To create the strikethrough effect when a task is checked, we cannot simply bind the task’s IsCompleted boolean directly to the TextBlock.TextDecorations property. We need an intermediary to translate a bool into the WPF type TextDecorations.Strikethrough.

This is the job of the CompletedToStrikeConverter class, which implements IValueConverter.

Input: true (The task is completed).
Converter Output: TextDecorations.Strikethrough (The WPF style).

This pattern keeps our C# logic clean and isolates presentation rules in a reusable class.

Dynamic List Filtering with CollectionViewSource
The final piece of real-time functionality is making the task list change instantly when a sidebar button is clicked. We accomplish this using a CollectionViewSource.

Instead of binding our main ItemsControl directly to the Tasks collection, we bind it to a View of that collection:

// Inside the button click handler:
TasksViewSource.View.Filter = TasksViewSource_Filter;
TasksViewSource.View.Refresh();

Conclusion

By combining powerful WPF features, we transformed a static to-do list concept into a fluid, real-time desktop application. We leveraged MVVM patterns to keep our data and UI synchronized, used LINQ for efficient data processing, and employed CollectionViewSource for elegant filtering.

The result is a responsive, modern Day Planner ready to run on any Windows desktop!

If you’d like to dive deeper, the natural next steps are adding features like persistence (saving data to a file or database) and implementing inline task editing and deletion. Happy coding!

Complete Source Code Reference
For a complete and runnable project, here are the contents of the required files.

MainWindow.xaml.cs (C# Logic and ViewModel)

using System;
using System.Collections.Generic;
using System.Collections.ObjectModel;
using System.Collections.Specialized;
using System.ComponentModel;
using System.Globalization;
using System.Linq;
using System.Runtime.CompilerServices;
using System.Text;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;

namespace DayPlanner
{
    public class Task : INotifyPropertyChanged
    {
        private string _description;
        private string _listName;
        private string _category;
        private DateTime _dueDate;
        private bool _isCompleted;

        public string Description
        {
            get => _description;
            set { _description = value; OnPropertyChanged(nameof(Description)); }
        }
        public string ListName
        {
            get => _listName;
            set { _listName = value; OnPropertyChanged(nameof(ListName)); }
        }
        public string Category
        {
            get => _category;
            set { _category = value; OnPropertyChanged(nameof(Category)); }
        }
        // NEW: Due Date property
        public DateTime DueDate
        {
            get => _dueDate;
            set { _dueDate = value; OnPropertyChanged(nameof(DueDate)); }
        }

        public bool IsCompleted
        {
            get => _isCompleted;
            set
            {
                // Set the backing field
                _isCompleted = value;
                // Notify UI that IsCompleted property changed
                OnPropertyChanged(nameof(IsCompleted));
                // Re-notify to update the TextDecorations (StrikeThrough) on the TextBlock
                OnPropertyChanged(nameof(Description));
            }
        }

        public event PropertyChangedEventHandler PropertyChanged;

        protected void OnPropertyChanged(string propertyName)
        {
            PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
        }
    }



    public class CompletedToStrikeConverter : IValueConverter
    {
        public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
        {
            if (value is bool isCompleted && isCompleted)
            {
                // Returns a StrikeThrough decoration for completed tasks
                return TextDecorations.Strikethrough;
            }
            return null; // No decoration
        }

        public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
        {
            // Two-way conversion not necessary for this property
            return Binding.DoNothing;
        }
    }

    public class CompletedToFillConverter : IValueConverter
    {
        private static readonly SolidColorBrush CompletedBrush = new SolidColorBrush((Color)ColorConverter.ConvertFromString("#B3D3B9")); // Light green
        private static readonly SolidColorBrush IncompleteBrush = new SolidColorBrush(Colors.Transparent);

        public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
        {
            if (value is bool isCompleted && isCompleted)
            {
                return CompletedBrush;
            }
            return IncompleteBrush;
        }

        public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
        {
            // Two-way conversion not necessary for this property
            return Binding.DoNothing;
        }
    }
    /// <summary>
    /// Interaction logic for MainWindow.xaml
    /// </summary>
    public partial class MainWindow : Window, INotifyPropertyChanged
    {
        private string _currentDateTimeString;
        public string CurrentDateTimeString
        {
            get { return _currentDateTimeString; }
            set
            {
                _currentDateTimeString = value;
                OnPropertyChanged(nameof(CurrentDateTimeString));
            }
        }

        private string _myDayButtonContent;
        public string MyDayButtonContent
        {
            get => _myDayButtonContent;
            set { _myDayButtonContent = value; OnPropertyChanged(); }
        }

        private string _nextSevenDaysButtonContent;
        public string NextSevenDaysButtonContent
        {
            get => _nextSevenDaysButtonContent;
            set { _nextSevenDaysButtonContent = value; OnPropertyChanged(); }
        }

        private string _allMyTasksButtonContent;
        public string AllMyTasksButtonContent
        {
            get => _allMyTasksButtonContent;
            set { _allMyTasksButtonContent = value; OnPropertyChanged(); }
        }

        private string _personalButtonContent;
        public string PersonalButtonContent
        {
            get => _personalButtonContent;
            set { _personalButtonContent = value; OnPropertyChanged(); }
        }

        private string _workButtonContent;
        public string WorkButtonContent
        {
            get => _workButtonContent;
            set { _workButtonContent = value; OnPropertyChanged(); }
        }

        private string _groceryListButtonContent;
        public string GroceryListButtonContent
        {
            get => _groceryListButtonContent;
            set { _groceryListButtonContent = value; OnPropertyChanged(); }
        }
        private string _newTaskCategory;
        public string NewTaskCategory
        {
            get => _newTaskCategory;
            set
            {
                if (_newTaskCategory != value)
                {
                    _newTaskCategory = value;
                    OnPropertyChanged();
                }
            }
        }
        private DateTime _newTaskDueDate;
        public DateTime NewTaskDueDate
        {
            get => _newTaskDueDate;
            set
            {
                if (_newTaskDueDate != value)
                {
                    _newTaskDueDate = value;
                    OnPropertyChanged();
                }
            }
        }
        public ObservableCollection<Task> Tasks { get; set; }
        public ObservableCollection<string> AvailableCategories { get; set; }


        private int _myDayCount;
        public int MyDayCount
        {
            get => _myDayCount;
            set
            {
                if (_myDayCount != value)
                {
                    _myDayCount = value;
                    OnPropertyChanged();
                }
            }
        }
        private int _nextSevenDaysCount;
        public int NextSevenDaysCount
        {
            get => _nextSevenDaysCount;
            set
            {
                if (_nextSevenDaysCount != value)
                {
                    _nextSevenDaysCount = value;
                    OnPropertyChanged();
                }
            }
        }
        private int _allMyTasksCount;
        public int AllMyTasksCount
        {
            get => _allMyTasksCount;
            set
            {
                if (_allMyTasksCount != value)
                {
                    _allMyTasksCount = value;
                    OnPropertyChanged();
                }
            }
        }
        private int _personalCount;
        public int PersonalCount
        {
            get => _personalCount;
            set
            {
                if (_personalCount != value)
                {
                    _personalCount = value;
                    OnPropertyChanged();
                }
            }
        }
        private int _workCount;
        public int WorkCount
        {
            get => _workCount;
            set
            {
                if (_workCount != value)
                {
                    _workCount = value;
                    OnPropertyChanged();
                }
            }
        }
        private int _groceryListCount;
        public int GroceryListCount
        {
            get => _groceryListCount;
            set
            {
                if (_groceryListCount != value)
                {
                    _groceryListCount = value;
                    OnPropertyChanged();
                }
            }
        }

        public MainWindow()
        {
            InitializeComponent();
            this.DataContext = this;
            InitializeCategoryAndDateSelection();

            InitializeTasks();

            CurrentDateTimeString = DateTime.Now.ToString("dddd, MMMM dd, yyyy");
        }

        public event PropertyChangedEventHandler PropertyChanged;

        protected virtual void OnPropertyChanged([CallerMemberName] string propertyName = null)
        {
            PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
        }

        private void InitializeCategoryAndDateSelection()
        {
            AvailableCategories = new ObservableCollection<string>
            {
                "Personal", "Work", "Grocery List", "Study", "Finance" // Example categories
            };
            // Set initial values that will be bound to the new task input controls
            NewTaskCategory = AvailableCategories.First();
            NewTaskDueDate = DateTime.Today.AddDays(1);
        }

        private void InitializeTasks()
        {
            // Use ObservableCollection for dynamic updates
            Tasks = new ObservableCollection<Task>();
        }

        private void AddTaskButton_Click(object sender, RoutedEventArgs e)
        {
            // 1. Get the description from the TextBox
            string taskDescription = NewTaskTextBox.Text.Trim();
            string placeholderText = "Add a new task...";

            // 2. Validate input and ensure it's not the placeholder text
            if (!string.IsNullOrEmpty(taskDescription) && taskDescription != placeholderText)
            {
                // 3. Create a new Task object
                // New tasks default to "My lists > Personal" and incomplete
                Task newTask = new Task
                {
                    Description = taskDescription,
                    ListName = "My lists",
                    Category = NewTaskCategory, // Use the selected category (bound from ComboBox)
                    DueDate = NewTaskDueDate,   // Use the selected date (bound from DatePicker)
                    IsCompleted = false
                };

                // 4. Add the new task to the ObservableCollection. 
                // The UI (ItemsControl) will automatically update in real-time.
                Tasks.Add(newTask);

                // 5. Clear the TextBox and reset the placeholder text
                NewTaskTextBox.Text = placeholderText;
                NewTaskTextBox.Foreground = new SolidColorBrush((Color)ColorConverter.ConvertFromString("#AAAAAA"));

                // Reset category and date selections back to defaults
                NewTaskCategory = AvailableCategories[0];
                NewTaskDueDate = DateTime.Today;

                // 6. Recalculate counts to reflect the new task
                RecalculateCounts();
            }

        }
        private void NewTaskTextBox_GotFocus(object sender, RoutedEventArgs e)
        {
            if (NewTaskTextBox.Text == "Add a new task...")
            {
                NewTaskTextBox.Text = string.Empty;
                // Change color from placeholder grey to normal text color
                NewTaskTextBox.Foreground = new SolidColorBrush((Color)ColorConverter.ConvertFromString("#333333"));
            }
        }

        private void NewTaskTextBox_LostFocus(object sender, RoutedEventArgs e)
        {
            if (string.IsNullOrEmpty(NewTaskTextBox.Text.Trim()))
            {
                NewTaskTextBox.Text = "Add a new task...";
                NewTaskTextBox.Foreground = new SolidColorBrush((Color)ColorConverter.ConvertFromString("#AAAAAA"));
            }
        }

        private void Tasks_CollectionChanged(object sender, NotifyCollectionChangedEventArgs e)
        {
            // Subscribe to PropertyChanged for newly added tasks
            if (e.NewItems != null)
            {
                foreach (Task task in e.NewItems)
                {
                    task.PropertyChanged += Task_PropertyChanged;
                }
            }

            // Unsubscribe from PropertyChanged for removed tasks
            if (e.OldItems != null)
            {
                foreach (Task task in e.OldItems)
                {
                    task.PropertyChanged -= Task_PropertyChanged;
                }
            }
            RecalculateCounts();
        }

        private void Task_PropertyChanged(object sender, PropertyChangedEventArgs e)
        {
            // Only recalculate if properties that affect filtering change
            if (e.PropertyName == nameof(Task.IsCompleted) || e.PropertyName == nameof(Task.DueDate) || e.PropertyName == nameof(Task.Category))
            {
                RecalculateCounts();
            }
        }

        private void RecalculateCounts()
        {
            if (Tasks == null) return;
            var today = DateTime.Today;
            var nextWeek = today.AddDays(7);

            // Counts should generally only include incomplete tasks
            var incompleteTasks = Tasks.Where(t => !t.IsCompleted).ToList();

            MyDayCount = incompleteTasks.Count(t => t.DueDate.Date == today);

            // Next 7 days tasks: Due in the next 7 days, excluding today
            NextSevenDaysCount = incompleteTasks.Count(t => t.DueDate.Date > today && t.DueDate.Date <= nextWeek);

            AllMyTasksCount = incompleteTasks.Count(); // Count of all incomplete tasks

            // List Counts
            PersonalCount = incompleteTasks.Count(t => t.Category == "Personal");
            WorkCount = incompleteTasks.Count(t => t.Category == "Work");
            GroceryListCount = incompleteTasks.Count(t => t.Category == "Grocery List");

            // Update the formatted string properties for button content
            MyDayButtonContent = $"My day ({MyDayCount})";
            NextSevenDaysButtonContent = $"Next 7 days ({NextSevenDaysCount})";
            AllMyTasksButtonContent = $"All my tasks ({AllMyTasksCount})";
            PersonalButtonContent = $"Personal ({PersonalCount})";
            WorkButtonContent = $"Work ({WorkCount})";
            GroceryListButtonContent = $"Grocery List ({GroceryListCount})";
        }
    }
}

MainWindow.xaml (WPF Layout and Styling)

<Window x:Class="DayPlanner.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:DayPlanner"
        xmlns:hc="https://handyorg.github.io/handycontrol"
        mc:Ignorable="d"
Title="Day Planner" 
Height="700" 
Width="1000"
FontFamily="Segoe UI"
AllowsTransparency="True"
WindowStyle="None"
Background="Transparent" WindowStartupLocation="CenterScreen">


    <Window.Resources>
        <!-- Color Definitions -->
        <Color x:Key="PrimaryBackground">#F8F8F8</Color>
        <Color x:Key="SidebarBackground">#FFFFFF</Color>
        <Color x:Key="CardBackground">#FFFFFF</Color>
        <Color x:Key="AccentColor">#000</Color>
        <Color x:Key="TextColor">#000</Color>
        <Color x:Key="WhiteColor">#FFFFFF</Color>
        <Color x:Key="LightAccentColor">#000</Color>
        <Color x:Key="LightBorderColor">#E8E8E8</Color>

        <SolidColorBrush x:Key="PrimaryBackgroundBrush" Color="{StaticResource PrimaryBackground}"/>
        <SolidColorBrush x:Key="SidebarBackgroundBrush" Color="{StaticResource SidebarBackground}"/>
        <SolidColorBrush x:Key="CardBackgroundBrush" Color="{StaticResource CardBackground}"/>
        <SolidColorBrush x:Key="AccentBrush" Color="{StaticResource AccentColor}"/>
        <SolidColorBrush x:Key="TextBrush" Color="{StaticResource TextColor}"/>
        <SolidColorBrush x:Key="CompletedTaskBrush" Color="ForestGreen"/>
        <SolidColorBrush x:Key="WhiteBrush" Color="{StaticResource WhiteColor}"/>
        <SolidColorBrush x:Key="LightAccentBrush" Color="{StaticResource LightAccentColor}"/>
        <SolidColorBrush x:Key="LightBorderBrush" Color="{StaticResource LightBorderColor}"/>

        <!-- Value Converters -->
        <local:CompletedToStrikeConverter x:Key="CompletedToStrikeConverter"/>
        <local:CompletedToFillConverter x:Key="CompletedToFillConverter"/>

        <!-- Style for Sidebar Navigation Buttons -->
        <Style x:Key="SidebarButtonStyle" TargetType="Button">
            <Setter Property="Background" Value="Transparent"/>
            <Setter Property="BorderThickness" Value="0"/>
            <Setter Property="Foreground" Value="{StaticResource WhiteBrush}"/>
            <Setter Property="FontSize" Value="14"/>
            <Setter Property="Padding" Value="12,8"/>
            <Setter Property="Margin" Value="0,2,0,2"/>
            <Setter Property="HorizontalContentAlignment" Value="Left"/>
            <Setter Property="Cursor" Value="Hand"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="Button">
                        <Border Padding="{TemplateBinding Padding}" 
                            Background="{TemplateBinding Background}" 
                            CornerRadius="8">
                            <ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" 
                                          VerticalAlignment="{TemplateBinding VerticalAlignment}"/>
                        </Border>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsMouseOver" Value="True">
                                <Setter Property="Background" Value="{StaticResource LightAccentBrush}"/>
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

        <!-- Style for the Task Completion CheckBox (styled as a circle) -->
        <Style x:Key="CircleCheckBoxStyle" TargetType="CheckBox">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="CheckBox">
                        <Grid Background="Transparent">
                            <Ellipse x:Name="CheckMark" 
                                 Width="20" 
                                 Height="20" 
                                 StrokeThickness="2" 
                                 Stroke="#DDDDDD" 
                                 Fill="Transparent" 
                                 VerticalAlignment="Center" 
                                 HorizontalAlignment="Center"/>
                        </Grid>
                        <ControlTemplate.Triggers>
                            <!-- Visuals for Checked State -->
                            <Trigger Property="IsChecked" Value="True">
                                <!-- When checked, fill the ellipse with the light green color -->
                                <Setter TargetName="CheckMark" Property="Fill" Value="{StaticResource CompletedTaskBrush}"/>
                                <Setter TargetName="CheckMark" Property="Stroke" Value="{StaticResource CompletedTaskBrush}"/>
                            </Trigger>
                            <!-- Visuals for Mouse Over State -->
                            <Trigger Property="IsMouseOver" Value="True">
                                <Setter TargetName="CheckMark" Property="Stroke" Value="{StaticResource AccentBrush}"/>
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

        <!-- NEW: Style for the circular Add Task Button -->
        <Style x:Key="AddButtonStyle" TargetType="Button">
            <Setter Property="Background" Value="{StaticResource AccentBrush}"/>
            <Setter Property="Foreground" Value="{StaticResource WhiteBrush}"/>
            <Setter Property="FontWeight" Value="Bold"/>
            <Setter Property="FontSize" Value="18"/>
            <Setter Property="Width" Value="30"/>
            <Setter Property="Height" Value="30"/>
            <Setter Property="Padding" Value="0"/>
            <Setter Property="BorderThickness" Value="0"/>
            <Setter Property="Cursor" Value="Hand"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="Button">
                        <Border Background="{TemplateBinding Background}"
                            BorderBrush="{TemplateBinding BorderBrush}"
                            BorderThickness="{TemplateBinding BorderThickness}"
                            CornerRadius="15">
                            <ContentPresenter HorizontalAlignment="Center" 
                                          VerticalAlignment="Center"/>
                        </Border>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsMouseOver" Value="True">
                                <Setter Property="Background" Value="{StaticResource LightAccentBrush}"/>
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>


        <!-- DataTemplate for a Task Item -->
        <DataTemplate x:Key="TaskTemplate">
            <Border Background="{StaticResource CardBackgroundBrush}" 
                CornerRadius="12" 
                Margin="10"
                Padding="15"
                Width="Auto"
                HorizontalAlignment="Stretch"
                BorderThickness="1"
                BorderBrush="#E8E8E8">
                <Border.Effect>
                    <!-- Soft shadow to mimic elevation -->
                    <DropShadowEffect ShadowDepth="0" 
                                  Color="#DDDDDD" 
                                  Opacity="0.5" 
                                  BlurRadius="10"/>
                </Border.Effect>
                <Grid>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="Auto"/>
                        <ColumnDefinition Width="*"/>
                    </Grid.ColumnDefinitions>

                    <!-- INTERACTIVE Checkbox (Bound to IsCompleted) -->
                    <CheckBox Grid.Column="0" 
                          Style="{StaticResource CircleCheckBoxStyle}"
                          IsChecked="{Binding IsCompleted, Mode=TwoWay}"
                          VerticalAlignment="Center" 
                          Margin="0,0,15,0"/>

                    <StackPanel Grid.Column="1">
                        <!-- Task Metadata (e.g., "My lists > Work") -->
                        <StackPanel Orientation="Horizontal" Opacity="0.7" Margin="0,0,0,2">
                            <TextBlock Text="{Binding ListName}" FontSize="11" Foreground="{StaticResource TextBrush}"/>
                            <TextBlock Text=" > " FontSize="11" Foreground="{StaticResource TextBrush}"/>
                            <TextBlock Text="{Binding Category}" FontSize="11" FontWeight="SemiBold" Foreground="{StaticResource TextBrush}"/>
                        </StackPanel>

                        <!-- Task Description (Bound to IsCompleted for Text Decoration) -->
                        <TextBlock Text="{Binding Description}" 
                               FontSize="15" 
                               TextWrapping="Wrap"
                               TextDecorations="{Binding IsCompleted, Converter={StaticResource CompletedToStrikeConverter}}"
                               Foreground="{StaticResource TextBrush}"/>
                    </StackPanel>
                    <!-- NEW: Due Date Display -->
                    <TextBlock Grid.Column="2"
                           Text="{Binding DueDate, StringFormat='MMM dd'}" 
                           FontSize="12"
                           Opacity="0.6"
                           Margin="0,0,10,0"
                           VerticalAlignment="Top"
                           HorizontalAlignment="Right"/>
                </Grid>
            </Border>
        </DataTemplate>
    </Window.Resources>
    <Border CornerRadius="25" Background="{StaticResource PrimaryBackgroundBrush}">
        <Grid>
            <Grid.ColumnDefinitions>
                <!-- Sidebar Column (fixed width) -->
                <ColumnDefinition Width="280"/>
                <!-- Main Content Column -->
                <ColumnDefinition Width="*"/>
            </Grid.ColumnDefinitions>

            <Border Grid.Column="0" 
        Background="{StaticResource AccentBrush}"
        CornerRadius="25,0,0,25"
        Padding="20,30,20,20">
                <DockPanel>
                    <Border DockPanel.Dock="Top" CornerRadius="10" Background="White" >
                        <StackPanel Margin="5,5,5,5">
                            <!-- User Profile Area -->
                            <StackPanel Orientation="Horizontal" Margin="0,0,0,0">
                                <Ellipse Width="40" Height="40" Margin="0,0,10,0">
                                    <Ellipse.Fill>
                                        <ImageBrush ImageSource="/Picsart_23-08-23_01-02-11-506.jpg"/>
                                    </Ellipse.Fill>
                                </Ellipse>
                                <StackPanel VerticalAlignment="Center">
                                    <!-- Changed name to VectoArt -->
                                    <TextBlock Text="VectoArt" FontWeight="Bold" FontSize="16" />
                                    <TextBlock Text="Subscribe" FontSize="12" Opacity="0.6" />
                                </StackPanel>
                            </StackPanel>
                        </StackPanel>
                    </Border>
                    <StackPanel DockPanel.Dock="Top" Margin="0,20,0,30">
                        <TextBlock Text="My day" FontSize="18" FontWeight="SemiBold" Margin="0,5,0,5" Foreground="{StaticResource WhiteBrush}"/>
                        <Button Content="{Binding MyDayButtonContent}" Style="{StaticResource SidebarButtonStyle}"/>
                        <Button Content="{Binding NextSevenDaysButtonContent}" Style="{StaticResource SidebarButtonStyle}"/>
                        <Button Content="{Binding AllMyTasksButtonContent}" Style="{StaticResource SidebarButtonStyle}"/>
                    </StackPanel>
                    <StackPanel DockPanel.Dock="Top" Margin="0,0,0,30">
                        <TextBlock Text="My lists" FontSize="18" FontWeight="SemiBold" Margin="0,5,0,5" Foreground="{StaticResource WhiteBrush}"/>
                        <Button Content="{Binding PersonalButtonContent}" Style="{StaticResource SidebarButtonStyle}"/>
                        <Button Content="{Binding WorkButtonContent}" Style="{StaticResource SidebarButtonStyle}"/>
                        <Button Content="{Binding GroceryListButtonContent}" Style="{StaticResource SidebarButtonStyle}"/>
                    </StackPanel>
                </DockPanel>
            </Border>
            <Grid Grid.Column="1">
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto"/>
                    <!-- Header/Greeting -->
                    <RowDefinition Height="*"/>
                    <!-- Task List Area -->
                    <RowDefinition Height="Auto"/>
                    <!-- New Task Input -->
                </Grid.RowDefinitions>

                <StackPanel Background="{StaticResource CardBackgroundBrush}" Grid.Row="0" Margin="0,10,20,30">
                    <TextBlock Text="Good Afternoon, VectoArt." 
               FontSize="28" 
               FontWeight="Bold" 
               Margin="20,5,0,0"
               Foreground="{StaticResource TextBrush}"/>
                    <TextBlock Text="Let's make an impact" 
               FontSize="18" 
               Opacity="0.7" 
               Margin="20,5,0,10"/>

                    <!-- Date and Calendar Info -->
                    <Border Background="{StaticResource LightBorderBrush}" 
            CornerRadius="12" 
            Padding="10"
            Margin="10,10,10,20">
                        <StackPanel>
                            <!-- Date (Now bound to the CurrentDateTimeString property) -->
                            <TextBlock FontSize="14" Opacity="0.7" Margin="0,0,0,5" 
                       Text="{Binding CurrentDateTimeString}" 
                       TextWrapping="Wrap">
                            </TextBlock>

                            <!-- Calendar Connect CTA has been removed -->
                        </StackPanel>
                    </Border>
                </StackPanel>
                <ScrollViewer Grid.Row="1" VerticalScrollBarVisibility="Auto">
                    <!-- ItemsSource is now correctly bound to the Tasks property -->
                    <ItemsControl ItemsSource="{Binding Tasks}" 
                  ItemTemplate="{StaticResource TaskTemplate}">
                    </ItemsControl>
                </ScrollViewer>

                <Border Grid.Row="2" 
        Background="{StaticResource CardBackgroundBrush}" 
        CornerRadius="12" 
        Padding="15" 
        Margin="10,20,10,10"
        BorderThickness="1"
        BorderBrush="{StaticResource LightAccentBrush}">
                    <StackPanel>
                        <Grid Margin="0,0,0,10">
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="*"/>
                                <ColumnDefinition Width="Auto"/>
                            </Grid.ColumnDefinitions>

                            <!-- Text box for input -->
                            <TextBox x:Name="NewTaskTextBox" 
             Grid.Column="0" 
             FontSize="15" 
             BorderThickness="0"
             VerticalContentAlignment="Center"
             Padding="5,0"
             Text="Add a new task..."
             Foreground="#AAAAAA"
             GotFocus="NewTaskTextBox_GotFocus"
             LostFocus="NewTaskTextBox_LostFocus"/>

                            <!-- Add Task Button -->
                            <Button Grid.Column="1" 
            Content="+" 
            Width="30" Height="30"
            Click="AddTaskButton_Click"
            Background="{StaticResource AccentBrush}"
            Foreground="{StaticResource SidebarBackgroundBrush}"
            FontWeight="Bold"
            FontSize="30"
            Padding="0,-8,0,0" 
            BorderThickness="0"
            Margin="0,0,0,0" FontFamily="Segoe UI Semibold"/>

                        </Grid>
                        <StackPanel Orientation="Horizontal">
                            <!-- Category Dropdown -->

                            <hc:ComboBox ItemsSource="{Binding AvailableCategories}" SelectedItem="{Binding NewTaskCategory, Mode=TwoWay}" Width="150" Height="30" Margin="0,0,10,0"/>
                            <!-- Date Picker -->
                            <hc:DatePicker SelectedDate="{Binding NewTaskDueDate, Mode=TwoWay}" Height="30" Width="120"/>

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

Sleek & Modern WPF: Build a Real-Time Word Counter Dashboard (C# Tutorial)

VectoArt — Sun, 05 Oct 2025 20:47:04 +0000

If you’ve ever needed a fast, clean word counter, you know they often look pretty boring. Today, we’re changing that. We’re going to build this sleek, dark-themed Real-Time Word Counter Dashboard using WPF and C#.

This project is a perfect hands-on exercise for mastering fundamental WPF concepts like Data Binding, the MVVM Pattern (Simplified), custom XAML Styling, and some neat C# Regex tricks for accurate text analysis.

Let’s dive in and transform a standard desktop application into a modern tool.

Prerequisites

Visual Studio (Community Edition or higher)
A new WPF Application (.NET) or WPF App (.NET Framework) project.

Step 1: Set Up the Data Model (The ‘M’ in MVVM)

The foundation of any dynamic WPF application is a robust data model that can notify the UI of changes. This is achieved using the INotifyPropertyChanged interface.

We’ll create a simple data class, StatisticItem, to represent each card in our dashboard (Words, Characters, Sentences, etc.).

Add this class inside your MainWindow.xaml.cs file (or a separate Models folder):

// StatisticItem.cs (or inside MainWindow.xaml.cs)

using System.ComponentModel;
using System.Windows.Media;

public class StatisticItem : INotifyPropertyChanged
{
    private string _value = "0";

    // Value changes and notifies the UI
    public string Value 
    {
        get => _value;
        set
        {
            if (_value != value)
            {
                _value = value;
                OnPropertyChanged(nameof(Value)); 
            }
        }
    }

    // Static properties for UI definition (Label, Icon, Color)
    public string Label { get; set; }       
    public string IconGlyph { get; set; }   
    public SolidColorBrush IconColor { get; set; } 

    // Standard INotifyPropertyChanged Implementation
    public event PropertyChangedEventHandler PropertyChanged;
    protected virtual void OnPropertyChanged(string propertyName)
    {
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
    }
}

Step 2: Implement the Main Logic (The Simplified ‘VM’ and Code-Behind)

In your MainWindow.xaml.cs, we will initialize the statistics list, set the DataContext, and include the core logic for counting the text.

The UpdateCounts() method is where the analysis happens, using powerful Regular Expressions (Regex) for accurate word and sentence segmentation.

Replace the contents of your MainWindow.xaml.cs with the following code:

using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Linq;
using System.Text;
using System.Text.RegularExpressions;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;

namespace WordCounterApp
{
    // -------------------------------------------------------------------------
    // 1. STATISTIC MODEL CLASS
    // Used to hold and display the data for each of the five tiles.
    // -------------------------------------------------------------------------
    public class StatisticItem : INotifyPropertyChanged
    {
        private string _value = "0";
        public string Value
        {
            get => _value;
            set
            {
                if (_value != value)
                {
                    _value = value;
                    OnPropertyChanged(nameof(Value));
                }
            }
        }

        public string Label { get; set; }
        public string IconGlyph { get; set; } // Segoe MDL2 Assets glyph code
        public SolidColorBrush IconColor { get; set; }

        public event PropertyChangedEventHandler PropertyChanged;
        protected void OnPropertyChanged(string propertyName)
        {
            PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
        }
    }

    // -------------------------------------------------------------------------
    // 2. MAIN WINDOW LOGIC
    // -------------------------------------------------------------------------
    public partial class MainWindow : Window, INotifyPropertyChanged
    {
        private string _inputText = "";

        public string InputText
        {
            get => _inputText;
            set
            {
                if (_inputText != value)
                {
                    _inputText = value;
                    OnPropertyChanged(nameof(InputText));
                }
            }
        }

        public List<StatisticItem> Statistics { get; set; }

        public MainWindow()
        {
            // Initialize the list of statistics with their static properties (Labels, Icons, Colors)
            Statistics = new List<StatisticItem>
            {
                new StatisticItem { Label = "WORDS", IconGlyph = "\xE762", IconColor = (SolidColorBrush)new BrushConverter().ConvertFromString("#4CAF50") }, // Green, Chart Icon
                new StatisticItem { Label = "CHARACTERS", IconGlyph = "\xE7C3", IconColor = (SolidColorBrush)new BrushConverter().ConvertFromString("#2196F3") }, // Blue, Document Icon
                new StatisticItem { Label = "SENTENCES", IconGlyph = "\xE8A4", IconColor = (SolidColorBrush)new BrushConverter().ConvertFromString("#9C27B0") }, // Purple, Question/Exclamation Mark Icon
                new StatisticItem { Label = "PARAGRAPHS", IconGlyph = "\xE8E2", IconColor = (SolidColorBrush)new BrushConverter().ConvertFromString("#FF9800") }, // Orange, Text Align Icon
                new StatisticItem { Label = "~MIN READ", IconGlyph = "\xE916", IconColor = (SolidColorBrush)new BrushConverter().ConvertFromString("#00BCD4") } // Teal, Clock/Time Icon
            };

            InitializeComponent();

            // Set the DataContext so XAML bindings work against this object
            DataContext = this;

            // Initialize counts
            UpdateCounts();
        }

        // ---------------------------------------------------------------------
        // DATA COUNTING LOGIC
        // ---------------------------------------------------------------------

        private void InputTextBox_TextChanged(object sender, TextChangedEventArgs e)
        {
            // The InputText property is already updated via TwoWay binding,
            // so we just need to call the count update method.
            UpdateCounts();
        }

        private void UpdateCounts()
        {
            string text = InputText.Trim();

            // 1. Character Count
            int characterCount = text.Length;

            // 2. Word Count
            // Use regex to find sequences of word characters (\w+) separated by word boundaries (\b)
            int wordCount = Regex.Matches(text, @"\b\w+\b").Count;

            // 3. Sentence Count
            // Find periods, question marks, or exclamation marks followed by a space or the end of the string
            int sentenceCount = Regex.Matches(text, @"[.!?](\s|$)").Count;
            // Handle edge case of completely empty input
            if (string.IsNullOrWhiteSpace(text)) { sentenceCount = 0; }
            // Handle case where text exists but has no punctuation (e.g., a single phrase)
            else if (sentenceCount == 0 && wordCount > 0) { sentenceCount = 1; }


            // 4. Paragraph Count
            // Split by double newline characters, removing empty entries (standard paragraph separation)
            string[] paragraphs = text.Split(new[] { "\r\n\r\n", "\n\n" }, StringSplitOptions.RemoveEmptyEntries);
            int paragraphCount = paragraphs.Length;
            if (string.IsNullOrWhiteSpace(text)) { paragraphCount = 0; } // Ensure empty input is 0

            // 5. Min Read (assuming average reading speed of 200 Words Per Minute)
            double minRead = (double)wordCount / 200.0;
            string minReadDisplay = minRead < 1.0 ? $"{(int)(minRead * 60)} SEC" : $"{minRead:0.0} MIN";
            if (wordCount == 0) { minReadDisplay = "0"; }

            // Update the bound properties
            Statistics[0].Value = wordCount.ToString("N0");
            Statistics[1].Value = characterCount.ToString("N0");
            Statistics[2].Value = sentenceCount.ToString("N0");
            Statistics[3].Value = paragraphCount.ToString("N0");
            Statistics[4].Value = minReadDisplay;
        }

        // ---------------------------------------------------------------------
        // BUTTON EVENT HANDLERS
        // ---------------------------------------------------------------------

        private void ClearText_Click(object sender, RoutedEventArgs e)
        {
            InputText = "";
            InputTextBox.Focus();
        }

        private void CopyText_Click(object sender, RoutedEventArgs e)
        {
            if (!string.IsNullOrEmpty(InputText))
            {
                Clipboard.SetText(InputText);
            }
        }

        // ---------------------------------------------------------------------
        // INotifyPropertyChanged IMPLEMENTATION
        // ---------------------------------------------------------------------
        public event PropertyChangedEventHandler PropertyChanged;
        protected void OnPropertyChanged(string propertyName)
        {
            PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
        }
    }
}

The magic happens inside the UpdateCounts() method, which is called every time the text in our main input box changes.

The challenge here is not just counting characters, but accurately counting words, sentences, and paragraphs, which requires handling tricky punctuation and whitespace.

Character Count: This is the easiest. We just take the length of the string after trimming any excess space: text.Length.
Word Count: For accurate word counting, we use a regular expression. This expression looks for word characters (\w+) separated by boundaries (\b). This correctly ignores punctuation and multiple spaces:

int wordCount = Regex.Matches(text, @"\b\w+\b").Count;

Sentence Count: Similarly, we use Regex to find end-of-sentence punctuation — periods, question marks, or exclamation points — that are immediately followed by a space or the end of the input string:

int sentenceCount = Regex.Matches(text, @"[.!?](\s|$)").Count;

Min Read: We calculate the reading time assuming a standard speed of 200 words per minute. We use a little conditional logic to display it as seconds if it’s under a minute, or minutes otherwise:

double minRead = (double)wordCount / 200.0; string minReadDisplay = minRead < 1.0 ? $"{(int)(minRead * 60)} SEC" : $"{minRead:0.0} MIN";

Finally, we update the Value property of each StatisticItem in our list. Since these items implement INotifyPropertyChanged, the UI automatically refreshes!

Step 3: Design the Modern Dark UI (XAML)

The dark mode design uses two primary colors: a deep background (#1F2430) and a slightly lighter panel color (#2A303C).

The key to a clean, maintainable dashboard is the ItemsControl. Instead of manually defining five statistic cards, we bind the control to our Statistics list and use an ItemTemplate and UniformGrid to lay out the data automatically.

Replace the contents of your MainWindow.xaml file:

<Window x:Class="WordCounterApp.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:WordCounterApp"
        mc:Ignorable="d"
        Title="Word Counter" Height="650" Width="900"
        Background="#1F2430">

    <!-- Window/App-wide Styles -->
    <Window.Resources>
        <!-- Style for the statistic numbers (0) -->
        <Style x:Key="StatisticValue" TargetType="TextBlock">
            <Setter Property="FontSize" Value="32"/>
            <Setter Property="FontWeight" Value="Bold"/>
            <Setter Property="Foreground" Value="#E0E6F0"/>
            <Setter Property="Margin" Value="0,10,0,5"/>
            <Setter Property="HorizontalAlignment" Value="Center"/>
        </Style>

        <!-- Style for the statistic labels (WORDS, CHARACTERS, etc.) -->
        <Style x:Key="StatisticLabel" TargetType="TextBlock">
            <Setter Property="FontSize" Value="14"/>
            <Setter Property="Foreground" Value="#9AA3B5"/>
            <Setter Property="HorizontalAlignment" Value="Center"/>
            <Setter Property="FontWeight" Value="SemiBold"/>
        </Style>

        <!-- Style for the statistic card icons -->
        <Style x:Key="StatisticIcon" TargetType="TextBlock">
            <Setter Property="FontSize" Value="24"/>
            <Setter Property="FontFamily" Value="Segoe MDL2 Assets"/>
            <Setter Property="Width" Value="30"/>
            <Setter Property="Height" Value="30"/>
            <!-- 
            *** FIX APPLIED HERE: CornerRadius property removed from TextBlock style. ***
            The CornerRadius is correctly applied to the Border element in the ItemTemplate. 
            <Setter Property="CornerRadius" Value="8"/> 
            -->
            <Setter Property="VerticalAlignment" Value="Center"/>
            <Setter Property="HorizontalAlignment" Value="Left"/>
            <Setter Property="Padding" Value="6"/>
            <Setter Property="TextAlignment" Value="Center"/>
            <Setter Property="Foreground" Value="White"/>
            <Setter Property="Margin" Value="15,0,0,0"/>
        </Style>

        <!-- Style for the main content panels (Input/Statistics) -->
        <Style x:Key="PanelHeader" TargetType="TextBlock">
            <Setter Property="FontSize" Value="20"/>
            <Setter Property="FontWeight" Value="SemiBold"/>
            <Setter Property="Foreground" Value="#E0E6F0"/>
            <Setter Property="Margin" Value="0,0,0,10"/>
        </Style>
    </Window.Resources>

    <Grid Margin="20">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <!-- Header -->
            <RowDefinition Height="*"/>
            <!-- Input Text Area -->
            <RowDefinition Height="Auto"/>
            <!-- Statistics Header -->
            <RowDefinition Height="Auto"/>
            <!-- Statistics Cards -->
        </Grid.RowDefinitions>

        <!-- 1. Header -->
        <DockPanel Grid.Row="0" Margin="0,0,0,10">
            <!-- Simple Calculator Icon (using Segoe MDL2 Assets) -->
            <TextBlock FontSize="28" Foreground="#FF9800" VerticalAlignment="Center" Margin="0,0,10,0"
                       Text="🧾"/>
            <TextBlock Text="Word Counter" FontSize="28" FontWeight="Bold" Foreground="#E0E6F0"/>
        </DockPanel>

        <!-- 2. Input Text Area Panel -->
        <Border Grid.Row="1" Background="#2A303C" CornerRadius="10" Padding="15" Margin="0,0,0,20">
            <Grid>
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto"/>
                    <RowDefinition Height="*"/>
                </Grid.RowDefinitions>

                <!-- Input Header and Actions -->
                <DockPanel Grid.Row="0" Margin="0,0,0,10">
                    <StackPanel Orientation="Horizontal" DockPanel.Dock="Right">
                        <!-- Clear Button (Trash icon) -->
                        <Button Style="{StaticResource {x:Static ToolBar.ButtonStyleKey}}" 
                                Click="ClearText_Click" Margin="0,0,5,0" ToolTip="Clear Text">
                            <TextBlock Text="&#xE74D;" FontFamily="Segoe MDL2 Assets" Foreground="#9AA3B5" FontSize="16"/>
                        </Button>
                        <!-- Copy Button (Clipboard icon) -->
                        <Button Style="{StaticResource {x:Static ToolBar.ButtonStyleKey}}" 
                                Click="CopyText_Click" ToolTip="Copy Text to Clipboard">
                            <TextBlock Text="&#xE8C8;" FontFamily="Segoe MDL2 Assets" Foreground="#9AA3B5" FontSize="16"/>
                        </Button>
                    </StackPanel>
                    <TextBlock Text="Input Text" Style="{StaticResource PanelHeader}"/>
                </DockPanel>

                <!-- Input TextBox -->
                <TextBox Grid.Row="1" 
                         x:Name="InputTextBox" 
                         Text="{Binding InputText, UpdateSourceTrigger=PropertyChanged}" 
                         AcceptsReturn="True" 
                         TextWrapping="Wrap"
                         VerticalScrollBarVisibility="Auto"
                         Background="#1F2430"
                         Foreground="#E0E6F0"
                         BorderBrush="#3B4450"
                         BorderThickness="1"
                         Padding="10"
                         FontSize="16"
                         CaretBrush="#E0E6F0"
                         TextChanged="InputTextBox_TextChanged">
                    <TextBox.Resources>
                        <Style TargetType="{x:Type Border}">
                            <Setter Property="CornerRadius" Value="5"/>
                        </Style>
                    </TextBox.Resources>
                    <!-- Placeholder Text -->
                    <TextBox.ToolTip>
                        <TextBlock Text="Paste or type your text here..."/>
                    </TextBox.ToolTip>
                </TextBox>

            </Grid>
        </Border>

        <!-- 3. Statistics Header -->
        <TextBlock Grid.Row="2" Text="Statistics" Style="{StaticResource PanelHeader}" Margin="0,0,0,10"/>

        <!-- 4. Statistics Cards: Refactored to use ItemsControl with a UniformGrid ItemsPanel -->
        <ItemsControl Grid.Row="3" ItemsSource="{Binding Statistics}" MinHeight="150">

            <!-- ItemsPanel defines the layout for the collection (a 5-column UniformGrid) -->
            <ItemsControl.ItemsPanel>
                <ItemsPanelTemplate>
                    <UniformGrid Columns="5"/>
                </ItemsPanelTemplate>
            </ItemsControl.ItemsPanel>

            <!-- ItemTemplate defines the visual appearance of each StatisticItem -->
            <ItemsControl.ItemTemplate>
                <DataTemplate>
                    <Border Background="#2A303C" CornerRadius="10" Margin="5" Padding="10" Width="Auto">
                        <StackPanel VerticalAlignment="Center">
                            <!-- Icon Placeholder -->
                            <Border Width="40" Height="40" CornerRadius="8" Padding="0,10,0,0" 
                                    HorizontalAlignment="Left" Margin="5,0,0,10"
                                    Background="{Binding IconColor}">
                                <TextBlock Text="{Binding IconGlyph}" Style="{StaticResource StatisticIcon}" 
                                           Foreground="White" FontFamily="Segoe MDL2 Assets" Margin="0" Padding="0"/>
                            </Border>

                            <!-- Value -->
                            <TextBlock Text="{Binding Value}" Style="{StaticResource StatisticValue}"/>

                            <!-- Label -->
                            <TextBlock Text="{Binding Label}" Style="{StaticResource StatisticLabel}" Margin="0,0,0,5"/>
                        </StackPanel>
                    </Border>
                </DataTemplate>
            </ItemsControl.ItemTemplate>

        </ItemsControl>

    </Grid>
</Window>

Dark Theme: We set the main window background to a dark gray #1F2430 and use a slightly lighter gray #2A303C for the panel backgrounds. This contrast is key.
Layout: We use a simple Grid with four rows: Header, Input Area, Statistics Header, and the Statistics Cards. The Input Area row uses Height="*" so it expands to fill the remaining space.
The Input Box: The main TextBox is bound directly to our InputText property in C#. Crucially, we use the TextChanged="InputTextBox_TextChanged" event, which triggers our UpdateCounts() method every time the user types.
The Statistics Cards (ItemsControl Fix): This is where we make the magic happen with the list. Instead of manually creating five cards, we use an ItemsControl bound to our **Statistics **list:

<ItemsControl Grid.Row="3" ItemsSource="{Binding Statistics}">
    <ItemsControl.ItemsPanel>
        <!-- Lays out the items in a 5-column grid -->
        <ItemsPanelTemplate>
            <UniformGrid Columns="5"/>
        </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>

    <ItemsControl.ItemTemplate>
        <!-- Defines the look of ONE single StatisticItem -->
        <DataTemplate>
            <Border Background="#2A303C" CornerRadius="10" Margin="5" Padding="10">
                <StackPanel>
                    <!-- Icon Border, uses IconColor and CornerRadius -->
                    <Border Background="{Binding IconColor}" CornerRadius="8">
                        <TextBlock Text="{Binding IconGlyph}" Style="{StaticResource StatisticIcon}"/>
                    </Border>
                    <!-- Value Block -->
                    <TextBlock Text="{Binding Value}" Style="{StaticResource StatisticValue}"/>
                    <!-- Label Block -->
                    <TextBlock Text="{Binding Label}" Style="{StaticResource StatisticLabel}"/>
                </StackPanel>
            </Border>
        </DataTemplate>
    </ItemsControl.ItemTemplate>
</ItemsControl>

The ItemsControl automatically loops through our Statistics list, uses the **UniformGrid **to arrange them evenly, and applies the beautiful dark-themed design from the **ItemTemplate **to each one.

Conclusion

And there you have it! A fully functional, modern word counter built entirely with WPF and C#. We covered data modeling with INotifyPropertyChanged, effective counting using Regex, and powerful UI layout using the ItemsControl.

You can use the principles here for any dashboard or statistics panel you need to build in WPF.

If you have any questions about the Regex, the MVVM binding, or want to know how to add features like syllable count, let me know in the comments below!

Happy coding, and I’ll see you in the next one!

🚀 Build a Sleek, Real-Time Dashboard in WPF using Data Binding and ItemsControl (C# .NET)

VectoArt — Sat, 04 Oct 2025 16:40:14 +0000

There are several new NuGet packages that can help you design modern desktop applications in WinForms. Here are some popular ones, along with examples of how to use them:

MaterialSkin

Description: MaterialSkin is a library for bringing Google’s Material Design principles to Windows Forms applications. It provides a modern look and feel, making your application visually appealing and consistent with contemporary UI standards.

Key Features:

Material Design Components: Buttons, text fields, switches, sliders, and more.
Themes: Light and dark themes with customizable color schemes.
Typography: Follows Material Design typography standards.
Usage Example: To use MaterialSkin, install the package via NuGet:

Install-Package MaterialSkin

using MaterialSkin;
using MaterialSkin.Controls;

public partial class MainForm : MaterialForm
{
    private MaterialSkinManager materialSkinManager;

    public MainForm()
    {
        InitializeComponent();
        materialSkinManager = MaterialSkinManager.Instance;
        materialSkinManager.AddFormToManage(this);
        materialSkinManager.Theme = MaterialSkinManager.Themes.LIGHT;
        materialSkinManager.ColorScheme = new ColorScheme(
            Primary.Blue600, Primary.Blue700,
            Primary.Blue200, Accent.LightBlue200,
            TextShade.WHITE
        );
    }
}

ModernUI

Description: ModernUI (also known as MetroFramework) is a library that provides a set of modern UI controls for Windows Forms applications. It mimics the Metro design language introduced by Microsoft.

Key Features:

Metro-style Controls: Buttons, tiles, progress bars, and more.
Themes and Styles: Light and dark themes with customizable color options.
Layout Management: Easy layout management for creating responsive UIs.
Usage Example: To use ModernUI, install the package via NuGet:

Install-Package ModernUI

using ModernUI.Forms;
using ModernUI.Controls;

public partial class MainForm : MetroForm
{
    public MainForm()
    {
        InitializeComponent();
        var metroButton = new MetroButton
        {
            Text = "Click Me",
            Location = new Point(20, 20)
        };
        this.Controls.Add(metroButton);
    }
}

LiveCharts

Description: LiveCharts is a flexible and powerful charting library for .NET that provides a variety of chart types and interactive features for data visualization.

Key Features:

Chart Types: Line charts, bar charts, pie charts, and more.
Interactivity: Tooltips, animations, and zooming.
Customization: Extensive options for customizing the appearance and behavior of charts.
Usage Example: To use LiveCharts, install the package via NuGet:

Install-Package LiveCharts.WinForms

using LiveCharts;
using LiveCharts.WinForms;
using LiveCharts.Wpf;

public partial class MainForm : Form
{
    public MainForm()
    {
        InitializeComponent();
        var cartesianChart = new CartesianChart
        {
            Location = new Point(10, 10),
            Size = new Size(600, 400)
        };
        cartesianChart.Series = new SeriesCollection
        {
            new LineSeries
            {
                Title = "Series 1",
                Values = new ChartValues<double> { 3, 5, 7, 4 }
            }
        };
        this.Controls.Add(cartesianChart);
    }
}

Syncfusion WinForms UI Controls

Description: Syncfusion offers a comprehensive suite of over 100 WinForms UI controls, providing everything needed to create modern and feature-rich desktop applications.

Key Features:

Rich Set of Controls: Grids, charts, calendars, data visualization, and more.
Performance: Optimized for high performance with large datasets.
Customization: Extensive customization options and styling capabilities.
Support: Professional support and regular updates.
Usage Example: To use Syncfusion controls, install the package via NuGet:

Install-Package Syncfusion.Windows.Forms

using Syncfusion.Windows.Forms;
using Syncfusion.WinForms.Controls;

public partial class MainForm : SfForm
{
    public MainForm()
    {
        InitializeComponent();
        var sfButton = new SfButton
        {
            Text = "Click Me",
            Location = new Point(20, 20)
        };
        this.Controls.Add(sfButton);
    }
}

Conclusion

These packages provide various controls and features that can help you design modern and visually appealing WinForms applications. Each package has its own set of controls and capabilities, so you can choose the ones that best fit your needs.