Atc.Wpf.Theming 4.0.27

ATC.Net WPF

A comprehensive set of modern, enterprise-ready WPF libraries for building professional desktop applications with the MVVM design pattern. This framework provides a rich collection of reusable controls, theming support, font icons, and MVVM infrastructure to accelerate WPF application development.

✨ Key Features

• 🎨 Rich Control Library - 80+ controls including labeled form controls, flyouts, color pickers, selectors, and specialized input controls
• 🏛️ Four-Tier Architecture - Clear separation: Base → Controls → Forms → Components
• 🌓 Light/Dark Theming - Built-in theme support for all controls with easy customization
• 🎯 MVVM Ready - Complete MVVM infrastructure with observable properties and relay commands
• 🔤 Font Icon Support - Render SVG and image resources based on fonts
• ✅ Smart Validation - Deferred validation pattern for better user experience
• 📐 Advanced Layouts - FlexPanel, AutoGrid, StaggeredPanel, Card, Badge and more
• 🌍 Localization - Built-in translation and localization support
• 🎭 Value Converters - Extensive collection of XAML value converters

Requirements

• .NET 10 - Desktop Runtime
• Windows 10 or later

NuGet Packages Provided in this Repository

Nuget package	Description	Dependencies
	Core library: MVVM, layouts, value converters	<ul><li>Atc</li></ul>
	Atomic controls: base inputs, buttons, colors	<ul><li>Atc.Wpf</li><li>Atc.Wpf.FontIcons</li><li>Atc.Wpf.Theming</li></ul>
	Form field controls: 25+ labeled controls with validation	<ul><li>Atc.Wpf.Controls</li><li>Atc.Wpf.Theming</li></ul>
	Composite components: dialogs, viewers, settings	<ul><li>Atc.Wpf.Forms</li><li>Atc.Wpf.FontIcons</li></ul>
	Font-based icon rendering	<ul><li>Atc.Wpf</li></ul>
	Light & Dark mode theming infrastructure	<ul><li>Atc.Wpf</li><li>ControlzEx</li><li>Microsoft.Windows.CsWin32</li></ul>
	Network scanning and discovery controls	<ul><li>Atc.Network</li><li>Atc.Wpf.Controls</li><li>Atc.Wpf.Forms</li></ul>
	Controls for building sample applications	<ul><li>Atc.Wpf.Components</li><li>MdXaml</li></ul>

🔎 Demonstration Application

The demonstration application, Atc.Wpf.Sample, functions as a control explorer. It provides quick visualization of a given control, along with options for copying and pasting the XAML markup and/or the C# code for how to use it.

🎈 Playground and Viewer for a Given Control or Functionality

The following example is taken from the ReplayCommandAsync which illustrates its usage:

• The Sample tab shows how to use the control or feature.
• The XAML tab displays the corresponding XAML markup.
• The CodeBehind tab reveals the underlying code-behind.
• The ViewModel tab displays the associated ViewModel, if used.
• The Readme tab displays the associated [control]_Readme.md, if exist.

Sample	XAML
CodeBehind	ViewModel

🔦 Initial glimpse at the demonstration application

Light-Mode	Dark-Mode
Wpf - AutoGrid	Wpf - AutoGrid
Wpf.Controls - Label MIX	Wpf.Controls - Label MIX
Wpf.Theming - ImageButton	Wpf.Theming - ImageButton
Wpf.FontIcons - Viewer	Wpf.FontIcons - Viewer

🚀 Quick Start Guide

Installation

Add the NuGet packages to your .csproj file:

<ItemGroup>
  
  <PackageReference Include="Atc.Wpf" Version="4.*" />
  <PackageReference Include="Atc.Wpf.Theming" Version="4.*" />

  
  <PackageReference Include="Atc.Wpf.Forms" Version="4.*" />

  
  <PackageReference Include="Atc.Wpf.Components" Version="4.*" />

  
  <PackageReference Include="Atc.Wpf.FontIcons" Version="4.*" />
