Speckle.Material.Avalonia/Material.Demo/Pages/ColorZonesDemo.axaml

<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"
             xmlns:icons="clr-namespace:Material.Icons.Avalonia;assembly=Material.Icons.Avalonia"
             xmlns:controls="clr-namespace:Material.Styles.Controls;assembly=Material.Styles"
             x:Class="Material.Demo.Pages.ColorZonesDemo">
    <StackPanel Margin="16, 0,16,32">
        <StackPanel.Styles>
            <!-- Icons are too small, use next style to let them bigger -->
            <Style Selector="icons|MaterialIcon">
                <Setter Property="Width" Value="24" />
                <Setter Property="Height" Value="24" />
            </Style>
        </StackPanel.Styles>
        <TextBlock Classes="Headline4 Subheadline" Text="ColorZones" />
        <StackPanel>
            <TextBlock Classes="Headline6 Subheadline2" Text="Standard mode" />
            <showMeTheXaml:XamlDisplay UniqueId="ColorZoneDemo1">
                <controls:ColorZone Height="56" Padding="12">
                    <Grid ColumnDefinitions="Auto,24,*">
                        <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>
                </controls:ColorZone>
            </showMeTheXaml:XamlDisplay>
        </StackPanel>

        <StackPanel>
            <TextBlock Classes="Headline6 Subheadline2" Text="Invent mode" />
            <showMeTheXaml:XamlDisplay UniqueId="ColorZoneDemo2">
                <controls:ColorZone Height="56" Padding="12" Mode="Inverted">
                    <Grid ColumnDefinitions="Auto,24,*">
                        <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>
                </controls:ColorZone>
            </showMeTheXaml:XamlDisplay>
        </StackPanel>

        <StackPanel>
            <TextBlock Classes="Headline6 Subheadline2" Text="Dark mode" />
            <showMeTheXaml:XamlDisplay UniqueId="ColorZoneDemo3">
                <controls:ColorZone Height="56" Padding="12" Mode="Dark">
                    <Grid ColumnDefinitions="Auto,24,*">
                        <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>
                </controls:ColorZone>
            </showMeTheXaml:XamlDisplay>
        </StackPanel>

        <StackPanel>
            <TextBlock Classes="Headline6 Subheadline2" Text="Light mode" />
            <showMeTheXaml:XamlDisplay UniqueId="ColorZoneDemo4">
                <controls:ColorZone Height="56" Padding="12" Mode="Light">
                    <Grid ColumnDefinitions="Auto,24,*">
                        <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>
                </controls:ColorZone>
            </showMeTheXaml:XamlDisplay>
        </StackPanel>

        <StackPanel>
            <TextBlock Classes="Headline6 Subheadline2" Text="Primary light color mode" />
            <showMeTheXaml:XamlDisplay UniqueId="ColorZoneDemo5">
                <controls:ColorZone Height="56" Padding="12" Mode="PrimaryLight">
                    <Grid ColumnDefinitions="Auto,24,*">
                        <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>
                </controls:ColorZone>
            </showMeTheXaml:XamlDisplay>
        </StackPanel>

        <StackPanel>
            <TextBlock Classes="Headline6 Subheadline2" Text="Primary medium color mode" />
            <showMeTheXaml:XamlDisplay UniqueId="ColorZoneDemo6">
                <controls:ColorZone Height="56" Padding="12" Mode="PrimaryMid">
                    <Grid ColumnDefinitions="Auto,24,*">
                        <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>
                </controls:ColorZone>
            </showMeTheXaml:XamlDisplay>
        </StackPanel>

        <StackPanel>
            <TextBlock Classes="Headline6 Subheadline2" Text="Primary dark color mode" />
            <showMeTheXaml:XamlDisplay UniqueId="ColorZoneDemo7">
                <controls:ColorZone Height="56" Padding="12" Mode="PrimaryDark">
                    <Grid ColumnDefinitions="Auto,24,*">
                        <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>
                </controls:ColorZone>
            </showMeTheXaml:XamlDisplay>
        </StackPanel>

        <StackPanel>
            <TextBlock Classes="Headline6 Subheadline2" Text="Accent mode" />
            <showMeTheXaml:XamlDisplay UniqueId="ColorZoneDemo8">
                <controls:ColorZone Height="56" Padding="12" Mode="Accent">
                    <Grid ColumnDefinitions="Auto,24,*">
                        <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>
                </controls:ColorZone>
            </showMeTheXaml:XamlDisplay>
        </StackPanel>
        
        <TextBlock Classes="Headline4 Subheadline" Text="More advanced ColorZones demo" />
        <StackPanel>
            <TextBlock Classes="Headline6 Subheadline2" Text="With menus" />
            <showMeTheXaml:XamlDisplay UniqueId="ColorZoneAdvDemo1">
                <controls:ColorZone Height="56" Padding="12">
                    <Grid ColumnDefinitions="Auto,24,*,24,Auto">
                        <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">
                            <Button Classes="Flat" Padding="4" Content="{icons:MaterialIconExt DotsVertical}"/>
                        </ReversibleStackPanel>
                    </Grid>
                </controls:ColorZone>
            </showMeTheXaml:XamlDisplay>
        </StackPanel>
        
        <StackPanel>
            <TextBlock Classes="Headline6 Subheadline2" Text="With search bar" />
            <showMeTheXaml:XamlDisplay UniqueId="ColorZoneAdvDemo2">
                <controls:ColorZone Height="56" Padding="12">
                    <Grid ColumnDefinitions="Auto,24,*,*,24,Auto">
                        <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">
                            <controls:Card VerticalAlignment="Center" Padding="0">
                                <TextBox Margin="0" Classes="Solo" Watermark="Search bar">
                                    <TextBox.Styles>
                                        <Style Selector="TextBox.Solo /template/ Grid#PART_InnerRoot">
                                            <Setter Property="Margin" Value="8,4"/>
                                        </Style>
                                    </TextBox.Styles>
                                    <TextBox.InnerRightContent>
                                        <Button Classes="Flat" Padding="4" Width="{Binding $self.Bounds.Height}" Content="{icons:MaterialIconExt Search, Size=24}" />
                                    </TextBox.InnerRightContent>
                                </TextBox>
                            </controls:Card>
                        </Panel>
                        
                        <ReversibleStackPanel Grid.Column="5" Margin="0" Orientation="Horizontal">
                            <Button Classes="Flat" Padding="4" Content="{icons:MaterialIconExt DotsVertical}"/>
                        </ReversibleStackPanel>
                    </Grid>
                </controls:ColorZone>
            </showMeTheXaml:XamlDisplay>
        </StackPanel>
    </StackPanel>
</UserControl>