Merge pull request #99 from AvaloniaCommunity/dev

v2.3.0
Bump version to 2.3.0
2021-08-01 20:07:27 +03:00 · 2021-08-01 19:10:25 +03:00 · 2021-08-01 19:04:18 +03:00 · 2021-08-01 18:35:35 +03:00 · 2021-08-01 18:08:06 +03:00 · 2021-06-08 14:07:58 +09:00
30 changed files with 853 additions and 360 deletions
@@ -3,7 +3,7 @@
    <PropertyGroup>
        <TargetFramework>netstandard2.0</TargetFramework>
        <GeneratePackageOnBuild>true</GeneratePackageOnBuild>
-        <Version>2.2.0</Version>
+        <Version>2.3.0</Version>
        <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>
@@ -12,17 +12,16 @@
        <RepositoryUrl>https://github.com/AvaloniaUtils/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 Snackbar
+- Add Expander
+- Add ScrollBar styles to DataGrid
+- Add initial styles for Menu and MenuItem
+- Update ProgressBar, NumericUpDown, Slider, ColorZone, ToggleButton styles
+- Fix disabled FloatingButtons disappearing
+- Fix disabled Button opacity
+- Fix ToggleButton unchecked behaviour
+- Fix space between ScrollBar and right border of the DataGrid
+- Optimise Circular ProgressBar</PackageReleaseNotes>
    </PropertyGroup>
    <ItemGroup>
        <AvaloniaResource Include="**\*.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>
@@ -9,165 +9,175 @@
        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>
+    <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 />
+    <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="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!" 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 />

-            <!-- Buttons -->
-            <pages:ButtonsDemo />
+                            <!-- Buttons -->
+                            <pages:ButtonsDemo />

-            <!-- Toggles -->
-            <pages:TogglesDemo />
+                            <!-- Toggles -->
+                            <pages:TogglesDemo />

-            <!-- Fields -->
-            <pages:FieldsDemo />
+                            <!-- Fields -->
+                            <pages:FieldsDemo />

-            <!-- ComboBoxes -->
-            <pages:ComboBoxesDemo />
+                            <!-- ComboBoxes -->
+                            <pages:ComboBoxesDemo />

-            <!-- Icons -->
-            <pages:IconsDemo />
+                            <!-- Icons -->
+                            <pages:IconsDemo />

-            <!-- Sliders -->
-            <pages:SlidersDemo />
+                            <!-- Sliders -->
+                            <pages:SlidersDemo />

-            <!-- Progress indicators -->
-            <pages:ProgressIndicatorDemo />
+                            <!-- Progress indicators -->
+                            <pages:ProgressIndicatorDemo />

-            <!-- Lists -->
-            <pages:ListsDemo />
+                            <!-- Lists -->
+                            <pages:ListsDemo />
+                            
+                            <!-- Expanders -->
+                            <pages:ExpandersDemo />

-            <!-- ColorZones -->
-            <pages:ColorZonesDemo />
-            
-            <!-- Dialogs -->
-            <pages:DialogDemo />
+                            <!-- ColorZones -->
+                            <pages:ColorZonesDemo />

-            <!-- ScrollViewer -->
-            <pages:ScrollViewerDemo />
+                            <!-- Dialogs -->
+                            <pages:DialogDemo />

-            <!-- TabControls -->
-            <pages:TabsDemo />
+                            <!-- ScrollViewer -->
+                            <pages:ScrollViewerDemo />

-            <!-- Card -->
-            <pages:CardsDemo />
+                            <!-- TabControls -->
+                            <pages:TabsDemo />

-            <!-- Typography -->
-            <pages:TypographyDemo />
+                            <!-- Card -->
+                            <pages:CardsDemo />

-            <!-- Shadows -->
-            <pages:NotReadyDemo />
-          </Carousel>
-        </Border>
-      </ScrollViewer>
-    </DockPanel>
-  </styles:NavigationDrawer>
+                            <!-- Typography -->
+                            <pages:TypographyDemo />
+
+                            <!-- Shadows -->
+                            <pages:NotReadyDemo />
+                        </Carousel>
+                    </Border>
+                </ScrollViewer>
+            </DockPanel>
+        </styles:NavigationDrawer>
+    </styles:SnackbarHost>
 </Window>
@@ -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!");
+        }
    }
 }
@@ -26,7 +26,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 +38,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 +50,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 +62,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 +74,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 +86,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 +98,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 +110,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 +123,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 +137,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 +157,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>
@@ -0,0 +1,24 @@
+<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">
+        <StackPanel.Styles>
+            <Style Selector="showMeTheXaml|XamlDisplay">
+                <Setter Property="Margin" Value="8" />
+            </Style>
+        </StackPanel.Styles>
+        <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>
@@ -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);
+        }
+    }
+}
@@ -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},
        };
@@ -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>
@@ -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">
@@ -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 -->
@@ -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"
@@ -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">
@@ -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);
+        }
    }
 }
@@ -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>
@@ -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">
@@ -67,4 +67,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>
@@ -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>
@@ -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,27 +144,27 @@
                                </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">
