vincenth-net / csharpformarkup

Concise, declarative C# UI markup for .NET browser / native UI frameworks

Hi, I'm Vincent Hoogendoorn (aka VincentH.NET): independent Tech Lead, Coding Architect & Software Engineer at InnoWvate.NET. I have 20+ years of hands-on Microsoft .NET development experience.

My passion is to improve the .NET developer productivity & experience.

Current focus: Full stack C# with .NET Aspire, Microsoft Orleans and/or C# Markup 2

I got Orleans support added to .NET Aspire and contributed to that.

I'm also the author of:

• Modern.CSharp.Templates
  A toolkit of modern dotnet new templates for C# 12, .NET 8, Microsoft Orleans 8, Windows App SDK and Uno Platform
• Orleans.Multiservice
  Prevent microservices pain with logical service separation in a modular monolith for Microsoft Orleans 8
• Orleans.Multitenant
  Secure, flexible tenant separation for Microsoft Orleans 8
• Orleans.Results
  Concise, version-tolerant result pattern implementation for Microsoft Orleans 8
• C# Markup 2
  Build .NET browser / native UI in declarative C#; enjoy a Flutter-like UI development experience with .NET Hot Reload and the main .NET UI frameworks (Windows App SDK, Uno Platform, WPF - coming: Maui, AvaloniaUI, possibly Blazor)
• Xamarin.CommunityToolkit.Markup (also ported to CommunityToolkit.Maui.Markup)
  A set of fluent helper methods and classes to simplify building declarative Xamarin Forms / .NET MAUI user interfaces in C#.
  Aka "C# Markup 1", which I initially contributed to the Microsoft Xamarin Forms product itself in version 4.6

Services I can provide:

• Microsoft Technology Direction (Tech Lead / Practice Lead)
  Define technology strategy, provide tools, practices and guidance to elevate and scale the technological delivery capabilities of software development organizations
• Cloud Applications
  Architect / build / modernize scalable cloud applications with .NET Aspire, Microsoft Orleans and Azure
• Frontends
  Build / modernize full stack C# .NET applications, for browser / windows / mac / linux / iOS / android

csharpformarkup's Issues

Create TextBlock inlines helper

TextBlock can contain children (inlines), the current helper only allows a single Inline (which is the only option support by the WPF constructor).

The following is an example that isn't currently supported:

<TextBlock><Run Foreground="#FFCFD3DA" Text="Text1" /><Run FontWeight="Normal" Text="Text2" /></TextBlock>

Maybe something like:

public static TextBlock TextBlock(System.Windows.Documents.Inline[] chidren)
{
    var ui = new Windows.Controls.TextBlock();
    foreach (var ch in chidren)
    {
        ui.Inlines.Add(ch);
    }

    return ui;
}

Why "CSharpForMarkup"?

Doesn't "MarkupForCSharp" makes more sense?

MSBUILD : Custom warning : Injecting code into BindTap failed: Value cannot be null.

Hi there, I just started using your marvelous markup system and am most impressed, but I have come across a minor issue that I would appreciate some help with.

When I build my project including your XamarinFormsMarkupExtensions.cs I get the compiler warnings below;

1>MSBUILD : Custom warning : Injecting code into BindTap failed: Value cannot be null.
1>MSBUILD : Custom warning : Parameter name: method

It's not breaking anything, and commenting out the 3 BindTap interfaces from line 191 removes the warning but I thought you'd be interested to hear about it, I can't work out where the 'method' parameter it's talking about is so can't be of much help beyond this report.

I'm not using the interfaces at all, so I've left them commented out for now.

ContentDialog is not parsed

screenshot

Steps to reproduce:

Add to example

FlutterPage.cs:

Button("Show ContentDialog").Command(A),

ContentDialog(
    StackPanel(TextBox(Text: "TextBox"))
)
.PrimaryButtonText("PrimaryText")
.Title("Title")
Assign(out contentDialog),

FlutterPage.logic.cs:

public FlutterPage()
{
    ...
    contentDialog.XamlRoot = App.Current.XamlRoot();
}

ContentDialog contentDialog;
ICommand aCommand;
public ICommand A => aCommand ??= new RelayCommandAsync(async () => await contentDialog.ShowAsync());

App.xaml.cs:

internal XamlRoot XamlRoot() => _window.Content.XamlRoot;

Another questions:

Is it possible to set object content through method call?

Something like:

ContentDialog(PrimaryButtonText: "abc", Title: "Title").Content(StackPanel(..))

instead of

ContentDialog(StackPanel(..)).PrimaryButtonText("abc").Title("Title")

What's about performance?

I should add to Treeview 10K elements sometimes. Is the performance impact near zero (in comparison with XAML)?
What performance scenarios do we need to be careful with?

Thank you for freeing us from XAML❤️

Does this compile back to XAML in the background ?

Hi,

I have a question:
Does this compile back to XAML in the background ?

