Merge pull request #115

Add support for vertically scrolling textboxes

.github/workflows/publish_nightly.yml

@@ -0,0 +1,59 @@
+name: Publish nightly builds 
+
+on:
+  push:
+    branches: [ dev ]
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+    - uses: actions/checkout@v2
+    - name: Setup .NET
+      uses: actions/setup-dotnet@v1
+      with:
+        dotnet-version: 5.0.*
+    - name: Restore dependencies
+      run: dotnet restore
+    - name: Build
+      run: dotnet build --no-restore --configuration Release
+    - name: Pack
+      run: dotnet pack --configuration Release /p:PatchNumber=$GITHUB_RUN_NUMBER-nightly
+    - name: Collect packages
+      run: |
+        mkdir artifacts
+        cp Config.Numerge.json artifacts/
+        mkdir -p artifacts/input/
+        find . -name \*.nupkg -exec cp {} artifacts/input/ \;
+    - name: Upload artifacts
+      uses: actions/upload-artifact@v2
+      with:
+        name: artifacts
+        path: artifacts/
+  numerge:
+    runs-on: ubuntu-latest
+    needs: [build]
+    steps:
+      - name: Checkout Numerge
+        uses: actions/checkout@v2.3.4
+        with:
+          repository: CreateLab/Numerge
+      - name: Setup .NET
+        uses: actions/setup-dotnet@v1
+        with:
+          dotnet-version: 3.1.*
+      - name: Build Numerge
+        run: dotnet build
+      - name: Download packages
+        uses: actions/download-artifact@v2.0.8
+        with:
+          name: artifacts
+          path: artifacts
+      - name: Merge packages
+        run: |
+          mkdir artifacts/output/
+          dotnet run --project Numerge.Console artifacts/Config.Numerge.json artifacts/input/ artifacts/output/
+      - name: Publish to Nuget
+        run: dotnet nuget push "artifacts/output/Material.Avalonia.*.nupkg" --api-key ${{secrets.NUGET_KEY}} --source https://api.nuget.org/v3/index.json --skip-duplicate
+      - name: Publish to GitHub Packages
+        run: dotnet nuget push "artifacts/output/Material.Avalonia.*.nupkg" --api-key ${{secrets.GITHUB_TOKEN}} --source https://nuget.pkg.github.com/AvaloniaCommunity/index.json --skip-duplicate

.github/workflows/publish_release.yml

@@ -1,4 +1,4 @@
-name: Deploy
+name: Publish release
 
 on:
   push:
@@ -56,4 +56,4 @@ jobs:
       - name: Publish to Nuget
         run: dotnet nuget push "artifacts/output/Material.Avalonia.*.nupkg" --api-key ${{secrets.NUGET_KEY}} --source https://api.nuget.org/v3/index.json --skip-duplicate
       - name: Publish to GitHub Packages
-        run: dotnet nuget push "artifacts/output/Material.Avalonia.*.nupkg" --api-key ${{secrets.GITHUB_TOKEN}} --source https://nuget.pkg.github.com/AvaloniaUtils/index.json --skip-duplicate
+        run: dotnet nuget push "artifacts/output/Material.Avalonia.*.nupkg" --api-key ${{secrets.GITHUB_TOKEN}} --source https://nuget.pkg.github.com/AvaloniaCommunity/index.json --skip-duplicate

Material.Avalonia/Material.Avalonia.csproj

@@ -2,28 +2,25 @@
 
     <PropertyGroup>
         <TargetFramework>netstandard2.0</TargetFramework>
-        <GeneratePackageOnBuild>true</GeneratePackageOnBuild>
-        <Version>2.2.0</Version>
+        <VersionPrefix>2.4.1</VersionPrefix>
         <Title>Material.Avalonia</Title>
         <Authors>Larymar,SKProCH,Appleneko2001</Authors>
         <Description>This repository is a set of styles that will help you customize your application in an appropriate material design.</Description>
-        <PackageProjectUrl>https://github.com/AvaloniaUtils/material.avalonia</PackageProjectUrl>
-        <PackageLicenseUrl>https://raw.githubusercontent.com/AvaloniaUtils/material.avalonia/master/LICENSE</PackageLicenseUrl>
-        <RepositoryUrl>https://github.com/AvaloniaUtils/material.avalonia</RepositoryUrl>
+        <PackageProjectUrl>https://github.com/AvaloniaCommunity/Material.Avalonia</PackageProjectUrl>
+        <PackageLicenseUrl>https://raw.githubusercontent.com/AvaloniaCommunity/Material.Avalonia/master/LICENSE</PackageLicenseUrl>
+        <RepositoryUrl>https://github.com/AvaloniaCommunity/Material.Avalonia</RepositoryUrl>
         <RepositoryType>git</RepositoryType>
         <LangVersion>8</LangVersion>
-        <PackageReleaseNotes>- Add dialogs via Material.Dialog
-- Add circular progress bar
-- Redisign calendar, datepicker
-- Implement background independended clip in outline hints
-- Change flat button style
-- Add flexible dialog icon property
-- Fix ComboBox, NumericUpDown and other controls style
-- Disable some unused properties of TextFieldAssist
-- Fix floating text not colored when focused outline field
-- Update avaloniaui dependencies to latest
-- A lot of changes in the demo project</PackageReleaseNotes> 
+        <PackageReleaseNotes>
+            - Add support for vertically scrolling textboxes
+        </PackageReleaseNotes>
     </PropertyGroup>
+
+<!--    For nightly versions-->
+    <PropertyGroup>
+        <Version Condition="'$(PatchNumber)' != ''">$(VersionPrefix).$(PatchNumber)</Version>
+    </PropertyGroup>
+    
     <ItemGroup>
         <AvaloniaResource Include="**\*.xaml">
             <SubType>Designer</SubType>
@@ -31,12 +28,11 @@
     </ItemGroup>
 
     <ItemGroup>
-      <PackageReference Include="Avalonia" Version="0.10.0" />
+      <PackageReference Include="Avalonia" Version="0.10.7" />
       <PackageReference Include="Material.Icons.Avalonia" Version="1.0.2" />
     </ItemGroup>
 
     <ItemGroup>
       <ProjectReference Include="..\Material.Styles\Material.Styles.csproj" />
     </ItemGroup>
-
 </Project>

Material.Colors/Material.Colors.csproj

@@ -17,6 +17,6 @@
   </ItemGroup>
 
   <ItemGroup>
-    <PackageReference Include="Avalonia" Version="0.10.0" />
+    <PackageReference Include="Avalonia" Version="0.10.7" />
   </ItemGroup>
 </Project>

Material.DataGrid/DataGrid.xaml

@@ -232,7 +232,6 @@
 
             <DataGridColumnHeader Name="PART_TopLeftCornerHeader" Width="22" />
             <DataGridColumnHeadersPresenter Name="PART_ColumnHeadersPresenter" Grid.Column="1"/>
-            <DataGridColumnHeader Name="PART_TopRightCornerHeader" Grid.Column="2"/>
             
             <Separator Grid.ColumnSpan="3" Margin="0"
                        VerticalAlignment="Bottom" Height="1"
@@ -242,19 +241,96 @@
             <Rectangle Name="PART_BottomRightCorner" Fill="{DynamicResource ThemeControlMidHighBrush}" Grid.Column="2" Grid.Row="2" />
             <Rectangle Name="BottomLeftCorner" Fill="{DynamicResource ThemeControlMidHighBrush}" Grid.Row="2" Grid.ColumnSpan="2" />
             <ScrollBar Name="PART_VerticalScrollbar" Classes="Modern"
-                       Orientation="Vertical" Grid.Column="2" 
-                       Grid.Row="1" Width="{DynamicResource ScrollBarThickness}"/>
+                       Orientation="Vertical" Grid.Column="2" Grid.Row="1" />
 
             <Grid Grid.Column="1" Grid.Row="2"
                   ColumnDefinitions="Auto,*">
               <Rectangle Name="PART_FrozenColumnScrollBarSpacer" />
               <ScrollBar Name="PART_HorizontalScrollbar" Grid.Column="1" 
-                         Classes="Modern" Orientation="Horizontal"
-                         Height="{DynamicResource ScrollBarThickness}"/>
+                         Classes="Modern" Orientation="Horizontal"/>
             </Grid>
           </Grid>
         </Border>
       </ControlTemplate>
     </Setter>
   </Style>
+  
+  <!-- Template for classic scrollbars -->
+  <Style Selector="DataGrid.ClassicScrollBar">
+    <Setter Property="Template">
+      <ControlTemplate>
+        <Border Background="{TemplateBinding Background}"
+                BorderThickness="{TemplateBinding BorderThickness}"
+                BorderBrush="{TemplateBinding BorderBrush}"
+                CornerRadius="4">
+          <Grid RowDefinitions="Auto,*,Auto,Auto" ColumnDefinitions="Auto,*,Auto">
+
+            <DataGridColumnHeader Name="PART_TopLeftCornerHeader" Width="22" />
+            <DataGridColumnHeadersPresenter Name="PART_ColumnHeadersPresenter" Grid.Column="1"/>
+            
+            <Separator Grid.ColumnSpan="3" Margin="0"
+                       VerticalAlignment="Bottom" Height="1"
+                       Background="{TemplateBinding BorderBrush}"/> 
+
+            <DataGridRowsPresenter Name="PART_RowsPresenter" Grid.ColumnSpan="2" Grid.Row="1" />
+            <Rectangle Name="PART_BottomRightCorner" Fill="{DynamicResource ThemeControlMidHighBrush}" Grid.Column="2" Grid.Row="2" />
+            <Rectangle Name="BottomLeftCorner" Fill="{DynamicResource ThemeControlMidHighBrush}" Grid.Row="2" Grid.ColumnSpan="2" />
+            <ScrollBar Name="PART_VerticalScrollbar" Grid.Column="2" Grid.Row="1" />
+
+            <Grid Grid.Column="1" Grid.Row="2"
+                  ColumnDefinitions="Auto,*">
+              <Rectangle Name="PART_FrozenColumnScrollBarSpacer" />
+              <ScrollBar Name="PART_HorizontalScrollbar" Grid.Column="1" 
+                         Orientation="Horizontal" />
+            </Grid>
+          </Grid>
+        </Border>
+      </ControlTemplate>
+    </Setter>
+  </Style>
+  
+  <!-- Template for mini scrollbars -->
+  <Style Selector="DataGrid.MiniScrollBar">
+    <Setter Property="Template">
+      <ControlTemplate>
+        <Border Background="{TemplateBinding Background}"
+                BorderThickness="{TemplateBinding BorderThickness}"
+                BorderBrush="{TemplateBinding BorderBrush}"
+                CornerRadius="4">
+          <Grid RowDefinitions="Auto,*,Auto,Auto" ColumnDefinitions="Auto,*,Auto">
+
+            <DataGridColumnHeader Name="PART_TopLeftCornerHeader" Width="22" />
+            <DataGridColumnHeadersPresenter Name="PART_ColumnHeadersPresenter" Grid.Column="1"/>
+            
+            <Separator Grid.ColumnSpan="3" Margin="0"
+                       VerticalAlignment="Bottom" Height="1"
+                       Background="{TemplateBinding BorderBrush}"/> 
+
+            <DataGridRowsPresenter Name="PART_RowsPresenter" Grid.ColumnSpan="2" Grid.Row="1" />
+            <Rectangle Name="PART_BottomRightCorner" Fill="{DynamicResource ThemeControlMidHighBrush}" Grid.Column="2" Grid.Row="2" />
+            <Rectangle Name="BottomLeftCorner" Fill="{DynamicResource ThemeControlMidHighBrush}" Grid.Row="2" Grid.ColumnSpan="2" />
+            <ScrollBar Name="PART_VerticalScrollbar" Classes="Mini"
+                       Grid.Column="2" Grid.Row="1"/>
+
+            <Grid Grid.Column="1" Grid.Row="2"
+                  ColumnDefinitions="Auto,*">
+              <Rectangle Name="PART_FrozenColumnScrollBarSpacer" />
+              <ScrollBar Name="PART_HorizontalScrollbar" Grid.Column="1" 
+                         Orientation="Horizontal" Classes="Mini"/>
+            </Grid>
+          </Grid>
+        </Border>
+      </ControlTemplate>
+    </Setter>
+  </Style>
+  
+  <Style Selector="DataGrid.DisableHoveringScrollBar ScrollBar:horizontal">
+    <Setter Property="Margin" Value="0"></Setter>
+    <Setter Property="Height" Value="{DynamicResource ScrollBarThickness}"></Setter>
+  </Style>
+  
+  <Style Selector="DataGrid.DisableHoveringScrollBar ScrollBar:vertical">
+    <Setter Property="Margin" Value="0"></Setter>
+    <Setter Property="Width" Value="{DynamicResource ScrollBarThickness}"></Setter>
+  </Style>
 </Styles>

Material.DataGrid/Material.DataGrid.csproj

@@ -21,8 +21,8 @@
     </ItemGroup>
 
     <ItemGroup>
-      <PackageReference Include="Avalonia" Version="0.10.0" />
-	  <PackageReference Include="Avalonia.Controls.DataGrid" Version="0.10.0" />
+      <PackageReference Include="Avalonia" Version="0.10.7" />
+	  <PackageReference Include="Avalonia.Controls.DataGrid" Version="0.10.1" />
     </ItemGroup>
 
     <ItemGroup>

Material.Demo/MainWindow.axaml

@@ -6,168 +6,193 @@
         xmlns:styles="clr-namespace:Material.Styles;assembly=Material.Styles"
         xmlns:pages="clr-namespace:Material.Demo.Pages"
         xmlns:avalonia="clr-namespace:Material.Icons.Avalonia;assembly=Material.Icons.Avalonia"
+        xmlns:showMeTheXaml="clr-namespace:ShowMeTheXaml;assembly=ShowMeTheXaml.Avalonia"
         mc:Ignorable="d" WindowStartupLocation="CenterScreen"
         Width="1280" Height="720" MinWidth="720"
         Title="Material.Demo">
-  <Window.Styles>
-    <Style Selector="TextBlock.Subheadline">
-      <Setter Property="Margin" Value="0, 16" />
-    </Style>
-    <Style Selector="TextBlock.Subheadline2">
-      <Setter Property="Margin" Value="0, 8" />
-    </Style>
-    <Style Selector="TextBlock.Content">
-      <Setter Property="Margin" Value="0, 4" />
-      <Setter Property="HorizontalAlignment" Value="Left" />
-    </Style>
-  </Window.Styles>
-
-  <styles:NavigationDrawer Name="LeftDrawer"
-                           LeftDrawerOpened="{Binding ElementName=NavDrawerSwitch, Path=IsChecked, Mode=TwoWay}">
-    <styles:NavigationDrawer.LeftDrawerContent>
-      <ScrollViewer>
-        <StackPanel>
-          <styles:ColorZone Mode="Accent" Height="180">
-            <StackPanel>
-              <Image Width="120" Height="120" HorizontalAlignment="Center" VerticalAlignment="Top"
-                     Source="avares://Material.Demo/Assets/FavIcon_200x.png" Margin="0,0,0,-8" />
-              <TextBlock Classes="Headline6" Text="Material Design" HorizontalAlignment="Center" />
-              <TextBlock Classes="Subtitle1" Text="with AvaloniaUI" HorizontalAlignment="Center" />
-            </StackPanel>
-          </styles:ColorZone>
-          <ListBox Classes="Drawer" Name="DrawerList"
-                   Focusable="{Binding ElementName=LeftDrawer, Path=LeftDrawerOpened}">
-            <ListBox.Styles>
-              <Style Selector="ListBoxItem">
-                <Setter Property="Height" Value="48" />
-                <Setter Property="Padding" Value="16,0" />
-                <Setter Property="VerticalContentAlignment" Value="Center" />
-                <Setter Property="IsEnabled" Value="{Binding $self.Content.IsEnabled}" />
-              </Style>
-            </ListBox.Styles>
-            <TextBlock Classes="Body2" Text="Home" />
-            <TextBlock Classes="Body2" Text="Buttons" />
-            <TextBlock Classes="Body2" Text="Toggles" />
-            <TextBlock Classes="Body2" Text="Fields" />
-            <TextBlock Classes="Body2" Text="ComboBoxes" />
-            <TextBlock Classes="Body2" Text="Material Icons" />
-            <TextBlock Classes="Body2" Text="Sliders" />
-            <TextBlock Classes="Body2" Text="Progress indicators" />
-            <TextBlock Classes="Body2" Text="Lists" />
-            <TextBlock Classes="Body2" Text="ColorZones" />
-            <TextBlock Classes="Body2" Text="Dialogs" />
-            <TextBlock Classes="Body2" Text="ScrollViewer" />
-            <TextBlock Classes="Body2" Text="TabControls" />
-            <TextBlock Classes="Body2" Text="Card" />
-            <TextBlock Classes="Body2" Text="Typography" />
-            <TextBlock Classes="Body2" Text="Shadows" IsEnabled="False" />
-          </ListBox>
-        </StackPanel>
-      </ScrollViewer>
-    </styles:NavigationDrawer.LeftDrawerContent>
-    <DockPanel LastChildFill="true">
-      <styles:ColorZone Name="PART_AppBarContainer" VerticalAlignment="Top" HorizontalAlignment="Stretch" DockPanel.Dock="Top"
-                        Height="56" Mode="PrimaryMid" ZIndex="1">
-        <Grid Margin="16">
-          <Grid.ColumnDefinitions>
-            <ColumnDefinition Width="24" />
-            <ColumnDefinition Width="32" />
-            <ColumnDefinition Width="*" />
-            <ColumnDefinition Width="32" />
-            <ColumnDefinition Width="Auto" />
-          </Grid.ColumnDefinitions>
-          <ToggleButton Name="NavDrawerSwitch" Classes="Flat TransparentBack ConstantForeground ImplicitForeground" 
-                        Width="32" Height="32" Padding="4">
-            <avalonia:MaterialIcon Kind="Menu" Width="24" Height="24" />
-          </ToggleButton>
-          <TextBlock Grid.Column="2" Classes="Headline6" Text="Material.Avalonia Demo" VerticalAlignment="Center" />
-          <Menu Grid.Column="4" Height="32" Padding="0" Margin="0">
-            <MenuItem Height="32" Width="32" Header="{avalonia:MaterialIconExt DotsVertical, Size=24}">
-              <MenuItem Header="Hello!">
-                <MenuItem.Icon>
-                  <avalonia:MaterialIcon Kind="Hand" Width="24" Height="24" />
-                </MenuItem.Icon>
-              </MenuItem>
-              <Separator />
-              <MenuItem Header="Action 1" />
-              <MenuItem Header="Action 2" />
-              <MenuItem Header="Action 3" />
-              <Separator />
-              <MenuItem Header="Goodbye">
-                <MenuItem.Icon>
-                  <avalonia:MaterialIcon Kind="ExitRun" Width="24" Height="24" />
-                </MenuItem.Icon>
-              </MenuItem>
-            </MenuItem>
-          </Menu>
-        </Grid>
-      </styles:ColorZone>
-      <ScrollViewer Name="mainScroller"
-                    DockPanel.Dock="Top"
-                    HorizontalContentAlignment="Stretch"
-                    HorizontalAlignment="Stretch"
-                    HorizontalScrollBarVisibility="Disabled">
-        <Border HorizontalAlignment="Stretch"
-                VerticalAlignment="Stretch">
-          <Carousel Name="PageCarousel"
-                    HorizontalAlignment="Stretch">
-            <Carousel.Styles>
-              <Style Selector="Carousel#PageCarousel:not(.notransitions)">
-                <Setter Property="PageTransition">
-                  <PageSlide Duration="0.25" SlideOutEasing="CircularEaseOut" SlideInEasing="CircularEaseOut" />
-                </Setter>
-              </Style>
-            </Carousel.Styles>
-            <!-- Main page -->
-            <pages:Home />
-
-            <!-- Buttons -->
-            <pages:ButtonsDemo />
-
-            <!-- Toggles -->
-            <pages:TogglesDemo />
-
-            <!-- Fields -->
-            <pages:FieldsDemo />
-
-            <!-- ComboBoxes -->
-            <pages:ComboBoxesDemo />
-
-            <!-- Icons -->
-            <pages:IconsDemo />
-
-            <!-- Sliders -->
-            <pages:SlidersDemo />
-
-            <!-- Progress indicators -->
-            <pages:ProgressIndicatorDemo />
-
-            <!-- Lists -->
-            <pages:ListsDemo />
-
-            <!-- ColorZones -->
-            <pages:ColorZonesDemo />
+    <Window.Styles>
+        <Style Selector="showMeTheXaml|XamlDisplay">
+            <Setter Property="Margin" Value="8" />
             
