Topics 31
Advanced & Enterprise Advanced Data Binding & Collections App Lifecycle & Windows Best Practices & Architecture Concurrency & Threading Controls & Views Data Binding & MVVM Dependency Injection & Services Desktop - WinUI & Mac Catalyst Device Features & Essentials Fonts, Icons & Media Forms, Input & Validation Fundamentals & Architecture Gestures & Animations Graphics & Drawing Local Storage & Data Maps & Location Migration from Xamarin.Forms Native Interop & Libraries Networking & APIs Performance & Optimization Platform Integration & Handlers Project Structure & App Startup Publishing & Deployment Security & Authentication Shell Navigation Styling, Resources & Themes Testing & Debugging Troubleshooting & Common Errors XAML & Markup Extensions XAML & UI Layouts
Advertisement

Fonts, Icons & Media

6 questions found

How do you add and use a custom font in MAUI?

Beginner
Place the .ttf/.otf in Resources/Fonts (MauiFont build action), register it with an alias in ConfigureFonts, then reference the alias via FontFamily. This works consistently across platforms without per-platform font registration.
builder.ConfigureFonts(f =>
    f.AddFont("Inter-Regular.ttf", "Inter"));
// XAML
<Label Text="Hello" FontFamily="Inter" />
Real-world example A brand typeface is registered once and applied everywhere via the FontFamily alias.

Common follow-ups: Where do fonts go? | Do you need per-platform registration?

Fonts Resources Fonts Icons & Media

How do you use font icons (icon fonts) in MAUI?

Beginner
Register the icon font (e.g., FontAwesome/Material Icons), then set a Label or button ImageSource to a FontImageSource specifying the glyph unicode and FontFamily. This gives crisp, scalable, tintable icons without image assets.
<Image>
    <Image.Source>
        <FontImageSource Glyph="&#xf015;" FontFamily="FA" Color="Purple" />
    </Image.Source>
</Image>
Real-world example A tab bar uses FontAwesome glyphs as icons so they scale sharply and recolor with the theme.

Common follow-ups: Why use icon fonts over PNGs? | What is FontImageSource?

Fonts Icons Fonts Icons & Media

How do you display and control video/audio in MAUI?

Intermediate
Use the MAUI Community Toolkit's MediaElement, which wraps native players. Bind Source (URL or file), and control playback with Play/Pause/Stop and events for state and position. For advanced needs, a dedicated media library or custom handler may be warranted.
<toolkit:MediaElement Source="https://cdn/video.mp4"
                      ShouldAutoPlay="True"
                      ShouldShowPlaybackControls="True" />
Real-world example A course app streams lesson videos with MediaElement, showing native playback controls on each platform.

Common follow-ups: Where does MediaElement come from? | Can it play local files?

Media MAUI Community Toolkit Fonts Icons & Media

How do you handle different image resolutions across devices?

Intermediate
Provide a single high-resolution source (SVG preferred) declared as MauiImage; MAUI generates density-appropriate rasters at build time. For platform-specific art, you can still supply per-density files, but SVG plus MauiImage resizing covers most cases and keeps the project lean.
<MauiImage Include="Resources\Images\logo.svg" BaseSize="120,120" />
Real-world example One logo.svg yields crisp images on low-density phones and high-density tablets without shipping multiple bitmaps.

Common follow-ups: Why prefer SVG? | What does BaseSize control?

Images Resources Fonts Icons & Media

How do you tint or recolor images and icons in MAUI?

Intermediate
Use FontImageSource Color for icon fonts, or apply an IconTintColorBehavior (MAUI Community Toolkit) to Image controls to tint bitmaps at runtime. SVG-based MauiImage can be recolored at build time by editing the source or using tint behaviors. Tinting supports theming without duplicating assets.
<Image Source="star.png">
    <Image.Behaviors>
        <toolkit:IconTintColorBehavior TintColor="Gold" />
    </Image.Behaviors>
</Image>
Real-world example A rating widget tints the same star image gold or gray depending on state, avoiding two separate assets.

Common follow-ups: How do you tint an icon font? | Where does IconTintColorBehavior come from?

Images MAUI Community Toolkit Fonts Icons & Media

How do you implement text-to-speech or speech features in MAUI?

Advanced
Use TextToSpeech.Default.SpeakAsync for TTS with options (locale, pitch, volume). For speech-to-text you'll need platform speech recognition behind an interface or a plugin, requesting microphone/speech permissions. TTS is cross-platform out of the box; recognition typically requires platform code.
await TextToSpeech.Default.SpeakAsync("Your order shipped",
    new SpeechOptions { Pitch = 1.0f, Volume = 0.8f });
Real-world example An accessibility feature reads notifications aloud using built-in TextToSpeech.

Common follow-ups: Is speech-to-text built in? | What options does SpeakAsync accept?

Media Accessibility & UX Fonts Icons & Media