I currently already build my Xamarin.Forms UI's using code because of the terrible performance of using XAML it's self - so as long as this package doesn't compile back to XAML I would be very interested in trying it - especially to be able to move my only remaining XAML file left - which is for my Styles - to C#.

Thanks,

Matthew

How do you nesting your files?

I have started using your extension as I mentioned before in my blog post here. Now, I'm looking for a file nesting extension for VS2019.

I would like to use the convention file.cs and file.logic.cs but all the extension I have installed did not work. DO you do it manually?

Row()/Col() bug

Remove "if (row != 0)" and simmilar "return if default value" conditions from Row/Col/ColSpan/RowCol/etc. functions. It took me days to realize my code not working because of this. I remove and re-add views from one grid to other and change order. Some of views not changed from row X to 0. This conditions are totally unnecessary!

Unity UI Toolkit support

I would love to use it with Unity's DOM-like UI Toolkit. This would be really helpful since game UI is pretty stuck in the stone age.

I was hoping there would be some kind of simple-ish interface I could implement to add support for an arbitrary UI Framework so I could do this. Any advice here?

Add a Label Content property

Add a Label Content property helper to allow attaching text/string to a Label; Label as only a constructor at the monent

Label("label goes here")

To allow for this (currently this is an error):

Label()
    .Content("label goes here")

Inline doc identifying the default bind property is missing on factory methods for derived classes

E.g. for WinUI, the inline doc for the Button() factory methods does not document which property is the default bind property. This happens when the default (here CommandProperty) is defined on a base class (here ButtonBase) instead of on the class itself.

Exception thrown in example

I am learning CSharpForMarkup; encountered issue with example WinUI when using WinUI library source instead of nuget packages.
Seems functional if I comment out the exception. Do not know things well enough to offer much at this point.
Attached Info
"Project" project setup
"Code" example code
"Exception" exception being thrown

Create additional Grid helper for Names/SharedSizeGroup

Consider adding an additional Grid helper to help when doing this:

<ColumnDefinitions>
  <ColumnDefinition x:Name="column1CloneForLayer0" SharedSizeGroup="column1" />
</ColumnDefinitions>

This also applies when referencing a size group and width:

<ColumnDefinitions>
  <ColumnDefinition Width="300" SharedSizeGroup="column1" />
</ColumnDefinitions>

What are some examples of CustomControls?

I have a situation where I need to create a CustomControl, and I've been stumped for days because I don't see any examples using DepencyProperty other than ControlTemplate in the current examples.

I was wondering if there are any relevant examples

Missing helpers for some controls that have child(ren)

@scottcg wrote: I need some additional helpers for those controls that have a child/children (Border, Menu, MenuItem)

This is an issue in WinUI and WPF codegen; it should generate helpers for types that implement settable property public UIElement Child

Support for CollectionView

I'm trying to define a page with the markup and need a CollectionView, but can't work out how to define the ItemTemplate or ItemsLayout.

CollectionView isn't mentioned in any of your documentation and I can't find any matches for various searches I've done looking for examples or mentions.

I can go back to using XAML for the page, but I'd really prefer not to; for this old coder, defining things with pages of wordy untyped text that can easily disagree with itself just seems like going back to writing HTML in Notepad !!

Thank you!

@VincentH-Net

First, thanks a million for taking the time to develop this. I wish it existed 5 years ago when I started learning Xamarin.Forms.

FWIW, I spent some time yesterday implementing this concept in UWP / Uno. This morning I used it on another project and was amazed at how much less painful it was to build and maintain the layouts.

Binding in UWP is now a joy!

THANK YOU!

How to set properties like `ScrollViewer.HorizontalScrollMode`?

Should I call Invoke for setting simple properties like ScrollViewer.HorizontalScrollMode?

Originally posted by @YegorStepanov in #19 (comment)

Need a recipe for adding/extending local Helpers to a project