-            <!-- Dialogs -->
-            <pages:DialogDemo />
+            <!-- Stretch XamlDisplay horizontally -->
+            <Setter Property="HorizontalAlignment" Value="Stretch"/>
+        </Style>
+        <Style Selector="TextBlock.Subheadline">
+            <Setter Property="Margin" Value="0, 16" />
+        </Style>
+        <Style Selector="TextBlock.Subheadline2">
+            <Setter Property="Margin" Value="0, 8" />
+        </Style>
+        <Style Selector="TextBlock.Content">
+            <Setter Property="Margin" Value="0, 4" />
+            <Setter Property="HorizontalAlignment" Value="Left" />
+        </Style>
+    </Window.Styles>
 
-            <!-- ScrollViewer -->
-            <pages:ScrollViewerDemo />
+    <styles:SnackbarHost HostName="Root" TemplateApplied="TemplatedControl_OnTemplateApplied">
+        <styles:NavigationDrawer Name="LeftDrawer"
+                                 LeftDrawerOpened="{Binding ElementName=NavDrawerSwitch, Path=IsChecked, Mode=TwoWay}">
+            <styles:NavigationDrawer.LeftDrawerContent>
+                <ScrollViewer>
+                    <StackPanel>
+                        <styles:ColorZone Mode="Accent" Height="180">
+                            <StackPanel>
+                                <Image Width="120" Height="120" HorizontalAlignment="Center" VerticalAlignment="Top"
+                                       Source="avares://Material.Demo/Assets/FavIcon_200x.png" Margin="0,0,0,-8" />
+                                <TextBlock Classes="Headline6" Text="Material Design" HorizontalAlignment="Center" />
+                                <TextBlock Classes="Subtitle1" Text="with AvaloniaUI" HorizontalAlignment="Center" />
+                            </StackPanel>
+                        </styles:ColorZone>
+                        <ListBox Classes="Drawer" Name="DrawerList"
+                                 Focusable="{Binding ElementName=LeftDrawer, Path=LeftDrawerOpened}">
+                            <ListBox.Styles>
+                                <Style Selector="ListBoxItem">
+                                    <Setter Property="Height" Value="48" />
+                                    <Setter Property="Padding" Value="16,0" />
+                                    <Setter Property="VerticalContentAlignment" Value="Center" />
+                                    <Setter Property="IsEnabled" Value="{Binding $self.Content.IsEnabled}" />
+                                </Style>
+                            </ListBox.Styles>
+                            <TextBlock Classes="Body2" Text="Home" />
+                            <TextBlock Classes="Body2" Text="Buttons" />
+                            <TextBlock Classes="Body2" Text="Toggles" />
+                            <TextBlock Classes="Body2" Text="Fields" />
+                            <TextBlock Classes="Body2" Text="ComboBoxes" />
+                            <TextBlock Classes="Body2" Text="Material Icons" />
+                            <TextBlock Classes="Body2" Text="Sliders" />
+                            <TextBlock Classes="Body2" Text="Progress indicators" />
+                            <TextBlock Classes="Body2" Text="Lists" />
+                            <TextBlock Classes="Body2" Text="Expanders" />
+                            <TextBlock Classes="Body2" Text="ColorZones" />
+                            <TextBlock Classes="Body2" Text="Dialogs" />
+                            <TextBlock Classes="Body2" Text="ScrollViewer" />
+                            <TextBlock Classes="Body2" Text="TabControls" />
+                            <TextBlock Classes="Body2" Text="TreeViews" />
+                            <TextBlock Classes="Body2" Text="Card" />
+                            <TextBlock Classes="Body2" Text="Typography" />
+                            <TextBlock Classes="Body2" Text="Pickers" />
+                            <TextBlock Classes="Body2" Text="Shadows" IsEnabled="False" />
+                        </ListBox>
+                    </StackPanel>
+                </ScrollViewer>
+            </styles:NavigationDrawer.LeftDrawerContent>
+            <DockPanel LastChildFill="true">
+                <styles:ColorZone Name="PART_AppBarContainer" VerticalAlignment="Top" HorizontalAlignment="Stretch"
+                                  DockPanel.Dock="Top"
+                                  Height="56" Mode="PrimaryMid" ZIndex="1">
+                    <Grid Margin="16">
+                        <Grid.ColumnDefinitions>
+                            <ColumnDefinition Width="24" />
+                            <ColumnDefinition Width="32" />
+                            <ColumnDefinition Width="*" />
+                            <ColumnDefinition Width="32" />
+                            <ColumnDefinition Width="Auto" />
+                        </Grid.ColumnDefinitions>
+                        <ToggleButton Name="NavDrawerSwitch"
+                                      Classes="Flat TransparentBack ConstantForeground ImplicitForeground"
+                                      Width="32" Height="32" Padding="4">
+                            <avalonia:MaterialIcon Kind="Menu" Width="24" Height="24" />
+                        </ToggleButton>
+                        <TextBlock Grid.Column="2" Classes="Headline6" Text="Material.Avalonia Demo"
+                                   VerticalAlignment="Center" />
+                        <Menu Grid.Column="4" Height="32" Padding="0" Margin="0">
+                            <MenuItem Height="32" Width="32" Header="{avalonia:MaterialIconExt DotsVertical, Size=24}">
+                                <MenuItem Header="Hello!" Click="HelloButtonMenuItem_OnClick">
+                                    <MenuItem.Icon>
+                                        <avalonia:MaterialIcon Kind="Hand" Width="24" Height="24" />
+                                    </MenuItem.Icon>
+                                </MenuItem>
+                                <Separator />
+                                <MenuItem Header="Action 1" />
+                                <MenuItem Header="Action 2" />
+                                <MenuItem Header="Action 3" />
+                                <Separator />
+                                <MenuItem Header="Goodbye" Click="GoodbyeButtonMenuItem_OnClick">
+                                    <MenuItem.Icon>
+                                        <avalonia:MaterialIcon Kind="ExitRun" Width="24" Height="24" />
+                                    </MenuItem.Icon>
+                                </MenuItem>
+                            </MenuItem>
+                        </Menu>
+                    </Grid>
+                </styles:ColorZone>
+                <ScrollViewer Name="mainScroller"
+                              DockPanel.Dock="Top"
+                              HorizontalContentAlignment="Stretch"
+                              HorizontalAlignment="Stretch"
+                              HorizontalScrollBarVisibility="Disabled">
+                    <Border HorizontalAlignment="Stretch"
+                            VerticalAlignment="Stretch">
+                        <Carousel Name="PageCarousel"
+                                  HorizontalAlignment="Stretch">
+                            <Carousel.Styles>
+                                <Style Selector="Carousel#PageCarousel:not(.notransitions)">
+                                    <Setter Property="PageTransition">
+                                        <PageSlide Duration="0.25" SlideOutEasing="CircularEaseOut"
+                                                   SlideInEasing="CircularEaseOut" />
+                                    </Setter>
+                                </Style>
+                            </Carousel.Styles>
+                            <!-- Main page -->
+                            <pages:Home />
 
-            <!-- TabControls -->
-            <pages:TabsDemo />
+                            <!-- Buttons -->
+                            <pages:ButtonsDemo />
 
-            <!-- Card -->
-            <pages:CardsDemo />
+                            <!-- Toggles -->
+                            <pages:TogglesDemo />
 
-            <!-- Typography -->
-            <pages:TypographyDemo />
+                            <!-- Fields -->
+                            <pages:FieldsDemo />
 
-            <!-- Shadows -->
-            <pages:NotReadyDemo />
-          </Carousel>
-        </Border>
-      </ScrollViewer>
-    </DockPanel>
-  </styles:NavigationDrawer>
+                            <!-- ComboBoxes -->
+                            <pages:ComboBoxesDemo />
+
+                            <!-- Icons -->
+                            <pages:IconsDemo />
+
+                            <!-- Sliders -->
+                            <pages:SlidersDemo />
+
+                            <!-- Progress indicators -->
+                            <pages:ProgressIndicatorDemo />
+
+                            <!-- Lists -->
+                            <pages:ListsDemo />
+                            
+                            <!-- Expanders -->
+                            <pages:ExpandersDemo />
+
+                            <!-- ColorZones -->
+                            <pages:ColorZonesDemo />
+
+                            <!-- Dialogs -->
+                            <pages:DialogDemo />
+
+                            <!-- ScrollViewer -->
+                            <pages:ScrollViewerDemo />
+
+                            <!-- TabControls -->
+                            <pages:TabsDemo />
+                            
+                            <!-- TreeViews -->
+                            <pages:TreeViewsDemo />
+
+                            <!-- Card -->
+                            <pages:CardsDemo />
+
+                            <!-- Typography -->
+                            <pages:TypographyDemo />
+
+                            <!-- Pickers -->
+                            <pages:PickersDemo />
+                            
+                            <!-- Shadows -->
+                            <pages:NotReadyDemo />
+                        </Carousel>
+                    </Border>
+                </ScrollViewer>
+            </DockPanel>
+        </styles:NavigationDrawer>
+    </styles:SnackbarHost>
 </Window>

Material.Demo/MainWindow.axaml.cs

@@ -3,7 +3,8 @@ using Avalonia.Controls;
 using Avalonia.Controls.Primitives;
 using Avalonia.Input;
 using Avalonia.Interactivity;
-using Avalonia.Markup.Xaml; 
+using Avalonia.Markup.Xaml;
+using Material.Styles;
 
 namespace Material.Demo {
     public class MainWindow : Window {
@@ -59,6 +60,21 @@ namespace Material.Demo {
             {
             }
             NavDrawerSwitch.IsChecked = false;
-        } 
+        }
+
+        private void TemplatedControl_OnTemplateApplied(object? sender, TemplateAppliedEventArgs e)
+        {
+            SnackbarHost.Post("Welcome to demo of Material.Avalonia!");
+        }
+
+        private void HelloButtonMenuItem_OnClick(object? sender, RoutedEventArgs e)
+        {
+            SnackbarHost.Post("Hello, user!");
+        }
+
+        private void GoodbyeButtonMenuItem_OnClick(object? sender, RoutedEventArgs e)
+        {
+            SnackbarHost.Post("See ya next time, user!");
+        }
     }
 }

Material.Demo/Material.Demo.csproj

@@ -4,11 +4,11 @@
     <TargetFramework>netcoreapp3.1</TargetFramework>
   </PropertyGroup>
   <ItemGroup>
-    <PackageReference Include="Avalonia" Version="0.10.4" />
-    <PackageReference Include="Avalonia.Controls.DataGrid" Version="0.10.4" />
-    <PackageReference Include="Avalonia.Desktop" Version="0.10.4" />
-    <PackageReference Include="Avalonia.Diagnostics" Version="0.10.4" />
-    <PackageReference Include="ShowMeTheXaml.Avalonia.Generator" Version="0.2.3" />
+    <PackageReference Include="Avalonia" Version="0.10.7" />
+    <PackageReference Include="Avalonia.Controls.DataGrid" Version="0.10.7" />
+    <PackageReference Include="Avalonia.Desktop" Version="0.10.7" />
+    <PackageReference Include="Avalonia.Diagnostics" Version="0.10.7" />
+    <PackageReference Include="ShowMeTheXaml.Avalonia.Generator" Version="0.3.0" />
   </ItemGroup>
   <ItemGroup>
     <ProjectReference Include="..\Material.Avalonia\Material.Avalonia.csproj" />
@@ -20,11 +20,6 @@
     <AvaloniaResource Include="Assets\**" />
   </ItemGroup>
 
-  <ItemGroup>
-    <AdditionalFiles Include="**\*.xaml" />
-    <AdditionalFiles Include="**\*.axaml" />
-  </ItemGroup>
-  
   <ItemGroup>
     <Compile Update="**\*.axaml.cs">
       <DependentUpon>%(Filename)</DependentUpon>

Material.Demo/Pages/ButtonsDemo.axaml

@@ -12,11 +12,6 @@
         <TextBlock Classes="Headline4 Subheadline" Text="Buttons" />
         <TextBlock Classes="Headline6 Subheadline2" Text="Regular buttons" />
         <StackPanel Orientation="Horizontal">
-            <StackPanel.Styles>
-                <Style Selector="showMeTheXaml|XamlDisplay">
-                    <Setter Property="Margin" Value="8" />
-                </Style>
-            </StackPanel.Styles>
             <showMeTheXaml:XamlDisplay UniqueId="Buttons1">
                 <Button Classes="Light" Content="Light" ToolTip.Tip='Button with classes "Light"' />
             </showMeTheXaml:XamlDisplay>

Material.Demo/Pages/CardsDemo.axaml

@@ -7,11 +7,6 @@
              xmlns:showMeTheXaml="clr-namespace:ShowMeTheXaml;assembly=ShowMeTheXaml.Avalonia"
              x:Class="Material.Demo.Pages.CardsDemo">
     <StackPanel Margin="16, 0">
-        <StackPanel.Styles>
-            <Style Selector="showMeTheXaml|XamlDisplay">
-                <Setter Property="Margin" Value="8" />
-            </Style>
-        </StackPanel.Styles>
         <TextBlock Classes="Headline4 Subheadline" Text="Cards" />
 
         <WrapPanel HorizontalAlignment="Stretch">

Material.Demo/Pages/ColorZonesDemo.axaml

@@ -14,11 +14,6 @@
                 <Setter Property="Width" Value="24" />
                 <Setter Property="Height" Value="24" />
             </Style>
-            
-            <!-- Stretch XamlDisplay horizontally -->
-            <Style Selector="showMeTheXaml|XamlDisplay">
-                <Setter Property="HorizontalAlignment" Value="Stretch"/>
-            </Style>
         </StackPanel.Styles>
         <TextBlock Classes="Headline4 Subheadline" Text="ColorZones" />
         <StackPanel>
@@ -26,7 +21,7 @@
             <showMeTheXaml:XamlDisplay UniqueId="ColorZoneDemo1">
                 <styles:ColorZone Height="56" Padding="12">
                     <Grid ColumnDefinitions="Auto,24,*">
-                        <ToggleButton Grid.Column="0" Classes="Flat" Padding="4" Content="{icons:MaterialIconExt Menu}" />
+                        <ToggleButton Grid.Column="0" Classes="Flat TransparentBack" Padding="4" Content="{icons:MaterialIconExt Menu}" />
                         <TextBlock Grid.Column="2" Classes="Headline6" VerticalAlignment="Center" Text="Material Design Demo"/>
                     </Grid>
                 </styles:ColorZone>
@@ -38,7 +33,7 @@
             <showMeTheXaml:XamlDisplay UniqueId="ColorZoneDemo2">
                 <styles:ColorZone Height="56" Padding="12" Mode="Inverted">
                     <Grid ColumnDefinitions="Auto,24,*">
-                        <ToggleButton Grid.Column="0" Classes="Flat" Padding="4" Width="{Binding $self.Bounds.Height}" Content="{icons:MaterialIconExt Menu}" />
+                        <ToggleButton Grid.Column="0" Classes="Flat TransparentBack" Padding="4" Width="{Binding $self.Bounds.Height}" Content="{icons:MaterialIconExt Menu}" />
                         <TextBlock Grid.Column="2" Classes="Headline6" VerticalAlignment="Center" Text="Material Design Demo"/>
                     </Grid>
                 </styles:ColorZone>
@@ -50,7 +45,7 @@
             <showMeTheXaml:XamlDisplay UniqueId="ColorZoneDemo3">
                 <styles:ColorZone Height="56" Padding="12" Mode="Dark">
                     <Grid ColumnDefinitions="Auto,24,*">
-                        <ToggleButton Grid.Column="0" Classes="Flat" Padding="4" Width="{Binding $self.Bounds.Height}" Content="{icons:MaterialIconExt Menu}" />
+                        <ToggleButton Grid.Column="0" Classes="Flat TransparentBack" Padding="4" Width="{Binding $self.Bounds.Height}" Content="{icons:MaterialIconExt Menu}" />
                         <TextBlock Grid.Column="2" Classes="Headline6" VerticalAlignment="Center" Text="Material Design Demo"/>
                     </Grid>
                 </styles:ColorZone>
@@ -62,7 +57,7 @@
             <showMeTheXaml:XamlDisplay UniqueId="ColorZoneDemo4">
                 <styles:ColorZone Height="56" Padding="12" Mode="Light">
                     <Grid ColumnDefinitions="Auto,24,*">
-                        <ToggleButton Grid.Column="0" Classes="Flat" Padding="4" Width="{Binding $self.Bounds.Height}" Content="{icons:MaterialIconExt Menu}" />
+                        <ToggleButton Grid.Column="0" Classes="Flat TransparentBack" Padding="4" Width="{Binding $self.Bounds.Height}" Content="{icons:MaterialIconExt Menu}" />
                         <TextBlock Grid.Column="2" Classes="Headline6" VerticalAlignment="Center" Text="Material Design Demo"/>
                     </Grid>
                 </styles:ColorZone>
@@ -74,7 +69,7 @@
             <showMeTheXaml:XamlDisplay UniqueId="ColorZoneDemo5">
                 <styles:ColorZone Height="56" Padding="12" Mode="PrimaryLight">
                     <Grid ColumnDefinitions="Auto,24,*">
-                        <ToggleButton Grid.Column="0" Classes="Flat" Padding="4" Width="{Binding $self.Bounds.Height}" Content="{icons:MaterialIconExt Menu}" />
+                        <ToggleButton Grid.Column="0" Classes="Flat TransparentBack" Padding="4" Width="{Binding $self.Bounds.Height}" Content="{icons:MaterialIconExt Menu}" />
                         <TextBlock Grid.Column="2" Classes="Headline6" VerticalAlignment="Center" Text="Material Design Demo"/>
                     </Grid>
                 </styles:ColorZone>
@@ -86,7 +81,7 @@
             <showMeTheXaml:XamlDisplay UniqueId="ColorZoneDemo6">
                 <styles:ColorZone Height="56" Padding="12" Mode="PrimaryMid">
                     <Grid ColumnDefinitions="Auto,24,*">
-                        <ToggleButton Grid.Column="0" Classes="Flat" Padding="4" Width="{Binding $self.Bounds.Height}" Content="{icons:MaterialIconExt Menu}" />
+                        <ToggleButton Grid.Column="0" Classes="Flat TransparentBack" Padding="4" Width="{Binding $self.Bounds.Height}" Content="{icons:MaterialIconExt Menu}" />
                         <TextBlock Grid.Column="2" Classes="Headline6" VerticalAlignment="Center" Text="Material Design Demo"/>
                     </Grid>
                 </styles:ColorZone>
@@ -98,7 +93,7 @@
             <showMeTheXaml:XamlDisplay UniqueId="ColorZoneDemo7">
                 <styles:ColorZone Height="56" Padding="12" Mode="PrimaryDark">
                     <Grid ColumnDefinitions="Auto,24,*">
-                        <ToggleButton Grid.Column="0" Classes="Flat" Padding="4" Width="{Binding $self.Bounds.Height}" Content="{icons:MaterialIconExt Menu}" />
+                        <ToggleButton Grid.Column="0" Classes="Flat TransparentBack" Padding="4" Width="{Binding $self.Bounds.Height}" Content="{icons:MaterialIconExt Menu}" />
                         <TextBlock Grid.Column="2" Classes="Headline6" VerticalAlignment="Center" Text="Material Design Demo"/>
                     </Grid>
                 </styles:ColorZone>
@@ -110,7 +105,7 @@
             <showMeTheXaml:XamlDisplay UniqueId="ColorZoneDemo8">
                 <styles:ColorZone Height="56" Padding="12" Mode="Accent">
                     <Grid ColumnDefinitions="Auto,24,*">
-                        <ToggleButton Grid.Column="0" Classes="Flat" Padding="4" Width="{Binding $self.Bounds.Height}" Content="{icons:MaterialIconExt Menu}" />
+                        <ToggleButton Grid.Column="0" Classes="Flat TransparentBack" Padding="4" Width="{Binding $self.Bounds.Height}" Content="{icons:MaterialIconExt Menu}" />
                         <TextBlock Grid.Column="2" Classes="Headline6" VerticalAlignment="Center" Text="Material Design Demo"/>
                     </Grid>
                 </styles:ColorZone>
@@ -123,7 +118,7 @@
             <showMeTheXaml:XamlDisplay UniqueId="ColorZoneAdvDemo1">
                 <styles:ColorZone Height="56" Padding="12">
                     <Grid ColumnDefinitions="Auto,24,*,24,Auto">
