Semi.Avalonia/demo/Semi.Avalonia.Demo/Views/MainView.axaml

<UserControl
    x:Class="Semi.Avalonia.Demo.Views.MainView"
    xmlns="https://github.com/avaloniaui"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:pages="using:Semi.Avalonia.Demo.Pages"
    xmlns:views="clr-namespace:Semi.Avalonia.Demo.Views"
    d:DesignHeight="450"
    d:DesignWidth="800"
    x:CompileBindings="True"
    x:DataType="views:MainViewModel"
    mc:Ignorable="d">
    <UserControl.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <ResourceInclude Source="../Themes/TabMenu.axaml" />
                <ResourceInclude Source="../Themes/ToggleButton.axaml" />
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
    </UserControl.Resources>
    <Grid RowDefinitions="Auto, *">
        <Border
            Margin="8"
            Padding="12,4"
            Theme="{DynamicResource CardBorder}">
            <Grid VerticalAlignment="Center" ColumnDefinitions="*, Auto">
                <StackPanel Grid.Column="0" Orientation="Horizontal">
                    <TextBlock
                        VerticalAlignment="Center"
                        Classes="H6"
                        Text="Semi Avalonia"
                        Theme="{DynamicResource TitleTextBlock}" />
                    <TextBlock
                        Margin="8,0"
                        VerticalAlignment="Center"
                        Text="/" />
                    <TextBlock
                        Margin="8,0"
                        VerticalAlignment="Center"
                        Classes="Secondary"
                        Text="{ReflectionBinding #tab.SelectedItem.Header}" />
                </StackPanel>
                <StackPanel Grid.Column="1" Orientation="Horizontal">
                    <Button Click="OpenDocumentation" Theme="{DynamicResource BorderlessButton}">
                        <PathIcon
                            Width="16"
                            Height="16"
                            Data="M12 21.5C10.65 20.65 8.2 20 6.5 20C4.85 20 3.15 20.3 1.75 21.05C1.65 21.1 1.6 21.1 1.5 21.1C1.25 21.1 1 20.85 1 20.6V6C1.6 5.55 2.25 5.25 3 5C4.11 4.65 5.33 4.5 6.5 4.5C8.45 4.5 10.55 4.9 12 6C13.45 4.9 15.55 4.5 17.5 4.5C18.67 4.5 19.89 4.65 21 5C21.75 5.25 22.4 5.55 23 6V20.6C23 20.85 22.75 21.1 22.5 21.1C22.4 21.1 22.35 21.1 22.25 21.05C20.85 20.3 19.15 20 17.5 20C15.8 20 13.35 20.65 12 21.5M12 8V19.5C13.35 18.65 15.8 18 17.5 18C18.7 18 19.9 18.15 21 18.5V7C19.9 6.65 18.7 6.5 17.5 6.5C15.8 6.5 13.35 7.15 12 8M13 11.5C14.11 10.82 15.6 10.5 17.5 10.5C18.41 10.5 19.26 10.59 20 10.78V9.23C19.13 9.08 18.29 9 17.5 9C15.73 9 14.23 9.28 13 9.84V11.5M17.5 11.67C15.79 11.67 14.29 11.93 13 12.46V14.15C14.11 13.5 15.6 13.16 17.5 13.16C18.54 13.16 19.38 13.24 20 13.4V11.9C19.13 11.74 18.29 11.67 17.5 11.67M20 14.57C19.13 14.41 18.29 14.33 17.5 14.33C15.67 14.33 14.17 14.6 13 15.13V16.82C14.11 16.16 15.6 15.83 17.5 15.83C18.54 15.83 19.38 15.91 20 16.07V14.57Z"
                            Foreground="{DynamicResource ButtonDefaultTertiaryForeground}" />
                    </Button>
                    <Button Click="OpenRepository" Theme="{DynamicResource BorderlessButton}">
                        <PathIcon
                            Width="16"
                            Height="16"
                            Data="M12,2A10,10 0 0,0 2,12C2,16.42 4.87,20.17 8.84,21.5C9.34,21.58 9.5,21.27 9.5,21C9.5,20.77 9.5,20.14 9.5,19.31C6.73,19.91 6.14,17.97 6.14,17.97C5.68,16.81 5.03,16.5 5.03,16.5C4.12,15.88 5.1,15.9 5.1,15.9C6.1,15.97 6.63,16.93 6.63,16.93C7.5,18.45 8.97,18 9.54,17.76C9.63,17.11 9.89,16.67 10.17,16.42C7.95,16.17 5.62,15.31 5.62,11.5C5.62,10.39 6,9.5 6.65,8.79C6.55,8.54 6.2,7.5 6.75,6.15C6.75,6.15 7.59,5.88 9.5,7.17C10.29,6.95 11.15,6.84 12,6.84C12.85,6.84 13.71,6.95 14.5,7.17C16.41,5.88 17.25,6.15 17.25,6.15C17.8,7.5 17.45,8.54 17.35,8.79C18,9.5 18.38,10.39 18.38,11.5C18.38,15.32 16.04,16.16 13.81,16.41C14.17,16.72 14.5,17.33 14.5,18.26C14.5,19.6 14.5,20.68 14.5,21C14.5,21.27 14.66,21.59 15.17,21.5C19.14,20.16 22,16.42 22,12A10,10 0 0,0 12,2Z"
                            Foreground="{DynamicResource ButtonDefaultTertiaryForeground}" />
                    </Button>
                    <ComboBox
                        MinWidth="100"
                        PlaceholderText="Select a theme"
                        DisplayMemberBinding="{Binding Name}"
                        ItemsSource="{Binding Themes}"
                        SelectedItem="{Binding SelectedTheme}" />
                </StackPanel>
            </Grid>

        </Border>
        <TabControl
            Name="tab"
            Grid.Row="1"
            Margin="8"
            Padding="20,0,0,0"
            HorizontalAlignment="Stretch"
            TabStripPlacement="Left"
            Theme="{DynamicResource NavigationTab}">
            <TabItem Header="Overview">
                <pages:Overview />
            </TabItem>
            <TabItem Header="Palette">
                <pages:PaletteDemo />
            </TabItem>
            <TabItem Header="AutoCompleteBox">
                <pages:AutoCompleteBoxDemo />
            </TabItem>
            <TabItem Header="Border">
                <pages:BorderDemo />
            </TabItem>
            <TabItem Header="Button">
                <pages:ButtonDemo />
            </TabItem>
            <TabItem Header="ButtonSpinner">
                <pages:ButtonSpinnerDemo />
            </TabItem>
            <TabItem Header="Calendar">
                <pages:CalendarDemo />
            </TabItem>
            <TabItem Header="CalendarDatePicker">
                <pages:CalendarDatePickerDemo />
            </TabItem>
            <TabItem Header="Carousel">
                <pages:CarouselDemo />
            </TabItem>
            <TabItem Header="CheckBox">
                <pages:CheckBoxDemo />
            </TabItem>
            <TabItem Header="ColorPicker">
                <pages:ColorPickerDemo />
            </TabItem>
            <TabItem Header="ComboBox">
                <pages:ComboBoxDemo />
            </TabItem>
            <TabItem Header="DataValidationErrors">
                <pages:DataValidationErrorsDemo />
            </TabItem>
            <TabItem Header="DataGrid">
                <pages:DataGridDemo />
            </TabItem>
            <TabItem Header="DatePicker">
                <pages:DatePickerDemo />
            </TabItem>
            <TabItem Header="Expander">
                <pages:ExpanderDemo />
            </TabItem>
            <TabItem Header="Flyout">
                <pages:FlyoutDemo />
            </TabItem>
            <TabItem Header="GridSplitter">
                <pages:GridSplitter />
            </TabItem>
            <TabItem Header="HeaderedContentControl">
                <pages:HeaderedContentControlDemo />
            </TabItem>
            <TabItem Header="HyperlinkButton">
                <pages:HyperlinkButtonDemo />
            </TabItem>
            <TabItem Header="Label">
                <pages:LabelDemo />
            </TabItem>
            <TabItem Header="ListBox">
                <pages:ListBoxDemo />
            </TabItem>
            <TabItem Header="ManagedFileChooser">
                <pages:ManagedFileChooserDemo />
            </TabItem>
            <TabItem Header="Menu">
                <pages:MenuDemo />
            </TabItem>
            <TabItem Header="Notification">
                <pages:NotificationDemo />
            </TabItem>
            <TabItem Header="NumericUpDown">
                <pages:NumericUpDownDemo />
            </TabItem>
            <TabItem Header="PathIcon">
                <pages:PathIconDemo />
            </TabItem>
            <TabItem Header="ProgressBar">
                <pages:ProgressBarDemo />
            </TabItem>
            <TabItem Header="RadioButton">
                <pages:RadioButtonDemo />
            </TabItem>
            <TabItem Header="RefreshContainer">
                <pages:RefreshContainerDemo />
            </TabItem>
            <TabItem Header="RepeatButton">
                <pages:RepeatButtonDemo />
            </TabItem>
            <TabItem Header="ScrollViewer">
                <pages:ScrollViewerDemo />
            </TabItem>
            <TabItem Header="SelectableTextBlock">
                <pages:SelectableTextBlockDemo />
            </TabItem>
            <TabItem Header="Slider">
                <pages:SliderDemo />
            </TabItem>
            <TabItem Header="SplitView">
                <pages:SplitViewDemo />
            </TabItem>
            <TabItem Header="TabControl">
                <pages:TabControlDemo />
            </TabItem>
            <TabItem Header="TextBlock">
                <pages:TextBlockDemo />
            </TabItem>
            <TabItem Header="TextBox">
                <pages:TextBoxDemo />
            </TabItem>
            <TabItem Header="ThemeVariantScope">
                <pages:ThemeVariantDemo />
            </TabItem>
            <TabItem Header="TimePicker">
                <pages:TimePickerDemo />
            </TabItem>
            <TabItem Header="ToggleButton">
                <pages:ToggleButtonDemo />
            </TabItem>
            <TabItem Header="ToggleSwitch">
                <pages:ToggleSwitchDemo />
            </TabItem>
            <TabItem Header="ToolTip">
                <pages:ToolTipDemo />
            </TabItem>
            <TabItem Header="TreeView">
                <pages:TreeViewDemo />
            </TabItem>
        </TabControl>
    </Grid>

</UserControl>