2. Controls

Layout

SliverPage

<controls:SliverPage Header="Settings">
       
 </controls:SliverPage>

A control an animated header, back button, and an included ScrollViewer for android-inspired behavior.

Note : BackButton will automatically call MobileNavigation.Pop(), so use SliverPage with CherylUI MobileNavigation.

SliverPageLong

<controls:SliverPageLong Header="Settings">
       
 </controls:SliverPageLong>

Alternative longer solution to help thumb zone access.

Bottom Tabs

 <TabControl>
            <TabItem>
                <TabItem.Header>
                    <StackPanel>
                        <PathIcon Classes="Tab" Data="{StaticResource weather_sunny_regular}" />
                        <TextBlock Classes="Tab" Text="Tab 1" />
                    </StackPanel>
                </TabItem.Header>
             </TabItem>
 </TabControl>

Themed Controls

Buttons

                    <Button Classes="Small">
                        <TextBlock Text="Small" />
                    </Button>

                    <Button Classes="Secondary">
                        <TextBlock Text="Secondary" />
                    </Button>

                    <Button Classes="Text">
                        <TextBlock Text="Text" />
                    </Button>

                    <Button>
                        <TextBlock Text="Normal" />
                    </Button>

Switch

<ToggleButton Classes="Switch" />

Slider

<Slider />

Textbox

<StackPanel>
   <TextBlock Classes="DemiBold" Margin="5,0,0,0" Text="Username" />
   <TextBox Watermark="Bob" />
</StackPanel>

CheckBox

<Checkbox />

RadioButton

<RadioButton />

Date Picker

<DatePicker />

ProgressBar

<Progressbar />

Mobile Controls

Glass Card

<GlassCard></GlassCard>

MobilePicker

<mobilePicker:MobilePicker  SubTitle="Text style of your system apps."
                                        SelectedItem="Default"
                                        Title="Text Style">

                <mobilePicker:MobilePicker.Items>
                    <objectModel:ObservableCollection x:TypeArguments="system:String">
                        <system:String>Default</system:String>
                        <system:String>Italic</system:String>
                        <system:String>Bold</system:String>
                    </objectModel:ObservableCollection>
                </mobilePicker:MobilePicker.Items>

 </mobilePicker:MobilePicker>

MobileNumberPicker

<MobileNumberPicker Value="10"  Maximum="20" Minimum="20"/>

Dialog

InteractiveContainer.ShowDialog(new Control());

...

InteractiveContainer.CloseDialog();

Toast

InteractiveContainer.ShowToast(new TextBlock(){Text = "Hit !"}, 5);

FormFields

FormFields controls have been created to make settings pages conception easier.

<controls:SliverPage Header="Settings">
        <StackPanel>
            <controls:GroupBox Header="View mode">
                <StackPanel>
                    <formFields:FormFieldSwitch Title="Dark Mode" IsChecked="{Binding DarkMode}" />

                    <cherylUi:HorizontalSeparator />

                    <formFields:FormFieldAction Command="{Binding LaunchToast}" Title="Eye Comfort" />

                    <cherylUi:HorizontalSeparator />

                    <formFields:FormFieldNumberPicker Value="10" />

                    <cherylUi:HorizontalSeparator />

                    <formFields:FormFieldPicker DialogSubTitle="Text style of your system apps." DialogTitle="Text Style"
                                                SelectedItem="{Binding SelectedTextStyle}" Items="{Binding TextItems" Title="Text Style" /> 
                </StackPanel>
            </controls:GroupBox>
         </StackPanel>
 </controls:SliverPage>