Semi.Avalonia/demo/Semi.Avalonia.Demo/Themes/FunctionalColorGroupControl.axaml

<ResourceDictionary
    xmlns="https://github.com/avaloniaui"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:controls="clr-namespace:Semi.Avalonia.Demo.Controls"
    xmlns:viewModels="clr-namespace:Semi.Avalonia.Demo.ViewModels"
    xmlns:pages="clr-namespace:Semi.Avalonia.Demo.Pages"
    x:CompileBindings="True"
    x:DataType="viewModels:FunctionalColorGroupViewModel">
    <ControlTheme x:Key="{x:Type controls:FunctionalColorGroupControl}" TargetType="controls:FunctionalColorGroupControl">
        <Setter Property="Template">
            <ControlTemplate TargetType="controls:FunctionalColorGroupControl">
                <Grid RowDefinitions="Auto, *">
                    <SelectableTextBlock
                        Grid.Row="0"
                        Margin="0,16,0,0"
                        Classes="H3"
                        Text="{TemplateBinding Title}"
                        Theme="{DynamicResource TitleSelectableTextBlock}" />
                    <TabControl Grid.Row="1">
                        <TabItem Header="Light">
                            <DataGrid IsReadOnly="True" ItemsSource="{TemplateBinding LightColors}">
                                <DataGrid.Columns>
                                    <DataGridTemplateColumn Width="70" Header="Color">
                                        <DataGridTemplateColumn.CellTemplate>
                                            <DataTemplate DataType="viewModels:ColorItemViewModel">
                                                <controls:ColorItemControl
                                                    Width="40"
                                                    Height="20"
                                                    Background="{Binding Brush}"
                                                    CornerRadius="3" />
                                            </DataTemplate>
                                        </DataGridTemplateColumn.CellTemplate>
                                    </DataGridTemplateColumn>
                                    <DataGridTemplateColumn Width="300" Header="ResourceKey">
                                        <DataGridTemplateColumn.CellTemplate>
                                            <DataTemplate DataType="viewModels:ColorItemViewModel">
                                                <SelectableTextBlock
                                                    Margin="12,0"
                                                    VerticalAlignment="Center"
                                                    Text="{Binding ResourceKey}" />
                                            </DataTemplate>
                                        </DataGridTemplateColumn.CellTemplate>
                                    </DataGridTemplateColumn>
                                    <DataGridTemplateColumn Width="100" Header="Hex">
                                        <DataGridTemplateColumn.CellTemplate>
                                            <DataTemplate DataType="viewModels:ColorItemViewModel">
                                                <SelectableTextBlock
                                                    Margin="12,0"
                                                    VerticalAlignment="Center"
                                                    Text="{Binding Hex}" />
                                            </DataTemplate>
                                        </DataGridTemplateColumn.CellTemplate>
                                    </DataGridTemplateColumn>
                                    <DataGridTemplateColumn Width="80" Header="Opacity">
                                        <DataGridTemplateColumn.CellTemplate>
                                            <DataTemplate DataType="viewModels:ColorItemViewModel">
                                                <SelectableTextBlock
                                                    Margin="12,0"
                                                    VerticalAlignment="Center"
                                                    Text="{Binding Brush.Opacity}" />
                                            </DataTemplate>
                                        </DataGridTemplateColumn.CellTemplate>
                                    </DataGridTemplateColumn>
                                    <DataGridTextColumn
                                        Width="*"
                                        x:DataType="viewModels:ColorItemViewModel"
                                        Binding="{Binding ColorDisplayName}"
                                        CanUserSort="False"
                                        Header="Description" />
                                    <DataGridTemplateColumn Width="100" Header="CopyText">
                                        <DataGridTemplateColumn.CellTemplate>
                                            <DataTemplate DataType="viewModels:ColorItemViewModel">
                                                <Button
                                                    Command="{Binding $parent[pages:PaletteDemo].Copy}"
                                                    CommandParameter="{Binding CopyText}"
                                                    Theme="{DynamicResource  IconBorderlessButton}"
                                                    Content="{StaticResource SemiIconCopy}" />
                                            </DataTemplate>
                                        </DataGridTemplateColumn.CellTemplate>
                                    </DataGridTemplateColumn>
                                </DataGrid.Columns>
                            </DataGrid>
                        </TabItem>
                        <TabItem Header="Dark">
                            <DataGrid IsReadOnly="True" ItemsSource="{TemplateBinding DarkColors}">
                                <DataGrid.Columns>
                                    <DataGridTemplateColumn Width="70" Header="Color">
                                        <DataGridTemplateColumn.CellTemplate>
                                            <DataTemplate DataType="viewModels:ColorItemViewModel">
                                                <controls:ColorItemControl
                                                    Width="40"
                                                    Height="20"
                                                    Background="{Binding Brush}"
                                                    CornerRadius="3" />
                                            </DataTemplate>
                                        </DataGridTemplateColumn.CellTemplate>
                                    </DataGridTemplateColumn>
                                    <DataGridTemplateColumn Width="300" Header="ResourceKey">
                                        <DataGridTemplateColumn.CellTemplate>
                                            <DataTemplate DataType="viewModels:ColorItemViewModel">
                                                <SelectableTextBlock
                                                    Margin="12,0"
                                                    VerticalAlignment="Center"
                                                    Text="{Binding ResourceKey}" />
                                            </DataTemplate>
                                        </DataGridTemplateColumn.CellTemplate>
                                    </DataGridTemplateColumn>
                                    <DataGridTemplateColumn Width="100" Header="Hex">
                                        <DataGridTemplateColumn.CellTemplate>
                                            <DataTemplate DataType="viewModels:ColorItemViewModel">
                                                <SelectableTextBlock
                                                    Margin="12,0"
                                                    VerticalAlignment="Center"
                                                    Text="{Binding Hex}" />
                                            </DataTemplate>
                                        </DataGridTemplateColumn.CellTemplate>
                                    </DataGridTemplateColumn>
                                    <DataGridTemplateColumn Width="80" Header="Opacity">
                                        <DataGridTemplateColumn.CellTemplate>
                                            <DataTemplate DataType="viewModels:ColorItemViewModel">
                                                <SelectableTextBlock
                                                    Margin="12,0"
                                                    VerticalAlignment="Center"
                                                    Text="{Binding Brush.Opacity}" />
                                            </DataTemplate>
                                        </DataGridTemplateColumn.CellTemplate>
                                    </DataGridTemplateColumn>
                                    <DataGridTextColumn
                                        Width="*"
                                        x:DataType="viewModels:ColorItemViewModel"
                                        Binding="{Binding ColorDisplayName}"
                                        CanUserSort="False"
                                        Header="Description" />
                                    <DataGridTemplateColumn Width="100" Header="CopyText">
                                        <DataGridTemplateColumn.CellTemplate>
                                            <DataTemplate DataType="viewModels:ColorItemViewModel">
                                                <Button
                                                    Command="{Binding $parent[pages:PaletteDemo].Copy}"
                                                    CommandParameter="{Binding CopyText}"
                                                    Theme="{DynamicResource  IconBorderlessButton}"
                                                    Content="{StaticResource SemiIconCopy}" />
                                            </DataTemplate>
                                        </DataGridTemplateColumn.CellTemplate>
                                    </DataGridTemplateColumn>
                                </DataGrid.Columns>
                            </DataGrid>
                        </TabItem>
                    </TabControl>
                </Grid>
            </ControlTemplate>
        </Setter>
    </ControlTheme>
</ResourceDictionary>