Build a Task Manager with C# WPF & MVVM - Part 3: Custom UI Design | Styling in WPF

Introduction

In this tutorial, we will enhance the user interface of our task manager application using C# WPF and the MVVM pattern. This part focuses on custom UI design, styling, and improving user experience through unique color schemes and controls. By the end of this guide, you will have practical knowledge on implementing custom colors, styles, and a modern search textbox.

Step 1: Create Custom Colours

To give your task manager a distinct look, you'll need to define and apply custom color schemes.

1. Define Color Resources

   • Open your App.xaml file.
   • Add the following color resources within the <Application.Resources> tag:

     <Color x:Key="PrimaryColor">#FF6200EE</Color>
     <Color x:Key="SecondaryColor">#FF03DAC5</Color>
     

2. Use Color Resources

   • Apply these colors to UI elements. For example, to set a button's background:

     <Button Background="{DynamicResource PrimaryColor}" Content="Add New Task"/>
     

3. Test Your Colors

   • Run the application to see how the new colors affect the overall design.

Step 2: Design Custom Styles

Creating custom styles for your buttons will improve aesthetics and usability.

1. Create a Style for Buttons

   • In your App.xaml, define a new style:

     <Style TargetType="Button" x:Key="CustomButtonStyle">
         <Setter Property="Background" Value="{DynamicResource PrimaryColor}"/>
         <Setter Property="Foreground" Value="White"/>
         <Setter Property="Padding" Value="10,5"/>
         <Setter Property="BorderThickness" Value="0"/>
         <Setter Property="Cursor" Value="Hand"/>
         <Setter Property="FontWeight" Value="Bold"/>
     </Style>
     

2. Apply the Custom Style

   • Use your custom style in buttons:

     <Button Style="{StaticResource CustomButtonStyle}" Content="Search"/>
     

3. Create Variants if Necessary

   • If you need different styles (e.g., hover effect), consider creating additional styles or using triggers.

Step 3: Implement a Custom Textbox with Placeholder

A custom textbox enhances user interaction, especially for search functionality.

1. Create a Custom Control

   • In your project, add a new User Control named PlaceholderTextBox.xaml.
   • Define the control layout:

     <TextBox x:Name="textBox" GotFocus="TextBox_GotFocus" LostFocus="TextBox_LostFocus">
         <TextBox.Style>
             <Style TargetType="TextBox">
                 <Setter Property="Foreground" Value="Gray"/>
                 <Setter Property="Text" Value="Search..."/>
             </Style>
         </TextBox.Style>
     </TextBox>
     

2. Add Focus Logic

   • In the code-behind PlaceholderTextBox.xaml.cs, manage the placeholder:

     private void TextBox_GotFocus(object sender, RoutedEventArgs e)
     {
         if (textBox.Text == "Search...")
         {
             textBox.Text = "";
             textBox.Foreground = Brushes.Black;
         }
     }
     
     private void TextBox_LostFocus(object sender, RoutedEventArgs e)
     {
         if (string.IsNullOrWhiteSpace(textBox.Text))
         {
             textBox.Text = "Search...";
             textBox.Foreground = Brushes.Gray;
         }
     }
     

3. Use the Custom Textbox

   • Finally, include your PlaceholderTextBox in your main window:

     <local:PlaceholderTextBox Width="200" Height="30"/>
     

Conclusion

In this tutorial, we successfully enhanced our task manager's UI by creating custom colors, styles for buttons, and a user-friendly textbox with a placeholder. These improvements not only make your application visually appealing but also improve the overall user experience.

For the next steps, consider exploring more advanced UI components and additional features for your task manager as you progress in your development journey. Stay tuned for Part 4, where we will dive deeper into user interface enhancements!