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

<UserControl
    x:Class="Ursa.Demo.Views.MainView"
    xmlns="https://github.com/avaloniaui"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:converters="clr-namespace:Ursa.Demo.Converters"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:u="https://irihi.tech/ursa"
    xmlns:vm="using:Ursa.Demo.ViewModels"
    d:DesignHeight="450"
    d:DesignWidth="800"
    x:CompileBindings="True"
    x:DataType="vm:MainViewViewModel"
    mc:Ignorable="d">

    <Design.DataContext>
        <vm:MainViewViewModel />
    </Design.DataContext>
    <UserControl.Resources>
        <converters:IconNameToPathConverter x:Key="IconConverter" />
        <StreamGeometry x:Key="SettingIcon">M7.99973 5.07197C7.19713 5.53535 6.20729 5.53113 5.40866 5.06092L5.1637 4.91669C4.55751 4.55978 3.77662 4.65563 3.34264 5.20927C2.69567 6.03462 2.17585 6.94251 1.79166 7.90124C1.53027 8.55354 1.83733 9.27693 2.449 9.62286L2.69407 9.76145C3.50107 10.2178 4.00002 11.0732 4.00002 12.0003C4.00002 12.9271 3.50145 13.7822 2.69492 14.2387L2.44842 14.3783C1.83596 14.725 1.52888 15.4497 1.79213 16.1024C1.98358 16.577 2.21048 17.044 2.47374 17.5C2.73723 17.9564 3.0285 18.3868 3.34416 18.7902C3.77773 19.3443 4.5588 19.4406 5.16498 19.0834L5.40839 18.9399C6.20714 18.4692 7.19739 18.4648 8.0003 18.9284C8.80291 19.3918 9.29417 20.2511 9.28627 21.1778L9.28386 21.4601C9.27787 22.1629 9.75107 22.7906 10.4468 22.8903C11.4692 23.0368 12.5154 23.0404 13.5537 22.8927C14.2499 22.7936 14.7231 22.1653 14.7169 21.462L14.7143 21.1785C14.7061 20.2514 15.1974 19.3916 16.0003 18.928C16.8029 18.4647 17.7927 18.4689 18.5914 18.9391L18.8363 19.0833C19.4425 19.4402 20.2234 19.3444 20.6574 18.7907C21.3044 17.9654 21.8242 17.0575 22.2084 16.0988C22.4698 15.4465 22.1627 14.7231 21.551 14.3772L21.306 14.2386C20.499 13.7822 20 12.9268 20 11.9997C20 11.0729 20.4986 10.2178 21.3051 9.76126L21.5516 9.62174C22.1641 9.27506 22.4712 8.55029 22.2079 7.89761C22.0165 7.42297 21.7896 6.95598 21.5263 6.50001C21.2628 6.04362 20.9715 5.61325 20.6559 5.20982C20.2223 4.65568 19.4412 4.55944 18.8351 4.91665L18.5916 5.06009C17.7929 5.53078 16.8026 5.53519 15.9997 5.07163C15.1971 4.60825 14.7059 3.74891 14.7138 2.82218L14.7162 2.53994C14.7222 1.83708 14.249 1.20945 13.5532 1.10973C12.5308 0.963214 11.4846 0.959581 10.4464 1.10733C9.75011 1.20641 9.27691 1.83473 9.28317 2.53798L9.28569 2.82154C9.29395 3.74862 8.80264 4.60841 7.99973 5.07197ZM14 15.4641C15.9132 14.3595 16.5687 11.9132 15.4641 9.99999C14.3595 8.08682 11.9132 7.43132 10 8.53589C8.08684 9.64046 7.43134 12.0868 8.53591 14C9.64048 15.9132 12.0868 16.5687 14 15.4641Z</StreamGeometry>
    </UserControl.Resources>
    <Panel>
        <Panel.Styles>
            <Style Selector="Grid.Blur">
                <Setter Property="Effect" Value="blur(10)"></Setter>
            </Style>
        </Panel.Styles>
        <Grid
            Classes.Blur="{Binding $parent[u:UrsaWindow].(u:OverlayDialogHost.IsInModalStatus)}"
            ColumnDefinitions="Auto, *">
            <Border
                Padding="8 4"
                VerticalAlignment="Stretch"
                Theme="{DynamicResource CardBorder}">
                <u:NavMenu Name="menu" ItemsSource="{Binding Menus.MenuItems}"
                           ExpandWidth="300"
                           CommandBinding="{Binding ActivateCommand}"
                           HeaderBinding="{Binding}"
                           IconBinding="{Binding MenuHeader}">
                    <u:NavMenu.Styles>
                        <Style Selector="u|NavMenuItem" x:DataType="vm:MenuItemViewModel">
                            <Setter Property="IsSeparator" Value="{Binding IsSeparator}"></Setter>
                        </Style>
                    </u:NavMenu.Styles>
                    <u:NavMenu.IconTemplate>
                        <DataTemplate x:DataType="x:String">
                            <u:TwoTonePathIcon
                                Width="16"
                                Height="16"
                                ActiveForeground="{DynamicResource SemiBlue5}"
                                ActiveStrokeBrush="{DynamicResource SemiBlue5}"
                                Data="{Binding Converter={StaticResource IconConverter}}"
                                Foreground="{DynamicResource SemiGrey5}"
                                IsActive="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=u:NavMenuItem}, Path=IsHighlighted, Mode=TwoWay}"
                                StrokeBrush="{DynamicResource SemiGrey5}" />
                        </DataTemplate>
                    </u:NavMenu.IconTemplate>
                    <u:NavMenu.HeaderTemplate>
                        <DataTemplate x:DataType="vm:MenuItemViewModel">
                            <StackPanel Orientation="Horizontal">
                                <TextBlock HorizontalAlignment="Left" Text="{Binding MenuHeader}" />
                                <u:Badge
                                    Margin="8,0,0,0"
                                    HorizontalAlignment="Left"
                                    IsVisible="{Binding Status, Converter={x:Static ObjectConverters.IsNotNull}}"
                                    Header="{Binding Status}" />
                            </StackPanel>
                        </DataTemplate>
                    </u:NavMenu.HeaderTemplate>
                    <u:NavMenu.Header>
                        <DockPanel HorizontalAlignment="Center" Margin="8">
                            <Image
                                Width="48"
                                Height="48"
                                u:NavMenu.CanToggle="True"
                                VerticalAlignment="Center"
                                DockPanel.Dock="Left"
                                RenderOptions.BitmapInterpolationMode="HighQuality"
                                Source="../Assets/Ursa.ico" />
                            <TextBlock
                                Classes="H4"
                                Text="Ursa"
                                IsVisible="{Binding !#menu.IsHorizontalCollapsed}"
                                VerticalAlignment="Center"
                                Theme="{DynamicResource TitleTextBlock}" />
                        </DockPanel>
                    </u:NavMenu.Header>
                    <u:NavMenu.Footer>
                        <u:IconButton
                            Theme="{DynamicResource BorderlessIconButton}"
                            Classes="Tertiary"
                            HorizontalAlignment="Stretch">
                            <TextBlock
                                Text="Settings"
                                IsVisible="{Binding !#menu.IsHorizontalCollapsed}" />
                            <u:IconButton.Icon>
                                <PathIcon
                                    Width="16"
                                    Height="16"
                                    Data="{StaticResource SettingIcon}" />
                            </u:IconButton.Icon>
                            <Button.Flyout>
                                <Flyout Placement="RightEdgeAlignedBottom">
                                    <u:Form LabelPosition="Left">
                                        <ComboBox
                                            u:FormItem.Label="ThemeVariant"
                                            MinWidth="100"
                                            PlaceholderText="Select a theme"
                                            DisplayMemberBinding="{Binding Name}"
                                            ItemsSource="{Binding Themes}"
                                            SelectedItem="{Binding SelectedTheme}" />
                                    </u:Form>
                                </Flyout>
                            </Button.Flyout>
                        </u:IconButton>
                    </u:NavMenu.Footer>
                </u:NavMenu>
            </Border>
            <ContentControl
                Grid.Column="1"
                Margin="12 36 12 12"
                Content="{Binding Content}">
                <ContentControl.ContentTemplate>
                    <converters:ViewLocator />
                </ContentControl.ContentTemplate>
            </ContentControl>
        </Grid>
    </Panel>
</UserControl>