-                        <ToggleButton Grid.Column="0" Classes="Flat" Padding="4" Width="{Binding $self.Bounds.Height}" Content="{icons:MaterialIconExt Menu}" />
+                        <ToggleButton Grid.Column="0" Classes="Flat TransparentBack" Padding="4" Width="{Binding $self.Bounds.Height}" Content="{icons:MaterialIconExt Menu}" />
                         <TextBlock Grid.Column="2" Classes="Headline6" VerticalAlignment="Center" Text="Material Design Demo"/>
                         
                         <ReversibleStackPanel Grid.Column="4" Margin="0" Orientation="Horizontal">
@@ -137,9 +132,9 @@
         <StackPanel>
             <TextBlock Classes="Headline6 Subheadline2" Text="With search bar" />
             <showMeTheXaml:XamlDisplay UniqueId="ColorZoneAdvDemo2">
-                <styles:ColorZone Height="56" Padding="4">
+                <styles:ColorZone Height="56" Padding="12">
                     <Grid ColumnDefinitions="Auto,24,*,*,24,Auto">
-                        <ToggleButton Grid.Column="0" Classes="Flat" Margin="8" Padding="4" Width="{Binding $self.Bounds.Height}" Content="{icons:MaterialIconExt Menu}" />
+                        <ToggleButton Grid.Column="0" Classes="Flat TransparentBack" Padding="4" Width="{Binding $self.Bounds.Height}" Content="{icons:MaterialIconExt Menu}" />
                         <TextBlock Grid.Column="2" Classes="Headline6" VerticalAlignment="Center" Text="Material Design Demo"/>
                         
                         <Panel Grid.Column="3" VerticalAlignment="Center">
@@ -157,7 +152,7 @@
                             </styles:Card>
                         </Panel>
                         
-                        <ReversibleStackPanel Grid.Column="5" Margin="8" Orientation="Horizontal">
+                        <ReversibleStackPanel Grid.Column="5" Margin="0" Orientation="Horizontal">
                             <Button Classes="Flat" Padding="4" Content="{icons:MaterialIconExt DotsVertical}"/>
                         </ReversibleStackPanel>
                     </Grid>

Material.Demo/Pages/ComboBoxesDemo.axaml

@@ -14,9 +14,6 @@
                 <TextBlock Classes="Headline6 Subheadline2" Text="Standard comboboxes" />
                 <StackPanel Orientation="Horizontal">
                     <StackPanel.Styles>
-                        <Style Selector="showMeTheXaml|XamlDisplay">
-                            <Setter Property="Margin" Value="8" />
-                        </Style>
                         <Style Selector="ComboBox">
                             <Setter Property="Width" Value="180" />
                         </Style>

Material.Demo/Pages/ExpandersDemo.axaml

@@ -0,0 +1,19 @@
+<UserControl xmlns="https://github.com/avaloniaui"
+             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+             mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"
+             xmlns:styles="clr-namespace:Material.Styles;assembly=Material.Styles"
+             xmlns:showMeTheXaml="clr-namespace:ShowMeTheXaml;assembly=ShowMeTheXaml.Avalonia"
+             x:Class="Material.Demo.Pages.ExpandersDemo">
+    <StackPanel Margin="16, 0">
+        <TextBlock Classes="Headline4 Subheadline" Text="Expanders" />
+        
+        <Expander Header="This is expander! Click me to expand the content.">
+            <TextBlock TextWrapping="Wrap" Text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget."/>
+        </Expander>
+        <Expander Header="This is another expander!">
+            <TextBlock TextWrapping="Wrap" Text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget."/>
+        </Expander>
+    </StackPanel>
+</UserControl>

Material.Demo/Pages/ExpandersDemo.axaml.cs

@@ -0,0 +1,19 @@
+using Avalonia;
+using Avalonia.Controls;
+using Avalonia.Markup.Xaml;
+
+namespace Material.Demo.Pages
+{
+    public class ExpandersDemo : UserControl
+    {
+        public ExpandersDemo()
+        {
+            this.InitializeComponent();
+        }
+
+        private void InitializeComponent()
+        {
+            AvaloniaXamlLoader.Load(this);
+        }
+    }
+}

Material.Demo/Pages/FieldsDemo.axaml

@@ -15,9 +15,6 @@
     
     <StackPanel Margin="16, 0" HorizontalAlignment="Stretch">
         <StackPanel.Styles>
-            <Style Selector="showMeTheXaml|XamlDisplay">
-                <Setter Property="Margin" Value="8 0" />
-            </Style>
             <Style Selector="TextBox">
                 <Setter Property="Margin" Value="0"></Setter>
             </Style>
@@ -68,7 +65,7 @@
                         </Style>
                     </StackPanel.Styles>
                     <showMeTheXaml:XamlDisplay UniqueId="MultilineFields0">
-                        <TextBox Classes="Floating" AcceptsReturn="True" TextWrapping="Wrap"
+                        <TextBox Classes="Floating" AcceptsReturn="True" MaxHeight="100" TextWrapping="Wrap" wpf:TextFieldAssist.Label="Multiline Test" UseFloatingWatermark="True"
                                  Text="Multiline. Lorem ipsum dolor sit amet, consectetur 
  adipiscing elit, sed do eiusmod tempor incididunt ut labore
  et dolore magna aliqua. The quick brown fox jumps over the 
@@ -162,6 +159,7 @@
                                  Classes="Filled"
                                  AcceptsReturn="True"
                                  TextWrapping="Wrap"
+                                 MaxHeight="100"
                                  Text="Multiline. Lorem ipsum dolor sit amet, consectetur 
  adipiscing elit, sed do eiusmod tempor incididunt ut labore
  et dolore magna aliqua. The quick brown fox jumps over the 
@@ -247,6 +245,7 @@
                         <TextBox UseFloatingWatermark="True"
                                  wpf:TextFieldAssist.Label="Multiline textfield"
                                  Classes="Outline"
+                                 MaxHeight="100"
                                  AcceptsReturn="True"
                                  TextWrapping="Wrap"
                                  Text="Multiline. Lorem ipsum dolor sit amet, consectetur 
@@ -343,4 +342,4 @@
             </StackPanel>
         </WrapPanel>
     </StackPanel>
-</UserControl>
+</UserControl>

Material.Demo/Pages/Home.axaml.cs

@@ -23,9 +23,10 @@ namespace Material.Demo.Pages
             new FeatureStatusModels(){ FeatureName = "Slider (Classic)", IsReady = Yes, IsAnimated = Yes},
             new FeatureStatusModels(){ FeatureName = "Slider (Modern)", IsReady = Yes, IsAnimated = Yes},
             new FeatureStatusModels(){ FeatureName = "Slider (Discrete)", IsReady = Yes, IsAnimated = Yes},
+            new FeatureStatusModels(){ FeatureName = "Snackbar system", IsReady = NotFully, IsAnimated = No},
             new FeatureStatusModels(){ FeatureName = "Popup", IsReady = NotFully, IsAnimated = No},
             new FeatureStatusModels(){ FeatureName = "Dialog (DialogHost)", IsReady = No, IsAnimated = NA},
-            new FeatureStatusModels(){ FeatureName = "Dialog (External)", IsReady = NotFully, IsAnimated = No},
+            new FeatureStatusModels(){ FeatureName = "Dialog (External)", IsReady = Yes, IsAnimated = No},
             new FeatureStatusModels(){ FeatureName = "DataGrid", IsReady = NotFully, IsAnimated = NA},
             new FeatureStatusModels(){ FeatureName = "Standard Fields (TextBox)", IsReady = Yes, IsAnimated = Yes},
             new FeatureStatusModels(){ FeatureName = "Filled Fields (TextBox)", IsReady = Yes, IsAnimated = Yes},
@@ -34,13 +35,13 @@ namespace Material.Demo.Pages
             new FeatureStatusModels(){ FeatureName = "Standard ComboBox", IsReady = NotFully, IsAnimated = No},
             new FeatureStatusModels(){ FeatureName = "Filled ComboBox", IsReady = NotFully, IsAnimated = No},
             new FeatureStatusModels(){ FeatureName = "Linear Progress Indicator", IsReady = Yes, IsAnimated = Yes},
-            new FeatureStatusModels(){ FeatureName = "Circular Progress Indicator", IsReady = No, IsAnimated = NA},
+            new FeatureStatusModels(){ FeatureName = "Circular Progress Indicator", IsReady = Yes, IsAnimated = Yes},
             new FeatureStatusModels(){ FeatureName = "Modern ScrollBar", IsReady = Yes, IsAnimated = Yes},
             new FeatureStatusModels(){ FeatureName = "Mini ScrollBar", IsReady = Yes, IsAnimated = Yes},
             new FeatureStatusModels(){ FeatureName = "Card", IsReady = Yes, IsAnimated = No},
             new FeatureStatusModels(){ FeatureName = "Navigation Drawer", IsReady = Yes, IsAnimated = Yes},
             new FeatureStatusModels(){ FeatureName = "Context Menu", IsReady = NotFully, IsAnimated = NotFully},
-            new FeatureStatusModels(){ FeatureName = "Integration Icons", IsReady = NotFully, IsAnimated = NA},
+            new FeatureStatusModels(){ FeatureName = "Integration Icons", IsReady = Yes, IsAnimated = NA},
             new FeatureStatusModels(){ FeatureName = "Appbar (Top)", IsReady = No, IsAnimated = NA},
             new FeatureStatusModels(){ FeatureName = "Appbar (Bottom)", IsReady = No, IsAnimated = NA},
         };

Material.Demo/Pages/IconsDemo.axaml

@@ -48,7 +48,7 @@
                                                                    HorizontalAlignment="Center"
                                                                    Width="32"
                                                                    Height="32" />
-                                            <TextBlock Grid.Row="1" TextWrapping="WrapWithOverflow" MaxWidth="64"
+                                            <TextBlock Grid.Row="1" TextWrapping="NoWrap" TextTrimming="CharacterEllipsis" MaxWidth="64"
                                                        Text="{Binding Kind}"
                                                        HorizontalAlignment="Center" />
                                         </Grid>

Material.Demo/Pages/PickersDemo.axaml

@@ -0,0 +1,43 @@
+<UserControl xmlns="https://github.com/avaloniaui"
+             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+             xmlns:showMeTheXaml="clr-namespace:ShowMeTheXaml;assembly=ShowMeTheXaml.Avalonia"
+             xmlns:assists="clr-namespace:Material.Styles.Assists;assembly=Material.Styles"
+             mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"
+             x:Class="Material.Demo.Pages.PickersDemo">
+  <StackPanel Margin="16, 0">
+    
+    <TextBlock Classes="Headline4 Subheadline" Text="Pickers" />
+    
+    
+    <TextBlock Classes="Headline6 Subheadline2" Text="DatePicker" />
+    <StackPanel Orientation="Horizontal">
+      <StackPanel Orientation="Vertical" VerticalAlignment="Bottom">
+        <TextBlock Text="{Binding #DatePicker0.SelectedDate, FallbackValue=Not selected}" />
+        <showMeTheXaml:XamlDisplay UniqueId="DatePicker0">
+          <DatePicker Name="DatePicker0"></DatePicker>
+        </showMeTheXaml:XamlDisplay>
+      </StackPanel>
+      
+      <StackPanel Orientation="Vertical">
+        <TextBlock Text="{Binding #DatePicker1.SelectedDate}" />
+        <showMeTheXaml:XamlDisplay UniqueId="DatePicker1">
+          <DatePicker Name="DatePicker1"
+                      assists:TextFieldAssist.Label="This is a date actually"
+                      SelectedDate="09/26/2021"></DatePicker>
+        </showMeTheXaml:XamlDisplay>
+      </StackPanel>
+      
+      <StackPanel Orientation="Vertical">
+        <TextBlock Text="{Binding #DatePicker2.SelectedDate}" />
+        <showMeTheXaml:XamlDisplay UniqueId="DatePicker2">
+          <DatePicker Name="DatePicker2"
+                      SelectedDate="09/26/2021"
+                      assists:DatePickerAssist.DateTimeFormat="\M\y \for\ma\t MMM dd, yyyy"></DatePicker>
+        </showMeTheXaml:XamlDisplay>
+      </StackPanel>
+    </StackPanel>
+    
+  </StackPanel>
+</UserControl>

Material.Demo/Pages/PickersDemo.axaml.cs

@@ -0,0 +1,15 @@
+using Avalonia;
+using Avalonia.Controls;
+using Avalonia.Markup.Xaml;
+
+namespace Material.Demo.Pages {
+    public class PickersDemo : UserControl {
+        public PickersDemo() {
+            InitializeComponent();
+        }
+
+        private void InitializeComponent() {
+            AvaloniaXamlLoader.Load(this);
+        }
+    }
+}

Material.Demo/Pages/ProgressIndicatorDemo.axaml

@@ -14,9 +14,6 @@
                     <Style Selector="ProgressBar">
                         <Setter Property="Width" Value="300" />
                     </Style>
-                    <Style Selector="showMeTheXaml|XamlDisplay">
-                        <Setter Property="Margin" Value="8" />
-                    </Style>
                 </StackPanel.Styles>
                 <TextBlock Classes="Headline6 Subheadline2" Text="Linear progress bars" />
                 <showMeTheXaml:XamlDisplay UniqueId="ProgressIndicators0">

Material.Demo/Pages/TogglesDemo.axaml

@@ -172,5 +172,38 @@
                 </showMeTheXaml:XamlDisplay>
             </StackPanel>
         </StackPanel>
+        
+        <TextBlock Classes="Headline6 Subheadline2" Text="ToggleButtons" />
+        <StackPanel Orientation="Horizontal">
+            <showMeTheXaml:XamlDisplay UniqueId="ToggleButtons0">
+                <ToggleButton>ToggleButton</ToggleButton>
+            </showMeTheXaml:XamlDisplay>
+
+            <showMeTheXaml:XamlDisplay UniqueId="ToggleButtons1">
+                <ToggleButton Classes="NoFeedback">NoFeedback</ToggleButton>
+            </showMeTheXaml:XamlDisplay>
+            
+            <showMeTheXaml:XamlDisplay UniqueId="ToggleButtons2">
+                <ToggleButton IsEnabled="False">Disabled</ToggleButton>
+            </showMeTheXaml:XamlDisplay>
+            
+            <showMeTheXaml:XamlDisplay UniqueId="ToggleButtons3">
+                <StackPanel Orientation="Horizontal">
+                    <TextBlock VerticalAlignment="Center" Margin="0 0 8 0">Icon:</TextBlock>
+                    <ToggleButton Classes="Icon">
+                        <avalonia:MaterialIcon Kind="Globe"></avalonia:MaterialIcon>
+                    </ToggleButton>
+                </StackPanel>
+            </showMeTheXaml:XamlDisplay>
+            
+            <showMeTheXaml:XamlDisplay UniqueId="ToggleButtons4">
+                <StackPanel Orientation="Horizontal">
+                    <TextBlock VerticalAlignment="Center" Margin="0 0 8 0">Icon NoFeedback:</TextBlock>
+                    <ToggleButton Classes="Icon NoFeedback">
+                        <avalonia:MaterialIcon Kind="Globe"></avalonia:MaterialIcon>
+                    </ToggleButton>
+                </StackPanel>
+            </showMeTheXaml:XamlDisplay>
+        </StackPanel>
     </StackPanel>
 </UserControl>

Material.Demo/Pages/TreeViewsDemo.axaml

@@ -0,0 +1,115 @@
+<UserControl xmlns="https://github.com/avaloniaui"
+             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+             mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"
+             xmlns:styles="clr-namespace:Material.Styles;assembly=Material.Styles"
+             xmlns:avalonia="clr-namespace:Material.Icons.Avalonia;assembly=Material.Icons.Avalonia"
+             x:Class="Material.Demo.Pages.TreeViewsDemo">
+    <StackPanel Margin="16, 0">
+        <StackPanel.Styles>
+            <Style Selector="styles|Card.ChildDemo">
+                <Setter Property="Width" Value="320" />
+                <Setter Property="Height" Value="320" />
+                <Setter Property="Padding" Value="0" />
+            </Style>
+        </StackPanel.Styles>
+
+        <!-- Content title -->
+        <TextBlock Classes="Headline4 Subheadline" Text="TreeViews" />
+
+        <WrapPanel>
+            <!-- Demos -->
+            <styles:Card Classes="ChildDemo">
+                <!-- TODO: StackPanel could ignore height of parent. -->
+                <Grid RowDefinitions="Auto, *">
+                    <TextBlock Classes="Headline6" Margin="8" Text="Operation systems: " />
+                    
+                    <TreeView Grid.Row="1">
+                        <TreeViewItem>
+                            <TreeViewItem.Header>
+                                <Grid ColumnDefinitions="Auto, 8, *">
+                                    <avalonia:MaterialIcon Kind="DesktopMac" />
+                                    <TextBlock Text="Apple MacOS" Grid.Column="2" />
+                                </Grid>
+                            </TreeViewItem.Header>
+                        </TreeViewItem>
+                        <TreeViewItem>
+                            <TreeViewItem.Header>
+                                <Grid ColumnDefinitions="Auto, 8, *">
+                                    <avalonia:MaterialIcon Kind="AppleIos" />
+                                    <TextBlock Text="Apple iOS" Grid.Column="2" />
+                                </Grid>
+                            </TreeViewItem.Header>
+                        </TreeViewItem>
+                        <TreeViewItem>
+                            <TreeViewItem.Header>
+                                <Grid ColumnDefinitions="Auto, 8, *">
+                                    <avalonia:MaterialIcon Kind="MicrosoftWindows" />
+                                    <TextBlock Text="Windows" Grid.Column="2" />
+                                </Grid>
+                            </TreeViewItem.Header>
+                        </TreeViewItem>
+                        <TreeViewItem>
+                            <TreeViewItem.Header>
+                                <Grid ColumnDefinitions="Auto, 8, *">
+                                    <avalonia:MaterialIcon Kind="Linux" />
+                                    <TextBlock Text="Linux" Grid.Column="2" />
+                                </Grid>
+                            </TreeViewItem.Header>
+
+                            <TreeViewItem>
+                                <TreeViewItem.Header>
+                                    <Grid ColumnDefinitions="Auto, 8, *">
+                                        <avalonia:MaterialIcon Kind="Arch" />
+                                        <TextBlock Text="Arch Linux" Grid.Column="2" />
+                                    </Grid>
+                                </TreeViewItem.Header>
+                            </TreeViewItem>
+                            <TreeViewItem>
+                                <TreeViewItem.Header>
+                                    <Grid ColumnDefinitions="Auto, 8, *">
+                                        <avalonia:MaterialIcon Kind="LinuxMint" />
+                                        <TextBlock Text="Mint Linux" Grid.Column="2" />
+                                    </Grid>
+                                </TreeViewItem.Header>
+                            </TreeViewItem>
+                            <TreeViewItem>
+                                <TreeViewItem.Header>
+                                    <Grid ColumnDefinitions="Auto, 8, *">
+                                        <avalonia:MaterialIcon Kind="Fedora" />
+                                        <TextBlock Text="Fedora" Grid.Column="2" />
+                                    </Grid>
+                                </TreeViewItem.Header>
+                            </TreeViewItem>
+                            <TreeViewItem>
+                                <TreeViewItem.Header>
+                                    <Grid ColumnDefinitions="Auto, 8, *">
+                                        <avalonia:MaterialIcon Kind="Centos" />
+                                        <TextBlock Text="CentOS" Grid.Column="2" />
+                                    </Grid>
+                                </TreeViewItem.Header>
+                            </TreeViewItem>
+                            <TreeViewItem>
+                                <TreeViewItem.Header>
+                                    <Grid ColumnDefinitions="Auto, 8, *">
+                                        <avalonia:MaterialIcon Kind="Ubuntu" />
+                                        <TextBlock Text="Ubuntu" Grid.Column="2" />
+                                    </Grid>
+                                </TreeViewItem.Header>
+                            </TreeViewItem>
+                            <TreeViewItem>
+                                <TreeViewItem.Header>
+                                    <Grid ColumnDefinitions="Auto, 8, *">
+                                        <avalonia:MaterialIcon Kind="Debian" />
+                                        <TextBlock Text="Debian" Grid.Column="2" />
+                                    </Grid>
+                                </TreeViewItem.Header>
+                            </TreeViewItem>
+                        </TreeViewItem>
+                    </TreeView>
+                </Grid>
+            </styles:Card>
+        </WrapPanel>
+    </StackPanel>
+</UserControl>

Material.Demo/Pages/TreeViewsDemo.axaml.cs

@@ -0,0 +1,19 @@
+using Avalonia;
+using Avalonia.Controls;
+using Avalonia.Markup.Xaml;
+
+namespace Material.Demo.Pages
+{
+    public class TreeViewsDemo : UserControl
+    {
+        public TreeViewsDemo()
+        {
+            this.InitializeComponent();
+        }
+
+        private void InitializeComponent()
+        {
+            AvaloniaXamlLoader.Load(this);
+        }
+    }
+}

