Added more controls

src/PixiEditor.Avalonia/PixiEditor.Avalonia/Views/MainView.axaml

@@ -26,11 +26,26 @@
         <Button Content="Button"/>
         <Button Content="Button Disabled" IsEnabled="False"/>
 
+        <ToggleButton Content="ToggleButton"/>
+
+        <RepeatButton Content="Repeat Button"/>
+
         <CheckBox Content="CheckBox" IsThreeState="True"/>
 
-        <RadioButton Content="RadioButton"/>
+        <RadioButton GroupName="Radios" Content="Option 1"/>
+        <RadioButton GroupName="Radios" Content="Option 2"/>
+
+        <ScrollViewer Height="50">
+            <StackPanel>
+                <TextBlock Text="ScrollViewer"/>
+                <TextBlock Text="ScrollViewer"/>
+                <TextBlock Text="ScrollViewer"/>
+                <TextBlock Text="ScrollViewer"/>
+                <TextBlock Text="ScrollViewer"/>
+            </StackPanel>
+        </ScrollViewer>
 
-        <TextBox Text="TextBox"/>
+        <TextBox Watermark="TextBox" Text="Sample text"/>
 
         <ComboBox SelectedIndex="0">
             <ComboBoxItem Content="ComboBoxItem 1"/>

src/PixiEditor.UI.Common/Accents/Base.axaml

@@ -9,11 +9,13 @@
             <Color x:Key="AccentColor">#B00022</Color>
 
             <Color x:Key="ThemeForegroundColor">#FFFFFF</Color>
+            <Color x:Key="ThemeForegroundSecondaryColor">#B3FFFFFF</Color>
 
             <Color x:Key="ThemeControlLowColor">#252525</Color>
             <Color x:Key="ThemeControlMidColor">#303030</Color>
             <Color x:Key="ThemeControlHighColor">#404040</Color>
             <Color x:Key="ThemeControlHighlightColor">#515151</Color>
+            <Color x:Key="HighlightForegroundColor">#FFFFFF</Color>
 
             <Color x:Key="ThemeBorderMidColor">#3F3F46</Color>
             <Color x:Key="ThemeBorderHighColor">#4F4F4F</Color>
@@ -22,19 +24,23 @@
 
             <SolidColorBrush x:Key="ThemeBackgroundBrush" Color="{StaticResource ThemeBackgroundColor}" />
             <SolidColorBrush x:Key="ThemeBackgroundBrush1" Color="{StaticResource ThemeBackgroundColor1}" />
-            <SolidColorBrush x:Key="AccentBrush" Color="{StaticResource AccentColor}" />
+            <SolidColorBrush x:Key="ThemeAccentBrush" Color="{StaticResource AccentColor}" />
 
             <SolidColorBrush x:Key="ThemeForegroundBrush" Color="{StaticResource ThemeForegroundColor}" />
+            <SolidColorBrush x:Key="ThemeForegroundSecondaryBrush" Color="{StaticResource ThemeForegroundSecondaryColor}" />
 
             <SolidColorBrush x:Key="ThemeControlLowBrush" Color="{StaticResource ThemeControlLowColor}" />
             <SolidColorBrush x:Key="ThemeControlMidBrush" Color="{StaticResource ThemeControlMidColor}" />
             <SolidColorBrush x:Key="ThemeControlHighBrush" Color="{StaticResource ThemeControlHighColor}" />
             <SolidColorBrush x:Key="ThemeControlHighlightBrush" Color="{StaticResource ThemeControlHighlightColor}" />
+            <SolidColorBrush x:Key="ThemeHighlightForegroundBrush" Color="{StaticResource HighlightForegroundColor}" />
 
             <SolidColorBrush x:Key="ThemeBorderMidBrush" Color="{StaticResource ThemeBorderMidColor}" />
             <SolidColorBrush x:Key="ThemeBorderHighBrush" Color="{StaticResource ThemeBorderHighColor}" />
 
             <CornerRadius x:Key="ControlCornerRadius">5</CornerRadius>
+            <Thickness x:Key="ThemeBorderThickness">1</Thickness>
+            <Thickness x:Key="ScrollBarThickness">5</Thickness>
         </ResourceDictionary>
     </ResourceDictionary.ThemeDictionaries>
 

src/PixiEditor.UI.Common/Controls/ComboBox.axaml

