I am not seeing the controls I am using being rendered as in the Uno Material documentation.

[mobynet1]

I have scoured the documentation looking to see if I am missing something, but I am not seeing the controls being rendered as in Uno Material. When I use a textbox for instance, it looks nothing like the text box in the diagram at the top of the page.

I know this next screenshot is very grainy, but this is what I am expecting:

This is what I am getting:

I have applied so styling so that it looks almost identical to the Telerik Maui textbox, but it makes me wonder if I am even actually using the Uno Material controls at all. I would love to see what my app looks like with a pure Uno Material control set.

When I created the solution, the Material option was selected. I see in the documentation that a namespace attribute is being added to the Page element: <Page xmlns:ut="using:Uno.Themes">. Since I am using C# Markup, I don't know how to apply this element to the page object. I am wondering if that is causing my controls to look different.

[kazo0]

Hi @mobynet1!

It looks like the style of TextBox that you want to be using is the Filled style, as opposed to the default Outlined style that you are seeing.

You can find a listing of all available styles in the docs here

There are also helper classes in the Themes/Material C# Markup packages that make it cleaner to resolve the proper style keys. You can see how those are used in the example code below where I am setting the Style of the TextBoxes

public MainPage()
{
    this
        .Background(Theme.Brushes.Background.Default)
        .Content(new StackPanel()
        .VerticalAlignment(VerticalAlignment.Center)
        .HorizontalAlignment(HorizontalAlignment.Center)
        .Spacing(10)
        .Children(
            new TextBlock()
                .Text("Outlined:"),
            new TextBox()
                .Width(300)
                .Header("First Name")
                .Style(Theme.TextBox.Styles.Outlined),
            new TextBlock()
                .Text("Filled:"),
            new TextBox()
                .Width(300)
                .Header("First Name")
                .Style(Theme.TextBox.Styles.Filled)
        ));
}

Recording.2024-08-01.092816.mp4

I have attached the .zip of the sample app that I used for the above example:

UnoApp65.zip

Let me know if you need any more help with this!

[francoistanguay]

Interesting. I just createad a Blank Template + used C# Markup instead of XAML, checked Material Theme, changed the default code from new TextBlock() to new TextBox() and I get a Material-Themed TextBox as expected

In App.xaml.cs default Material+C# Markup template, you should see Material Theme bootstrapped:

[francoistanguay]

Sorry, missed Steve's answer while typing mine.

[mobynet1]

@kazo0, @francoistanguay After I posted this, I realized that I was indeed using the Material controls. And, @kazo0, the styles you added to the textbox made all sorts of lights go on in my head!! I had been reading that very page you posted just hours ago, but it didn't dawn in me that this is how they were to be applied. THANKS!!!!!!!!!!!

I am finding the Uno community to be filled with helpful people with great advice. I also like the fact that I am being heard... This is something that is definitely missing in the Maui community, sadly.

Thanks to everyone!
Steve

[sasakrsmanovic]

@mobynet1 Glad to hear! :) ...Close it as answered then ? :)