+        Selector="MenuItem > MenuItem:not(:disabled):not(:selected) /template/ Border#PART_MenuItemHighlighter,
+    ContextMenu > MenuItem:not(:disabled):not(:selected) /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">
+        Selector="MenuItem > MenuItem:disabled:not(:selected) /template/ Border#PART_MenuItemHighlighter,
+    ContextMenu > MenuItem:disabled:not(:selected) /template/ Border#PART_MenuItemHighlighter">
        <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">
+        Selector="MenuItem > MenuItem:not(.Menu):not(:disabled):selected /template/ Border#PART_MenuItemHighlighter,
+    ContextMenu > MenuItem:not(.Menu):not(:disabled):selected /template/ Border#PART_MenuItemHighlighter">
        <Setter Property="Opacity" Value="0.13" />
    </Style>

@@ -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;
+    }
+}
@@ -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">
@@ -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>
@@ -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>
@@ -0,0 +1,47 @@
+<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">
+  <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="{Binding $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}">
+                      <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>
@@ -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));
+            }
+        }
+    }
+}
@@ -17,7 +17,7 @@
    </Style>
    
    <Style Selector="ToggleButton.ImplicitForeground">
-      <Setter Property="Foreground" Value="{Binding RelativeSource={RelativeSource AncestorType={x:Type TemplatedControl}}, Path=Foreground}"/>
+      <Setter Property="Foreground" Value="{Binding Path=$parent.Foreground}"/>
    </Style>
    
    <Style Selector="ToggleButton.ConstantForeground">
@@ -29,7 +29,7 @@
      <Setter Property="assists:ToggleButtonAssist.UncheckedBackground" Value="Transparent"/>
    </Style>

-    <Style Selector="ToggleButton:checked">
+    <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>
Author	SHA1	Message	Date
SKProCH	e54b8f8827	Merge pull request #99 from AvaloniaCommunity/dev v2.3.0	2021-08-01 20:07:27 +03:00
SKProCH	80b43e7b2c	Bump version to 2.3.0	2021-08-01 19:10:25 +03:00
SKProCH	b150b8d7cc	Fix disabled FloatingButtons disappearing, Fix disabled Button opacity, Closes #93	2021-08-01 19:04:18 +03:00
SKProCH	36e923a9de	Upload images for wiki	2021-08-01 18:35:35 +03:00
SKProCH	0b51fd02fc	Add scrollbar styles to DataGrid, Remove space between scrollbar and right border of the DataGrid, Closes #97	2021-08-01 18:08:06 +03:00
appleneko2001	4c3e4c3a6a	Update ColorZonesDemo	2021-06-08 14:07:58 +09:00
appleneko2001	dd7be53f43	Correct width of snackbar	2021-06-08 14:07:48 +09:00
appleneko2001	0c9746bbd6	Update colorzone and togglebutton styles	2021-06-08 14:06:58 +09:00
appleneko2001	31a5046c77	Initial update style of Menu and MenuItem	2021-06-08 13:20:12 +09:00
appleneko2001	dce3860c77	Update animation of progressbar	2021-06-08 13:18:48 +09:00
appleneko2001	289aae6531	Update ColorZone style	2021-06-08 13:02:55 +09:00
appleneko2001	4b7bdf12c7	Use binding instead in ButtonSpinner	2021-06-06 03:59:04 +09:00
appleneko2001	ba7378cca5	Update Slider	2021-06-06 03:55:34 +09:00
appleneko2001	598893180e	Update NumericUpDown	2021-06-06 03:54:38 +09:00
appleneko2001	35b54a582c	Slightly changes style of IconsExplorer	2021-06-06 03:53:49 +09:00
appleneko2001	a63d921886	Reduce performance leak in Circular Progress	2021-06-06 03:52:12 +09:00
appleneko2001	8d9ae0849f	Fix toggle button unchecked behaviour	2021-05-29 06:40:31 +09:00
appleneko2001	67580dfe6a	initial expander demo	2021-05-29 06:39:55 +09:00
appleneko2001	dcc2805778	Update expander	2021-05-29 06:39:13 +09:00
appleneko2001	ea47183056	Update expander	2021-05-29 05:25:17 +09:00
appleneko2001	ac09cd58ef	Update styles of expander	2021-05-29 05:21:42 +09:00
appleneko2001	e4870e1ed7	Update custom dialog	2021-05-29 05:13:39 +09:00
appleneko2001	034322bf43	initial styles of expander	2021-05-29 05:11:30 +09:00
appleneko2001	5192918905	Update ProgressBar.xaml	2021-05-25 19:08:38 +09:00
appleneko2001	9538d90609	Use Avalonia render loop instead.	2021-05-25 19:08:21 +09:00
appleneko2001	32fd8e1f59	Merge remote-tracking branch 'origin/dev' into dev	2021-05-23 11:01:38 +09:00
appleneko2001	e2bb823bbe	Update features table	2021-05-23 11:01:23 +09:00
appleneko2001	a1ae0efe88	Use snackbar system in demo	2021-05-23 11:01:05 +09:00
appleneko2001	f3e145b63d	Add reference of style SnackbarHost	2021-05-23 11:00:21 +09:00
appleneko2001	2da6baf0eb	Initial snackbar system	2021-05-23 10:59:43 +09:00