@@ -0,0 +1,82 @@
+<ResourceDictionary xmlns="https://github.com/avaloniaui"
+                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
+  <ControlTheme x:Key="{x:Type ComboBox}"
+                TargetType="ComboBox">
+    <Setter Property="Background" Value="Transparent" />
+    <Setter Property="Foreground" Value="{DynamicResource ThemeForegroundBrush}" />
+    <Setter Property="BorderBrush" Value="{DynamicResource ThemeBorderMidBrush}" />
+    <Setter Property="BorderThickness" Value="{DynamicResource ThemeBorderThickness}" />
+    <Setter Property="CornerRadius" Value="{DynamicResource ThemeCornerRadius}" />
+    <Setter Property="HorizontalContentAlignment" Value="Stretch" />
+    <Setter Property="VerticalContentAlignment" Value="Center" />
+    <Setter Property="Padding" Value="4" />
+    <Setter Property="MinHeight" Value="20" />
+    <Setter Property="PlaceholderForeground" Value="{DynamicResource ThemeForegroundBrush}" />
+    <Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Disabled" />
+    <Setter Property="Template">
+      <ControlTemplate>
+        <Border Name="border"
+                Background="{TemplateBinding Background}"
+                BorderBrush="{TemplateBinding BorderBrush}"
+                BorderThickness="{TemplateBinding BorderThickness}"
+                CornerRadius="{TemplateBinding CornerRadius}">
+          <Grid ColumnDefinitions="*,Auto">
+            <TextBlock Name="PlaceholderTextBlock"
+                       Grid.Column="0"
+                       Margin="{TemplateBinding Padding}"
+                       HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
+                       VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
+                       Foreground="{TemplateBinding PlaceholderForeground}"
+                       IsVisible="{TemplateBinding SelectionBoxItem,
+                                                   Converter={x:Static ObjectConverters.IsNull}}"
+                       Text="{TemplateBinding PlaceholderText}" />
+            <ContentControl Margin="{TemplateBinding Padding}"
+                            HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
+                            VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
+                            Content="{TemplateBinding SelectionBoxItem}"
+                            ContentTemplate="{TemplateBinding ItemTemplate}" />
+            <ToggleButton Name="toggle"
+                          Grid.Column="1"
+                          Background="Transparent"
+                          BorderThickness="0"
+                          ClickMode="Press"
+                          Focusable="False"
+                          IsChecked="{TemplateBinding IsDropDownOpen,
+                                                      Mode=TwoWay}">
+              <Path Width="8"
+                    Height="4"
+                    HorizontalAlignment="Center"
+                    VerticalAlignment="Center"
+                    Data="F1 M 301.14,-189.041L 311.57,-189.041L 306.355,-182.942L 301.14,-189.041 Z"
+                    Fill="{DynamicResource ThemeForegroundBrush}"
+                    Stretch="Uniform" />
+            </ToggleButton>
+            <Popup Name="PART_Popup"
+                   MinWidth="{Binding Bounds.Width, RelativeSource={RelativeSource TemplatedParent}}"
+                   MaxHeight="{TemplateBinding MaxDropDownHeight}"
+                   IsLightDismissEnabled="True"
+                   IsOpen="{TemplateBinding IsDropDownOpen,
+                                            Mode=TwoWay}"
+                   PlacementTarget="{TemplateBinding}">
+              <Border Background="{DynamicResource ThemeBackgroundBrush}"
+                      BorderBrush="{DynamicResource ThemeBorderMidBrush}"
+                      BorderThickness="1">
+                <ScrollViewer HorizontalScrollBarVisibility="{TemplateBinding ScrollViewer.HorizontalScrollBarVisibility}"
+                              VerticalScrollBarVisibility="{TemplateBinding ScrollViewer.VerticalScrollBarVisibility}">
+                  <ItemsPresenter Name="PART_ItemsPresenter"
+                                  ItemsPanel="{TemplateBinding ItemsPanel}" />
+                </ScrollViewer>
+              </Border>
+            </Popup>
+          </Grid>
+        </Border>
+      </ControlTemplate>
+    </Setter>
+    <Style Selector="^:pointerover /template/ Border#border">
+      <Setter Property="BorderBrush" Value="{DynamicResource ThemeBorderHighBrush}" />
+    </Style>
+    <Style Selector="^:disabled /template/ Border#border">
+      <Setter Property="Opacity" Value="{DynamicResource ThemeDisabledOpacity}" />
+    </Style>
+  </ControlTheme>
+</ResourceDictionary>

src/PixiEditor.UI.Common/Controls/ComboBoxItem.axaml

@@ -0,0 +1,39 @@
+<ResourceDictionary xmlns="https://github.com/avaloniaui"
+                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
+  <ControlTheme x:Key="{x:Type ComboBoxItem}"
+                TargetType="ComboBoxItem">
+    <Setter Property="Background" Value="Transparent" />
+    <Setter Property="Padding" Value="2" />
+    <Setter Property="HorizontalAlignment" Value="Stretch" />
+    <Setter Property="HorizontalContentAlignment" Value="Left" />
+    <Setter Property="Template">
+      <ControlTemplate>
+        <ContentPresenter Name="PART_ContentPresenter"
+                          Padding="{TemplateBinding Padding}"
+                          HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
+                          VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
+                          Background="{TemplateBinding Background}"
+                          BorderBrush="{TemplateBinding BorderBrush}"
+                          BorderThickness="{TemplateBinding BorderThickness}"
+                          Content="{TemplateBinding Content}"
+                          ContentTemplate="{TemplateBinding ContentTemplate}"
+                          CornerRadius="{TemplateBinding CornerRadius}" />
+      </ControlTemplate>
+    </Setter>
+    <Style Selector="^:pointerover /template/ ContentPresenter#PART_ContentPresenter">
+      <Setter Property="Background" Value="{DynamicResource ThemeControlHighlightMidBrush}" />
+    </Style>
+    <Style Selector="^:selected /template/ ContentPresenter#PART_ContentPresenter">
+      <Setter Property="Background" Value="{DynamicResource ThemeAccentBrush4}" />
+    </Style>
+    <Style Selector="^:selected:focus /template/ ContentPresenter#PART_ContentPresenter">
+      <Setter Property="Background" Value="{DynamicResource ThemeAccentBrush3}" />
+    </Style>
+    <Style Selector="^:selected:pointerover /template/ ContentPresenter#PART_ContentPresenter">
+      <Setter Property="Background" Value="{DynamicResource ThemeAccentBrush3}" />
+    </Style>
+    <Style Selector="^:selected:focus:pointerover /template/ ContentPresenter#PART_ContentPresenter">
+      <Setter Property="Background" Value="{DynamicResource ThemeAccentBrush2}" />
+    </Style>
+  </ControlTheme>
+</ResourceDictionary>

src/PixiEditor.UI.Common/Controls/PopupRoot.axaml

@@ -0,0 +1,28 @@
+<ResourceDictionary xmlns="https://github.com/avaloniaui"
+                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
+    <ControlTheme x:Key="{x:Type PopupRoot}"
+                  TargetType="PopupRoot">
+        <Setter Property="Background" Value="{x:Null}" />
+        <Setter Property="TransparencyLevelHint" Value="Transparent" />
+        <Setter Property="Foreground" Value="{DynamicResource ThemeForegroundBrush}" />
+        <Setter Property="FontSize" Value="{DynamicResource FontSizeNormal}" />
+        <Setter Property="FontFamily" Value="{DynamicResource ContentControlThemeFontFamily}" />
+        <Setter Property="Template">
+            <ControlTemplate>
+                <LayoutTransformControl LayoutTransform="{TemplateBinding Transform}">
+                    <Panel>
+                        <Border Name="PART_TransparencyFallback"
+                                IsHitTestVisible="False" />
+                        <VisualLayerManager IsPopup="True">
+                            <ContentPresenter Name="PART_ContentPresenter"
+                                              Padding="{TemplateBinding Padding}"
+                                              Background="{TemplateBinding Background}"
+                                              Content="{TemplateBinding Content}"
+                                              ContentTemplate="{TemplateBinding ContentTemplate}" />
+                        </VisualLayerManager>
+                    </Panel>
+                </LayoutTransformControl>
+            </ControlTemplate>
+        </Setter>
+    </ControlTheme>
+</ResourceDictionary>