Material.Dialog/Material.Dialog.csproj

@@ -15,7 +15,7 @@
   </PropertyGroup>
 
   <ItemGroup>
-    <PackageReference Include="Avalonia" Version="0.10.0" />
+    <PackageReference Include="Avalonia" Version="0.10.7" />
   </ItemGroup>
 
   <ItemGroup>

Material.Dialog/Views/CustomDialog.axaml

@@ -59,8 +59,11 @@
                    Text="{CompiledBinding ContentHeader, FallbackValue='Dialog header'}"/>
       </Grid>
       
-      <ContentControl Name="PART_Content" Grid.Column="1" Grid.Row="3" Content="{Binding Content}"/>
-
+      <!-- Content panel -->
+      <Panel Grid.Column="0" Grid.ColumnSpan="3" Grid.Row="3" ClipToBounds="True">
+        <ContentControl Name="PART_Content" Content="{Binding Content}" ClipToBounds="False"/>
+      </Panel>
+      
       <Grid Grid.Column="0" 
             Grid.ColumnSpan="3" 
             Grid.Row="5">

Material.Ripple/Material.Ripple.csproj

@@ -23,7 +23,7 @@
   </ItemGroup>
 
   <ItemGroup>
-    <PackageReference Include="Avalonia" Version="0.10.0" />
+    <PackageReference Include="Avalonia" Version="0.10.7" />
   </ItemGroup>
 
 </Project>

Material.Styles/Assists/DatePickerAssist.cs

@@ -0,0 +1,32 @@
+using Avalonia;
+using Avalonia.Controls;
+
+namespace Material.Styles.Assists {
+    public static class DatePickerAssist {
+        public static readonly AttachedProperty<string> DateTimeFormatProperty 
+            = AvaloniaProperty.RegisterAttached<DatePicker, string>("DateTimeFormat", typeof(DatePickerAssist));
+
+        public static string GetDateTimeFormat(DatePicker element) {
+            return element.GetValue(DateTimeFormatProperty);
+        }
+
+        /// <summary>
+        /// Sets <see cref="DateTimeFormatProperty"/>
+        /// </summary>
+        /// <param name="element">Target DatePicker</param>
+        /// <param name="value">Format string</param>
+        /// <remarks>When not null then 
+        /// <see cref="DatePicker.YearFormat"/>, 
+        /// <see cref="DatePicker.YearVisible"/>,
+        /// <see cref="DatePicker.DayFormat"/>, 
+        /// <see cref="DatePicker.DayVisible"/>,
+        /// <see cref="DatePicker.MonthFormat"/> and 
+        /// <see cref="DatePicker.MonthVisible"/>
+        /// are ignored
+        /// </remarks>
+        /// <example>"dddd, dd MMMM yyyy" will be displayed as "Friday, 29 May 2015"</example>
+        public static void SetDateTimeFormat(DatePicker element, string value) {
+            element.SetValue(DateTimeFormatProperty, value);
+        }
+    }
+}

Material.Styles/Button.xaml

@@ -6,6 +6,7 @@
   xmlns:system="clr-namespace:System;assembly=netstandard">
   <Styles.Resources>
     <system:Double x:Key="ButtonHoveredOpacity">0.12</system:Double>
+    <system:Double x:Key="ButtonDisabledOpacity">0.38</system:Double>
     <system:Double x:Key="ButtonPressedOpacity">0.26</system:Double>
   </Styles.Resources>
 
@@ -81,7 +82,7 @@
   </Style>
     
   <Style Selector="Button:disabled:not(.no-material),ToggleButton:disabled:not(.no-material)">
-    <Setter Property="Opacity" Value="{StaticResource ButtonHoveredOpacity}" />
+    <Setter Property="Opacity" Value="{StaticResource ButtonDisabledOpacity}" />
   </Style>
   
   <!-- Feedbacks -->

Material.Styles/ButtonSpinner.xaml

@@ -4,12 +4,13 @@
         <Setter Property="BorderThickness" Value="1" /> <!-- FixBorderThickness -->
         <Setter Property="HorizontalContentAlignment" Value="Stretch" />
         <Setter Property="VerticalContentAlignment" Value="Center" />
+        <Setter Property="Foreground" Value="{DynamicResource PrimaryHueMidForegroundBrush}"/>
         <Setter Property="BorderBrush" Value="{DynamicResource MaterialDesignTextAreaBorder}" />
     </Style>
     <Style Selector="ButtonSpinner /template/ RepeatButton#PART_IncreaseButton">
         <Setter Property="Content">
             <Template>
-                <Path Fill="{DynamicResource PrimaryHueMidForegroundBrush}"
+                <Path Fill="{Binding $parent[ButtonSpinner].Foreground}"
                       Width="8"
                       Height="4"
                       Stretch="Uniform"
@@ -22,7 +23,7 @@
     <Style Selector="ButtonSpinner /template/ RepeatButton#PART_DecreaseButton">
         <Setter Property="Content">
             <Template>
-                <Path Fill="{DynamicResource PrimaryHueMidForegroundBrush}"
+                <Path Fill="{Binding $parent[ButtonSpinner].Foreground}"
                       Width="8"
                       Height="4"
                       Stretch="Uniform"

Material.Styles/ColorZone.xaml

@@ -9,76 +9,93 @@
         <Setter Property="Foreground" Value="{DynamicResource MaterialDesignBody}" />
         <Setter Property="HorizontalContentAlignment" Value="Stretch" />
         <Setter Property="VerticalContentAlignment" Value="Stretch" />
-        <Setter Property="VerticalAlignment" Value="Top" />
         <Setter Property="ClipToBounds" Value="False" />
         <Setter Property="assists:ShadowAssist.ShadowDepth" Value="Depth2" />
         <Setter Property="Template">
             <Setter.Value>
                 <ControlTemplate>
-                    <Grid>
-                        <Border Background="{TemplateBinding Background}"
-                                CornerRadius="{TemplateBinding CornerRadius}"
-                                assists:ShadowAssist.ShadowDepth="{Binding RelativeSource={RelativeSource TemplatedParent}, 
+                    <Border Name="PART_ColorZoneRootBorder"
+                            Background="{TemplateBinding Background}"
+                            BorderBrush="{TemplateBinding BorderBrush}"
+                            BorderThickness="{TemplateBinding BorderThickness}"
+                            CornerRadius="{TemplateBinding CornerRadius}"
+                            assists:ShadowAssist.ShadowDepth="{Binding RelativeSource={RelativeSource TemplatedParent}, 
                                 Path=(assists:ShadowAssist.ShadowDepth)}">
-                            <Border Background="{TemplateBinding Background}"
-                                    BorderBrush="{TemplateBinding BorderBrush}"
-                                    BorderThickness="{TemplateBinding BorderThickness}"
-                                    CornerRadius="{TemplateBinding CornerRadius}"
-                                    ClipToBounds="True">
-                                <ContentPresenter Content="{TemplateBinding Content}"
-                                                  ContentTemplate="{TemplateBinding ContentTemplate}"
-                                                  Cursor="{TemplateBinding Cursor}"
-                                                  Margin="{TemplateBinding Padding}"
-                                                  TextBlock.Foreground="{TemplateBinding Foreground}"
-                                                  HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
-                                                  VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
-                            </Border>
+                        <Border Name="PART_ColorZoneInnerBorder"
+                                CornerRadius="{TemplateBinding CornerRadius}"
+                                Margin="{TemplateBinding Padding}">
+                            <ContentPresenter Content="{TemplateBinding Content}"
+                                              ContentTemplate="{TemplateBinding ContentTemplate}"
+                                              Cursor="{TemplateBinding Cursor}"
+                                              TextBlock.Foreground="{TemplateBinding Foreground}"
+                                              HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
+                                              VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                         </Border>
-                    </Grid>
+                    </Border>
                 </ControlTemplate>
             </Setter.Value>
         </Setter>
     </Style>
     
+    <Style Selector="cc|ColorZone Button,
+                     cc|ColorZone ToggleButton">
+        <Setter Property="Foreground" Value="{DynamicResource MaterialDesignBody}" />
+        <Setter Property="assists:ToggleButtonAssist.UncheckedForeground" Value="{DynamicResource MaterialDesignBody}"/>
+    </Style>
+
     <Style Selector="cc|ColorZone[Mode=Inverted]">
         <Setter Property="Background" Value="{DynamicResource MaterialDesignBody}" />
         <Setter Property="Foreground" Value="{DynamicResource MaterialDesignPaper}" />
     </Style>
     
+    <Style Selector="cc|ColorZone[Mode=Inverted] Button,
+                     cc|ColorZone[Mode=Inverted] ToggleButton">
+        <Setter Property="Foreground" Value="{DynamicResource MaterialDesignPaper}" />
+        <Setter Property="assists:ToggleButtonAssist.UncheckedForeground" Value="{DynamicResource MaterialDesignPaper}"/>
+    </Style>
+    
     <Style Selector="cc|ColorZone[Mode=PrimaryLight]">
         <Setter Property="Background" Value="{DynamicResource PrimaryHueLightBrush}" />
         <Setter Property="Foreground" Value="{DynamicResource PrimaryHueLightForegroundBrush}" />
     </Style>
+    
     <Style Selector="cc|ColorZone[Mode=PrimaryLight] Button,
                      cc|ColorZone[Mode=PrimaryLight] ToggleButton">
         <Setter Property="Foreground" Value="{DynamicResource PrimaryHueLightForegroundBrush}" />
+        <Setter Property="assists:ToggleButtonAssist.UncheckedForeground" Value="{DynamicResource PrimaryHueLightForegroundBrush}"/>
     </Style>
     
     <Style Selector="cc|ColorZone[Mode=PrimaryMid]">
         <Setter Property="Background" Value="{DynamicResource PrimaryHueMidBrush}" />
         <Setter Property="Foreground" Value="{DynamicResource PrimaryHueMidForegroundBrush}" />
     </Style>
+    
     <Style Selector="cc|ColorZone[Mode=PrimaryMid] Button,
                      cc|ColorZone[Mode=PrimaryMid] ToggleButton">
         <Setter Property="Foreground" Value="{DynamicResource PrimaryHueMidForegroundBrush}" />
+        <Setter Property="assists:ToggleButtonAssist.UncheckedForeground" Value="{DynamicResource PrimaryHueMidForegroundBrush}"/>
     </Style>
     
     <Style Selector="cc|ColorZone[Mode=PrimaryDark]">
         <Setter Property="Background" Value="{DynamicResource PrimaryHueDarkBrush}" />
         <Setter Property="Foreground" Value="{DynamicResource PrimaryHueDarkForegroundBrush}" />
     </Style>
+    
     <Style Selector="cc|ColorZone[Mode=PrimaryDark] Button,
                      cc|ColorZone[Mode=PrimaryDark] ToggleButton">
         <Setter Property="Foreground" Value="{DynamicResource PrimaryHueDarkForegroundBrush}" />
+        <Setter Property="assists:ToggleButtonAssist.UncheckedForeground" Value="{DynamicResource PrimaryHueDarkForegroundBrush}"/>
     </Style>
     
     <Style Selector="cc|ColorZone[Mode=Accent]">
         <Setter Property="Background" Value="{DynamicResource SecondaryHueMidBrush}" />
         <Setter Property="Foreground" Value="{DynamicResource SecondaryHueMidForegroundBrush}" />
     </Style>
+    
     <Style Selector="cc|ColorZone[Mode=Accent] Button,
                      cc|ColorZone[Mode=Accent] ToggleButton">
         <Setter Property="Foreground" Value="{DynamicResource SecondaryHueMidForegroundBrush}" />
+        <Setter Property="assists:ToggleButtonAssist.UncheckedForeground" Value="{DynamicResource SecondaryHueMidForegroundBrush}"/>
     </Style>
     
     <Style Selector="cc|ColorZone[Mode=Light]">
@@ -86,10 +103,22 @@
         <Setter Property="Foreground" Value="{DynamicResource MaterialDesignLightForeground}" />
     </Style>
     
+    <Style Selector="cc|ColorZone[Mode=Light] Button,
+                     cc|ColorZone[Mode=Light] ToggleButton">
+        <Setter Property="Foreground" Value="{DynamicResource MaterialDesignLightForeground}" />
+        <Setter Property="assists:ToggleButtonAssist.UncheckedForeground" Value="{DynamicResource MaterialDesignLightForeground}"/>
+    </Style>
+    
     <Style Selector="cc|ColorZone[Mode=Dark]">
         <Setter Property="Background" Value="{DynamicResource MaterialDesignDarkBackground}" />
         <Setter Property="Foreground" Value="{DynamicResource MaterialDesignDarkForeground}" />
     </Style>
+    
+    <Style Selector="cc|ColorZone[Mode=Dark] Button,
+                     cc|ColorZone[Mode=Dark] ToggleButton">
+        <Setter Property="Foreground" Value="{DynamicResource MaterialDesignDarkForeground}" />
+        <Setter Property="assists:ToggleButtonAssist.UncheckedForeground" Value="{DynamicResource MaterialDesignDarkForeground}"/>
+    </Style>
 
     <Design.PreviewWith>
         <Border Padding="40" BorderThickness="1">

Material.Styles/Controls/Rotator.cs

@@ -1,78 +1,92 @@
 using System;
-using System.Diagnostics;
-using System.Threading;
-using System.Threading.Tasks;
 using Avalonia;
+using Avalonia.Animation;
 using Avalonia.Controls;
 using Avalonia.Media;
-using Avalonia.Threading;
+using Avalonia.Rendering;
+
+// ReSharper disable ConvertToLambdaExpression
 
 namespace Material.Styles.Controls
 {
     public class Rotator : ContentControl
     {
+        // Minimum speed
+        private double minimumSpeed = 0.0025;
+        private bool _running;
+
+        private double _speed = 0.4;
+
+        private double _rotateDegree = 0;
+
+        private RenderLoop _loop;
+        private RenderLoopClock _loopTask;
+        private TimeSpan _prev;
+
         public Rotator()
         {
-            _stopwatch = new Stopwatch();
-        }
+            // Idk how it does making any sense
+            // It works without any hooking / registering / attaching or etc.
+            // I just BLOW MY ****ING MIND
+            _loop = new RenderLoop();
 
-        public bool Rotate
-        {
-            get => _rotate;
-            set => SetAndRaise(RotateProperty, ref _rotate, value);
-        }
-        private bool _rotate;
-        
-        public static readonly DirectProperty<Rotator, bool> RotateProperty =
-            AvaloniaProperty.RegisterDirect<Rotator, bool>(nameof(Rotate),
-                delegate(Rotator rotator) { return rotator._rotate;},
-                delegate(Rotator rotator, bool b) { rotator._rotate = b; rotator.SetRotate(b); });
-        
-        public void SetRotate(bool v)
-        {
-            if (!v)
-            {
-                rotateDegree = 0;
-                _stopwatch.Stop();
-            }
-            else
-            {
-                _stopwatch.Start();
-                Task.Run(delegate
+            // Prepare render loop task for use.
+            _loopTask = new RenderLoopClock();
+            _loopTask.Subscribe(
+                delegate(TimeSpan renderTime)
                 {
-                    while (_rotate)
-                    {
-                        rotateDegree += speed * (_stopwatch.Elapsed - _prevTime).TotalMilliseconds;
-                        while (rotateDegree > 360)
-                            rotateDegree -= 360;
-                        
-                        _prevTime = _stopwatch.Elapsed;
-                        Dispatcher.UIThread.InvokeAsync(
-                            delegate
-                            {
-                                RenderTransform = new RotateTransform(rotateDegree);
-                            });
-                        
-                        Thread.Sleep(10);
-                    }
+                    var delta = renderTime - _prev;
+                    _rotateDegree += _speed * delta.TotalMilliseconds;
+                    _prev = renderTime;
+
+                    while (_rotateDegree > 360)
+                        _rotateDegree -= 360;
+
+                    RenderTransform = new RotateTransform(_rotateDegree);
                 });
-            }
         }
 
         public double Speed
         {
-            get => speed;
-            set => SetAndRaise(SpeedProperty, ref speed, value);
+            get => _speed;
+            set => SetAndRaise(SpeedProperty, ref _speed, value);
         }
-        
+
         public static readonly DirectProperty<Rotator, double> SpeedProperty =
-            AvaloniaProperty.RegisterDirect<Rotator, double>(nameof(Speed),
-                delegate(Rotator rotator) { return rotator.speed;},
-                delegate(Rotator rotator, double v) { rotator.speed = v; });
-        private double speed = 0.4;
-        
-        private double rotateDegree = 0;
-        private Stopwatch _stopwatch;
-        private TimeSpan _prevTime;
+            AvaloniaProperty.RegisterDirect(nameof(Speed),
+                delegate(Rotator rotator) { return rotator._speed; },
+                delegate(Rotator rotator, double v)
+                {
+                    rotator._speed = v;
+                    OnSpeedChanged(rotator, v);
+                });
+
+        // Loop dispatcher / simple loop controller
+        private static void OnSpeedChanged(Rotator rotator, double d)
+        {
+            // We should stop rotator if speed is lower than minimum speed
+            if (Math.Abs(d) < rotator.minimumSpeed)
+            {
+                // Stop render loop to avoid resources waste.
+                if (!rotator._running)
+                    return;
+
+                // Reset statements
+                rotator._running = false;
+                rotator._rotateDegree = 0;
+
+                // Detach loop task from RenderLoop
+                rotator._loop.Remove(rotator._loopTask);
+
+                return;
+            }
+
+            if (rotator._running)
+                return;
+
+            rotator._running = true;
+            // Attach loop task to RenderLoop
+            rotator._loop.Add(rotator._loopTask);
+        }
     }
 }

Material.Styles/Converters/DatePickerTextConverter.cs

@@ -0,0 +1,22 @@
+using System;
+using System.Collections.Generic;
+using System.Globalization;
+using Avalonia;
+using Avalonia.Data;
+using Avalonia.Data.Converters;
+
+namespace Material.Styles.Converters {
+    public class DatePickerTextConverter : IMultiValueConverter {
+        public static DatePickerTextConverter Instance { get; } = new DatePickerTextConverter();
+        public object Convert(IList<object> values, Type targetType, object parameter, CultureInfo culture) {
+            // ReSharper disable once ConditionIsAlwaysTrueOrFalse
+            // ReSharper disable once HeuristicUnreachableCode
+            try {
+                return values[0] is UnsetValueType || values[0] == null ? "Not selected" : ((DateTimeOffset)values[0]).ToString((string)values[1]);
+            }
+            catch (Exception) {
+                return BindingOperations.DoNothing;
+            }
+        }
+    }
+}

Material.Styles/Converters/DateTimeToOffsetConverter.cs

@@ -0,0 +1,25 @@
+using System;
+using System.Globalization;
+using Avalonia.Data.Converters;
+
+namespace Material.Styles.Converters {
+    public class DateTimeToOffsetConverter : IValueConverter {
+        public static DateTimeToOffsetConverter Instance { get; } = new DateTimeToOffsetConverter();
+
+        public object Convert(object value, Type targetType, object parameter, CultureInfo culture) {
+            if (value is DateTimeOffset offset) {
+                return offset.Date;
+            }
+            
+            return value;
+        }
+        
+        public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture) {
+            if (value is DateTime dateTime) {
+                return new DateTimeOffset(dateTime);
+            }
+            
+            return value;
+        }
+    }
+}

Material.Styles/Converters/WrapContentIntoContentPresenterConverter.cs

@@ -0,0 +1,20 @@
+using System;
+using System.Globalization;
+using Avalonia.Controls;
+using Avalonia.Controls.Presenters;
+using Avalonia.Data.Converters;
+
+namespace Material.Styles.Converters {
+    internal class WrapContentIntoContentPresenterConverter : IValueConverter {
+        public static WrapContentIntoContentPresenterConverter Instance { get; } = new WrapContentIntoContentPresenterConverter();
+        
+        public object Convert(object value, Type targetType, object parameter, CultureInfo culture) {
+            return value is IControl ? value : new ContentPresenter() { Content = value };
+
+        }
+        
+        public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture) {
+            throw new NotSupportedException();
+        }
+    }
+}

Material.Styles/DatePicker.xaml

@@ -1,120 +1,76 @@
-<!--
-// (c) Copyright Microsoft Corporation.
-// This source is subject to the Microsoft Public License (Ms-PL).
-// Please see http://go.microsoft.com/fwlink/?LinkID=131993 for details.
-// All other rights reserved.
--->
-
 <Styles xmlns="https://github.com/avaloniaui"
         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
