I've been building a Maui app for Android and iOS. I mostly have the app configured with some platform specific tweaks that I can usually fix or find a workaround.

I recently added support for Windows support:

• net8.0-windows10.0.19041.0

I'm having issues centering the FontImageSource in my navigation buttons. It's more obvious with the "ellipses-vertical" icon compared to the "send-horizontal" icon however you can still see that the icons tend to be closer to the top and right side of the render area.

I actually first noticed this when I was using a button with the icon only, but the Frame+Image allows me to reveal the spacing control (or lack of control) I seem to have with the internals of the Image/FontImageSource.

// MauiProgram.cs
.ConfigureFonts(fonts =>
{
    fonts.AddFont("lucide.ttf", "lucide"); // /icons
});

<!-- App.xaml -->
<ResourceDictionary.MergedDictionaries>
  <ResourceDictionary Source="Resources/Styles/Colors.xaml" />
  <ResourceDictionary Source="Resources/Styles/Styles.xaml" />
  <ResourceDictionary Source="Resources/Styles/Lucide.xaml" />
</ResourceDictionary.MergedDictionaries>

<!-- Lucide.xaml -->
<x:String x:Key="luc-fontfamily">lucide</x:String>
<x:String x:Key="luc-ellipsis-vertical">&#57531;</x:String>
<x:String x:Key="luc-send-horizontal">&#58614;</x:String>

<!-- ContentPage.xaml -->
<!-- vertical ellipses icon -->
<Frame x:Name="LnButton_IconOnly_Logout" Grid.Column="2" Margin="0,0,10,0"  BackgroundColor="Yellow" HorizontalOptions="Center" VerticalOptions="Center">
  <Image HeightRequest="25" HorizontalOptions="Center" VerticalOptions="Center" BackgroundColor="Red">
    <Image.Source HorizontalOptions="Center" VerticalOptions="Center">
    <FontImageSource
      FontFamily="{StaticResource luc-fontfamily}"
      Glyph="{StaticResource luc-ellipsis-vertical}"
      Color="{StaticResource TextColorLightMode}"/>
    </Image.Source>
  </Image>
  <Frame.GestureRecognizers>
    <TapGestureRecognizer Command="{Binding ToggleInfoCommand}" />
  </Frame.GestureRecognizers>
</Frame>

<!-- send horizontal icon -->
<Frame x:Name="LnButton_IconOnly_Logout" Grid.Column="2" Margin="0,0,10,0"  BackgroundColor="Yellow" HorizontalOptions="Center" VerticalOptions="Center">
  <Image HeightRequest="25" HorizontalOptions="Center" VerticalOptions="Center" BackgroundColor="Red">
    <Image.Source HorizontalOptions="Center" VerticalOptions="Center">
    <FontImageSource
      FontFamily="{StaticResource luc-fontfamily}"
      Glyph="{StaticResource luc-send-horizontal}"
      Color="{StaticResource TextColorLightMode}"/>
    </Image.Source>
  </Image>
  <Frame.GestureRecognizers>
    <TapGestureRecognizer Command="{Binding ToggleInfoCommand}" />
  </Frame.GestureRecognizers>
</Frame>

Windows displaying vertical ellipses

Windows displaying send horizontal

Below is also the code and screenshots for my Button+FontImageSource to show it happens there too.

<StackLayout Grid.Column="2" HorizontalOptions="Center" VerticalOptions="Center" Margin="0,0,10,0" BackgroundColor="Yellow">
  <Button
      x:Name="LnButton_IconOnly_Logout"
      HorizontalOptions="Start"
      BackgroundColor="Red"
      Command="{Binding ToggleInfoCommand}"
      CornerRadius="25">
    <Button.ImageSource>
      <FontImageSource
        FontFamily="{StaticResource luc-fontfamily}"
        Glyph="{StaticResource luc-ellipsis-vertical}"
        Color="{StaticResource TextColorLightMode}" />
    </Button.ImageSource>
  </Button>
</StackLayout>

Windows displaying vertical ellipses (Button)

I've been building a Maui app for Android and iOS. I mostly have the app configured with some platform specific tweaks that I can usually fix or find a workaround.

I recently added support for Windows support:

• net8.0-windows10.0.19041.0

I'm having issues centering the FontImageSource in my navigation buttons. It's more obvious with the "ellipses-vertical" icon compared to the "send-horizontal" icon however you can still see that the icons tend to be closer to the top and right side of the render area.

I actually first noticed this when I was using a button with the icon only, but the Frame+Image allows me to reveal the spacing control (or lack of control) I seem to have with the internals of the Image/FontImageSource.

// MauiProgram.cs
.ConfigureFonts(fonts =>
{
    fonts.AddFont("lucide.ttf", "lucide"); // https://lucide.dev/icons
});