src/PixiEditor.UI.Common/Controls/PopupRoot.axaml.cs

@@ -0,0 +1,10 @@
+using Avalonia;
+using Avalonia.Controls;
+using Avalonia.Controls.Primitives;
+
+namespace PixiEditor.UI.Common.Controls;
+
+public class PopupRoot : TemplatedControl
+{
+}
+

src/PixiEditor.UI.Common/Controls/RadioButton.axaml

@@ -0,0 +1,69 @@
+<ResourceDictionary xmlns="https://github.com/avaloniaui"
+                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
+    <Design.PreviewWith>
+        <Border Padding="20">
+            <StackPanel Orientation="Vertical">
+                <RadioButton IsChecked="True" Content="Label"/>
+                <RadioButton IsChecked="False" Content="Label"/>
+                <RadioButton IsChecked="{x:Null}" Content="Label"/>
+            </StackPanel>
+        </Border>
+    </Design.PreviewWith>
+    <ControlTheme x:Key="{x:Type RadioButton}"
+                  TargetType="RadioButton">
+    <Setter Property="Background" Value="Transparent" />
+    <Setter Property="BorderBrush" Value="{DynamicResource ThemeBorderMidBrush}" />
+    <Setter Property="BorderThickness" Value="{DynamicResource ThemeBorderThickness}" />
+    <Setter Property="Template">
+      <ControlTemplate>
+        <Grid Background="{TemplateBinding Background}"
+              ColumnDefinitions="Auto,*">
+          <Ellipse Name="border"
+                   Width="18"
+                   Height="18"
+                   VerticalAlignment="Center"
+                   Stroke="{TemplateBinding BorderBrush}"
+                   StrokeThickness="1" />
+          <Ellipse Name="checkMark"
+                   Width="10"
+                   Height="10"
+                   HorizontalAlignment="Center"
+                   VerticalAlignment="Center"
+                   Stretch="Uniform"
+                   UseLayoutRounding="False" />
+                <Path x:Name="indeterminateMark"
+                FlowDirection="LeftToRight" Width="9" Height="9" Margin="1 1 0 0"
+                Stroke="{DynamicResource AccentColor}" StrokeThickness="1.5"
+                Data="M 0 8 L 8 0" />
+          <ContentPresenter Name="PART_ContentPresenter"
+                            Grid.Column="1"
+                            Margin="4,0,0,0"
+                            VerticalAlignment="Center"
+                            Content="{TemplateBinding Content}"
+                            ContentTemplate="{TemplateBinding ContentTemplate}"
+                            RecognizesAccessKey="True" />
+        </Grid>
+      </ControlTemplate>
+    </Setter>
+
+    <Style Selector="^:pointerover /template/ Ellipse#border">
+      <Setter Property="Stroke" Value="{DynamicResource ThemeBorderHighBrush}" />
+    </Style>
+    <Style Selector="^ /template/ Ellipse#checkMark">
+      <Setter Property="Fill" Value="{DynamicResource ThemeAccentBrush}" />
+      <Setter Property="IsVisible" Value="False" />
+    </Style>
+    <Style Selector="^ /template/ Path#indeterminateMark">
+      <Setter Property="IsVisible" Value="False" />
+    </Style>
+    <Style Selector="^:checked /template/ Ellipse#checkMark">
+      <Setter Property="IsVisible" Value="True" />
+    </Style>
+    <Style Selector="^:indeterminate /template/ Path#indeterminateMark">
+      <Setter Property="IsVisible" Value="True" />
+    </Style>
+    <Style Selector="^:disabled /template/ Ellipse#border">
+      <Setter Property="Opacity" Value="{DynamicResource ThemeDisabledOpacity}" />
+    </Style>
+  </ControlTheme>
+</ResourceDictionary>

src/PixiEditor.UI.Common/Controls/ScrollBar.axaml