-        xmlns:sys="clr-namespace:System;assembly=netstandard">
-    <Style Selector="DatePicker">
+        xmlns:sys="clr-namespace:System;assembly=netstandard"
+        xmlns:assists="clr-namespace:Material.Styles.Assists"
+        xmlns:avalonia="clr-namespace:Material.Icons.Avalonia;assembly=Material.Icons.Avalonia"
+        xmlns:converters="clr-namespace:Material.Styles.Converters"
+        xmlns:styles="clr-namespace:Material.Styles">
+  <Design.PreviewWith>
+    <StackPanel Margin="20 20 200 200">
+      <DatePicker />
+      <Button>Test</Button>
+    </StackPanel>
+  </Design.PreviewWith>
+  
+  <Style Selector="DatePicker">
+    <Setter Property="Background" Value="{DynamicResource MaterialDesignPaper}" />
+    <Setter Property="BorderBrush" Value="Transparent" />
+    <Setter Property="BorderThickness" Value="1" /> <!-- FixBorderThickness -->
+    <Setter Property="Padding" Value="4" />
+    <Setter Property="assists:TextFieldAssist.Label" Value="Date" />
 
-        <Setter Property="Background" Value="{DynamicResource MaterialDesignPaper}" />
-        <Setter Property="BorderBrush" Value="Transparent" />
-        <Setter Property="BorderThickness" Value="1" /> <!-- FixBorderThickness -->
-        <Setter Property="Padding" Value="4" />
+    <Setter Property="MonthFormat" Value="MMMM" />
+    <Setter Property="DayFormat" Value=" dd" />
+    <Setter Property="YearFormat" Value=", yyyy" />
+    <Setter Property="assists:DatePickerAssist.DateTimeFormat" Value="dd MMMM yyyy" />
 
-        <Setter Property="Template">
-            <ControlTemplate>
-                <Grid ColumnDefinitions="*,Auto">
+    <Setter Property="Template">
+      <ControlTemplate>
+        <Grid>
+          <!-- This controls required by avalonia code behind -->
+          <TextBlock IsVisible="False" IsTabStop="False" Height="0" Width="0" Classes="Unused" Name="DayText" />
+          <TextBlock IsVisible="False" IsTabStop="False" Height="0" Width="0" Classes="Unused" Name="MonthText" />
+          <TextBlock IsVisible="False" IsTabStop="False" Height="0" Width="0" Classes="Unused" Name="YearText" />
 
-                    <Grid.Styles>
-
-                        <Style Selector="Button.CalendarDropDown">
-                            <Setter Property="Template">
-                                <ControlTemplate>
-                                    <Grid Height="18"
-                                          Width="19"
-                                          HorizontalAlignment="Center"
-                                          VerticalAlignment="Center"
-                                          Margin="0"
-                                          Background="{DynamicResource MaterialDesignDivider}"
-                                          ColumnDefinitions="*,*,*,*"
-                                          RowDefinitions="23*,19*,19*,19*"
-                                          ClipToBounds="False">
-
-                                        <Border Name="Highlight"
-                                                Margin="-1"
-                                                Grid.ColumnSpan="4"
-                                                Grid.Row="0"
-                                                Grid.RowSpan="4"
-                                                BorderThickness="1"
-                                                BorderBrush="{DynamicResource PrimaryHueMidBrush}" />
-                                        <Border Name="Background"
-                                                Margin="0,-1,0,0"
-                                                Grid.ColumnSpan="4" Grid.Column="0" Grid.Row="1" Grid.RowSpan="3"
-                                                BorderThickness="1"
-                                                BorderBrush="{DynamicResource MaterialDesignTextAreaBorder}"
-                                                CornerRadius=".5" />
-                                        <Rectangle Grid.ColumnSpan="4" Grid.Column="0" Grid.Row="0"
-                                                   StrokeThickness="1"
-                                                   Stroke="{DynamicResource MaterialDesignTextAreaBorder}"
-                                                   Fill="{DynamicResource SecondaryHueMidBrush}" />
-                                        <TextBlock Margin="0,-1,0,0"
-                                                   VerticalAlignment="Center"
-                                                   HorizontalAlignment="Center"
-                                                   Grid.Column="0"
-                                                   Grid.Row="1"
-                                                   Grid.ColumnSpan="4"
-                                                   Grid.RowSpan="3"
-                                                   FontSize="14"
-                                                   Foreground="{DynamicResource MaterialDesignTextAreaBorder}"
-                                                   Text="{Binding Source={x:Static sys:DateTime.Today}, Path=Day}" />
-
-                                        <Ellipse HorizontalAlignment="Center" VerticalAlignment="Center"
-                                                 Fill="{DynamicResource MaterialDesignDivider}" StrokeThickness="0"
-                                                 Grid.Row="0" Grid.ColumnSpan="4" Grid.Column="0" Width="3" Height="3" />
-                                    </Grid>
-                                </ControlTemplate>
-                            </Setter>
-                        </Style>
-
-                        <Style Selector="Button.CalendarDropDown /template/ Border#Highlight">
-                            <Setter Property="IsVisible" Value="False" />
-                        </Style>
-                        <Style Selector="Button.CalendarDropDown:pressed /template/ Border#Highlight">
-                            <Setter Property="IsVisible" Value="True" />
-                        </Style>
-
-                        <Style Selector="Button.CalendarDropDown:pointerover /template/ Border#Background">
-                            <Setter Property="Background" Value="{DynamicResource SecondaryHueDarkBrush}" />
-                        </Style>
-
-                    </Grid.Styles>
-
-                    <TextBox Name="PART_TextBox"
-                             Background="{TemplateBinding Background}"
-                             BorderBrush="{TemplateBinding BorderBrush}"
-                             BorderThickness="{TemplateBinding BorderThickness}"
-                             Padding="{TemplateBinding Padding}"
-                             DataValidationErrors.Errors="{TemplateBinding (DataValidationErrors.Errors)}"
-                             Grid.Column="0" />
-
-                    <Button Name="PART_Button"
-                            Grid.Column="1"
-                            Width="20"
-                            Classes="CalendarDropDown"
-                            Foreground="{TemplateBinding Foreground}"
-                            Background="Transparent"
-                            BorderThickness="0"
-                            Margin="2,0,2,0"
-                            Padding="0"
-                            ClipToBounds="False"
-                            Focusable="False" />
-
-                    <Popup Grid.Column="0" Name="PART_Popup"
-                           PlacementTarget="{TemplateBinding}"
-                           IsLightDismissEnabled="False">
-                        <Calendar Name="PART_Calendar" />
-                    </Popup>
-                </Grid>
-            </ControlTemplate>
-        </Setter>
-    </Style>
-
-    <Style Selector="DatePicker:focus /template/ TextBox#PART_TextBox">
-        <Setter Property="BorderBrush" Value="{DynamicResource MaterialDesignTextAreaBorder}" />
-    </Style>
+          <!-- TODO: Make TextBox writeable -->
+          <TextBox Name="DisplayTextBox"
+                   Margin="0"
+                   Classes="Filled"
+                   UseFloatingWatermark="True"
+                   assists:TextFieldAssist.Label="{TemplateBinding assists:TextFieldAssist.Label}"
+                   IsReadOnly="True">
+            <TextBox.Text>
+              <MultiBinding Converter="{x:Static converters:DatePickerTextConverter.Instance}">
+                <TemplateBinding Property="SelectedDate" />
+                <TemplateBinding Property="assists:DatePickerAssist.DateTimeFormat" />
+              </MultiBinding>
+            </TextBox.Text>
+            <TextBox.InnerRightContent>
+              <ToggleButton Name="CalendarButton"
+                            Classes="Icon NoFeedback"
+                            VerticalAlignment="Bottom"
+                            Margin="-8 8 8 6">
+                <avalonia:MaterialIcon Kind="Calendar" Width="20" Height="20" />
+              </ToggleButton>
+            </TextBox.InnerRightContent>
+          </TextBox>
+          <Popup Name="CalendarPopup" 
+                 IsOpen="{Binding #CalendarButton.IsChecked, Mode=TwoWay}"
+                 PlacementTarget="DisplayTextBox"
+                 PlacementAnchor="BottomLeft"
+                 IsLightDismissEnabled="True">
+            <styles:Card Padding="0">
+              <Calendar
+                SelectedDate="{TemplateBinding SelectedDate, Mode=TwoWay, Converter={x:Static converters:DateTimeToOffsetConverter.Instance}}"
+                SelectionMode="SingleDate" />
+            </styles:Card>
+          </Popup>
+        </Grid>
+      </ControlTemplate>
+    </Setter>
+  </Style>
 
+  <Style Selector="DatePicker:hasnodate:focus-within /template/ Popup#CalendarPopup">
+    <Setter Property="IsOpen" Value="True" />
+  </Style>
 </Styles>

Material.Styles/Expander.xaml

@@ -1,19 +1,24 @@
-<Styles xmlns="https://github.com/avaloniaui">
+<Styles xmlns="https://github.com/avaloniaui"
+        xmlns:styles="clr-namespace:Material.Styles"
+        xmlns:ripple="clr-namespace:Material.Ripple;assembly=Material.Ripple">
 
     <Style Selector="Expander">
+        <Setter Property="ClipToBounds" Value="False"/>
+        <Setter Property="Background" Value="{DynamicResource MaterialDesignCardBackground}"/>
         <Setter Property="ContentTransition">
             <Setter.Value>
-                <CrossFade Duration="00:00:00.25" />
+                <CrossFade Duration="0.25" />
             </Setter.Value>
         </Setter>
     </Style>
     <Style Selector="Expander[ExpandDirection=Down]">
         <Setter Property="Template">
             <ControlTemplate>
-                <Border Background="{TemplateBinding Background}">
-                    <Grid RowDefinitions="Auto,*">
-                        <ToggleButton Name="PART_toggle" Grid.Row="0" Content="{TemplateBinding Header}"
-                                      IsChecked="{TemplateBinding IsExpanded, Mode=TwoWay}" />
+                <styles:Card Name="PART_ExpanderRoot" Background="{TemplateBinding Background}" Padding="0">
+                    <Grid RowDefinitions="Auto, *">
+                        <ToggleButton Name="PART_toggle" Grid.Row="0" Content="{TemplateBinding Header}" Classes="ConstantForeground"
+                                      Foreground="{DynamicResource MaterialDesignBody}"
+                                      IsChecked="{TemplateBinding IsExpanded, Mode=TwoWay}" HorizontalContentAlignment="Left" />
                         <ContentPresenter Name="PART_ContentPresenter"
                                           Grid.Row="1"
                                           IsVisible="{TemplateBinding IsExpanded}"
@@ -23,17 +28,18 @@
                                           VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
                                           Padding="{TemplateBinding Padding}" />
                     </Grid>
-                </Border>
+                </styles:Card>
             </ControlTemplate>
         </Setter>
     </Style>
     <Style Selector="Expander[ExpandDirection=Up]">
         <Setter Property="Template">
             <ControlTemplate>
-                <Border Background="{TemplateBinding Background}">
+                <styles:Card Name="PART_ExpanderRoot" Background="{TemplateBinding Background}" Padding="0">
                     <Grid RowDefinitions="*,Auto">
-                        <ToggleButton Name="PART_toggle" Grid.Row="1" Content="{TemplateBinding Header}"
-                                      IsChecked="{TemplateBinding IsExpanded, Mode=TwoWay}" />
+                        <ToggleButton Name="PART_toggle" Grid.Row="1" Content="{TemplateBinding Header}" Classes="ConstantForeground"
+                                      Foreground="{DynamicResource MaterialDesignBody}"
+                                      IsChecked="{TemplateBinding IsExpanded, Mode=TwoWay}" HorizontalContentAlignment="Left" />
                         <ContentPresenter Name="PART_ContentPresenter"
                                           Grid.Row="0"
                                           IsVisible="{TemplateBinding IsExpanded}"
@@ -43,17 +49,18 @@
                                           VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
                                           Padding="{TemplateBinding Padding}" />
                     </Grid>
-                </Border>
+                </styles:Card>
             </ControlTemplate>
         </Setter>
     </Style>
     <Style Selector="Expander[ExpandDirection=Right]">
         <Setter Property="Template">
             <ControlTemplate>
-                <Border Background="{TemplateBinding Background}">
+                <styles:Card Name="PART_ExpanderRoot" Background="{TemplateBinding Background}" Padding="0">
                     <Grid ColumnDefinitions="Auto,*">
                         <ToggleButton Name="PART_toggle" Grid.Column="0" Content="{TemplateBinding Header}"
-                                      IsChecked="{TemplateBinding IsExpanded, Mode=TwoWay}" />
+                                      Foreground="{DynamicResource MaterialDesignBody}"
+                                      IsChecked="{TemplateBinding IsExpanded, Mode=TwoWay}" Classes="ConstantForeground" />
                         <ContentPresenter Name="PART_ContentPresenter"
                                           Grid.Column="1"
                                           IsVisible="{TemplateBinding IsExpanded}"
@@ -63,16 +70,17 @@
                                           VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
                                           Padding="{TemplateBinding Padding}" />
                     </Grid>
-                </Border>
+                </styles:Card>
             </ControlTemplate>
         </Setter>
     </Style>
     <Style Selector="Expander[ExpandDirection=Left]">
         <Setter Property="Template">
             <ControlTemplate>
-                <Border Background="{TemplateBinding Background}">
+                <styles:Card Name="PART_ExpanderRoot" Background="{TemplateBinding Background}" Padding="0">
                     <Grid ColumnDefinitions="*,Auto">
-                        <ToggleButton Name="PART_toggle" Grid.Column="1" Content="{TemplateBinding Header}"
+                        <ToggleButton Name="PART_toggle" Grid.Column="1" Content="{TemplateBinding Header}" Classes="ConstantForeground"
+                                      Foreground="{DynamicResource MaterialDesignBody}"
                                       IsChecked="{TemplateBinding IsExpanded, Mode=TwoWay}" />
                         <ContentPresenter Name="PART_ContentPresenter"
                                           Grid.Column="0"
@@ -83,22 +91,15 @@
                                           VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
                                           Padding="{TemplateBinding Padding}" />
                     </Grid>
-                </Border>
+                </styles:Card>
             </ControlTemplate>
         </Setter>
     </Style>
     <Style Selector="Expander /template/ ToggleButton#PART_toggle">
         <Setter Property="Template">
             <ControlTemplate>
-                <Border BorderThickness="1">
-                    <Grid ColumnDefinitions="Auto,Auto">
-                        <Border Grid.Column="0" Width="20" Height="20" HorizontalAlignment="Center"
-                                VerticalAlignment="Center">
-                            <Path Fill="{DynamicResource PrimaryHueMidForegroundBrush}"
-                                  HorizontalAlignment="Center"
-                                  VerticalAlignment="Center"
-                                  Data="M 0 2 L 4 6 L 0 10 Z" />
-                        </Border>
+                <Border Background="Transparent" MinHeight="48" Padding="8">
+                    <Grid ColumnDefinitions="12,*,Auto,12">
                         <ContentPresenter Name="PART_ContentPresenter"
                                           Grid.Column="1"
                                           Background="Transparent"
@@ -106,33 +107,66 @@
                                           VerticalAlignment="Center"
                                           HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
                                           VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
-                                          Padding="{TemplateBinding Padding}" />
+                                          Padding="0" />
+                        <Border Grid.Column="2" HorizontalAlignment="Center"
+                                VerticalAlignment="Center">
+                            <Path Name="PART_ExpandIcon" Width="24" Height="24"
+                                  Fill="{TemplateBinding Foreground}"
+                                  HorizontalAlignment="Center"
+                                  VerticalAlignment="Center"
+                                  Data="M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z" />
+                        </Border>
                     </Grid>
                 </Border>
             </ControlTemplate>
         </Setter>
     </Style>
-    <Style Selector="Expander:down:expanded /template/ ToggleButton#PART_toggle /template/ Path">
-        <Setter Property="RenderTransform">
-            <RotateTransform Angle="90" />
+    
+    <Style Selector="Expander:not(.notransitions) /template/ styles|Card#PART_ExpanderRoot">
+        <Setter Property="Transitions">
+            <Transitions>
+                <ThicknessTransition Duration="0.25" Property="Margin" Easing="CubicEaseOut"/>
+            </Transitions>
         </Setter>
     </Style>
-    <Style Selector="Expander:up:expanded /template/ ToggleButton#PART_toggle /template/ Path">
-        <Setter Property="RenderTransform">
-            <RotateTransform Angle="-90" />
+    <Style Selector="Expander:not(.notransitions) /template/ ToggleButton#PART_toggle /template/ Path">
+        <Setter Property="Transitions">
+            <Transitions>
+                <TransformOperationsTransition Property="RenderTransform" Duration="0.25" Easing="CubicEaseOut"/>
+            </Transitions>
         </Setter>
     </Style>
-    <Style Selector="Expander:left:expanded /template/ ToggleButton#PART_toggle /template/ Path">
+    
+    <Style Selector="Expander:up:expanded /template/ styles|Card#PART_ExpanderRoot,
+                     Expander:down:expanded /template/ styles|Card#PART_ExpanderRoot">
+        <Setter Property="Margin" Value="0,16"/>
+    </Style>
+    
+    <Style Selector="Expander:down /template/ ToggleButton#PART_toggle /template/ Path#PART_ExpandIcon">
+        <Setter Property="RenderTransform" Value="rotate(90deg)"/>
+    </Style>
+    <Style Selector="Expander:down:expanded /template/ ToggleButton#PART_toggle /template/ Path#PART_ExpandIcon">
+        <Setter Property="RenderTransform" Value="rotate(-90deg)"/>
+    </Style>
+    
+    <Style Selector="Expander:up /template/ ToggleButton#PART_toggle /template/ Path#PART_ExpandIcon">
+        <Setter Property="RenderTransform" Value="rotate(-90deg)"/>
+    </Style>
+    <Style Selector="Expander:up:expanded /template/ ToggleButton#PART_toggle /template/ Path#PART_ExpandIcon">
+        <Setter Property="RenderTransform" Value="rotate(90deg)"/>
+    </Style>
+    
+    <Style Selector="Expander:left:expanded /template/ ToggleButton#PART_toggle /template/ Path#PART_ExpandIcon">
         <Setter Property="RenderTransform">
             <RotateTransform Angle="180" />
         </Setter>
     </Style>
-    <Style Selector="Expander:right /template/ ToggleButton#PART_toggle /template/ Path">
+    <Style Selector="Expander:right /template/ ToggleButton#PART_toggle /template/ Path#PART_ExpandIcon">
         <Setter Property="RenderTransform">
             <RotateTransform Angle="180" />
         </Setter>
     </Style>
-    <Style Selector="Expander:right:expanded /template/ ToggleButton#PART_toggle /template/ Path">
+    <Style Selector="Expander:right:expanded /template/ ToggleButton#PART_toggle /template/ Path#PART_ExpandIcon">
         <Setter Property="RenderTransform">
             <RotateTransform Angle="0" />
         </Setter>

Material.Styles/FloatingButton.xaml

@@ -11,6 +11,7 @@
       <converters:BrushRoundConverter x:Key="BrushRoundConverter" />
       <system:Double x:Key="ButtonHoveredOpacity">0.12</system:Double>
       <system:Double x:Key="ButtonPressedOpacity">0.26</system:Double>
+      <system:Double x:Key="ButtonDisabledOpacity">0.38</system:Double>
       <CornerRadius x:Key="FloatingButtonRoundCorner">32</CornerRadius>
     </ResourceDictionary>
   </Styles.Resources>
@@ -63,7 +64,7 @@
 
   <!-- Transitions -->
   
-  <Style Selector="cc|FloatingButton[IsVisible=true][IsEnabled=true].notransitions /template/ Border#PART_ButtonRootBorder">
+  <Style Selector="cc|FloatingButton[IsVisible=true].notransitions /template/ Border#PART_ButtonRootBorder">
     <Style.Animations>
       <Animation Duration="0:0:0.001" FillMode="Both" Easing="QuarticEaseInOut">
         <KeyFrame Cue="0%">
@@ -80,7 +81,7 @@
     </Style.Animations>
   </Style>
 
-  <Style Selector="cc|FloatingButton[IsVisible=true][IsEnabled=true]:not(.notransitions) /template/ Border#PART_ButtonRootBorder">
+  <Style Selector="cc|FloatingButton[IsVisible=true]:not(.notransitions) /template/ Border#PART_ButtonRootBorder">
     <Style.Animations>
       <Animation Duration="0:0:0.5" FillMode="Both" Easing="QuarticEaseInOut">
         <KeyFrame Cue="0%">
