WPFExamples

Introduction

WPFExamples is a trial ground project to show case different components in Windows Presentation Foundation (WPF) framework using C#. The goal is the show example implementations of each component, categorically and logically organized. In some cases, allow the user to see existing examples and in few limited cases even control the parameters and see how the changes look in real time for simple Controls.

Note: The primary purpose is to get a look and feel on how an UI element is visible and how we can control it. Not learn how to code it.

If you want to learn about WPF, there are some nice tutorials available online.

---

Table of Contents

1. BasicControls
2. Feature.Infrastructure
3. WPF_Components_Demo
4. DotnetFrameworkReferenceLibraries (Submodule)
5. Architectural Overview
6. Code Schema
7. How to Extend
8. License

---

Projects & Their Roles

Core Projects

1. Feature.Infrastructure

• Role: Provides infrastructure code that defines interfaces needed for Feature based Demonstrations. This will be Foundational project that other Feature Project will depend on
• Key Interfaces:
  • IFeatureDemoTopic - This is the primary contract that new Demo Classes will implement(i.e. Controls). This Topic and its SubTopics are directly displayed in Table of Contents for Demo.
  • IFeatureDemoSubTopic - This is the contract for the sub topics (i.e. Buttons, Labels, ComboBoxes) etc
  • ISubTopicMetadata - Metadata needed for SubTopic to be binded to Topic (i.e. Topic: Control, SubTopic: Button Examples)

2. Submodules & Their Roles

DotnetFrameworkReferenceLibraries

• Role: Contains reference libraries for .NET Framework integration, enabling extended functionality and compatibility for WPF projects.

3. WPF_Components_Demo

• Role: Contains demos and sample code for foundational WPF controls (buttons, textboxes, etc.), illustrating customization and event handling.

Extension Projects

Info These are to be created as WPF .Net Framework Class Libraries. They should output their binaries to $(SolutionDir)/bin/$(Configuration)/FeaturesDemo folder for MEF to pickup

BasicControls

Role This porject is created to showcase basic controls like Label, TextBox, TextBlock, Combobox etc.

Architectural Overview

The repository follows a modular architecture:

• UI Layer: (BasicControls, WPF_Components_Demo)
  • Focuses on presentation, user interaction, and UI customization.
• Infrastructure Layer: (Feature.Infrastructure)
  • Handles business logic, data access, and common utilities.
• External Libraries: (DotnetFrameworkReferenceLibraries)
  • Provides additional .NET Framework capabilities as needed.

Each module is self-contained but designed to interoperate via shared interfaces and data models.

---

Code Schema (Auto-Generated Example)

Here’s an example schema describing typical structure:

WPFExamples/
│
├── BasicControls/
│   ├── ButtonDemo.xaml.cs
│   ├── TextBoxDemo.xaml.cs
│   └── ...
├── Feature.Infrastructure/
│   ├── Service/
│   │   └── LoggingService.cs
│   ├── Helpers/
│   │   └── DataHelper.cs
│   └── ...
├── WPF_Components_Demo/
│   ├── MainWindow.xaml.cs
│   ├── ViewModels/
│   │   └── MainViewModel.cs
│   └── ...
├── DotnetFrameworkReferenceLibraries/ (submodule)
│   └── ...
└── WPFExamples.sln

---

Sample Code: How to Extend

To add a new demo for a feature, for example a demo for SubTopic Border under Topic Additional Controls, follow these steps:

1. Reuse an existing Addin Project created earlier for Additional Controls OR
2. Create a new .Net Framework WPF Class Library. Call it AdditionalControls
3. For this example I am assuming the latter
4. Set its output Directory to $(SolutionDir)/bin/$(Configuration)/Addons
5. Add a new FeatureDemoTopic and SubFeatureDemoTopic classes:

// AdditionalControls/BorderExample.cs
namespace AdditionalControls
{
    public class AddonMetadataKeys // <-- Can be Any Name
    {
        public const string AdditionalControlsTitle = "Additional Controls";
        public const string BorderControlTitle = "Border Controls";
    }
    
    [Export(typeof(IFeatureDemoTopic))]
    public class AdditionalControls : FeatureDemoTopic
    {
        public override string Title => AddonMetadataKeys.AdditionalControlsTitle; // <-- Topic Name
    }
    
    [Export(typeof(IFeatureDemoSubTopic))]
    [ExportMetadata(MetaDataKeys.TopicName, AddonMetadataKeys.AdditionalControlsTitle)] // <-- pass Topic Name
    public class BorderSubTopic : IFeatureDemoSubTopic
    {
        public string Title => AddonMetadataKeys.BorderControlTitle; // <-- Set the SubTopic, aka Control Name
    }
}

6. Add a new Window for the UI: .xaml and backing .cs

   <!-- AdditionalControls/Border/borderDemoView.xaml -->
    <UserControl x:Class="AdditionalControls.Border.BorderDemoView"
                 ...>
        <StackPanel>
            <TextBlock Text="Different Border Styles in WPF" FontSize="18" FontWeight="Bold" Margin="0,0,0,10" HorizontalAlignment="Center"/>
            <ItemsControl ItemsSource="{Binding Samples}">
                <ItemsControl.ItemTemplate>
                    <DataTemplate>
                        <StackPanel Orientation="Vertical" >
                           ...
                        </StackPanel>
                    </DataTemplate>
                </ItemsControl.ItemTemplate>                
            </ItemsControl>
        </StackPanel>
    </UserControl>

    namespace AdditionalControls.Border
    {
        /// <summary>
        /// Interaction logic for BorderDemoView.xaml
        /// </summary>
        public partial class BorderDemoView : UserControl
        {
            public BorderDemoView()
            {
                InitializeComponent();
            }
        }
    }

7. Add viewmodel AdditionalControls.Border.BorderDemoViewModel

   internal class BorderDemoViewModel : ControlDemoViewModel<BorderProperties>
   {
       public BorderDemoViewModel()
       {
           Header = "Samples of Border control in WPF"; // <-- Give some text as header
           // Initialize the collection `Samples` with some sample data
           Samples = new ObservableCollection<BorderProperties>
           {
           ...
           };
       }
   }

8. Add model AdditionalControls.Border.BorderExample

   internal class BorderProperties {} // add any properties you want to control

---

License

See LICENSE.txt for details.