</ItemGroup>

Configuration

1. Update App.xaml

Add the required resource dictionaries to enable theming and control styles:

<Application
    x:Class="YourApp.App"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:atc="https://github.com/atc-net/atc-wpf/tree/main/schemas">
    <Application.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                
                <ResourceDictionary Source="pack://application:,,,/Atc.Wpf.Theming;component/Styles/Default.xaml" />

                
                <ResourceDictionary Source="pack://application:,,,/Atc.Wpf.Controls;component/Styles/Controls.xaml" />
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
    </Application.Resources>
</Application>

2. Use Controls in XAML

Now you can use all controls with full theming support:

<Window
    xmlns:atc="https://github.com/atc-net/atc-wpf/tree/main/schemas"
    ...>

    
    <atc:LabelTextBox
        LabelText="User Name"
        Text="{Binding UserName}"
        IsMandatory="True" />

    
    <atc:LabelEndpointBox
        LabelText="API Endpoint"
        NetworkProtocol="Https"
        Value="{Binding EndpointUri}" />

    
    <Button Content="Save" Command="{Binding SaveCommand}" />
    <TextBox Text="{Binding Notes}" />
</Window>

All standard WPF controls (Button, TextBox, ComboBox, etc.) are automatically styled with Light/Dark theme support.

🎯 Four-Tier Architecture

Understanding the package hierarchy and when to use each:

Tier	Package	Purpose	Example Controls
1. Base	Atc.Wpf	MVVM, layouts, converters - no UI controls	ViewModelBase, GridEx, FlexPanel
2. Controls	Atc.Wpf.Controls	Atomic/primitive controls	IntegerBox, ToggleSwitch, Flyout, Carousel
3. Forms	Atc.Wpf.Forms	Labeled form fields with validation	LabelTextBox, LabelComboBox, LabelDatePicker
4. Components	Atc.Wpf.Components	Composite high-level components	InfoDialogBox, JsonViewer, ToastNotification

Quick Guidelines:

• Use Form Controls (Atc.Wpf.Forms) for standard forms - they include labels, validation, and mandatory indicators
• Use Base Controls (Atc.Wpf.Controls) when you need custom layouts or are building composite controls
• Use Components (Atc.Wpf.Components) for dialogs, viewers, and settings panels

📋 Control Catalog at a Glance

A quick reference of all controls organized by category:

Category	Controls	Package
Layout Panels	GridEx, AutoGrid, FlexPanel, StaggeredPanel, UniformSpacingPanel, ResponsivePanel, DockPanelPro	Atc.Wpf / Atc.Wpf.Controls
Data Display	Card, Badge, Chip, Avatar, AvatarGroup, Divider, Carousel, Rating	Atc.Wpf.Controls
Flyouts	Flyout, FlyoutHost, FlyoutService	Atc.Wpf.Controls
Input Controls	NumericBox, IntegerBox, DecimalBox, ToggleSwitch, RangeSlider, FilePicker, DirectoryPicker	Atc.Wpf.Controls
Color Controls	HueSlider, SaturationBrightnessPicker, TransparencySlider, WellKnownColorPicker	Atc.Wpf.Controls
Buttons	ImageButton, AuthenticationButton, ConnectivityButton	Atc.Wpf.Controls
Progress	BusyOverlay, LoadingIndicator	Atc.Wpf.Controls
Labeled Form Controls	LabelTextBox, LabelIntegerBox, LabelComboBox, LabelDatePicker, LabelColorPicker, + 20 more	Atc.Wpf.Forms
Dialogs	InfoDialogBox, QuestionDialogBox, InputDialogBox, ColorPickerDialogBox	Atc.Wpf.Forms / Components
Viewers	JsonViewer, TerminalViewer	Atc.Wpf.Components
Notifications	ToastNotification, ToastNotificationManager	Atc.Wpf.Components
Theming	NiceWindow, ThemeSelector, AccentColorSelector	Atc.Wpf.Theming
Font Icons	FontAwesome (3 variants), Bootstrap, MaterialDesign, Weather, IcoFont	Atc.Wpf.FontIcons
Network	NetworkScannerView	Atc.Wpf.Network

