3. Controls

Navigation

SideMenu

 <suki:SukiSideMenu>

        <suki:SukiSideMenu.HeaderContent>
           <!-- your header content -->
        </suki:SukiSideMenu.HeaderContent>

        <suki:SukiSideMenu.Items>
          
            <suki:SukiSideMenuItem Header="Statistics">
                <suki:SukiSideMenuItem.Icon>
                    <!-- your icon content -->
                </suki:SukiSideMenuItem.Icon>
                <suki:SukiSideMenuItem.PageContent>
                   <TextBlock Margin="200" Text="Statistics Page"></TextBlock>
                </suki:SukiSideMenuItem.PageContent>
            </suki:SukiSideMenuItem>
       </suki:SukiSideMenu.Items>
  </suki:SukiSideMenu>

Menu Items

You can add MenuItems in the MenuItems property of SukiWindow and by settings the "IsMenuVisible" property to True.

<suki:SukiWindow 
              ... IsMenuVisible="True">
   
   <suki:SukiWindow.MenuItems>
       <MenuItem Header="File">
           <MenuItem Header="Edit">
               <MenuItem Header="Edit"></MenuItem>
               <MenuItem Header="Save"></MenuItem>
           </MenuItem>
           <MenuItem Header="Save"></MenuItem>
       </MenuItem>
       <MenuItem Header="Edit"></MenuItem>
       <MenuItem Header="Save"></MenuItem>
   </suki:SukiWindow.MenuItems>
</suki:SukiWindow>

Layout

Card

<GlassCard></GlassCard>

Tabs

<TabControl>
    <TabItem Header="Red Tab">
         <Grid Background="#44ff0000" />
    </TabItem>
     <TabItem Header="Green Tab">
         <Grid Background="#4400ff00" />
     </TabItem>
      <TabItem Header="Blue Tab">
          <Grid Background="#440000ff" />
      </TabItem>
</TabControl>
 

StackPage

xaml

 <controls:StackPage Header="Settings" Name="StackSettings">
      <controls:StackPage.Content>
                  ... Root Page Content ...
      </controls:StackPage.Content>
 </controls:StackPage>

Push a new Page

this.Get<StackPage>("StackSettings").Push("Network",b );

SettingsLayout

   <suki:SettingsLayout>
          <suki:SettingsLayout.Items>
                 <objectModel:ObservableCollection x:TypeArguments="suki:SettingsLayoutItem">
                         <suki:SettingsLayoutItem Header="Settings Part1">
                               <suki:SettingsLayoutItem.Content>
                                     <Border Background="LightGray" Height="300" />
                               </suki:SettingsLayoutItem.Content>
                        </suki:SettingsLayoutItem>
                        <suki:SettingsLayoutItem Header="Settings Part 2">
                               <suki:SettingsLayoutItem.Content>
                                     <Border Background="LightGray" Height="300" />
                               </suki:SettingsLayoutItem.Content>
                        </suki:SettingsLayoutItem>
                 <suki:SettingsLayoutItem Header="Settings Part 3">
                       <suki:SettingsLayoutItem.Content>
                            <Border Background="LightGray" Height="300" />
                       </suki:SettingsLayoutItem.Content>
                 </suki:SettingsLayoutItem>
           </objectModel:ObservableCollection>
      </suki:SettingsLayout.Items>
 </suki:SettingsLayout>
 

SukiWindow

 <suki:SukiWindow Title="Suki UI Testing - New Project"
                 ... >
    <suki:SukiWindow.LogoContent>
        ...
    </suki:SukiWindow.LogoContent>
 </suki:SukiWindow>

Button - Inputs

ToggleSwitch

<ToggleSwitch />

or

 <ToggleButton Classes="Switch" />

Buttons

<Button Classes="Flat" Content="Flat" />
<Button Classes="Flat Rounded" Content="Rounded" />
<Button Classes="Basic" Content="Basic" />
<Button Content="Neutral" />
<Button Classes="Outlined" Content="Outlined" />

<Button Classes="Flat Large" Content="Button" />

this.Get<Button>("ButtonSignIn").ShowProgress();
this.Get<Button>("ButtonSignIn").HideProgress();

ToggleButton

 <ToggleButton Content="Toggle Me" />

Slider