@@ -0,0 +1,151 @@
+<ResourceDictionary xmlns="https://github.com/avaloniaui"
+                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
+  <ControlTheme x:Key="{x:Type ScrollBar}"
+                TargetType="ScrollBar">
+    <Setter Property="Cursor" Value="Arrow" />
+
+    <Style Selector="^:horizontal">
+      <Setter Property="Height" Value="{DynamicResource ScrollBarThickness}" />
+      <Setter Property="Template">
+        <ControlTemplate>
+          <Border Background="{DynamicResource ThemeControlMidBrush}"
+                  UseLayoutRounding="False">
+            <Grid ColumnDefinitions="Auto,*,Auto">
+              <RepeatButton Name="PART_LineUpButton"
+                            Grid.Row="0"
+                            Grid.Column="0"
+                            MinWidth="{DynamicResource ScrollBarThickness}"
+                            VerticalAlignment="Center"
+                            Classes="repeat"
+                            Focusable="False">
+                <Path Data="M 4 0 L 4 8 L 0 4 Z" />
+              </RepeatButton>
+              <Track Grid.Row="1"
+                     Grid.Column="1"
+                     Maximum="{TemplateBinding Maximum}"
+                     Minimum="{TemplateBinding Minimum}"
+                     Orientation="{TemplateBinding Orientation}"
+                     ViewportSize="{TemplateBinding ViewportSize}"
+                     Value="{TemplateBinding Value,
+                                             Mode=TwoWay}">
+                <Track.DecreaseButton>
+                  <RepeatButton Name="PART_PageUpButton"
+                                Classes="repeattrack"
+                                Focusable="False" />
+                </Track.DecreaseButton>
+                <Track.IncreaseButton>
+                  <RepeatButton Name="PART_PageDownButton"
+                                Classes="repeattrack"
+                                Focusable="False" />
+                </Track.IncreaseButton>
+                <Thumb Name="thumb" />
+              </Track>
+              <RepeatButton Name="PART_LineDownButton"
+                            Grid.Row="2"
+                            Grid.Column="2"
+                            MinWidth="{DynamicResource ScrollBarThickness}"
+                            VerticalAlignment="Center"
+                            Classes="repeat"
+                            Focusable="False">
+                <Path Data="M 0 0 L 4 4 L 0 8 Z" />
+              </RepeatButton>
+            </Grid>
+          </Border>
+        </ControlTemplate>
+      </Setter>
+    </Style>
+    <Style Selector="^:vertical">
+      <Setter Property="Width" Value="{DynamicResource ScrollBarThickness}" />
+      <Setter Property="Template">
+        <ControlTemplate>
+          <Border Background="{DynamicResource ThemeControlMidBrush}"
+                  UseLayoutRounding="False">
+            <Grid RowDefinitions="Auto,*,Auto">
+              <RepeatButton Name="PART_LineUpButton"
+                            Grid.Row="0"
+                            MinHeight="{DynamicResource ScrollBarThickness}"
+                            HorizontalAlignment="Center"
+                            Classes="repeat"
+                            Focusable="False">
+                <Path Data="M 0 4 L 8 4 L 4 0 Z" />
+              </RepeatButton>
+              <Track Grid.Row="1"
+                     Grid.Column="1"
+                     IsDirectionReversed="True"
+                     Maximum="{TemplateBinding Maximum}"
+                     Minimum="{TemplateBinding Minimum}"
+                     Orientation="{TemplateBinding Orientation}"
+                     ViewportSize="{TemplateBinding ViewportSize}"
+                     Value="{TemplateBinding Value,
+                                             Mode=TwoWay}">
+                <Track.DecreaseButton>
+                  <RepeatButton Name="PART_PageUpButton"
+                                Classes="repeattrack"
+                                Focusable="False" />
+                </Track.DecreaseButton>
+                <Track.IncreaseButton>
+                  <RepeatButton Name="PART_PageDownButton"
+                                Classes="repeattrack"
+                                Focusable="False" />
+                </Track.IncreaseButton>
+                <Thumb Name="thumb" />
+              </Track>
+              <RepeatButton Name="PART_LineDownButton"
+                            Grid.Row="2"
+                            Grid.Column="2"
+                            MinHeight="{DynamicResource ScrollBarThickness}"
+                            HorizontalAlignment="Center"
+                            Classes="repeat"
+                            Focusable="False">
+                <Path Data="M 0 0 L 4 4 L 8 0 Z" />
+              </RepeatButton>
+            </Grid>
+          </Border>
+        </ControlTemplate>
+      </Setter>
+    </Style>
+    <Style Selector="^ /template/ Thumb#thumb">
+      <Setter Property="Background" Value="{DynamicResource ThemeControlMidHighBrush}" />
+      <Setter Property="Template">
+        <Setter.Value>
+          <ControlTemplate>
+            <Border Background="{TemplateBinding Background}" />
+          </ControlTemplate>
+        </Setter.Value>
+      </Setter>
+    </Style>
+    <Style Selector="^ /template/ Thumb#thumb:pointerover">
+      <Setter Property="Background" Value="{DynamicResource ThemeControlHighBrush}" />
+    </Style>
+    <Style Selector="^ /template/ Thumb#thumb:pressed">
+      <Setter Property="Background" Value="{DynamicResource ThemeControlVeryHighBrush}" />
+    </Style>
+    <Style Selector="^:horizontal /template/ Thumb#thumb">
+      <Setter Property="MinWidth" Value="{DynamicResource ScrollBarThickness}" />
+      <Setter Property="Height" Value="{DynamicResource ScrollBarThumbThickness}" />
+    </Style>
+    <Style Selector="^:vertical /template/ Thumb#thumb">
+      <Setter Property="MinHeight" Value="{DynamicResource ScrollBarThickness}" />
+      <Setter Property="Width" Value="{DynamicResource ScrollBarThumbThickness}" />
+    </Style>
+    <Style Selector="^ /template/ RepeatButton.repeat">
+      <Setter Property="Padding" Value="2" />
+      <Setter Property="BorderThickness" Value="0" />
+    </Style>
+    <Style Selector="^ /template/ RepeatButton.repeattrack">
+      <Setter Property="Template">
+        <ControlTemplate>
+          <Border Background="{TemplateBinding Background}" />
+        </ControlTemplate>
+      </Setter>
+    </Style>
+
+    <Style Selector="^ /template/ RepeatButton > Path">
+      <Setter Property="Fill" Value="{DynamicResource ThemeForegroundLowBrush}" />
+    </Style>
+
+    <Style Selector="^ /template/ RepeatButton:pointerover > Path">
+      <Setter Property="Fill" Value="{DynamicResource ThemeAccentBrush}" />
+    </Style>
+  </ControlTheme>
+</ResourceDictionary>

src/PixiEditor.UI.Common/Controls/ScrollViewer.axaml

