Future.UX.SourceGenerators 1.0.2

Main Change

Control Generator

The control generator allows users to concentrate more on the UX level. Create a basic partial class inheriting from Control, and a resource dictionary containing the default style and template.

How it works

Any bindings found in the ControlTemplate are converted in to dependency properties automatically. Named elements have their own readonly properties. Also partial voids created for change Callbacks, TemplateApplied and easy wiring for a ClickCommand if the control needs it

Getting set up

Add the nuget

Install-package Future.UX.SourceGenerators 

I recommend a folder structure like this

YourProject -
    - | FUXControls
        - | IconButton
            - | IconButton.cs
            - | IconButton_cg.cs
            - | IconButton_cg.xaml
        - | FancyList
            - | FancyList.cs
            - | FancyList_cg.cs
            - | FancyList_cg.xaml
	YourProject.csproj

Example Usage

For this example I am using Future.UX.FluentIcons nuget to show creation of a simple IconButton control which displays a GlyphIcon.

Install-package Future.UX.FluentIcons 

YourProject.csproj : Setup the generator for MSBuild

<Project Sdk="Microsoft.NET.Sdk">

	<PropertyGroup>
		<OutputType>WinExe</OutputType>
		<TargetFramework>net8.0-windows</TargetFramework>
		<Nullable>enable</Nullable>
		<ImplicitUsings>enable</ImplicitUsings>
		<UseWPF>true</UseWPF>
	</PropertyGroup>
	

	<ItemGroup>
		<AdditionalFiles Include=".\**\*_cg.cs" />
		<AdditionalFiles Include=".\**\*_cg.xaml" />
	</ItemGroup>


	<ItemGroup>
		<PackageReference Include="Future.UX.FluentIcons" Version="0.1.8" />
		<PackageReference Include="Future.UX.SourceGenerators" Version="1.0.2" OutputItemType="Analyzer" ReferenceOutputAssembly="false" />
	</ItemGroup>

</Project>

*_cg.cs : Control Generator specific initialisation of properties. This is useful for custom types, enums etc. This file can be edited at anytime, and it will directly affect the generated partial class on next build.

using System;
using System.Windows.Controls;

namespace YourProject.FUXControls
{
    public partial class IconButton : Control
    {
        // This can be left blank, or used to override types, add enums or create
		// additional dependencies that the UX doesn't require.
        private readonly Icons __Icon;

		// readonly modifier and __ prefix IS REQUIRED for Dependency Property creation.
    {
}

*_cg.xaml : This is the controls Style and Template setup. The idea of the generator is that this part is now the main source of truth. Changes made here directly affect the generated partial class on the next build.

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                    xmlns:controls="clr-namespace:YourProject.FUXControls">

    <Style TargetType="{x:Type controls:IconButton}">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type controls:IconButton}">
                    <Border x:Name="PART_Border" 
                            BorderBrush="{TemplateBinding Background}"
                            CornerRadius="{TemplateBinding CornerRadius}" 
                            Background="{TemplateBinding Background}"
                            Padding="5">
							<TextBlock Text="{TemplateBinding GlyphIcon}" 
									   FontFamily="Segoe MDL2 Assets"
									   FontSize="16"
									   Foreground="{TemplateBinding Foreground}"
									   Margin="3"/>
                    </Border>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
    
</ResourceDictionary>

*.cs : Your standard C# files for all code behind. Editable anytime and should be your main file during use of the control. After creating the 2 previous files and hitting build, the auto generated .g.cs will be added to your solution with all dependency properties, properties and partial voids.

using System.Windows;
using System.Windows.Controls;
using System.Windows.Input;

namespace YourProject.FUXControls
{
    public partial class IconButton : Control
    {
		partial void OnTemplateApplied()
		{
			// Any template parts can be safely accessed here. In the example above I named the Border PART_Border
			// so you can access it here.
			Part_Border.Margin=new Thickness(5);
		}
		// The private readonly Icons __Icon has told the generator to create the dependency and wire
		// up the onpropertychanged which in turn fires this event.
        partial void IconChanged(DependencyPropertyChangedEventArgs e)
        {
			// This essentially works as a relay style converter. When the Icon property changes,
			// a quick call to the IconMap dictionary sets the GlyphIcon property created by the xaml.
            if (e.NewValue is Icons icon)
                GlyphIcon = FluentMap.IconMap[icon];
        }
		
		// By default the generator creates a OnMouseLeftButtonUp+=(_,e)=>Click(e); in the OnTemplateApplied method,
		// a partial void Click(MouseButtonEventArgs e); and a ClickCommand dependency property.
        partial void Click(MouseButtonEventArgs e)
        {
			//As this is a button style control, here you can hook up the already existing ClickCommand.
            ClickCommand?.Execute(e);
        }
    }
}

Outcome

By creating the 3 files above, the generator will produce all the boilerplate code needed to just use this control in any Window, UserControl, or even another FUXControl. The xaml is automatically added to your app's Merged Dictionaries collection, so no other setup is required.

Bug

Unfortunately the automated resource registration is currently not working, so add your controls manually as a merged dictionary in app.xaml.

A fix is coming soon.

This is a VERY basic setup, just for initial setup purposes. Triggers, Animations, VisualStates are all supported so you are free to let your creative juices flow. If you find you need a new dependency property, just edit the _cg.xaml. In this project if you decide you want to have an IconBrush property instead of relying on Foreground. Just change the TextBlock Foreground to {TemplateBinding IconBrush}. Hit build, and the IconBrush Dependency property will get created along with an IconBrushChanged partial void.

Troubleshooting

Visual Studio will try and help you by changing your MSBuild settings itself. I recommend after adding the files, check your csproj file and remove anything that has been added automatically before building for the first time. Your csproj should always look similar to the one above.