💝 MVVM Made Easy

For MVVM infrastructure, add the Atc.XamlToolkit package to your project. This provides powerful source generators and base classes for clean MVVM architecture.

Note: As of version 4.x, Atc.Wpf no longer directly depends on Atc.XamlToolkit to optimize build performance. Add Atc.XamlToolkit directly to your project to use source generators and MVVM base classes.

Key MVVM Features (from Atc.XamlToolkit)

• Observable Properties - Automatic INotifyPropertyChanged implementation via [ObservableProperty] attribute
• Relay Commands - Simple command implementation with CanExecute support via [RelayCommand] attribute
• Async Commands - Built-in support for async/await patterns
• Source Generators - Automatic code generation for ViewModels, DependencyProperties, and AttachedProperties

MVVM Components

Component	Source	Description
ViewModelBase	Atc.XamlToolkit.Mvvm	Base class for ViewModels
ObservableObject	Atc.XamlToolkit.Mvvm	Base class implementing INotifyPropertyChanged
RelayCommand<T>	Atc.XamlToolkit.Command	Command with CanExecute support
RelayCommandAsync<T>	Atc.XamlToolkit.Command	Async command with CanExecute support
[ObservableProperty]	Atc.XamlToolkit	Source generator for properties
[RelayCommand]	Atc.XamlToolkit	Source generator for commands
[DependencyProperty]	Atc.XamlToolkit.Wpf	Source generator for WPF dependency properties
[AttachedProperty]	Atc.XamlToolkit.Wpf	Source generator for WPF attached properties

Learn More

• MVVM Framework Documentation
• Source Generators Documentation
• Atc.XamlToolkit GitHub Repository

Quick MVVM Example

public partial class MainViewModel : ViewModelBase
{
    [ObservableProperty]
    private string userName = string.Empty;

    [ObservableProperty]
    private bool isEnabled = true;

    [RelayCommand(CanExecute = nameof(CanSave))]
    private async Task SaveAsync()
    {
        await SaveUserDataAsync(UserName);
    }

    private bool CanSave() => !string.IsNullOrEmpty(UserName);
}

---

📚 Comprehensive Documentation

Note: While this README provides an overview, the best way to explore all controls and components is to run the Atc.Wpf.Sample application, which includes interactive examples with XAML and code-behind for every control! �

💟 Atc.Wpf - Core WPF Library

The foundation library providing essential WPF controls, layouts, and utilities.

Layout Controls

Modern layout panels and containers for advanced UI composition. See the complete Layout Controls documentation for detailed usage.

Control	Description	Key Features	Documentation
GridEx	Enhanced Grid	String-based row/column definitions	Readme
AutoGrid	Auto-indexed Grid	Automatic child positioning	Readme
FlexPanel	CSS Flexbox panel	Grow/shrink, justify, align	Readme
StaggeredPanel	Masonry layout	Pinterest-style waterfall	Readme
UniformSpacingPanel	Uniform spacing	Consistent gaps + wrapping	Readme
ResponsivePanel	Responsive layout	Breakpoint-based responsive design	Readme
DockPanelPro	IDE-style docking	Resizable regions	Readme

Data Display Controls

Control	Description	Key Features	Documentation
Card	Content container	Elevation, header/footer, expand	Readme
Badge	Status indicator	Notification counts, dots	Readme
Chip	Tag/filter control	Selectable, removable	Readme
Avatar	User profile picture	Initials fallback, status indicator	Readme
Divider	Visual separator	Horizontal/vertical	Readme

Media Controls

• SvgImage - SVG image rendering control

Helpers & Utilities

• PanelHelper - Helper methods for panel layout calculations

Additional Features

