0

I had experience with XAML in the past, through WPF. I was used to understand visual elements and be able to change its properties. Now, in my first .NET MAUI experience, I am lost.

I am exploring this sample .NET MAUI app - https://learn.microsoft.com/en-us/samples/dotnet/maui-samples/tutorial-mvvm/

In the AllNotesPage view (Views\AllNotesPage.xaml) there's a toolbar, with an Add icon. I tried to change its height and couldn't find how.

sample toolbar

After the Add icon is clicked, the app shows a back button in the upper left corner. How can I change its color, or its size, for example?

back button upper left corner

And how is there this three dots icon in the toolbar, on the right? I didn't find this element in the XAML code.

I have tried to explore .NET MAUI documentation and searched online for how I could change the mentioned sample app Shell and ContentPage toolbar.

I hoped I would find a way to change the toolbar's height, or the back button color, for example. I didn't find anything to help me in this.

Just before submitting this question, StackOverflow suggested this question - How to add style for Title of ContentPage in .Net MAUI? - but Shell.TitleView seems to include only the title area and not the Add icon or the three dots icon.

CootMoon
  • 522
  • 4
  • 22
Marcelo
  • 5
  • 4

1 Answers1

0

If you want to change the color of back button, you can set the property Shell.ForegroundColor="Red" to achieve it. Here's the code below for your reference:

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:viewModels="clr-namespace:Notes.ViewModels"

             Shell.ForegroundColor="Red"             

             x:Class="Notes.Views.NotePage"
             Title="Note">

Update:

If you want to change the Add icon size or color, you can set the Color=Green and Size=200 like below. For the three dots, when clicking it, it will expand and show the Add word. It's there by default. I don't think we can remove it.

   <ContentPage.ToolbarItems>
        <ToolbarItem Text="Add" Command="{Binding NewCommand}" IconImageSource="{FontImage Glyph='+', Color=Green, Size=200}" />
    </ContentPage.ToolbarItems>
Alexandar May - MSFT
  • 6,536
  • 1
  • 8
  • 15
  • Yes @alexandar-may-msft! It's a bit confusing for me, but it worked. Although I still wanted to know how to change the Add icon size or color, or how to remove the three dots icon and make the toolbar expanded by default. Do you know if it's just not possible and the toolbar has these limitations on customization? – Marcelo Feb 07 '23 at 13:10
  • @Marcelo Thanks for your update. If it worked, please help mark it. Also, I have provided an update on how to change the Add icon `size` or `color`, you can check it. – Alexandar May - MSFT Feb 17 '23 at 05:45