@@ -113,7 +114,7 @@
     <Setter Property="ScaleTransform.ScaleY" Value="0" />
   </Style>
   
-  <Style Selector="cc|FloatingButton[IsVisible=true][IsEnabled=true]:not(.no-material)">
+  <Style Selector="cc|FloatingButton[IsVisible=true]:not(.no-material)">
     <Setter Property="Opacity" Value="1"/>
     <Setter Property="ScaleTransform.ScaleX" Value="1" />
     <Setter Property="ScaleTransform.ScaleY" Value="1" />
@@ -208,6 +209,10 @@
   <Style Selector="cc|FloatingButton Path">
     <Setter Property="Fill" Value="{DynamicResource PrimaryHueMidForegroundBrush}"/>
   </Style>
+  
+  <Style Selector="cc|FloatingButton:disabled:not(.no-material)">
+    <Setter Property="Opacity" Value="{StaticResource ButtonDisabledOpacity}" />
+  </Style>
 
   <Design.PreviewWith>
     <Border Padding="20">

Material.Styles/FlyoutPresenter.axaml

@@ -0,0 +1,43 @@
+<Styles xmlns="https://github.com/avaloniaui"
+        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+        xmlns:styles="clr-namespace:Material.Styles">
+  <Styles.Resources>
+    <x:Double x:Key="FlyoutThemeMaxWidth">456</x:Double>
+    <x:Double x:Key="FlyoutThemeMaxHeight">758</x:Double>
+  </Styles.Resources>
+  <Style Selector="FlyoutPresenter">
+    <Setter Property="HorizontalContentAlignment" Value="Stretch" />
+    <Setter Property="VerticalContentAlignment" Value="Stretch" />
+    <Setter Property="Background" Value="{DynamicResource MaterialDesignToolTipBackground}" />
+    <Setter Property="Foreground" Value="{DynamicResource MaterialDesignPaper}" />
+    <Setter Property="Padding" Value="8" />
+    <Setter Property="MaxWidth" Value="{DynamicResource FlyoutThemeMaxWidth}" />
+    <Setter Property="MaxHeight" Value="{DynamicResource FlyoutThemeMaxHeight}" />
+    <Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Auto" />
+    <Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto" />
+    <Setter Property="CornerRadius" Value="4" />
+    <Setter Property="ClipToBounds" Value="False" />
+    <Setter Property="Margin" Value="0 0 8 8" />
+    <Setter Property="Template">
+      <ControlTemplate>
+        <styles:Card Name="LayoutRoot"
+                     Background="{TemplateBinding Background}"
+                     CornerRadius="{TemplateBinding CornerRadius}"
+                     Padding="0">
+          <!-- TODO Fix ScrollViewer visibility when dark theme enabled -->
+          <ScrollViewer Margin="0" Padding="0"
+                        HorizontalScrollBarVisibility="{TemplateBinding ScrollViewer.HorizontalScrollBarVisibility}"
+                        VerticalScrollBarVisibility="{TemplateBinding ScrollViewer.VerticalScrollBarVisibility}">
+            <ContentPresenter Content="{TemplateBinding Content}"
+                              ContentTemplate="{TemplateBinding ContentTemplate}"
+                              Margin="{TemplateBinding Padding}"
+                              HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
+                              VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
+                              HorizontalContentAlignment="Stretch"
+                              VerticalContentAlignment="Stretch" />
+          </ScrollViewer>
+        </styles:Card>
+      </ControlTemplate>
+    </Setter>
+  </Style>
+</Styles>

Material.Styles/Material.Styles.csproj

@@ -3,13 +3,14 @@
     <PropertyGroup>
         <TargetFramework>netstandard2.0</TargetFramework>
         <GeneratePackageOnBuild>true</GeneratePackageOnBuild>
-        <LangVersion>8</LangVersion>
+        <LangVersion>9</LangVersion>
         <Authors>Larymar,SKProCH,Appleneko2001</Authors>
         <Company>Larymar,SKProCH,Appleneko2001</Company>
         <PackageProjectUrl>https://github.com/AvaloniaUtils/material.avalonia</PackageProjectUrl>
         <RepositoryUrl>https://github.com/AvaloniaUtils/material.avalonia</RepositoryUrl>
         <RepositoryType>git</RepositoryType>
         <Description>Main styles library of Material.Avalonia.</Description>
+        <Nullable>enable</Nullable>
     </PropertyGroup>
 
     <ItemGroup>
@@ -54,7 +55,7 @@
     </ItemGroup>
 
     <ItemGroup>
-      <PackageReference Include="Avalonia" Version="0.10.0" />
+      <PackageReference Include="Avalonia" Version="0.10.7" />
       <PackageReference Include="Material.Icons" Version="1.0.8" />
       <PackageReference Include="Material.Icons.Avalonia" Version="1.0.2" />
     </ItemGroup>

Material.Styles/MaterialToolKit.xaml

@@ -23,11 +23,10 @@
     <StyleInclude Source="avares://Material.Styles/ContentControl.xaml" />
     <StyleInclude Source="avares://Material.Styles/ContextMenu.xaml" />
     <StyleInclude Source="avares://Material.Styles/DataValidationErrors.xaml" />
-
-    <!-- BUG Crash while try to use DatePicker. Need full style rework. -->
-    <!-- <StyleInclude Source="avares://Material.Styles/DatePicker.xaml" /> -->
+    <StyleInclude Source="avares://Material.Styles/DatePicker.xaml" />
     <StyleInclude Source="avares://Material.Styles/EmbeddableControlRoot.xaml" />
     <StyleInclude Source="avares://Material.Styles/Expander.xaml" />
+    <StyleInclude Source="avares://Material.Styles/FlyoutPresenter.axaml" />
     <StyleInclude Source="avares://Material.Styles/FocusAdorner.xaml" />
     <StyleInclude Source="avares://Material.Styles/GridSplitter.xaml" />
     <StyleInclude Source="avares://Material.Styles/ItemsControl.xaml" />
@@ -67,4 +66,5 @@
     <StyleInclude Source="avares://Material.Styles/ColorZone.xaml"/>
     <StyleInclude Source="avares://Material.Styles/NavigationDrawer.xaml"/>
     <StyleInclude Source="avares://Material.Styles/MaterialUnderline.xaml"/>
+    <StyleInclude Source="avares://Material.Styles/SnackbarHost.xaml"/>
 </Styles>

Material.Styles/Menu.xaml

@@ -5,11 +5,13 @@
                     BorderBrush="{TemplateBinding BorderBrush}"
                     BorderThickness="{TemplateBinding BorderThickness}"
                     Padding="{TemplateBinding Padding}">
-                <ItemsPresenter Name="PART_ItemsPresenter"
-                                Items="{TemplateBinding Items}"
-                                ItemsPanel="{TemplateBinding ItemsPanel}"
-                                ItemTemplate="{TemplateBinding ItemTemplate}"
-                                KeyboardNavigation.TabNavigation="Continue" />
+                <ScrollViewer>
+                    <ItemsPresenter Name="PART_ItemsPresenter"
+                                    Items="{TemplateBinding Items}"
+                                    ItemsPanel="{TemplateBinding ItemsPanel}"
+                                    ItemTemplate="{TemplateBinding ItemTemplate}"
+                                    KeyboardNavigation.TabNavigation="Continue" />
+                </ScrollViewer>
             </Border>
         </ControlTemplate>
     </Setter>

Material.Styles/MenuItem.xaml

@@ -1,11 +1,11 @@
-<Styles xmlns="https://github.com/avaloniaui" 
+<Styles xmlns="https://github.com/avaloniaui"
         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
         xmlns:conv="clr-namespace:Avalonia.Controls.Converters;assembly=Avalonia.Controls"
         xmlns:sys="clr-namespace:System;assembly=netstandard"
         xmlns:styles="clr-namespace:Material.Styles;assembly=Material.Styles"
         xmlns:ripple="clr-namespace:Material.Ripple;assembly=Material.Ripple">
     <Styles.Resources>
-      <conv:PlatformKeyGestureConverter x:Key="KeyGestureConverter"/>
+        <conv:PlatformKeyGestureConverter x:Key="KeyGestureConverter" />
     </Styles.Resources>
 
     <Style Selector="MenuItem">
@@ -15,13 +15,14 @@
         <Setter Property="Foreground" Value="{DynamicResource MaterialDesignBody}" />
         <Setter Property="Template">
             <ControlTemplate>
-                <Grid>
-                    <Border Name="root"
-                            Background="{DynamicResource MaterialDesignBody}"
-                            BorderBrush="{TemplateBinding BorderBrush}"
-                            BorderThickness="{TemplateBinding BorderThickness}" />
-                    <ripple:RippleEffect RippleFill="{DynamicResource MaterialDesignFlatButtonRipple}">
-                        <Grid>
+                <Border Name="PART_MenuItemRootBorder" Height="{TemplateBinding Height}"
+                        BorderBrush="{TemplateBinding BorderBrush}"
+                        BorderThickness="{TemplateBinding BorderThickness}">
+                    <Panel>
+                        <Border Name="PART_MenuItemHighlighter"
+                                Background="{DynamicResource MaterialDesignBody}"/>
+                        <ripple:RippleEffect RippleFill="{DynamicResource MaterialDesignFlatButtonRipple}">
+                        <Grid Margin="{TemplateBinding Padding}">
                             <Grid.ColumnDefinitions>
                                 <ColumnDefinition Width="24" />
                                 <ColumnDefinition Width="24" />
@@ -82,7 +83,8 @@
                             </Popup>
                         </Grid>
                     </ripple:RippleEffect>
-                </Grid>
+                    </Panel>
+                </Border>
             </ControlTemplate>
         </Setter>
     </Style>
@@ -99,12 +101,13 @@
 
     <Style Selector="Menu > MenuItem">
         <Setter Property="Padding" Value="4" />
-        <Setter Property="Foreground" Value="{Binding RelativeSource={RelativeSource AncestorType={x:Type TemplatedControl}}, Path=Foreground}"/>
+        <Setter Property="Foreground"
+                Value="{Binding RelativeSource={RelativeSource AncestorType={x:Type TemplatedControl}}, Path=Foreground}" />
         <Setter Property="Template">
             <ControlTemplate>
                 <Border Name="root"
                         BorderThickness="{TemplateBinding BorderThickness}">
-                    <Grid>
+                    <Panel>
                         <ToggleButton Name="PART_HeaderPresenter" Classes="Flat TransparentBack ConstantForeground"
                                       HorizontalContentAlignment="Center"
                                       VerticalContentAlignment="Center"
@@ -141,32 +144,21 @@
                                 </Border>
                             </styles:Card>
                         </Popup>
-                    </Grid>
+                    </Panel>
                 </Border>
             </ControlTemplate>
         </Setter>
     </Style>
 
-    <Style
-        Selector="MenuItem > MenuItem:not(:disabled):not(:selected) /template/ Border#root,
-    ContextMenu > MenuItem:not(:disabled):not(:selected) /template/ Border#root">
+    <Style Selector="MenuItem /template/ Border#PART_MenuItemHighlighter">
         <Setter Property="Opacity" Value="0" />
     </Style>
 
-    <Style
-        Selector="MenuItem > MenuItem:disabled:not(:selected) /template/ Border#root,
-    ContextMenu > MenuItem:disabled:not(:selected) /template/ Border#root">
-        <Setter Property="Opacity" Value="0" />
-    </Style>
-
-    <Style
-        Selector="MenuItem > MenuItem:not(.Menu):not(:disabled):selected /template/ Border#root,
-    ContextMenu > MenuItem:not(.Menu):not(:disabled):selected /template/ Border#root">
+    <Style Selector="MenuItem:not(.Menu):not(:disabled):selected /template/ Border#PART_MenuItemHighlighter">
         <Setter Property="Opacity" Value="0.13" />
     </Style>
 
-    <Style Selector="MenuItem > MenuItem:not(.Menu):disabled,
-    ContextMenu > MenuItem:not(.Menu):disabled">
+    <Style Selector="MenuItem:not(.Menu):disabled">
         <Setter Property="Opacity" Value="0.56" />
     </Style>
 

Material.Styles/Models/SnackbarModel.cs

@@ -0,0 +1,30 @@
+using System;
+using Avalonia.Layout;
+
+namespace Material.Styles.Models
+{
+    public class SnackbarModel
+    {
+        public SnackbarModel(object content, Orientation orientation = Orientation.Horizontal)
+        {
+            _content = content;
+            _orientation = orientation;
+            //_button = button;
+        }
+        
+        private object _content;
+        public object Content => _content;
+
+        private Orientation _orientation;
+        public Orientation Orientation => _orientation;
+
+        // Still not sure I should use control instead of method call
+        // because I want more flexible button property on snackbar but
+        // that means we cant dismiss snackbar after pressed button.
+        private object _button;
+        public object Button => _button;
+
+        private TimeSpan _duration = TimeSpan.FromSeconds(5);
+        public TimeSpan Duration => _duration;
+    }
+}

Material.Styles/NumericUpDown.xaml

@@ -5,8 +5,8 @@
         <Setter Property="BorderBrush" Value="Transparent"/>
         <Setter Property="BorderThickness" Value="0"/>
         <Setter Property="Background" Value="{DynamicResource MaterialDesignTextFieldBoxBackground}" />
-        <Setter Property="VerticalAlignment" Value="Bottom"></Setter>
-        <Setter Property="MinHeight" Value="48"></Setter>
+        <Setter Property="VerticalAlignment" Value="Bottom"/>
+        <Setter Property="MinHeight" Value="48"/>
         <Setter Property="Template">
             <ControlTemplate>
                 <Border Name="PART_RootBorder"
@@ -14,7 +14,7 @@
                         ClipToBounds="True" CornerRadius="4,4,0,0"
                         Background="{TemplateBinding Background}"
                         BorderBrush="{TemplateBinding BorderBrush}"
-                        BorderThickness="0">
+                        BorderThickness="{TemplateBinding BorderThickness}">
                     <Grid HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
                         <Border Name="focusBorder"
                                 Background="{DynamicResource MaterialDesignTextFieldBoxHoverBackground}" />
@@ -45,15 +45,15 @@
     </Style>
     
     <Style Selector="NumericUpDown /template/ TextBox#PART_TextBox /template/ styles|MaterialUnderline#Underline">
-        <Setter Property="Opacity" Value="0"></Setter>
+        <Setter Property="Opacity" Value="0"/>
     </Style>
     
     <Style Selector="NumericUpDown:focus-within /template/ styles|MaterialUnderline#Underline">
-        <Setter Property="IsExpanded" Value="True"></Setter>
+        <Setter Property="IsExpanded" Value="True"/>
     </Style>
     
     <Style Selector="NumericUpDown:pointerover /template/ styles|MaterialUnderline#Underline">
-        <Setter Property="IsActive" Value="True"></Setter>
+        <Setter Property="IsActive" Value="True"/>
     </Style> 
     
     <Style Selector="TextBox /template/ Border#PART_RootBorder">

Material.Styles/ProgressBar.xaml

@@ -86,14 +86,14 @@
         </Style.Animations>
     </Style>
     
+    <!-- Setters for default statement of progress bar and its parts -->
+    
     <Style Selector="ProgressBar /template/ Grid#TemplateRoot">
         <Setter Property="Opacity" Value="1" />
         <Setter Property="ScaleTransform.ScaleX" Value="1" />
         <Setter Property="ScaleTransform.ScaleY" Value="1" />
     </Style>
     
-    <!-- Setters for default statement of progress bar -->
-    
     <Style Selector="ProgressBar:not(.Circle):horizontal">
         <Setter Property="Height" Value="4" />
     </Style>
@@ -128,12 +128,12 @@
         <Style.Animations>
             <Animation Duration="0:0:2" IterationCount="INFINITE">
                 <KeyFrame Cue="0%">
-                    <Setter Property="Canvas.Left" Value="0" />
-                    <Setter Property="Width" Value="0" />
+                    <Setter Property="Canvas.Left" Value="-10" />
+                    <Setter Property="Width" Value="10" />
                 </KeyFrame>
                 <KeyFrame Cue="35%">
                     <Setter Property="Canvas.Left" Value="45" />
-                    <Setter Property="Width" Value="50" />
+                    <Setter Property="Width" Value="60" />
                 </KeyFrame>
                 <KeyFrame Cue="60%">
                     <Setter Property="Canvas.Left" Value="100" />
@@ -196,12 +196,12 @@
         <Style.Animations>
             <Animation Duration="0:0:2" IterationCount="INFINITE">
                 <KeyFrame Cue="0%">
-                    <Setter Property="Canvas.Bottom" Value="0" />
-                    <Setter Property="Height" Value="0" />
+                    <Setter Property="Canvas.Bottom" Value="-10" />
+                    <Setter Property="Height" Value="10" />
                 </KeyFrame>
                 <KeyFrame Cue="35%">
-                    <Setter Property="Canvas.Bottom" Value="50" />
-                    <Setter Property="Height" Value="50" />
+                    <Setter Property="Canvas.Bottom" Value="45" />
+                    <Setter Property="Height" Value="60" />
                 </KeyFrame>
                 <KeyFrame Cue="60%">
                     <Setter Property="Canvas.Bottom" Value="100" />
@@ -260,7 +260,7 @@
         <Setter Property="VerticalAlignment" Value="Bottom" />
     </Style>
     
-    
+    <!-- Circular Progress indicator -->
     
     <Style Selector="ProgressBar.Circle">
         <Setter Property="Foreground" Value="{DynamicResource PrimaryHueDarkBrush}" />
@@ -321,14 +321,21 @@
         </Setter>
     </Style>
     
-    <Style Selector="ProgressBar.Circle:not(:indeterminate) /template/ controls|Rotator#PART_Rotator">
-        <Setter Property="Rotate" Value="False" />
+    <Style Selector="ProgressBar.Circle:not(:indeterminate) /template/ controls|Rotator#PART_Rotator,
+                     ProgressBar.Circle[IsVisible=false] /template/ controls|Rotator#PART_Rotator">
+        <Style.Animations>
+            <Animation Duration="0:0:0.1" IterationCount="1">
+                <KeyFrame Cue="0%">
+                    <Setter Property="Speed" Value="0" />
+                </KeyFrame>
+            </Animation>
+        </Style.Animations>
     </Style>
     
     <Style Selector="ProgressBar.Circle:indeterminate /template/ controls|Arc#PART_Animation">
         <Setter Property="IsVisible" Value="True" />
         <Style.Animations>
-            <Animation Duration="0:0:1.5" IterationCount="INFINITE">
+            <Animation Duration="0:0:1.2" IterationCount="INFINITE">
                 <KeyFrame Cue="0%">
                     <Setter Property="SweepAngle" Value="45" />
                 </KeyFrame>
@@ -345,20 +352,19 @@
         </Style.Animations>
     </Style>
     <Style Selector="ProgressBar.Circle:indeterminate /template/ controls|Rotator#PART_Rotator">
-        <Setter Property="Rotate" Value="True" />
         <Style.Animations>
-            <Animation Duration="0:0:1.5" IterationCount="INFINITE">
+            <Animation Duration="0:0:1.2" IterationCount="INFINITE">
                 <KeyFrame Cue="0%">
-                    <Setter Property="Speed" Value="0.5" />
-                </KeyFrame>
-                <KeyFrame Cue="50%">
                     <Setter Property="Speed" Value="0.4" />
                 </KeyFrame>
+                <KeyFrame Cue="50%">
+                    <Setter Property="Speed" Value="0.35" />
+                </KeyFrame>
                 <KeyFrame Cue="60%">
-                    <Setter Property="Speed" Value="0.8" />
+                    <Setter Property="Speed" Value="0.7" />
                 </KeyFrame>
                 <KeyFrame Cue="100%">
-                    <Setter Property="Speed" Value="0.8" />
+                    <Setter Property="Speed" Value="0.7" />
                 </KeyFrame>
             </Animation>
         </Style.Animations>

Material.Styles/ScrollBar.xaml

@@ -206,7 +206,6 @@
         <Setter Property="Template">
             <ControlTemplate>
                 <Grid Name="rootGrid"
-                      Margin="3,12"
                       Width="6">
                     <Border Name="backBorder"
                             CornerRadius="6"
@@ -278,6 +277,13 @@
         </Setter>
     </Style>
 
+    <!-- Allow overriding from TextBox -->
+    <Style Selector="ScrollBar.Modern /template/ Grid#rootGrid">
+        <Setter Property="Margin"
+                Value="3 12">
+        </Setter>
+    </Style>
+
     <!-- Mini scrollbars  -->
 
     <Style Selector="ScrollBar.Mini">
@@ -434,4 +440,4 @@
             </StackPanel>
         </Border>
     </Design.PreviewWith>
-</Styles>
+</Styles>