@@ -0,0 +1,96 @@
+<ResourceDictionary xmlns="https://github.com/avaloniaui"
+                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+                    xmlns:converters="using:Avalonia.Controls.Converters">
+  <ControlTheme x:Key="{x:Type ScrollViewer}"
+                TargetType="ScrollViewer">
+    <Setter Property="Background" Value="Transparent" />
+    <Setter Property="Template">
+      <ControlTemplate>
+        <Grid ColumnDefinitions="*,Auto"
+              RowDefinitions="*,Auto">
+          <ScrollContentPresenter Name="PART_ContentPresenter"
+                                  Padding="{TemplateBinding Padding}"
+                                  HorizontalSnapPointsType="{TemplateBinding HorizontalSnapPointsType}"
+                                  VerticalSnapPointsType="{TemplateBinding VerticalSnapPointsType}"
+                                  HorizontalSnapPointsAlignment="{TemplateBinding HorizontalSnapPointsAlignment}"
+                                  VerticalSnapPointsAlignment="{TemplateBinding VerticalSnapPointsAlignment}"
+                                  Background="{TemplateBinding Background}"
+                                  ScrollViewer.IsScrollInertiaEnabled="{TemplateBinding IsScrollInertiaEnabled}">
+            <ScrollContentPresenter.GestureRecognizers>
+              <ScrollGestureRecognizer CanHorizontallyScroll="{Binding CanHorizontallyScroll, ElementName=PART_ContentPresenter}"
+                                       CanVerticallyScroll="{Binding CanVerticallyScroll, ElementName=PART_ContentPresenter}"
+                                       IsScrollInertiaEnabled="{Binding (ScrollViewer.IsScrollInertiaEnabled), ElementName=PART_ContentPresenter}"/>
+            </ScrollContentPresenter.GestureRecognizers>
+          </ScrollContentPresenter>
+          <ScrollBar Name="PART_HorizontalScrollBar"
+                     Grid.Row="1"
+                     Orientation="Horizontal"/>
+          <ScrollBar Name="PART_VerticalScrollBar"
+                     Grid.Column="1"
+                     Orientation="Vertical"/>
+          <Panel Grid.Row="1"
+                 Grid.Column="1"
+                 Background="{DynamicResource ThemeControlMidBrush}" />
+        </Grid>
+      </ControlTemplate>
+    </Setter>
+  </ControlTheme>
+
+  <ControlTheme x:Key="SimpleMenuScrollViewer"
+                TargetType="ScrollViewer">
+    <Setter Property="Background" Value="Transparent" />
+    <Setter Property="Template">
+      <ControlTemplate>
+        <DockPanel>
+          <RepeatButton Background="Transparent"
+                        BorderThickness="0"
+                        Command="{Binding LineUp, RelativeSource={RelativeSource TemplatedParent}}"
+                        DockPanel.Dock="Top">
+            <RepeatButton.IsVisible>
+              <MultiBinding Converter="{x:Static converters:MenuScrollingVisibilityConverter.Instance}"
+                            ConverterParameter="0">
+                <Binding Path="VerticalScrollBarVisibility"
+                         RelativeSource="{RelativeSource TemplatedParent}" />
+                <Binding Path="Offset.Y"
+                         RelativeSource="{RelativeSource TemplatedParent}" />
+                <Binding Path="Extent.Height"
+                         RelativeSource="{RelativeSource TemplatedParent}" />
+                <Binding Path="Viewport.Height"
+                         RelativeSource="{RelativeSource TemplatedParent}" />
+              </MultiBinding>
+            </RepeatButton.IsVisible>
+            <Path Data="M 0 4 L 8 4 L 4 0 Z" />
+          </RepeatButton>
+          <RepeatButton Background="Transparent"
+                        BorderThickness="0"
+                        Command="{Binding LineDown, RelativeSource={RelativeSource TemplatedParent}}"
+                        DockPanel.Dock="Bottom">
+            <RepeatButton.IsVisible>
+              <MultiBinding Converter="{x:Static converters:MenuScrollingVisibilityConverter.Instance}"
+                            ConverterParameter="100">
+                <Binding Path="VerticalScrollBarVisibility"
+                         RelativeSource="{RelativeSource TemplatedParent}" />
+                <Binding Path="Offset.Y"
+                         RelativeSource="{RelativeSource TemplatedParent}" />
+                <Binding Path="Extent.Height"
+                         RelativeSource="{RelativeSource TemplatedParent}" />
+                <Binding Path="Viewport.Height"
+                         RelativeSource="{RelativeSource TemplatedParent}" />
+              </MultiBinding>
+            </RepeatButton.IsVisible>
+            <Path Data="M 0 0 L 4 4 L 8 0 Z" />
+          </RepeatButton>
+          <ScrollContentPresenter Name="PART_ContentPresenter"
+                                  Margin="{TemplateBinding Padding}" />
+        </DockPanel>
+      </ControlTemplate>
+    </Setter>
+    <Style Selector="^ /template/ RepeatButton > Path">
+      <Setter Property="Fill" Value="{DynamicResource ThemeForegroundLowBrush}" />
+    </Style>
+
+    <Style Selector="^ /template/ RepeatButton:pointerover > Path">
+      <Setter Property="Fill" Value="{DynamicResource ThemeAccentBrush}" />
+    </Style>
+  </ControlTheme>
+</ResourceDictionary>

src/PixiEditor.UI.Common/Controls/TextBox.axaml