• ShaderEffects - HLSL-based visual effects
  • HLSL Shader Compiler Guide
• Translation & Localization - Multi-language support
• ValueConverters - Collection of XAML value converters

💟 Atc.Wpf.Controls - Atomic Control Library

A collection of primitive/atomic WPF controls - single-purpose building blocks.

⭐ Input Controls

Unlabeled input controls that provide core functionality:

Category	Controls
Number Input	NumericBox, IntegerBox, DecimalBox, IntegerXyBox, DecimalXyBox, PixelSizeBox
Toggle & Slider	ToggleSwitch, RangeSlider, Rating
Pickers	DirectoryPicker, FilePicker
Text Input	RichTextBoxEx

Button Controls

• AuthenticationButton, ConnectivityButton, ImageButton, ImageToggledButton

Color Controls

• HueSlider, SaturationBrightnessPicker, TransparencySlider, WellKnownColorPicker

Layout Controls

• DockPanelPro, GridLines, GroupBoxExpander

Data Display Controls

Control	Description	Documentation
Avatar	User profile pictures with initials fallback	Readme
AvatarGroup	Multiple overlapping avatars	-
Badge	Status indicator overlay	-
Card	Elevated container with header/footer	-
Carousel	Image carousel/slideshow with navigation	Readme
Chip	Tag/filter interactive elements	-
Divider	Visual separator (horizontal/vertical)	-

Flyout Controls

Sliding panel overlays that slide in from window edges - inspired by Azure Portal blade pattern.

Control	Description	Documentation
Flyout	Sliding panel overlay from edges (Right, Left, Top, Bottom)	Readme
FlyoutHost	Container that manages multiple flyouts with nesting support	Readme
FlyoutService	MVVM-friendly service for programmatic flyout management	Readme

Key Features:

• 🎯 Four positions: Right (default), Left, Top, Bottom
• 🌓 Light dismiss (click outside or Escape key)
• 📚 Nested flyouts (Azure Portal drill-down style)
• 🎬 Smooth slide animations
• 🎨 Full theming support

<flyouts:Flyout x:Name="SettingsFlyout" Header="Settings" FlyoutWidth="400">
    <StackPanel Margin="16">
        <CheckBox Content="Enable notifications" />
        <CheckBox Content="Dark mode" />
    </StackPanel>
</flyouts:Flyout>

Progress Controls

• BusyOverlay, LoadingIndicator

💟 Atc.Wpf.Forms - Form Field Library

Form field components with labels, validation, and mandatory indicators for building data entry forms.

⭐ Label Controls (25+ Controls)

Labeled input controls with built-in validation and consistent styling:

• Text Input: LabelTextBox, LabelPasswordBox
• Number Input: LabelIntegerBox, LabelDecimalBox, LabelIntegerXyBox, LabelDecimalXyBox, LabelPixelSizeBox
• Date/Time: LabelDatePicker, LabelTimePicker, LabelDateTimePicker
• Selection: LabelCheckBox, LabelComboBox, LabelToggleSwitch, LabelSlider
• Selectors: LabelAccentColorSelector, LabelCountrySelector, LabelFontFamilySelector, LabelLanguageSelector, LabelThemeSelector, LabelWellKnownColorSelector
• Pickers: LabelColorPicker, LabelDirectoryPicker, LabelFilePicker
• Network: LabelEndpointBox (protocol + host + port with validation)
• Display: LabelContent, LabelTextInfo

All label controls support:

• ✅ Deferred validation (shows errors only after user interaction)
• ✅ Mandatory field indicators
• ✅ Consistent styling and theming
• ✅ MVVM-friendly data binding

Form Infrastructure

• Abstractions: ILabelControl, ILabelControlsForm
• Extractors: Form data extraction utilities
• Factories: LabelControlFactory, LabelControlsFormFactory
• Writers: Form rendering utilities

💟 Atc.Wpf.Components - Composite Components

Higher-level composite components combining multiple controls for business-ready UI.

Dialogs