<Slider IsSnapToTickEnabled="True" Maximum="100" Minimum="0" TickFrequency="1" Value="50"></Slider>

TextBox

 <TextBox Text="This is Text"></TextBox>
 <TextBox Text="Delete Enabled" theme:TextBoxExtensions.AddDeleteButton="True"></TextBox>
 <TextBox Watermark="Watermark"></TextBox>
 <TextBox theme:TextBoxExtensions.Prefix="http" Watermark="avaloniaui.com"></TextBox>

ComboBox

 <ComboBox PlaceholderText="Select a Color">
    <ComboBoxItem>
       <TextBlock>Red</TextBlock>
    </ComboBoxItem>
    <ComboBoxItem>
       <TextBlock>Green</TextBlock>
    </ComboBoxItem>
    <ComboBoxItem>
       <TextBlock>Blue</TextBlock>
    </ComboBoxItem>
</ComboBox>

NumericUpDown

<NumericUpDown></NumericUpDown>

CheckBox

 <CheckBox IsChecked="True">
     <TextBlock Text="Check This"></TextBlock>
 </CheckBox>

RadioButton

<StackPanel Orientation="Vertical">
          <RadioButton Margin="5">Item 1</RadioButton>
          <RadioButton Margin="5">Item 2</RadioButton>
          <RadioButton Margin="5">Item 3</RadioButton>
</StackPanel>

          <RadioButton Classes="GigaChips" >
              ...
          </RadioButton>
         

DatePicker

<DatePicker />

Progress

WaveProgress

xmlns:suki="clr-namespace:SukiUI.Controls;assembly=SukiUI"
...

<suki:WaveProgress Value="40" IsTextVisible="True" />

Stepper

xmlns:suki="clr-namespace:SukiUI.Controls;assembly=SukiUI"
...

<controls:Stepper Margin="30,15" Index="1">
      <controls:Stepper.Steps>
            <objectModel:ObservableCollection x:TypeArguments="system:String">
                <system:String>Step One</system:String>
                <system:String>Step Two</system:String>
                <system:String>Step Three</system:String>
            </objectModel:ObservableCollection>
      </controls:Stepper.Steps>
</controls:Stepper>

<controls:Stepper AlternativeStyle="True">
      ...
</controls:Stepper>

CircleProgressBar

xmlns:suki="clr-namespace:SukiUI.Controls;assembly=SukiUI"
...

<controls:CircleProgressBar Height="130" StrokeWidth="11" Value="60" Width="130">
     <TextBlock Margin="0,1,0,0" Classes="h3">60%</TextBlock>
</controls:CircleProgressBar>

<controls:CircleProgressBar IsIndeterminate="True">
 
</controls:CircleProgressBar>

Loading

xmlns:suki="clr-namespace:SukiUI.Controls;assembly=SukiUI"
...

<suki:Loading></suki:Loading>

ProgressBar

<ProgressBar  Value="60" />

<ProgressBar  Value="50" ShowProgressText="True" />

<ProgressBar IsIndeterminate="True" />

Data Presentation

DataGrid

<DataGrid Name="myDataGrid" AutoGenerateColumns="True" IsReadOnly="True" />

ListBox

 <ListBox>
      <TextBlock>item 1</TextBlock>
      <TextBlock>item 2</TextBlock>
      <TextBlock>item 3</TextBlock>
 </ListBox>

TreeView

<TreeView >
     <TreeViewItem Header="Test 1">
          <TreeViewItem Header="Test 2" />
          <TreeViewItem Header="Test 3" />
     </TreeViewItem>
     <TreeViewItem Header="Test 4" />
</TreeView>

GroupBox

xmlns:suki="clr-namespace:SukiUI.Controls;assembly=SukiUI"
...

<controls:GroupBox>
     <controls:GroupBox.Header>
          <TextBlock Text="Header"></TextBlock>
     </controls:GroupBox.Header>
         <Grid Height="100" Width="300">
               <TextBlock VerticalAlignment="Center" HorizontalAlignment="Center">Test Content</TextBlock>
         </Grid>
</controls:GroupBox>

BusyArea

<suki:BusyArea IsBusy="False">
    <!-- Content -->
</suki:BusyArea>

Expander

<Expander Header="Click To Expand">
          <TextBlock>Expanded</TextBlock>
</Expander>