@@ -0,0 +1,221 @@
+<ResourceDictionary xmlns="https://github.com/avaloniaui"
+                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
+    <Design.PreviewWith>
+        <TextBox Watermark="Text here"/>
+    </Design.PreviewWith>
+    <StreamGeometry x:Key="TextBoxClearButtonData">M 11.416016,10 20,1.4160156 18.583984,0 10,8.5839846 1.4160156,0 0,1.4160156 8.5839844,10 0,18.583985 1.4160156,20 10,11.416015 18.583984,20 20,18.583985 Z</StreamGeometry>
+  <StreamGeometry x:Key="PasswordBoxRevealButtonData">m10.051 7.0032c2.215 0 4.0105 1.7901 4.0105 3.9984s-1.7956 3.9984-4.0105 3.9984c-2.215 0-4.0105-1.7901-4.0105-3.9984s1.7956-3.9984 4.0105-3.9984zm0 1.4994c-1.3844 0-2.5066 1.1188-2.5066 2.499s1.1222 2.499 2.5066 2.499 2.5066-1.1188 2.5066-2.499-1.1222-2.499-2.5066-2.499zm0-5.0026c4.6257 0 8.6188 3.1487 9.7267 7.5613 0.10085 0.40165-0.14399 0.80877-0.54686 0.90931-0.40288 0.10054-0.81122-0.14355-0.91208-0.54521-0.94136-3.7492-4.3361-6.4261-8.2678-6.4261-3.9334 0-7.3292 2.6792-8.2689 6.4306-0.10063 0.40171-0.50884 0.64603-0.91177 0.54571s-0.648-0.5073-0.54737-0.90901c1.106-4.4152 5.1003-7.5667 9.728-7.5667z</StreamGeometry>
+  <StreamGeometry x:Key="PasswordBoxHideButtonData">m0.21967 0.21965c-0.26627 0.26627-0.29047 0.68293-0.07262 0.97654l0.07262 0.08412 4.0346 4.0346c-1.922 1.3495-3.3585 3.365-3.9554 5.7495-0.10058 0.4018 0.14362 0.8091 0.54543 0.9097 0.40182 0.1005 0.80909-0.1436 0.90968-0.5455 0.52947-2.1151 1.8371-3.8891 3.5802-5.0341l1.8096 1.8098c-0.70751 0.7215-1.1438 1.71-1.1438 2.8003 0 2.2092 1.7909 4 4 4 1.0904 0 2.0788-0.4363 2.8004-1.1438l5.9193 5.9195c0.2929 0.2929 0.7677 0.2929 1.0606 0 0.2663-0.2662 0.2905-0.6829 0.0726-0.9765l-0.0726-0.0841-6.1135-6.1142 0.0012-0.0015-1.2001-1.1979-2.8699-2.8693 2e-3 -8e-4 -2.8812-2.8782 0.0012-0.0018-1.1333-1.1305-4.3064-4.3058c-0.29289-0.29289-0.76777-0.29289-1.0607 0zm7.9844 9.0458 3.5351 3.5351c-0.45 0.4358-1.0633 0.704-1.7392 0.704-1.3807 0-2.5-1.1193-2.5-2.5 0-0.6759 0.26824-1.2892 0.7041-1.7391zm1.7959-5.7655c-1.0003 0-1.9709 0.14807-2.8889 0.425l1.237 1.2362c0.5358-0.10587 1.0883-0.16119 1.6519-0.16119 3.9231 0 7.3099 2.6803 8.2471 6.4332 0.1004 0.4018 0.5075 0.6462 0.9094 0.5459 0.4019-0.1004 0.6463-0.5075 0.5459-0.9094-1.103-4.417-5.0869-7.5697-9.7024-7.5697zm0.1947 3.5093 3.8013 3.8007c-0.1018-2.0569-1.7488-3.7024-3.8013-3.8007z</StreamGeometry>
+
+  <MenuFlyout x:Key="TextBoxContextFlyout" Placement="Bottom">
+    <MenuItem x:Name="TextBoxContextFlyoutCutItem" Header="Cut" Command="{Binding $parent[TextBox].Cut}"
+              IsEnabled="{Binding $parent[TextBox].CanCut}" InputGesture="{x:Static TextBox.CutGesture}" />
+    <MenuItem x:Name="TextBoxContextFlyoutCopyItem" Header="Copy" Command="{Binding $parent[TextBox].Copy}"
+              IsEnabled="{Binding $parent[TextBox].CanCopy}" InputGesture="{x:Static TextBox.CopyGesture}" />
+    <MenuItem x:Name="TextBoxContextFlyoutPasteItem" Header="Paste" Command="{Binding $parent[TextBox].Paste}"
+              IsEnabled="{Binding $parent[TextBox].CanPaste}" InputGesture="{x:Static TextBox.PasteGesture}" />
+  </MenuFlyout>
+
+  <ControlTheme x:Key="TextBoxClearButtonTheme"
+                BasedOn="{StaticResource {x:Type Button}}"
+                TargetType="Button">
+    <Setter Property="Cursor" Value="Arrow" />
+    <Setter Property="Template">
+      <Setter.Value>
+        <ControlTemplate TargetType="Button">
+          <Border x:Name="PART_ButtonLayoutBorder"
+                  Background="Transparent"
+                  BorderThickness="{TemplateBinding BorderThickness}">
+            <Path x:Name="PART_GlyphElement"
+                  Width="10"
+                  Height="10"
+                  HorizontalAlignment="Center"
+                  VerticalAlignment="Center"
+                  Data="{StaticResource TextBoxClearButtonData}"
+                  Fill="{DynamicResource ThemeForegroundColor}"
+                  Stretch="Uniform" />
+          </Border>
+        </ControlTemplate>
+      </Setter.Value>
+    </Setter>
+  </ControlTheme>
+
+  <ControlTheme x:Key="PasswordBoxRevealButtonTheme"
+                BasedOn="{StaticResource {x:Type Button}}"
+                TargetType="ToggleButton">
+    <Setter Property="Cursor" Value="Arrow" />
+    <Setter Property="Template">
+      <Setter.Value>
+        <ControlTemplate TargetType="ToggleButton">
+          <Border x:Name="PART_ButtonLayoutBorder"
+                  Width="12"
+                  Background="Transparent">
+            <Panel>
+              <Path x:Name="PART_GlyphElement_Reveal"
+                    Width="12"
+                    Height="8"
+                    HorizontalAlignment="Center"
+                    VerticalAlignment="Center"
+                    Data="{DynamicResource PasswordBoxRevealButtonData}"
+                    Fill="{DynamicResource ThemeForegroundColor}"
+                    Stretch="Uniform" />
+              <Path x:Name="PART_GlyphElement_Hide"
+                    Width="12"
+                    Height="12"
+                    HorizontalAlignment="Center"
+                    VerticalAlignment="Center"
+                    Data="{DynamicResource PasswordBoxHideButtonData}"
+                    Fill="{DynamicResource ThemeForegroundColor}"
+                    Stretch="Uniform" />
+            </Panel>
+          </Border>
+        </ControlTemplate>
+      </Setter.Value>
+    </Setter>
+
+    <Style Selector="^:unchecked /template/ Path#PART_GlyphElement_Hide">
+      <Setter Property="IsVisible" Value="False" />
+    </Style>
+    <Style Selector="^:checked /template/ Path#PART_GlyphElement_Reveal">
+      <Setter Property="IsVisible" Value="False" />
+    </Style>
+  </ControlTheme>
+
+  <ControlTheme x:Key="{x:Type TextBox}"
+                TargetType="TextBox">
+    <Setter Property="CaretBrush" Value="{DynamicResource ThemeForegroundBrush}" />
+    <Setter Property="Background" Value="{DynamicResource ThemeBackgroundBrush}" />
+    <Setter Property="BorderBrush" Value="{DynamicResource ThemeBorderMidBrush}" />
+    <Setter Property="Foreground" Value="{DynamicResource ThemeForegroundBrush}" />
+    <Setter Property="BorderThickness" Value="{DynamicResource ThemeBorderThickness}" />
+    <Setter Property="SelectionBrush" Value="{DynamicResource ThemeControlHighlightBrush}" />
+    <Setter Property="SelectionForegroundBrush" Value="{DynamicResource ThemeHighlightForegroundBrush}" />
+    <Setter Property="Padding" Value="4" />
+    <Setter Property="ContextFlyout" Value="{StaticResource TextBoxContextFlyout}" />
+    <Setter Property="ScrollViewer.IsScrollChainingEnabled" Value="True" />
+    <Setter Property="CornerRadius" Value="{DynamicResource ControlCornerRadius}"/>
+    <Setter Property="Template">
+      <ControlTemplate>
+        <Border Name="border"
+                Background="{TemplateBinding Background}"
+                BorderBrush="{TemplateBinding BorderBrush}"
+                BorderThickness="{TemplateBinding BorderThickness}"
+                CornerRadius="{TemplateBinding CornerRadius}">
+          <DockPanel Margin="{TemplateBinding Padding}"
+                     HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
+                     VerticalAlignment="{TemplateBinding VerticalContentAlignment}">
+
+            <TextBlock Name="floatingWatermark"
+                       DockPanel.Dock="Top"
+                       FontSize="{DynamicResource FontSizeSmall}"
+                       Foreground="{DynamicResource ThemeForegroundSecondaryBrush}"
+                       Text="{TemplateBinding Watermark}">
+              <TextBlock.IsVisible>
+                <MultiBinding Converter="{x:Static BoolConverters.And}">
+                  <Binding Path="UseFloatingWatermark"
+                           RelativeSource="{RelativeSource TemplatedParent}" />
+                  <Binding Converter="{x:Static StringConverters.IsNotNullOrEmpty}"
+                           Path="Text"
+                           RelativeSource="{RelativeSource TemplatedParent}" />
+                </MultiBinding>
+              </TextBlock.IsVisible>
+            </TextBlock>
+
+            <DataValidationErrors>
+
+              <Grid ColumnDefinitions="Auto,*,Auto">
+                <ContentPresenter Grid.Column="0"
+                                  Grid.ColumnSpan="1"
+                                  Content="{TemplateBinding InnerLeftContent}" />
+                <ScrollViewer Name="PART_ScrollViewer"
+                              Grid.Column="1"
+                              Grid.ColumnSpan="1"
+                              AllowAutoHide="{TemplateBinding (ScrollViewer.AllowAutoHide)}"
+                              BringIntoViewOnFocusChange="{TemplateBinding (ScrollViewer.BringIntoViewOnFocusChange)}"
+                              HorizontalScrollBarVisibility="{TemplateBinding (ScrollViewer.HorizontalScrollBarVisibility)}"
+                              IsScrollChainingEnabled="{TemplateBinding (ScrollViewer.IsScrollChainingEnabled)}"
+                              VerticalScrollBarVisibility="{TemplateBinding (ScrollViewer.VerticalScrollBarVisibility)}">
+                  <Panel>
+                    <TextBlock Name="watermark"
+                               IsVisible="{TemplateBinding Text,
+                                                           Converter={x:Static StringConverters.IsNullOrEmpty}}"
+                               Opacity="0.5"
+                               Text="{TemplateBinding Watermark}"
+                               TextAlignment="{TemplateBinding TextAlignment}"
+                               TextWrapping="{TemplateBinding TextWrapping}" />
+                    <TextPresenter Name="PART_TextPresenter"
+                                   CaretBrush="{TemplateBinding CaretBrush}"
+                                   CaretIndex="{TemplateBinding CaretIndex}"
+                                   LineHeight="{TemplateBinding LineHeight}"
+                                   LetterSpacing="{TemplateBinding LetterSpacing}"
+                                   PasswordChar="{TemplateBinding PasswordChar}"
+                                   RevealPassword="{TemplateBinding RevealPassword}"
+                                   SelectionBrush="{TemplateBinding SelectionBrush}"
+                                   SelectionEnd="{TemplateBinding SelectionEnd}"
+                                   SelectionForegroundBrush="{TemplateBinding SelectionForegroundBrush}"
+                                   SelectionStart="{TemplateBinding SelectionStart}"
+                                   Text="{TemplateBinding Text,Mode=TwoWay}"
+                                   TextAlignment="{TemplateBinding TextAlignment}"
+                                   TextWrapping="{TemplateBinding TextWrapping}" />
+                  </Panel>
+                </ScrollViewer>
+                <ContentPresenter Grid.Column="2"
+                                  Grid.ColumnSpan="1"
+                                  Content="{TemplateBinding InnerRightContent}" />
+              </Grid>
+            </DataValidationErrors>
+          </DockPanel>
+        </Border>
+      </ControlTemplate>
+    </Setter>
+
+    <Style Selector="^:pointerover /template/ Border#border">
+      <Setter Property="BorderBrush" Value="{DynamicResource ThemeBorderHighBrush}" />
+    </Style>
+    <Style Selector="^:focus /template/ Border#border">
+      <Setter Property="BorderBrush" Value="{DynamicResource ThemeBorderHighBrush}" />
+    </Style>
+    <Style Selector="^:error /template/ Border#border">
+      <Setter Property="BorderBrush" Value="{DynamicResource ErrorBrush}" />
+    </Style>
+    <Style Selector="^ /template/ DockPanel">
+      <Setter Property="Cursor" Value="IBeam" />
+    </Style>
+    <Style Selector="^:disabled /template/ Border#border">
+      <Setter Property="Opacity" Value="{DynamicResource ThemeDisabledOpacity}" />
+    </Style>
+
+    <Style Selector="^.clearButton[AcceptsReturn=False][IsReadOnly=False]:focus:not(TextBox:empty)">
+      <Setter Property="InnerRightContent">
+        <Template>
+          <Button Command="{Binding $parent[TextBox].Clear}"
+                  Focusable="False"
+                  Theme="{StaticResource TextBoxClearButtonTheme}"
+                  ClipToBounds="True" />
+        </Template>
+      </Setter>
+    </Style>
+
+    <Style Selector="^.revealPasswordButton[AcceptsReturn=False][IsReadOnly=False]:not(TextBox:empty)">
+      <Setter Property="InnerRightContent">
+        <Template>
+          <Panel Margin="4,0">
+            <Panel.Styles>
+              <Style Selector="ToggleButton[IsChecked=True]">
+                <Setter Property="(ToolTip.Tip)" Value="Hide Password" />
+              </Style>
+              <Style Selector="ToggleButton[IsChecked=False]">
+                <Setter Property="(ToolTip.Tip)" Value="Show Password" />
+              </Style>
+            </Panel.Styles>
+            <ToggleButton Background="Transparent"
+                          Focusable="False"
+                          IsChecked="{Binding $parent[TextBox].RevealPassword, Mode=TwoWay}"
+                          Theme="{StaticResource PasswordBoxRevealButtonTheme}"
+                          ClipToBounds="True" />
+          </Panel>
+        </Template>
+      </Setter>
+    </Style>
+  </ControlTheme>
+</ResourceDictionary>

