Shiny .NET v4.1 BETA - Linux, MacOS, & Blazor Support! TONS of new features and improvements across the board. Check It Out

FontPicker

Font selection controls for .NET MAUI. Includes an inline FontPicker list, a popup FontPickerButton, an inline FontSizePicker, and a popup FontSizePickerButton. Each font is rendered in its own typeface for instant visual preview.

Frameworks

.NET MAUI

FontPicker

An inline scrollable list of fonts. Each row shows the font name rendered in its own typeface alongside a preview string.

<shiny:FontPicker AvailableFonts="{Binding Fonts}"
                  SelectedFont="{Binding SelectedFont, Mode=TwoWay}"
                  PreviewText="The quick brown fox"
                  PreviewFontSize="18" />

Property	Type	Default	Description
`AvailableFonts`	`IList<string>?`	`null`	Font family names to display
`SelectedFont`	`string?`	`null`	Currently selected font (TwoWay)
`PreviewText`	`string`	`"The quick brown fox"`	Text rendered in each font row
`PreviewFontSize`	`double`	`18`	Size of the preview text

Event: FontChanged — fires with the selected font name.

FontPickerButton

A compact button that opens a popup font picker dialog with a Done button.

<shiny:FontPickerButton AvailableFonts="{Binding Fonts}"
                        SelectedFont="{Binding SelectedFont, Mode=TwoWay}"
                        Placeholder="Font"
                        FontChangedCommand="{Binding OnFontChangedCommand}" />

Property	Type	Default	Description
`AvailableFonts`	`IList<string>?`	`null`	Font family names to display
`SelectedFont`	`string?`	`null`	Currently selected font (TwoWay)
`Placeholder`	`string`	`"Font"`	Button text when no font is selected
`CornerRadius`	`int`	`8`	Button corner radius
`FontChangedCommand`	`ICommand?`	`null`	Command invoked with the selected font name

Event: FontChanged — fires with the selected font name.

FontSizePicker

An inline scrollable list of font sizes. Each row shows the size value rendered at that size.

<shiny:FontSizePicker AvailableFontSizes="{Binding Sizes}"
                      SelectedFontSize="{Binding SelectedSize, Mode=TwoWay}"
                      PreviewText="Aa" />

Property	Type	Default	Description
`AvailableFontSizes`	`IList<double>?`	`null`	Font sizes to display
`SelectedFontSize`	`double`	`16`	Currently selected size (TwoWay)
`PreviewText`	`string`	`"Aa"`	Text rendered at each size

Event: FontSizeChanged — fires with the selected size.

FontSizePickerButton

A compact button that opens a popup font size picker dialog.

<shiny:FontSizePickerButton AvailableFontSizes="{Binding Sizes}"
                            SelectedFontSize="{Binding SelectedSize, Mode=TwoWay}"
                            FontSizeChangedCommand="{Binding OnSizeChangedCommand}" />

Property	Type	Default	Description
`AvailableFontSizes`	`IList<double>?`	`null`	Font sizes to display
`SelectedFontSize`	`double`	`16`	Currently selected size (TwoWay)
`CornerRadius`	`int`	`8`	Button corner radius
`FontSizeChangedCommand`	`ICommand?`	`null`	Command invoked with the selected size

Event: FontSizeChanged — fires with the selected size.

Usage with ImageEditor

The FontPicker and FontSizePicker are integrated into the ImageEditor toolbar when font selection is enabled:

<shiny:ImageEditor Source="{Binding ImageSource}"
                   AllowTextAnnotation="True"
                   AllowFontSelection="True"
                   AllowFontSizeSelection="True"
                   AvailableFonts="{Binding Fonts}"
                   AvailableFontSizes="{Binding FontSizes}" />

AI Skill

Step 1 — Add the marketplace:

claude plugin marketplace add shinyorg/skills

Step 2 — Install the plugin:

claude plugin install shiny-controls@shiny

Step 1 — Add the marketplace:

copilot plugin marketplace add https://github.com/shinyorg/skills

Step 2 — Install the plugin:

copilot plugin install shiny-controls@shiny

View shiny-controls Plugin