For some reason, adding this to a client project breaks the current Helper class (haven't investigated deeply enough what other options are):

namespace CSharpMarkup.Wpf;

public static class Helpers
{
    public static TextBlock TextBlock(System.Windows.Documents.Inline[] chidren)
    {
        var ui = new System.Windows.Controls.TextBlock();
        foreach (var ch in chidren) ui.Inlines.Add(ch);

        return ui;
    }
}

app size?

I wonder if you have any idea or experience regarding how this effects app size. which one is better using c# or xaml or it wont even matter.

Support custom controls

What's about custom controls?

If the default controls generate by SourceGenerators, I suggest adding [Markup(typeof(MyControl))] that generates Markup's methods automatically. It seems to be possible to implement it.

Originally posted by @YegorStepanov in #19 (comment)

Curious: how do you rate your approach for other XAML variations like UWP?

Imo XAML in Xamarin Forms exists for historical reasons, to convince developers that are familiar with other Microsoft XAML dialects to onboard

Would you make the same statement for UWP? Meaning, would you see any reason your approach would not have similar benefits on UWP?

Error when installing NUGET

Hello,

Install of https://www.nuget.org/packages/CSharpMarkup.WinUI/0.8.1-dev.6 on a VS 2022 project created with WinUI blank app templates fails and show:

Severity Code Description Project File Line Suppression State
Error Package restore failed. Rolling back package changes for 'WinUITrial'.
Error NU1605 Detected package downgrade: Microsoft.Windows.SDK.BuildTools from 10.0.22000.197 to 10.0.22000.194. Reference the package directly from the project to select a different version.
WinUITrial -> CSharpMarkup.WinUI 0.8.1-dev.6 -> Microsoft.Windows.SDK.BuildTools (>= 10.0.22000.197)
WinUITrial -> Microsoft.Windows.SDK.BuildTools (>= 10.0.22000.194) WinUITrial C:\Users\estra\source\repos\SerUI\WinUITrial\WinUITrial\WinUITrial.csproj 1

Thanks

Support WindowsCommunityToolkit

There is a C#-only part of WinUI3 - WindowsCommunityToolkit, that as I understand, not supporting.

Originally posted by @YegorStepanov in #19 (comment)

How to use RelativeLayout?

I need to use a RelativeLayout as a child of another screen element but I am struggling to see how I can do this in a declarative way, as the constraint is passed as a parameter to its Add() method.

Maybe a place for another helper, sort-of similar to the ones that allow enum names to be used for rows and columns in the Grid control?

Default Styles are not applied to controls (tested only on Label)

Default styles, such as:

<!--  This is the default style for all labels  -->
<Style TargetType="{x:Type Label}">
    <Setter Property="Foreground" Value="{DynamicResource FontColor}" />
    <Setter Property="FontWeight" Value="Normal" />
    <Setter Property="Padding" Value="{DynamicResource LabelPadding}" />
    <Setter Property="FontFamily" Value="Calibri" />
    <Setter Property="FontSize" Value="13" />
</Style>

Are not applied to Label() in markup.

In the c# code one can lookup the style and see that it is present using this:

var defaultStyle = App.Current.TryFindResource(typeof(System.Windows.Controls.Label)) as System.Windows.Style;

When manually applying this to the Label, it still doesn't work. That may mean there's something strange with how Label deals with Content during construction. Not sure.

You can see this in the Welcome_UI.cs code file.

Support WPF

Would be great to see the generators included in the source, maybe they are there and I'm just missing them.

I've been using similar hand-coded techniques for WPF (bunch of helper/extension classes) - but I don't want to maintain that any longer.

Thanks!

NuGet package

Hi,

Very interesting Idea about C sharp for Markup.

Do you consider to create a NuGet package?

WPF DataTemplates not working

When I use this markup:

            ListView(() => 
                TextBlock("Item")
                .FontSize (30) .Foreground (Black)
            ) .Height (100) .Background (Yellow)
            .Bind(vm.Items)

And bind to a collection with three items, I can see three empty items of a few pixels high

When I set a breakpoint after var ui = new Windows.DataTemplate(xaml); here, the DataTemplate does not seem to have accepted the XAML - no children loaded.

I took over the XAML from the WinUI implementation.

Could you take a look @scottcg ?

Grid Definitions - Values for Stars?

Hi

I am really starting to love this library, and I can't wait for it to be part of Xamarin.Forms. Death to XAML :)

I can't figure out a way to provide a value to GridLength.Star when defining rows and columns. As far as I can tell I can either provide a numberic value, which is used as GridLength.Absolute, or I can provide a GridLength of .Star or .Auto... but I cannot give a numeric value AND a GridLength.

For example, if I want to create a grid with 3 columns, one of which is twice the size of the other two, I would do something like:

ColumnDefinitions.Add(new ColumnDefinition { Width = new GridLength(1, GridUnitType.Star) });
ColumnDefinitions.Add(new ColumnDefinition { Width = new GridLength(1, GridUnitType.Star) });
ColumnDefinitions.Add(new ColumnDefinition { Width = new GridLength(2, GridUnitType.Star) });

Is there a snazzy way of doing this, like an overload that allows:

ColumnDefinitions = EnumsForGridRowsAndColumns.Columns.Define(
    (Cols.One, GridLength.Star, 1),
    (Cols.Two, GridLength.Star, 1),
    (ColsThree, GridLength.Star, 2));

Thanks!

Support VisualStateManager

Is there no support for VisualStateManager?

Originally posted by @YegorStepanov in #19 (comment)

Support ControlTemplates

As discussed:

@VincentH-Net: ControlTemplates => Basically a reusable piece of C# Markup. Could be done by adding a factory helper that creates a control template from C# Markup content, similar to the layout factory helpers. Then you could use that helper in a local build method or in a derived control so it has a typesafe name

@scottcg: I don't see ControlTemplates

Register default properties using RegisterDefaultBindableProperties method

Is it possible to have the default properties dictionary filled in using the RegisterDefaultBindableProperties (or similar) method so all the configuration happens from one place?

Create additional help for FontFamily

FontFamily should allow strings (as XAML does)

.FontFamily(new FontFamily("Segoe UI"))

Could be

.FontFamily("Segoe UI")