Material.Styles/Slider.xaml

@@ -267,15 +267,14 @@
       <ControlTemplate>
         <Border Name="border" BorderBrush="{TemplateBinding BorderBrush}"
                 BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}">
-          <Grid RowDefinitions="Auto,Auto,Auto">
-
-            <Border Grid.Row="0" Grid.RowSpan="3" HorizontalAlignment="Stretch"
+          <Panel>
+            <Border HorizontalAlignment="Stretch"
                     BorderThickness="0" CornerRadius="1">
               <style:TickBar Name="CenterTick" Fill="{TemplateBinding Foreground}" Height="2" Margin="0"
                              TickFrequency="{Binding $parent[Slider].TickFrequency}" VerticalAlignment="Center"
                              Minimum="{TemplateBinding Minimum}" Maximum="{TemplateBinding Maximum}" Opacity="1" />
             </Border>
-            <Track Name="PART_Track" Grid.Row="1" MinHeight="{TemplateBinding MinHeight}"
+            <Track Name="PART_Track" MinHeight="{TemplateBinding MinHeight}"
                    Orientation="Horizontal" Minimum="{TemplateBinding Minimum}"
                    Value="{TemplateBinding Value}" Maximum="{TemplateBinding Maximum}">
               <Track.DecreaseButton>
@@ -294,7 +293,7 @@
                        Classes="SliderThumb Modern" />
               </Track.Thumb>
             </Track>
-          </Grid>
+          </Panel>
         </Border>
       </ControlTemplate>
     </Setter>
@@ -305,8 +304,7 @@
       <ControlTemplate>
         <Border Name="border" BorderBrush="{TemplateBinding BorderBrush}"
                 BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}">
-          <Grid>
-
+          <Panel>
             <Border HorizontalAlignment="Stretch"
                     BorderThickness="0" CornerRadius="1">
               <style:TickBar Name="CenterTick" Fill="{TemplateBinding Foreground}" Width="2" Margin="0"
@@ -332,7 +330,7 @@
                        Classes="SliderThumb Modern" />
               </Track.Thumb>
             </Track>
-          </Grid>
+          </Panel>
         </Border>
       </ControlTemplate>
     </Setter>

Material.Styles/SnackbarHost.xaml

@@ -0,0 +1,48 @@
+<Styles xmlns="https://github.com/avaloniaui"
+        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+        xmlns:cc="clr-namespace:Material.Styles"
+        xmlns:converters="clr-namespace:Material.Styles.Converters"
+        xmlns:models="clr-namespace:Material.Styles.Models"
+        x:DataType="cc:SnackbarHost">
+  <Styles.Resources>
+    <converters:MarginCreator x:Key="StartMarginCreator" />
+  </Styles.Resources>
+
+  <Style Selector="cc|SnackbarHost">
+    <Setter Property="Background" Value="Transparent" />
+    <Setter Property="Template">
+      <ControlTemplate>
+        <Panel>
+          <ContentPresenter Content="{TemplateBinding Content}"
+                            ContentTemplate="{TemplateBinding ContentTemplate}" />
+          <ItemsControl HorizontalAlignment="Left" VerticalAlignment="Bottom"
+                        Items="{CompiledBinding $parent[cc:SnackbarHost].SnackbarModels}">
+            <ItemsControl.ItemsPanel>
+              <ItemsPanelTemplate>
+                <ReversibleStackPanel />
+              </ItemsPanelTemplate>
+            </ItemsControl.ItemsPanel>
+            <ItemsControl.ItemTemplate>
+              <DataTemplate DataType="models:SnackbarModel">
+                <cc:Card Padding="0" Margin="8" Width="344">
+                  <Grid ColumnDefinitions="16,*,8,Auto,8" RowDefinitions="6,Auto,6" Margin="0, 8">
+                    <ContentPresenter Grid.Column="1" Grid.Row="1"
+                                      Content="{CompiledBinding Content, Converter={x:Static converters:WrapContentIntoContentPresenterConverter.Instance}}">
+                      <ContentPresenter.Styles>
+                        <Style Selector="TextBlock">
+                          <Setter Property="TextAlignment" Value="Left" />
+                        </Style>
+                      </ContentPresenter.Styles>
+                    </ContentPresenter>
+                    <ContentPresenter Grid.Column="3" Grid.Row="1" Content="{CompiledBinding Button}"
+                                      IsVisible="{CompiledBinding !!Button}" />
+                  </Grid>
+                </cc:Card>
+              </DataTemplate>
+            </ItemsControl.ItemTemplate>
+          </ItemsControl>
+        </Panel>
+      </ControlTemplate>
+    </Setter>
+  </Style>
+</Styles>

Material.Styles/SnackbarHost.xaml.cs

@@ -0,0 +1,174 @@
+using System;
+using System.Collections.Generic;
+using System.Collections.ObjectModel;
+using System.Linq;
+using System.Threading.Tasks;
+using System.Timers;
+using Avalonia;
+using Avalonia.Controls;
+using Avalonia.LogicalTree;
+using Avalonia.Controls.Primitives;
+using Avalonia.Threading;
+using Material.Styles.Models;
+
+namespace Material.Styles
+{
+    public class SnackbarHost : ContentControl
+    {
+        private static HashSet<SnackbarHost> _snackbarHosts;
+
+        private ObservableCollection<SnackbarModel> _snackbars;
+        public ObservableCollection<SnackbarModel> SnackbarModels => _snackbars;
+        
+        /// <summary>
+        /// Get the name of host. The name of host can be set only one time.
+        /// </summary>
+        public string HostName
+        {
+            get => GetValue(HostNameProperty);
+            set
+            {
+                if (HostName == null)
+                    SetValue(HostNameProperty, value);
+                else
+                    throw new InvalidOperationException("The name of host can be set only one time.");
+            }
+        }
+
+        public static readonly StyledProperty<string> HostNameProperty =
+            AvaloniaProperty.Register<SnackbarHost, string>(nameof(HostName));
+
+        static SnackbarHost()
+        {
+            _snackbarHosts = new HashSet<SnackbarHost>();
+        }
+        
+        public SnackbarHost()
+        {
+            // Initialize model collection
+            this._snackbars = new ObservableCollection<SnackbarModel>();
+            
+            this.TemplateApplied += OnTemplateApplied;
+            this.AttachedToLogicalTree += OnAttachedToLogicalTree;
+            this.DetachedFromLogicalTree += OnDetachedFromLogicalTree;
+        }
+
+        private static string GetFirstHostName()
+        {
+            if (_snackbarHosts is null)
+                // THIS IS IMPOSSIBLE TO HAPPEN! But I kept this for any reasons.
+                throw new NullReferenceException("Snackbar hosts pool is not initialized!");
+
+            return _snackbarHosts.First().HostName;
+        }
+
+        private static SnackbarHost GetHost(string name)
+        {
+            if (name is null)
+                throw new ArgumentNullException(nameof(name));
+
+            var result = _snackbarHosts.Where(
+                // Predicate
+                // And do not asking me, why I'm using delegate here.
+                // Performance are important too.
+                delegate(SnackbarHost host)
+                {
+                    return host.HostName == name;
+                });
+
+            // If exists any matched results.
+            if (result.Any())
+            {
+                return result.First();
+            }
+
+            // or just return null if no any results.
+            return null;
+        }
+
+        /// <summary>
+        /// Post an snackbar with message text.
+        /// </summary>
+        /// <param name="text">message text.</param>
+        /// <param name="targetHost">the snackbar host that you wanted to use.</param>
+        public static void Post(string text, string targetHost = null) => Post(new SnackbarModel(text), targetHost);
+        
+        /// <summary>
+        /// Post an snackbar with custom content and button (only one).
+        /// </summary>
+        /// <param name="model">snackbar data model.</param>
+        /// <param name="targetHost">the snackbar host that you wanted to use.</param>
+        public static void Post(SnackbarModel model, string targetHost = null)
+        {
+            if (targetHost is null)
+                targetHost = GetFirstHostName();
+            
+            var host = GetHost(targetHost);
+
+            if (host is null)
+                throw new ArgumentNullException(nameof(targetHost), $"The target host named \"{targetHost}\" is not exist.");
+
+            ElapsedEventHandler onExpired = null;
+            onExpired = delegate(object sender, ElapsedEventArgs args)
+            {
+                if (sender is Timer timer)
+                {
+                    // Remove timer.
+                    timer.Stop();
+                    timer.Elapsed -= onExpired;
+                    timer.Dispose();
+                    
+                    OnSnackbarDurationExpired(host, model);
+                }
+            };
+            
+            var timer = new Timer(model.Duration.TotalMilliseconds);
+            timer.Elapsed += onExpired;
+            timer.Start();
+            
+            Dispatcher.UIThread.Post(delegate
+            {
+                host.SnackbarModels.Add(model);
+            });
+        }
+
+        private static void OnSnackbarDurationExpired(SnackbarHost host, SnackbarModel model)
+        {
+            Dispatcher.UIThread.Post(delegate
+            {
+                host.SnackbarModels.Remove(model);
+            });
+        }
+
+        private void OnAttachedToLogicalTree(object sender, LogicalTreeAttachmentEventArgs e)
+        {
+            if (sender is SnackbarHost host)
+            {
+                _snackbarHosts.Add(host);
+            }
+        }
+
+        private void OnDetachedFromLogicalTree(object sender, LogicalTreeAttachmentEventArgs e)
+        {
+            if (sender is SnackbarHost host)
+            {
+                if (host.HostName is null)
+                    throw new ArgumentNullException(nameof(HostName));
+                
+                _snackbarHosts.Remove(host);
+            }
+        }
+
+        private void OnTemplateApplied(object sender, TemplateAppliedEventArgs e)
+        {
+            if (sender is SnackbarHost host)
+            {
+                host.TemplateApplied -= OnTemplateApplied;
+                // Initialize snackbar host
+                
+                if (host.HostName is null)
+                    throw new ArgumentNullException(nameof(HostName));
+            }
+        }
+    }
+}

Material.Styles/TextBox.xaml

@@ -58,8 +58,9 @@
             Noto Sans TC, Noto Sans SC, Noto Sans JP, Noto Sans KR, Noto Sans, Arial"/>
         <Setter Property="Template">
             <ControlTemplate>
-                <StackPanel>
+                <Grid RowDefinitions="*, Auto">
                     <Border Name="PART_RootBorder" Cursor="Ibeam"
+                            Grid.Row="0"
                             Background="{TemplateBinding Background}"
                             BorderBrush="{TemplateBinding BorderBrush}"
                             BorderThickness="{TemplateBinding BorderThickness}">
@@ -88,14 +89,12 @@
 
                             <DataValidationErrors Name="DataValidation">
                                 <Grid ColumnDefinitions="Auto,*,Auto">
-                                    <ContentPresenter Grid.Column="0"
-                                                      VerticalAlignment="Top"
-                                                      HorizontalAlignment="Left"
-                                                      Content="{TemplateBinding InnerLeftContent}" />
-                                    <ScrollViewer Grid.Column="1"
+                                    <ContentPresenter Grid.Column="0" Content="{TemplateBinding InnerLeftContent}" />
+                                    <Panel Grid.Column="1" Name="PART_TextRoot">
+                                        <ScrollViewer Name="PART_Scroller"
                                                   HorizontalScrollBarVisibility="{TemplateBinding (ScrollViewer.HorizontalScrollBarVisibility)}"
                                                   VerticalScrollBarVisibility="{TemplateBinding (ScrollViewer.VerticalScrollBarVisibility)}">
-                                        <Panel Name="PART_TextRoot" VerticalAlignment="Bottom">
+                                        <Panel>
                                             <TextBlock Name="watermark"
                                                        Margin="0,6,0,7"
                                                        Classes="Subtitle1"
@@ -119,12 +118,10 @@
                                                            SelectionBrush="{TemplateBinding SelectionBrush}"
                                                            SelectionForegroundBrush="{TemplateBinding SelectionForegroundBrush}"
                                                            CaretBrush="{TemplateBinding CaretBrush}" />
-                                        </Panel>
+                                       </Panel>
                                     </ScrollViewer>
-                                    <ContentPresenter Grid.Column="2"
-                                                      MinHeight="32"
-                                                      VerticalAlignment="Top"
-                                                      Content="{TemplateBinding InnerRightContent}" />
+                                    </Panel>
+                                    <ContentPresenter Grid.Column="2" Content="{TemplateBinding InnerRightContent}" />
                                     <styles:MaterialUnderline Grid.ColumnSpan="3" Classes="MirrorY"
                                                               VerticalAlignment="Bottom"
                                                               Name="PART_Underline" />
@@ -132,9 +129,9 @@
                             </DataValidationErrors>
                         </Grid>
                     </Border>
-                    <TextBlock Name="HintsTextBlock" Classes="Caption" Margin="0,3,0,0"
+                    <TextBlock Grid.Row="1" Name="HintsTextBlock" Classes="Caption" Margin="0,3,0,0"
                                Text="{TemplateBinding (wpf:TextFieldAssist.Hints)}" TextTrimming="CharacterEllipsis" />
-                </StackPanel>
+                </Grid>
             </ControlTemplate>
         </Setter>
     </Style>
@@ -173,6 +170,11 @@
     <Style Selector="TextBox /template/ TextBlock#floatingWatermark">
         <Setter Property="Foreground" Value="{DynamicResource ThemeAccentBrush}"/>
     </Style>
+
+    <Style Selector="TextBox /template/ #PART_Scroller /template/ ScrollBar.Modern /template/ Grid#rootGrid">
+        <Setter Property="Margin"
+                Value="0 8 0 4"/>
+    </Style>
     
     <!-- Default TextBox style -->
     <Style Selector="TextBox[UseFloatingWatermark=True] /template/ Panel#PART_TextRoot">
@@ -222,8 +224,8 @@
         <Setter Property="CaretBrush" Value="{Binding RelativeSource={RelativeSource Self}, Path=Foreground}" />
         <Setter Property="Template">
             <ControlTemplate>
-                <StackPanel>
-                    <DataValidationErrors Name="DataValidation">
+                <Grid RowDefinitions="*, Auto">
+                    <DataValidationErrors Grid.Row="0" Name="DataValidation">
                         <Border Name="PART_RootBorder" Cursor="Ibeam"
                                 ClipToBounds="True" CornerRadius="4,4,0,0"
                                 Background="{TemplateBinding Background}"
@@ -240,14 +242,12 @@
                                            RenderTransformOrigin="0, 0" />
 
                                 <Grid ColumnDefinitions="Auto,*,Auto">
-                                    <ContentPresenter Grid.Column="0"
-                                                      VerticalAlignment="Top"
-                                                      HorizontalAlignment="Left"
-                                                      Content="{TemplateBinding InnerLeftContent}" />
-                                    <ScrollViewer Name="PART_Scroller" Grid.Column="1" Classes="Modern" Padding="16,0"
-                                                  HorizontalScrollBarVisibility="{TemplateBinding (ScrollViewer.HorizontalScrollBarVisibility)}"
-                                                  VerticalScrollBarVisibility="{TemplateBinding (ScrollViewer.VerticalScrollBarVisibility)}">
-                                        <Panel Name="PART_TextRoot">
+                                    <ContentPresenter Grid.Column="0" Content="{TemplateBinding InnerLeftContent}" />
+                                    <Panel Name="PART_TextRoot" Grid.Column="1">
+                                        <ScrollViewer Name="PART_Scroller" Classes="Modern" Padding="16,0"
+                                                      HorizontalScrollBarVisibility="{TemplateBinding (ScrollViewer.HorizontalScrollBarVisibility)}"
+                                                      VerticalScrollBarVisibility="{TemplateBinding (ScrollViewer.VerticalScrollBarVisibility)}">
+                                        <Panel>
                                             <TextBlock Name="watermark"
                                                        Classes="Subtitle1" Opacity="0.5"
                                                        Text="{TemplateBinding Watermark}"
@@ -271,11 +271,8 @@
                                                            CaretBrush="{TemplateBinding CaretBrush}" />
                                         </Panel>
                                     </ScrollViewer>
-                                    <ContentPresenter Grid.Column="2"
-                                                      MinHeight="32"
-                                                      Margin="0,0,0,0"
-                                                      VerticalAlignment="Top"
-                                                      Content="{TemplateBinding InnerRightContent}" />
+                                    </Panel>
+                                    <ContentPresenter Grid.Column="2" Content="{TemplateBinding InnerRightContent}" />
                                     <styles:MaterialUnderline Grid.ColumnSpan="3" Classes="MirrorY"
                                                               VerticalAlignment="Bottom"
                                                               Name="PART_Underline" />
@@ -284,9 +281,9 @@
                             </Grid>
                         </Border>
                     </DataValidationErrors>
-                    <TextBlock Name="HintsTextBlock" Classes="Caption" Margin="0,3,0,0"
+                    <TextBlock Grid.Row="1" Name="HintsTextBlock" Classes="Caption" Margin="0,3,0,0"
                                Text="{TemplateBinding (wpf:TextFieldAssist.Hints)}" TextTrimming="CharacterEllipsis" />
-                </StackPanel>
+                </Grid>
             </ControlTemplate>
         </Setter>
     </Style>
@@ -316,6 +313,11 @@
     <Style Selector="TextBox.Filled /template/ Panel#PART_TextRoot">
         <Setter Property="Margin" Value="0,24,0,6"/>
     </Style>
+
+    <Style Selector="TextBox.Filled /template/ #PART_Scroller /template/ ScrollBar.Modern /template/ Grid#rootGrid">
+        <Setter Property="Margin"
+                Value="0"/>
+    </Style>
     
     <Style Selector="TextBox.Filled[UseFloatingWatermark=False] /template/ Panel#PART_TextRoot">
         <Setter Property="Margin" Value="0, 16"/>
@@ -360,8 +362,8 @@
         <Setter Property="CaretBrush" Value="{Binding RelativeSource={RelativeSource Self}, Path=Foreground}" />
         <Setter Property="Template">
             <ControlTemplate>
-                <StackPanel>
-                    <DataValidationErrors Name="DataValidation">
+                <Grid RowDefinitions="*, Auto">
+                    <DataValidationErrors Grid.Row="0" Name="DataValidation">
                         <Grid Name="PART_RootBorder"
                               HorizontalAlignment="Stretch" VerticalAlignment="Stretch"
                               Cursor="Ibeam" Background="Transparent"
@@ -390,16 +392,13 @@
 
 
                             <Grid ColumnDefinitions="Auto,*,Auto">
-                                <ContentPresenter Grid.Column="0"
-                                                  VerticalAlignment="Top"
-                                                  HorizontalAlignment="Left"
-                                                  Content="{TemplateBinding InnerLeftContent}" />
-                                <ScrollViewer Name="PART_Scroller" Grid.Column="1" Classes="Modern"
-                                              Padding="16, 0, 8,0"
-                                              HorizontalScrollBarVisibility="{TemplateBinding (ScrollViewer.HorizontalScrollBarVisibility)}"
-                                              VerticalScrollBarVisibility="{TemplateBinding (ScrollViewer.VerticalScrollBarVisibility)}">
-                                    <Panel Name="PART_TextRoot"
-                                           VerticalAlignment="Center">
+                                <ContentPresenter Grid.Column="0" Content="{TemplateBinding InnerLeftContent}" />
+                                <Panel Grid.Column="1" Name="PART_TextRoot">
+                                    <ScrollViewer Name="PART_Scroller"  Classes="Modern"
+                                                  Padding="16, 0, 8,0"
+                                                  HorizontalScrollBarVisibility="{TemplateBinding (ScrollViewer.HorizontalScrollBarVisibility)}"
+                                                  VerticalScrollBarVisibility="{TemplateBinding (ScrollViewer.VerticalScrollBarVisibility)}">
+                                    <Panel VerticalAlignment="Center">
                                         <TextBlock Name="watermark"
                                                    Classes="Subtitle1" Opacity="0.5"
                                                    Text="{TemplateBinding Watermark}"
@@ -423,18 +422,15 @@
                                                        CaretBrush="{TemplateBinding CaretBrush}" />
                                     </Panel>
                                 </ScrollViewer>
-                                <ContentPresenter Grid.Column="2"
-                                                  Margin="0,0,0,0"
-                                                  MinHeight="32"
-                                                  VerticalAlignment="Top"
-                                                  Content="{TemplateBinding InnerRightContent}" />
+                                </Panel>
+                                <ContentPresenter Grid.Column="2" Content="{TemplateBinding InnerRightContent}" />
                             </Grid>
 
                         </Grid>
                     </DataValidationErrors>