src/PixiEditor.UI.Common/Controls/ToggleButton.axaml

@@ -0,0 +1,45 @@
+<ResourceDictionary xmlns="https://github.com/avaloniaui"
+                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
+  <ControlTheme x:Key="{x:Type ToggleButton}"
+                TargetType="ToggleButton">
+    <Setter Property="Background" Value="{DynamicResource ThemeControlMidBrush}" />
+    <Setter Property="BorderBrush" Value="{DynamicResource ThemeBorderLowBrush}" />
+    <Setter Property="BorderThickness" Value="{DynamicResource ThemeBorderThickness}" />
+    <Setter Property="CornerRadius" Value="{DynamicResource ControlCornerRadius}" />
+    <Setter Property="Cursor" Value="Hand"/>
+    <Setter Property="Foreground" Value="{DynamicResource ThemeForegroundBrush}" />
+    <Setter Property="Padding" Value="10,0"/>
+    <Setter Property="Height" Value="28"/>
+    <Setter Property="HorizontalContentAlignment" Value="Center" />
+    <Setter Property="VerticalContentAlignment" Value="Center" />
+    <Setter Property="Template">
+      <ControlTemplate>
+        <ContentPresenter Name="PART_ContentPresenter"
+                          Padding="{TemplateBinding Padding}"
+                          HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
+                          VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
+                          Background="{TemplateBinding Background}"
+                          BorderBrush="{TemplateBinding BorderBrush}"
+                          BorderThickness="{TemplateBinding BorderThickness}"
+                          Content="{TemplateBinding Content}"
+                          ContentTemplate="{TemplateBinding ContentTemplate}"
+                          CornerRadius="{TemplateBinding CornerRadius}"
+                          RecognizesAccessKey="True"
+                          TextElement.Foreground="{TemplateBinding Foreground}" />
+      </ControlTemplate>
+    </Setter>
+    <Style Selector="^:checked /template/ ContentPresenter#PART_ContentPresenter">
+      <Setter Property="Background" Value="{DynamicResource ThemeControlHighBrush}" />
+      <Setter Property="BorderBrush" Value="{DynamicResource ThemeBorderMidBrush}" />
+    </Style>
+    <Style Selector="^:pointerover /template/ ContentPresenter#PART_ContentPresenter">
+      <Setter Property="BorderBrush" Value="{DynamicResource ThemeBorderMidBrush}" />
+    </Style>
+    <Style Selector="^:pressed  /template/ ContentPresenter#PART_ContentPresenter">
+      <Setter Property="Background" Value="{DynamicResource ThemeControlHighBrush}" />
+    </Style>
+    <Style Selector="^:disabled">
+      <Setter Property="Opacity" Value="{DynamicResource ThemeDisabledOpacity}" />
+    </Style>
+  </ControlTheme>
+</ResourceDictionary>