<!-- App.xaml -->
<ResourceDictionary.MergedDictionaries>
  <ResourceDictionary Source="Resources/Styles/Colors.xaml" />
  <ResourceDictionary Source="Resources/Styles/Styles.xaml" />
  <ResourceDictionary Source="Resources/Styles/Lucide.xaml" />
</ResourceDictionary.MergedDictionaries>

<!-- Lucide.xaml -->
<x:String x:Key="luc-fontfamily">lucide</x:String>
<x:String x:Key="luc-ellipsis-vertical">&#57531;</x:String>
<x:String x:Key="luc-send-horizontal">&#58614;</x:String>

<!-- ContentPage.xaml -->
<!-- vertical ellipses icon -->
<Frame x:Name="LnButton_IconOnly_Logout" Grid.Column="2" Margin="0,0,10,0"  BackgroundColor="Yellow" HorizontalOptions="Center" VerticalOptions="Center">
  <Image HeightRequest="25" HorizontalOptions="Center" VerticalOptions="Center" BackgroundColor="Red">
    <Image.Source HorizontalOptions="Center" VerticalOptions="Center">
    <FontImageSource
      FontFamily="{StaticResource luc-fontfamily}"
      Glyph="{StaticResource luc-ellipsis-vertical}"
      Color="{StaticResource TextColorLightMode}"/>
    </Image.Source>
  </Image>
  <Frame.GestureRecognizers>
    <TapGestureRecognizer Command="{Binding ToggleInfoCommand}" />
  </Frame.GestureRecognizers>
</Frame>

<!-- send horizontal icon -->
<Frame x:Name="LnButton_IconOnly_Logout" Grid.Column="2" Margin="0,0,10,0"  BackgroundColor="Yellow" HorizontalOptions="Center" VerticalOptions="Center">
  <Image HeightRequest="25" HorizontalOptions="Center" VerticalOptions="Center" BackgroundColor="Red">
    <Image.Source HorizontalOptions="Center" VerticalOptions="Center">
    <FontImageSource
      FontFamily="{StaticResource luc-fontfamily}"
      Glyph="{StaticResource luc-send-horizontal}"
      Color="{StaticResource TextColorLightMode}"/>
    </Image.Source>
  </Image>
  <Frame.GestureRecognizers>
    <TapGestureRecognizer Command="{Binding ToggleInfoCommand}" />
  </Frame.GestureRecognizers>
</Frame>

Windows displaying vertical ellipses

Windows displaying send horizontal

Below is also the code and screenshots for my Button+FontImageSource to show it happens there too.

<StackLayout Grid.Column="2" HorizontalOptions="Center" VerticalOptions="Center" Margin="0,0,10,0" BackgroundColor="Yellow">
  <Button
      x:Name="LnButton_IconOnly_Logout"
      HorizontalOptions="Start"
      BackgroundColor="Red"
      Command="{Binding ToggleInfoCommand}"
      CornerRadius="25">
    <Button.ImageSource>
      <FontImageSource
        FontFamily="{StaticResource luc-fontfamily}"
        Glyph="{StaticResource luc-ellipsis-vertical}"
        Color="{StaticResource TextColorLightMode}" />
    </Button.ImageSource>
  </Button>
</StackLayout>

Windows displaying vertical ellipses (Button)

• c#
• windows
• xaml
• maui

1 Answer 1

The problem with assigning ImageSource to a Button is that button supports both Text and ImageSource which means, you will have difficulty center the ImageSource eventhough you aren't assigning Text.

Instead of ImageSource, you can assign your icon directly to FontFamily, Text and TextColor properties to Button and it should now be centered:

<Button
    x:Name="LnButton_IconOnly_Logout"
    HorizontalOptions="Start"
    BackgroundColor="Red"
    Command="{Binding ToggleInfoCommand}"
    CornerRadius="25"
    FontFamily="{StaticResource luc-fontfamily}"
    Text="{StaticResource luc-ellipsis-vertical}"
    TextColor="{StaticResource TextColorLightMode}" />

Alternatively, you can keep the FontImageSource but use ImageButton instead of Button, and, in this case, the ImageSource should be centered, e.g.

<ImageButton
    x:Name="LnButton_IconOnly_Logout"
    HorizontalOptions="Start"
    BackgroundColor="Red"
    Command="{Binding ToggleInfoCommand}"
    CornerRadius="25"
    ImageSource="{FontImageSource
        FontFamily={StaticResource luc-fontfamily}
        Glyph={StaticResource luc-ellipsis-vertical}
        Color={StaticResource TextColorLightMode}}" />

You'll find that on high resolution displays, the FontImageSource will actually will be rasterized and downsampled leading to an undesirably blurriness. So, of the two approaches, setting Button's Text, FontFamily and TextColor should be better for you.

Reference:

• https://github/dotnet/maui/issues/1000