• InfoDialogBox, QuestionDialogBox, InputDialogBox, InputFormDialogBox, BasicApplicationSettingsDialogBox
• DialogService - MVVM-friendly dialog management

Note: ColorPickerDialogBox is located in Atc.Wpf.Forms.Dialogs

Viewers

• JsonViewer - JSON document viewer with syntax highlighting
• TerminalViewer - Terminal/console output viewer

Monitoring

• ApplicationMonitorView - Application event monitoring component

Notifications

• ToastNotificationManager, ToastNotificationArea, ToastNotification - Toast notification system

Settings

• BasicApplicationSettingsView, BasicApplicationSettingsViewModel

💟 Atc.Wpf.FontIcons - Font-Based Icons

Render SVG and image resources using font-based icon systems for crisp, scalable icons.

Features

• 🎨 Scalable vector icons
• 🎯 Font-based rendering
• 📦 Multiple icon font support
• 🌈 Color and size customization

Resources

• ValueConverters - Icon-related value converters

💟 Atc.Wpf.Theming - Light & Dark Mode

Complete theming infrastructure with Light and Dark mode support for all WPF controls.

Features

• 🌓 Light/Dark theme switching
• 🎨 Accent color customization
• 🎯 Automatic control styling
• 🔄 Runtime theme changes
• 📱 Consistent visual design

Resources

• ValueConverters - Theme-aware value converters

💟 Atc.Wpf.Network - Network Discovery Controls

Specialized controls for network scanning and host discovery, built on the Atc.Network library.

NetworkScannerView Control

A comprehensive network scanner control that displays scan results in a sortable, filterable ListView.

Features:

• 🔍 IP range scanning with configurable start/end addresses
• 📊 Real-time progress reporting with cancellation support
• 🌐 Displays IP address, hostname, MAC address, and vendor information
• 🚪 Port scanning with configurable port lists
• 📶 Network quality indicators (ping status visualization)
• 🔄 Sortable columns with click-to-sort headers
• 🎛️ Configurable column visibility
• 🔎 Built-in filtering (show only successful pings, show only hosts with open ports)
• 🌍 Localization support (English, Danish, German)

Usage:

<Window xmlns:atcNetwork="clr-namespace:Atc.Wpf.Network;assembly=Atc.Wpf.Network">
    <atcNetwork:NetworkScannerView DataContext="{Binding NetworkScannerVm}" />
</Window>

// ViewModel setup
var viewModel = new NetworkScannerViewModel
{
    StartIpAddress = "192.168.1.1",
    EndIpAddress = "192.168.1.254",
    PortsNumbers = [80, 443, 22, 3389]
};

// Start scanning
await viewModel.ScanCommand.ExecuteAsync(null);

// Handle selection changes
viewModel.EntrySelected += (sender, args) =>
{
    var selectedHost = args.NetworkHost;
    // Handle selected host
};

ViewModels:

• NetworkScannerViewModel - Main ViewModel for the scanner control
• NetworkHostViewModel - Represents a discovered network host
• NetworkScannerColumnsViewModel - Controls column visibility
• NetworkScannerFilterViewModel - Controls result filtering

---

🎯 Source Generators

Atc.Wpf includes powerful source generators from Atc.XamlToolkit to reduce boilerplate code:

• ViewModel Generator - Auto-generate ViewModels with [ObservableProperty] and [RelayCommand]
• DependencyProperty Generator - Auto-generate WPF dependency properties with [DependencyProperty]
• AttachedProperty Generator - Auto-generate WPF attached properties with [AttachedProperty]

---

🤝 Contributing

We welcome contributions! Please read our guidelines:

• Contribution Guidelines - How to contribute to ATC projects
• Coding Guidelines - Code style and best practices

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

🙏 Acknowledgments

Built with ❤️ by the ATC.Net team and contributors.

• Visit atc-net.github.io for more ATC projects
• Report issues on GitHub Issues
• Contribute on GitHub