src/PixiEditor.UI.Common/Styles/PixiEditor.Controls.axaml

@@ -8,6 +8,14 @@
                 <MergeResourceInclude Source="avares://PixiEditor.UI.Common/Controls/Window.axaml"/>
                 <MergeResourceInclude Source="avares://PixiEditor.UI.Common/Controls/Button.axaml"/>
                 <MergeResourceInclude Source="avares://PixiEditor.UI.Common/Controls/CheckBox.axaml"/>
+                <MergeResourceInclude Source="avares://PixiEditor.UI.Common/Controls/RadioButton.axaml"/>
+                <MergeResourceInclude Source="avares://PixiEditor.UI.Common/Controls/TextBox.axaml"/>
+                <MergeResourceInclude Source="avares://PixiEditor.UI.Common/Controls/ComboBox.axaml"/>
+                <MergeResourceInclude Source="avares://PixiEditor.UI.Common/Controls/ComboBoxItem.axaml"/>
+                <MergeResourceInclude Source="avares://PixiEditor.UI.Common/Controls/ScrollViewer.axaml"/>
+                <MergeResourceInclude Source="avares://PixiEditor.UI.Common/Controls/ScrolLBar.axaml"/>
+                <MergeResourceInclude Source="avares://PixiEditor.UI.Common/Controls/ToggleButton.axaml"/>
+                <MergeResourceInclude Source="avares://PixiEditor.UI.Common/Controls/PopupRoot.axaml"/>
             </ResourceDictionary.MergedDictionaries>
         </ResourceDictionary>
     </Styles.Resources>