-                    <TextBlock Name="HintsTextBlock" Classes="Caption" Margin="0,3,0,0"
+                    <TextBlock Grid.Row="1" Name="HintsTextBlock" Classes="Caption" Margin="0,3,0,0"
                                Text="{TemplateBinding (wpf:TextFieldAssist.Hints)}" TextTrimming="CharacterEllipsis" />
-                </StackPanel>
+                </Grid>
             </ControlTemplate>
         </Setter>
     </Style>
@@ -470,7 +466,7 @@
     </Style>
     
     <Style Selector="TextBox.Outline /template/ Panel#PART_TextRoot">
-        <Setter Property="Margin" Value="0,14"/>
+        <Setter Property="Margin" Value="0,14 0 6"/>
         <Setter Property="VerticalAlignment" Value="Center"/>
     </Style>
     
@@ -600,11 +596,9 @@
                     <Grid HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Margin="{TemplateBinding Padding}">
                         <DataValidationErrors Name="DataValidation">
                             <Grid ColumnDefinitions="Auto,*,Auto">
-                                <ContentPresenter Grid.Column="0"
-                                                  HorizontalAlignment="Left"
-                                                  Content="{TemplateBinding InnerLeftContent}" />
+                                <ContentPresenter Grid.Column="0" Content="{TemplateBinding InnerLeftContent}" />
                                 <Grid Name="PART_InnerRoot" Grid.Column="1">
-                                    <ScrollViewer HorizontalScrollBarVisibility="{TemplateBinding (ScrollViewer.HorizontalScrollBarVisibility)}"
+                                    <ScrollViewer Name="PART_Scroller" HorizontalScrollBarVisibility="{TemplateBinding (ScrollViewer.HorizontalScrollBarVisibility)}"
                                                   VerticalScrollBarVisibility="{TemplateBinding (ScrollViewer.VerticalScrollBarVisibility)}">
                                     <Panel Name="PART_TextRoot" VerticalAlignment="Center">
                                         <TextBlock Name="watermark" Classes="Subtitle1" Opacity="0.5"
@@ -627,9 +621,7 @@
                                     </Panel>
                                 </ScrollViewer>
                                 </Grid>
-                                <ContentPresenter Grid.Column="2"
-                                                  HorizontalAlignment="Right"
-                                                  Content="{TemplateBinding InnerRightContent}" />
+                                <ContentPresenter Grid.Column="2" Content="{TemplateBinding InnerRightContent}" />
                             </Grid>
                         </DataValidationErrors>
                     </Grid>

Material.Styles/Themes/MaterialDesignColor.cs

@@ -1,336 +0,0 @@
-namespace Material.Styles.Themes {
-    public enum PrimaryColor {
-        Red = MaterialDesignColor.Red500,
-        Pink = MaterialDesignColor.Pink500,
-        Purple = MaterialDesignColor.Purple500,
-        DeepPurple = MaterialDesignColor.DeepPurple500,
-        Indigo = MaterialDesignColor.Indigo500,
-        Blue = MaterialDesignColor.Blue500,
-        LightBlue = MaterialDesignColor.LightBlue500,
-        Cyan = MaterialDesignColor.Cyan500,
-        Teal = MaterialDesignColor.Teal500,
-        Green = MaterialDesignColor.Green500,
-        LightGreen = MaterialDesignColor.LightGreen500,
-        Lime = MaterialDesignColor.Lime500,
-        Yellow = MaterialDesignColor.Yellow500,
-        Amber = MaterialDesignColor.Amber500,
-        Orange = MaterialDesignColor.Orange500,
-        DeepOrange = MaterialDesignColor.DeepOrange500,
-        Brown = MaterialDesignColor.Brown500,
-        Grey = MaterialDesignColor.Grey500,
-        BlueGrey = MaterialDesignColor.BlueGrey500
-    }
-
-    public enum SecondaryColor {
-        Red = MaterialDesignColor.RedSecondary,
-        Pink = MaterialDesignColor.PinkSecondary,
-        Purple = MaterialDesignColor.PurpleSecondary,
-        DeepPurple = MaterialDesignColor.DeepPurpleSecondary,
-        Indigo = MaterialDesignColor.IndigoSecondary,
-        Blue = MaterialDesignColor.BlueSecondary,
-        LightBlue = MaterialDesignColor.LightBlueSecondary,
-        Cyan = MaterialDesignColor.CyanSecondary,
-        Teal = MaterialDesignColor.TealSecondary,
-        Green = MaterialDesignColor.GreenSecondary,
-        LightGreen = MaterialDesignColor.LightGreenSecondary,
-        Lime = MaterialDesignColor.LimeSecondary,
-        Yellow = MaterialDesignColor.YellowSecondary,
-        Amber = MaterialDesignColor.AmberSecondary,
-        Orange = MaterialDesignColor.OrangeSecondary,
-        DeepOrange = MaterialDesignColor.DeepOrangeSecondary
-    }
-
-    public enum MaterialDesignColor {
-        Red50,
-        Red100,
-        Red200,
-        Red300,
-        Red400,
-        Red500,
-        Red600,
-        Red700,
-        Red800,
-        Red900,
-        RedA100,
-        RedA200,
-        RedA400,
-        RedA700,
-        Pink50,
-        Pink100,
-        Pink200,
-        Pink300,
-        Pink400,
-        Pink500,
-        Pink600,
-        Pink700,
-        Pink800,
-        Pink900,
-        PinkA100,
-        PinkA200,
-        PinkA400,
-        PinkA700,
-        Purple50,
-        Purple100,
-        Purple200,
-        Purple300,
-        Purple400,
-        Purple500,
-        Purple600,
-        Purple700,
-        Purple800,
-        Purple900,
-        PurpleA100,
-        PurpleA200,
-        PurpleA400,
-        PurpleA700,
-        DeepPurple50,
-        DeepPurple100,
-        DeepPurple200,
-        DeepPurple300,
-        DeepPurple400,
-        DeepPurple500,
-        DeepPurple600,
-        DeepPurple700,
-        DeepPurple800,
-        DeepPurple900,
-        DeepPurpleA100,
-        DeepPurpleA200,
-        DeepPurpleA400,
-        DeepPurpleA700,
-        Indigo50,
-        Indigo100,
-        Indigo200,
-        Indigo300,
-        Indigo400,
-        Indigo500,
-        Indigo600,
-        Indigo700,
-        Indigo800,
-        Indigo900,
-        IndigoA100,
-        IndigoA200,
-        IndigoA400,
-        IndigoA700,
-        Blue50,
-        Blue100,
-        Blue200,
-        Blue300,
-        Blue400,
-        Blue500,
-        Blue600,
-        Blue700,
-        Blue800,
-        Blue900,
-        BlueA100,
-        BlueA200,
-        BlueA400,
-        BlueA700,
-        LightBlue50,
-        LightBlue100,
-        LightBlue200,
-        LightBlue300,
-        LightBlue400,
-        LightBlue500,
-        LightBlue600,
-        LightBlue700,
-        LightBlue800,
-        LightBlue900,
-        LightBlueA100,
-        LightBlueA200,
-        LightBlueA400,
-        LightBlueA700,
-        Cyan50,
-        Cyan100,
-        Cyan200,
-        Cyan300,
-        Cyan400,
-        Cyan500,
-        Cyan600,
-        Cyan700,
-        Cyan800,
-        Cyan900,
-        CyanA100,
-        CyanA200,
-        CyanA400,
-        CyanA700,
-        Teal50,
-        Teal100,
-        Teal200,
-        Teal300,
-        Teal400,
-        Teal500,
-        Teal600,
-        Teal700,
-        Teal800,
-        Teal900,
-        TealA100,
-        TealA200,
-        TealA400,
-        TealA700,
-        Green50,
-        Green100,
-        Green200,
-        Green300,
-        Green400,
-        Green500,
-        Green600,
-        Green700,
-        Green800,
-        Green900,
-        GreenA100,
-        GreenA200,
-        GreenA400,
-        GreenA700,
-        LightGreen50,
-        LightGreen100,
-        LightGreen200,
-        LightGreen300,
-        LightGreen400,
-        LightGreen500,
-        LightGreen600,
-        LightGreen700,
-        LightGreen800,
-        LightGreen900,
-        LightGreenA100,
-        LightGreenA200,
-        LightGreenA400,
-        LightGreenA700,
-        Lime50,
-        Lime100,
-        Lime200,
-        Lime300,
-        Lime400,
-        Lime500,
-        Lime600,
-        Lime700,
-        Lime800,
-        Lime900,
-        LimeA100,
-        LimeA200,
-        LimeA400,
-        LimeA700,
-        Yellow50,
-        Yellow100,
-        Yellow200,
-        Yellow300,
-        Yellow400,
-        Yellow500,
-        Yellow600,
-        Yellow700,
-        Yellow800,
-        Yellow900,
-        YellowA100,
-        YellowA200,
-        YellowA400,
-        YellowA700,
-        Amber50,
-        Amber100,
-        Amber200,
-        Amber300,
-        Amber400,
-        Amber500,
-        Amber600,
-        Amber700,
-        Amber800,
-        Amber900,
-        AmberA100,
-        AmberA200,
-        AmberA400,
-        AmberA700,
-        Orange50,
-        Orange100,
-        Orange200,
-        Orange300,
-        Orange400,
-        Orange500,
-        Orange600,
-        Orange700,
-        Orange800,
-        Orange900,
-        OrangeA100,
-        OrangeA200,
-        OrangeA400,
-        OrangeA700,
-        DeepOrange50,
-        DeepOrange100,
-        DeepOrange200,
-        DeepOrange300,
-        DeepOrange400,
-        DeepOrange500,
-        DeepOrange600,
-        DeepOrange700,
-        DeepOrange800,
-        DeepOrange900,
-        DeepOrangeA100,
-        DeepOrangeA200,
-        DeepOrangeA400,
-        DeepOrangeA700,
-        Brown50,
-        Brown100,
-        Brown200,
-        Brown300,
-        Brown400,
-        Brown500,
-        Brown600,
-        Brown700,
-        Brown800,
-        Brown900,
-        Grey50,
-        Grey100,
-        Grey200,
-        Grey300,
-        Grey400,
-        Grey500,
-        Grey600,
-        Grey700,
-        Grey800,
-        Grey900,
-        BlueGrey50,
-        BlueGrey100,
-        BlueGrey200,
-        BlueGrey300,
-        BlueGrey400,
-        BlueGrey500,
-        BlueGrey600,
-        BlueGrey700,
-        BlueGrey800,
-        BlueGrey900,
-
-        Red = Red500,
-        Pink = Pink500,
-        Purple = Purple500,
-        DeepPurple = DeepPurple500,
-        Indigo = Indigo500,
-        Blue = Blue500,
-        LightBlue = LightBlue500,
-        Cyan = Cyan500,
-        Teal = Teal500,
-        Green = Green500,
-        LightGreen = LightGreen500,
-        Lime = Lime500,
-        Yellow = Yellow500,
-        Amber = Amber500,
-        Orange = Orange500,
-        DeepOrange = DeepOrange500,
-        Brown = Brown500,
-        Grey = Grey500,
-        BlueGrey = BlueGrey500,
-
-        RedSecondary = RedA700,
-        PinkSecondary = PinkA700,
-        PurpleSecondary = PurpleA700,
-        DeepPurpleSecondary = DeepPurpleA700,
-        IndigoSecondary = IndigoA700,
-        BlueSecondary = BlueA700,
-        LightBlueSecondary = LightBlueA700,
-        CyanSecondary = CyanA700,
-        TealSecondary = TealA700,
-        GreenSecondary = GreenA700,
-        LightGreenSecondary = LightGreenA700,
-        LimeSecondary = LimeA700,
-        YellowSecondary = YellowA700,
-        AmberSecondary = AmberA700,
-        OrangeSecondary = OrangeA700,
-        DeepOrangeSecondary = DeepOrangeA700
-    }
-}

Material.Styles/ToggleButton.xaml

@@ -1,59 +1,110 @@
 <Styles
-    xmlns="https://github.com/avaloniaui"
-    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
-    xmlns:assists="clr-namespace:Material.Styles.Assists">
-    <!-- TODO: Rework ToggleButton -->
-    <Style Selector="ToggleButton">
-        <Setter Property="Foreground" Value="{DynamicResource PrimaryHueMidForegroundBrush}" />
-        <Setter Property="Background" Value="{DynamicResource PrimaryHueMidBrush}" />
-        <Setter Property="assists:ToggleButtonAssist.UncheckedBackground" Value="{DynamicResource MaterialDesignPaper}"/>
-        <Setter Property="assists:ToggleButtonAssist.UncheckedForeground" Value="{DynamicResource MaterialDesignBody}"/>
-        <Setter Property="BorderBrush" Value="{DynamicResource MaterialDesignDivider}" />
-        <Setter Property="HorizontalContentAlignment" Value="Center" />
-        <Setter Property="VerticalContentAlignment" Value="Center" />
-        <Setter Property="BorderThickness" Value="0" />
-        <Setter Property="Padding" Value="16 4 16 4" /> 
-        <Setter Property="Cursor" Value="Hand" />
-    </Style>
-    
-    <Style Selector="ToggleButton.ImplicitForeground">
-      <Setter Property="Foreground" Value="{Binding RelativeSource={RelativeSource AncestorType={x:Type TemplatedControl}}, Path=Foreground}"/>
-    </Style>
-    
-    <Style Selector="ToggleButton.ConstantForeground">
-      <Setter Property="assists:ToggleButtonAssist.UncheckedForeground" Value="{Binding RelativeSource={RelativeSource Self}, Path=Foreground}"/>
-    </Style>
-    
-    <Style Selector="ToggleButton.TransparentBack">
-      <Setter Property="Background" Value="Transparent" />
-      <Setter Property="assists:ToggleButtonAssist.UncheckedBackground" Value="Transparent"/>
-    </Style>
+  xmlns="https://github.com/avaloniaui"
+  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+  xmlns:assists="clr-namespace:Material.Styles.Assists"
+  xmlns:avalonia="clr-namespace:Material.Icons.Avalonia;assembly=Material.Icons.Avalonia">
+  
+  <Design.PreviewWith>
+    <StackPanel Margin="20">
+      <ToggleButton>Text</ToggleButton>
+      <ToggleButton Classes="NoFeedback">Text</ToggleButton>
+      <ToggleButton Classes="Icon">
+        <avalonia:MaterialIcon Kind="Abacus" />
+      </ToggleButton>
+      <ToggleButton Classes="Icon NoFeedback">
+        <avalonia:MaterialIcon Kind="Abacus" />
+      </ToggleButton>
+    </StackPanel>
+  </Design.PreviewWith>
+  
+  <Style Selector="ToggleButton">
+    <Setter Property="Foreground" Value="{DynamicResource PrimaryHueMidForegroundBrush}" />
+    <Setter Property="Background" Value="{DynamicResource PrimaryHueMidBrush}" />
+    <Setter Property="assists:ToggleButtonAssist.UncheckedBackground" Value="{DynamicResource MaterialDesignPaper}" />
+    <Setter Property="assists:ToggleButtonAssist.UncheckedForeground" Value="{DynamicResource MaterialDesignBody}" />
+    <Setter Property="BorderBrush" Value="{DynamicResource MaterialDesignDivider}" />
+    <Setter Property="HorizontalContentAlignment" Value="Center" />
+    <Setter Property="VerticalContentAlignment" Value="Center" />
+    <Setter Property="BorderThickness" Value="0" />
+    <Setter Property="Padding" Value="16 4 16 4" />
+    <Setter Property="Cursor" Value="Hand" />
+  </Style>
 
-    <Style Selector="ToggleButton:checked">
-        <Setter Property="Background" Value="{Binding RelativeSource={RelativeSource Self}, Path=(assists:ToggleButtonAssist.UncheckedBackground)}" />
-        <Setter Property="Foreground" Value="{Binding RelativeSource={RelativeSource Self}, Path=(assists:ToggleButtonAssist.UncheckedForeground)}" />
-    </Style>
+  <Style Selector="ToggleButton.ImplicitForeground">
+    <Setter Property="Foreground" Value="{Binding Path=$parent.Foreground}" />
+  </Style>
 
+  <Style Selector="ToggleButton.ConstantForeground">
+    <Setter Property="assists:ToggleButtonAssist.UncheckedForeground"
+            Value="{Binding RelativeSource={RelativeSource Self}, Path=Foreground}" />
+  </Style>
+
+  <Style Selector="ToggleButton.TransparentBack">
+    <Setter Property="Background" Value="Transparent" />
+    <Setter Property="assists:ToggleButtonAssist.UncheckedBackground" Value="Transparent" />
+  </Style>
+
+  <Style Selector="ToggleButton:not(:checked)">
+    <Setter Property="Background"
+            Value="{Binding RelativeSource={RelativeSource Self}, Path=(assists:ToggleButtonAssist.UncheckedBackground)}" />
+    <Setter Property="Foreground"
+            Value="{Binding RelativeSource={RelativeSource Self}, Path=(assists:ToggleButtonAssist.UncheckedForeground)}" />
+  </Style>
 
   <Style Selector="ToggleButton.NoFeedback">
     <Setter Property="Template">
       <ControlTemplate>
-        <Border BorderThickness="0"
+        <Border Name="PART_ButtonRootBorder"
                 Background="{TemplateBinding Background}"
+                BorderBrush="{TemplateBinding BorderBrush}"
+                BorderThickness="{TemplateBinding BorderThickness}"
                 CornerRadius="{TemplateBinding assists:ButtonAssist.CornerRadius}"
-                ClipToBounds="True">
-          <ContentPresenter Name="PART_ContentPresenter"
-                            CornerRadius="{TemplateBinding assists:ButtonAssist.CornerRadius}"
-                            BorderBrush="{TemplateBinding BorderBrush}"
-                            BorderThickness="{TemplateBinding BorderThickness}"
-                            ContentTemplate="{TemplateBinding ContentTemplate}"
-                            Content="{TemplateBinding Content}"
-                            Padding="{TemplateBinding Padding}"
-                            TextBlock.Foreground="{TemplateBinding Foreground}"
-                            HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
-                            VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}" />
+                assists:ShadowAssist.ShadowDepth="{TemplateBinding assists:ShadowAssist.ShadowDepth}">
+          <Panel>
+            <Border Name="PART_HoverIndicator" BorderThickness="0"
+                    Background="{TemplateBinding assists:ButtonAssist.HoverColor}"
+                    CornerRadius="{TemplateBinding assists:ButtonAssist.CornerRadius}" />
+            <Border CornerRadius="{TemplateBinding assists:ButtonAssist.CornerRadius}"
+                    ClipToBounds="True">
+              <ContentPresenter Name="PART_ContentPresenter"
+                                Content="{TemplateBinding Content}"
+                                ContentTemplate="{TemplateBinding ContentTemplate}"
+                                Padding="{TemplateBinding Padding}"
+                                TextBlock.Foreground="{TemplateBinding Foreground}"
+                                HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
+                                VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}" />
+            </Border>
+          </Panel>
         </Border>
       </ControlTemplate>
     </Setter>
+    <Setter Property="Transitions">
+      <Transitions>
+        <BrushTransition Property="Foreground" Duration="0:0:0.1" />
+        <BrushTransition Property="Background" Duration="0:0:0.1" />
+      </Transitions>
+    </Setter>
+  </Style>
+
+  <Style Selector="ToggleButton.NoFeedback.Icon">
+    <Setter Property="Padding" Value="8" />
+    <Setter Property="Height" Value="NaN" />
+    <Setter Property="Width" Value="NaN" />
+    <Setter Property="HorizontalAlignment" Value="Center" />
+    <Setter Property="Template">
+      <ControlTemplate>
+        <ContentPresenter Name="PART_ContentPresenter"
+                          CornerRadius="{TemplateBinding assists:ButtonAssist.CornerRadius}"
+                          Background="Transparent"
+                          BorderBrush="{TemplateBinding BorderBrush}"
+                          BorderThickness="{TemplateBinding BorderThickness}"
+                          ContentTemplate="{TemplateBinding ContentTemplate}"
+                          Content="{TemplateBinding Content}"
+                          Padding="{TemplateBinding Padding}"
+                          TextBlock.Foreground="{TemplateBinding Foreground}"
+                          HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
+                          VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"/>
+      </ControlTemplate>
+    </Setter>
   </Style>
 </Styles>

Material.Styles/TreeView.xaml

@@ -8,7 +8,7 @@
         <Setter Property="BorderBrush" Value="{x:Null}" />
         <Setter Property="BorderThickness" Value="0" />
         <Setter Property="Foreground" Value="{DynamicResource MaterialDesignBody}" />
-        <Setter Property="Padding" Value="1" />
+        <Setter Property="Padding" Value="0" />
         <Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Auto" />
         <Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto" />
         <Setter Property="Template">