CherylUI.Uno

KO | EN

gitlite — search

#react #typescript #llm #go #docker #macos #nodejs #java #awesome #cli #kubernetes #security #openai #ios

(★ 77)

CherylUI for Uno Platform

CherylUI.Uno Latest Version Download

Download Latest Version (.zip)

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

</kbd>
<br/>

</div>
<br/>

# ✨ CherylUI.Uno

CherylUI.Uno is a collection of UI controls and styles built for [Uno Platform](https://platform.uno/).

<br/>

# 📱 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

<br/>

# 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`:

```xml
<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.

```xml
<Page
    xmlns:controls="using:Cheryl.Uno.Controls">
    <controls:InteractiveContainer>
        
    </controls:InteractiveContainer>
</Page>
```

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

```xml
<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

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

<br/>

### NavigationView

```xml
    
```

<br/>

### SegmentedControl

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

### SimplePageHeader

```xml
<controls:SimplePageHeader Header="Bob" />
```
<br/>

### SliverPage

![sliverpage](https://github.com/user-attachments/assets/682bb6af-344b-49c4-bbce-3e36eff85ea4)

```xml
<controls:SliverPage Header="Buttons">
    
</controls:SliverPage>
```
<br/>

### SliverPageLong

![sliverpagelong](https://github.com/user-attachments/assets/077229ed-dad4-4277-9715-2cd4edd7c7cd)

```xml
<controls:SliverPageLong Header="Settings">
    
</controls:SliverPageLong>
```
<br/>

## 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.

```xml
<Page
    xmlns:controls="using:Cheryl.Uno.Controls">
    <controls:InteractiveContainer>
        
    </controls:InteractiveContainer>
</Page>
```

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

```csharp
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.

```csharp
// 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

![busyarea](https://github.com/user-attachments/assets/12307641-1f46-402b-95d6-6b8af5ccf594)

```xml
<controls:BusyArea IsBusy="True">
    
</controls:BusyArea>
```
<br/>

### GroupBox

```xml
<controls:GroupBox Header="Title">
    
</controls:GroupBox>
```
<br/>

### Border
- **GlassBorderStyle**

Basically the border you see everywhere in that library.

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

<br/>

- **GlassSoftBorderStyle**

Like GlassBorderStyle but softer, perfect to be used on a GlassBorder because of a dialog or a bottomsheet for example.
  
```xml
<Border Style="{StaticResource GlassSoftBorderStyle}">
    <TextBlock Text="Inside" />
</Border>
```
<br/>

- **GlassFrostedBorderStyle**

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

```xml
<Border Style="{StaticResource GlassFrostedBorderStyle}">
</Border>
```
<br/>

## Input controls

### MobileDatePicker

![datepicker](https://github.com/user-attachments/assets/ccdaf821-83d7-4aa9-b454-5e964256ed19)

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

### MobilePicker

![pikcer](https://github.com/user-attachments/assets/97732f4a-14b3-4ef2-b5a4-73ec42b78bdf)

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

### MobileTextBox

![mobileTB](https://github.com/user-attachments/assets/45e4d410-1520-4bef-afd8-7323e2517a38)

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

### MobileTimePicker

![mobileTimepicker](https://github.com/user-attachments/assets/30599e5e-519f-43a8-a6c6-f79d62b1d55b)

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

### CheckBox

<br/>

### RadioButton
<img width="301" height="223" alt="{7291E24F-5F86-436D-BBA3-9B0B91CA1077}" src="https://github.com/user-attachments/assets/01c8365b-2944-4bb5-8f02-dbd29c70aa7f" />

<br/>

### Slider

```xml
<Slider  />

### ToggleSwitch

<br/>

### TextBlock
```xml
  <TextBlock  FontFamily="{StaticResource QuicksandBold}" ></TextBlock>
  <TextBlock  FontFamily="{StaticResource QuicksandRegular}" ></TextBlock>
```
<br/>

### Buttons

- **Normal Button**

```xml
<Button Content="Button" />
```
<br/>

- **DefaultButtonStyle**

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

- **Big Normal**
<img width="332" height="134" alt="{D6BF3705-59FD-4129-B561-722193403996}" src="https://github.com/user-attachments/assets/6c7af859-44cf-460b-9048-8e9f2619e945" />

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

- **Big Default**
  <img width="337" height="140" alt="{4D591E12-8628-4332-AC94-9D8BDC6747D6}" src="https://github.com/user-attachments/assets/a6e81ef3-0089-4c57-bb3a-8c46eba6d149" />

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

- **Large**
<img width="333" height="155" alt="{515B4E8B-ADD9-40E8-92F2-4A6F0352C682}" src="https://github.com/user-attachments/assets/1c0d5b44-8931-4669-83cb-46d4bd00939d" />

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

- **Secondary**
  
  <img width="310" height="142" alt="{66D80599-06F2-42E5-B03E-ED092E2136D4}" src="https://github.com/user-attachments/assets/f1c0d3c1-cb83-4462-a620-057c06b2a494" />

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

- **Text**

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

## Menus

### MenuFlyoutPresenter

```xml
        <MenuFlyout>
            <MenuFlyoutItem Text="Action" />
        </MenuFlyout>
```
<br/>

CherylUI.Uno

CherylUI.Uno Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

CherylUI.Uno

CherylUI.Uno Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

Download README