✨ CherylUI.Uno

CherylUI.Uno is a collection of UI controls and styles built for Uno Platform.

📱 UI Demo

https://github.com/user-attachments/assets/04cf44dd-e075-41f7-a664-e78650e0970b

https://github.com/user-attachments/assets/067a6a66-cf39-46c7-8d78-0a6750e17b06

https://github.com/user-attachments/assets/434dbcab-9d31-4aeb-a758-baa73dfca636

Temporary Documentation

Using the library

1. Reference the CherylUI.Uno project or NuGet package in your Uno Platform solution.
2. Merge the style dictionary in App.xaml:

<Application.Resources>
    <ResourceDictionary>
        <ResourceDictionary.MergedDictionaries>
            <ResourceDictionary Source="ms-appx:///Cheryl.Uno/Styles/Index.xaml" />
        </ResourceDictionary.MergedDictionaries>
    </ResourceDictionary>
</Application.Resources>

3. Set up the InteractiveContainer to host dialogs and display the background. You must wrap it around the main content of your app, only one time.

<Page
    xmlns:controls="using:Cheryl.Uno.Controls">
    <controls:InteractiveContainer>
        <!-- App Content -->
    </controls:InteractiveContainer>
</Page>

4. Use the controls by declaring the namespace and dropping them into your XAML:

<Page
    xmlns:controls="using:Cheryl.Uno.Controls">
    <controls:BottomTabControl>
        <!-- ... -->
    </controls:BottomTabControl>
</Page>

Custom controls

The library exposes the following controls. Each control has a default style defined in Styles/.

Control	Description
BottomTabControl & BottomTabItem	Tab navigation control placed at the bottom of the screen
BusyArea	Container that shows a ProgressRing overlay when IsBusy is true
GroupBox	Simple content container with a header
InteractiveContainer	Hosts dialogs, bottom sheets and toast content
SimplePageHeader	Basic page header with a centered title
SliverPage	Page layout with a collapsing header when scrolled
SliverPageLong	Variant of SliverPage with a larger header
MobileDatePicker	Bottom-sheet style date picker
MobilePicker	Generic list picker presented in a bottom sheet
MobileTextBox	Text input that opens a bottom dialog for editing
MobileTimePicker	Bottom-sheet style time picker

Navigation

BottomTabControl & BottomTabItem

<controls:BottomTabControl>
    <controls:BottomTabItem IconGlyph="&#xE80F;" Label="Home" />
    <controls:BottomTabItem IconGlyph="&#xE80F;" Label="Settings" />
</controls:BottomTabControl>

NavigationView

    <!-- Supposed to work like a standard WinUI NavigationView -->

SegmentedControl

<ui:Segmented>
    <ui:SegmentedItem Content="60hz" />
    <ui:SegmentedItem Content="120hz" />
</ui:Segmented>

SimplePageHeader

<controls:SimplePageHeader Header="Bob" />

SliverPage

<controls:SliverPage Header="Buttons">
    <!-- page content -->
</controls:SliverPage>

SliverPageLong

<controls:SliverPageLong Header="Settings">
    <!-- page content -->
</controls:SliverPageLong>

Dialogs & Sheets

InteractiveContainer

Use InteractiveContainer to host dialogs and bottom sheets. Wrap it around the main content of your app so overlays can appear above everything.

<Page
    xmlns:controls="using:Cheryl.Uno.Controls">
    <controls:InteractiveContainer>
        <!-- App Content -->
    </controls:InteractiveContainer>
</Page>

Once in the visual tree, call its static methods to show or hide content:

InteractiveContainer.ShowDialog(new ConfirmationControl());
await InteractiveContainer.ShowBottomSheet(new MyBottomSheet());

InteractiveContainer.CloseDialog();
InteractiveContainer.CloseBottomSheet();

To retrieve a value from a dialog or sheet, await the task returned by ShowBottomSheet or ShowBottomDialog. When closing your custom control, call InteractiveContainer.CloseBottomSheet(result) or InteractiveContainer.CloseBottomDialog(result) with the value to return.

// Host page
var selectedColor = (Color)await InteractiveContainer.ShowBottomSheet(new ColorPickerSheet());

// Bottom sheet control
public sealed partial class ColorPickerSheet : UserControl
{
    public ColorPickerSheet()
    {
        this.InitializeComponent();
    }

    private void OnDone(object sender, RoutedEventArgs e)
    {
        InteractiveContainer.CloseBottomSheet(colorPicker.SelectedColor);
    }
}

Layout & Containers

BusyArea

<controls:BusyArea IsBusy="True">
    <!-- content -->
</controls:BusyArea>

GroupBox

<controls:GroupBox Header="Title">
    <!-- content -->
</controls:GroupBox>

Border

• GlassBorderStyle

Basically the border you see everywhere in that library.

<Border Style="{StaticResource GlassBorderStyle}">
</Border>

• GlassSoftBorderStyle

Like GlassBorderStyle but softer, perfect to be used on a GlassBorder because of a dialog or a bottomsheet for example.

<Border Style="{StaticResource GlassSoftBorderStyle}">
    <TextBlock Text="Inside" />
</Border>

• GlassFrostedBorderStyle

Normal GlassBorder but frosted behind. To use if you need to overlay something.

<Border Style="{StaticResource GlassFrostedBorderStyle}">
</Border>

Input controls

MobileDatePicker

<pickers:MobileDatePicker  Date="{x:Bind SelectedDate}" />

MobilePicker

<pickers:MobilePicker ItemsSource="{Binding Options}"  SelectedItem="{Binding SelectedOption}"/>

MobileTextBox

<pickers:MobileTextBox  PlaceholderText="Enter name" PopupTitle="What is your First Name ?" Text="Billy" />

MobileTimePicker

<pickers:MobileTimePicker Time="{x:Bind SelectedTime}" />

CheckBox

RadioButton

Slider

<Slider  />

<Slider Style="{StaticResource BigSliderStyle}" />          

ToggleSwitch

TextBlock

  <TextBlock  FontFamily="{StaticResource QuicksandBold}" ></TextBlock>
  <TextBlock  FontFamily="{StaticResource QuicksandRegular}" ></TextBlock>

Buttons

• Normal Button

<Button Content="Button" />

• DefaultButtonStyle

<Button Content="Default" Style="{StaticResource DefaultButtonStyle}" />

• Big Normal

<Button Content="Secondary" Style="{StaticResource BigNormalButtonStyle}" />

• Big Default

<Button Content="Mini" Style="{StaticResource BigButtonStyle}" />

• Large

<Button Content="Small" Style="{StaticResource LargeButtonStyle}" />

• Secondary

  

<Button Content="Big" Style="{StaticResource SecondaryButtonStyle}" />

• Text

<Button Content="Big normal" Style="{StaticResource TextButtonStyle}" />

Menus

MenuFlyoutPresenter

        <MenuFlyout>
            <MenuFlyoutItem Text="Action" />
        </MenuFlyout>