DEV Community

Mohammed Chami
Mohammed Chami

Posted on

Extended WPF Toolkit include advanced input controls, layouts, and themes

#csharp #dotnet #wpf #programming

The Extended WPF Toolkit is a collection of WPF controls that include advanced input controls, layouts, and themes. I listed below few controls that are commonly used:

1. Installing the Extended WPF Toolkit

First, install the NuGet package:

Install-Package Xceed.Wpf.Toolkit
Enter fullscreen mode Exit fullscreen mode

Then, add the namespace in your XAML:

xmlns:xctk="http://schemas.xceed.com/wpf/xaml/toolkit"
Enter fullscreen mode Exit fullscreen mode

Commonly Used Controls and Examples

2. WatermarkTextBox (TextBox with Hint)

A WatermarkTextBox provides placeholder text inside a textbox.

<xctk:WatermarkTextBox Width="200" Watermark="Enter your name..." />
Enter fullscreen mode Exit fullscreen mode

3. DateTimePicker

A DateTimePicker allows users to select a date and time.

<xctk:DateTimePicker Format="FullDateTime" Value="{Binding SelectedDate}" />
Enter fullscreen mode Exit fullscreen mode

Code-behind (C#)

public DateTime SelectedDate { get; set; } = DateTime.Now;
Enter fullscreen mode Exit fullscreen mode

4. NumericUpDown (Number Input)

A control that lets users enter numeric values with increment/decrement buttons.

<xctk:IntegerUpDown Width="100" Value="10" Minimum="0" Maximum="100" />
Enter fullscreen mode Exit fullscreen mode

5. BusyIndicator

Displays a loading animation while performing operations.

<xctk:BusyIndicator IsBusy="{Binding IsLoading}">
    <TextBlock Text="Loading data..." />
</xctk:BusyIndicator>
Enter fullscreen mode Exit fullscreen mode

Code-behind (C#)

public bool IsLoading { get; set; } = true;
Enter fullscreen mode Exit fullscreen mode

6. ColorPicker

A control that allows users to pick a color.

<xctk:ColorPicker SelectedColor="Blue" />
Enter fullscreen mode Exit fullscreen mode

7. CheckComboBox

A ComboBox that allows multiple selections.

<xctk:CheckComboBox ItemsSource="{Binding Countries}" />
Enter fullscreen mode Exit fullscreen mode

Code-behind (C#)

public ObservableCollection<string> Countries { get; set; } = new ObservableCollection<string>
{
    "USA", "Canada", "France", "Germany"
};
Enter fullscreen mode Exit fullscreen mode

8. MessageBox (Custom Dialog)

A custom message box.

Xceed.Wpf.Toolkit.MessageBox.Show("This is a custom message box!", "Notification");
Enter fullscreen mode Exit fullscreen mode

9. PropertyGrid (Object Inspector)

Displays the properties of an object dynamically.

<xctk:PropertyGrid SelectedObject="{Binding Person}" />
Enter fullscreen mode Exit fullscreen mode

Code-behind (C#)

public class Person
{
    public string Name { get; set; } = "John Doe";
    public int Age { get; set; } = 30;
}
public Person Person { get; set; } = new Person();
Enter fullscreen mode Exit fullscreen mode

10. RichTextBoxFormatBar

A WYSIWYG editor for rich text.

<xctk:RichTextBoxFormatBar TargetRichTextBox="{Binding ElementName=MyRichTextBox}" />
<RichTextBox x:Name="MyRichTextBox" />
Enter fullscreen mode Exit fullscreen mode

and there are more.
note it's free for non-commercial use, check their GitHub page for more details:
https://github.com/xceedsoftware/wpftoolkit

Top comments (0)