Merge pull request #273 from irihitech/window

Ursa Window: The Window utilizing custom title bar.

demo/Ursa.Demo/Views/MainView.axaml

@@ -21,17 +21,9 @@
     </UserControl.Resources>
     <Panel>
         <Grid
-            Classes.Blur="{Binding #host.HasModal}"
-            ColumnDefinitions="Auto, *"
-            RowDefinitions="Auto, *">
-            <Grid.Styles>
-                <Style Selector="Grid.Blur">
-                    <Setter Property="Effect" Value="blur(20)" />
-                </Style>
-            </Grid.Styles>
+            ColumnDefinitions="Auto, *" >
             <Border
                 Padding="8 4"
-                Grid.RowSpan="2"
                 VerticalAlignment="Stretch"
                 Theme="{DynamicResource CardBorder}">
                 <u:NavMenu Name="menu" ItemsSource="{Binding Menus.MenuItems}"
@@ -89,22 +81,14 @@
                     </u:NavMenu.Header>
                 </u:NavMenu>
             </Border>
-            <u:ThemeToggleButton
-                Grid.Row="0"
-                Grid.Column="1"
-                IsThreeState="True"
-                Mode="Controller"
-                HorizontalAlignment="Right" />
             <ContentControl
-                Grid.Row="1"
                 Grid.Column="1"
-                Margin="12"
+                Margin="12 36 12 12"
                 Content="{Binding Content}">
                 <ContentControl.ContentTemplate>
                     <converters:ViewLocator />
                 </ContentControl.ContentTemplate>
             </ContentControl>
         </Grid>
-        <u:OverlayDialogHost Name="host" SnapThickness="20" />
     </Panel>
 </UserControl>

demo/Ursa.Demo/Views/MainWindow.axaml

@@ -1,17 +1,24 @@
-<Window
+<u:UrsaWindow
     x:Class="Ursa.Demo.Views.MainWindow"
     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:views="clr-namespace:Ursa.Demo.Views"
+    xmlns:u="https://irihi.tech/ursa"
     xmlns:viewModels="clr-namespace:Ursa.Demo.ViewModels"
     Title="Ursa.Demo"
     d:DesignHeight="450"
     d:DesignWidth="800"
     x:CompileBindings="True"
+    IsFullScreenButtonVisible="True"
     x:DataType="viewModels:MainWindowViewModel"
     Icon="/Assets/Ursa.ico"
     mc:Ignorable="d">
+    <u:UrsaWindow.RightContent>
+        <u:ThemeToggleButton
+            IsThreeState="True"
+            Mode="Controller" />
+    </u:UrsaWindow.RightContent>
     <views:MainView />
-</Window>
+</u:UrsaWindow>

demo/Ursa.Demo/Views/MainWindow.axaml.cs

@@ -1,9 +1,11 @@
+using System;
 using Avalonia.Controls;
 using Avalonia.Interactivity;
+using Ursa.Controls;
 
 namespace Ursa.Demo.Views;
 
-public partial class MainWindow : Window
+public partial class MainWindow : UrsaWindow
 {
     public MainWindow()
     {

src/Ursa.Themes.Semi/Controls/UrsaWindow.axaml

@@ -0,0 +1,154 @@
+<ResourceDictionary
+    xmlns="https://github.com/avaloniaui"
+    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+    xmlns:u="https://irihi.tech/ursa">
+    <!--  Add Resources Here  -->
+    <ControlTheme x:Key="{x:Type u:UrsaWindow}" TargetType="u:UrsaWindow">
+        <Setter Property="Background" Value="{DynamicResource WindowDefaultBackground}" />
+        <Setter Property="TransparencyBackgroundFallback" Value="{DynamicResource WindowDefaultBackground}" />
+        <Setter Property="Foreground" Value="{DynamicResource WindowDefaultForeground}" />
+        <Setter Property="FontSize" Value="{DynamicResource DefaultFontSize}" />
+        <Setter Property="FontFamily" Value="{DynamicResource DefaultFontFamily}" />
+        <Setter Property="ExtendClientAreaTitleBarHeightHint" Value="-1" />
+        <Setter Property="ExtendClientAreaToDecorationsHint" Value="True" />
+        <Setter Property="SystemDecorations">
+            <OnPlatform>
+                <OnPlatform.Default>
+                    <SystemDecorations>Full</SystemDecorations>
+                </OnPlatform.Default>
+                <OnPlatform.macOS>
+                    <SystemDecorations>Full</SystemDecorations>
+                </OnPlatform.macOS>
+                <OnPlatform.Linux>
+                    <SystemDecorations>None</SystemDecorations>
+                </OnPlatform.Linux>
+                <OnPlatform.Windows>
+                    <SystemDecorations>Full</SystemDecorations>
+                </OnPlatform.Windows>
+            </OnPlatform>
+        </Setter> 
+        <Setter Property="Template">
+            <ControlTemplate TargetType="u:UrsaWindow">
+                <Panel>
+                    <Border Name="PART_TransparencyFallback" IsHitTestVisible="False" />
+                    <Border Background="{TemplateBinding Background}" IsHitTestVisible="False" />
+                    <Panel Margin="{TemplateBinding WindowDecorationMargin}" Background="Transparent" />
+                    <VisualLayerManager>
+                        <VisualLayerManager.ChromeOverlayLayer>
+                            <u:TitleBar
+                                Content="{Binding $parent[u:UrsaWindow].TitleBarContent}"
+                                Margin="{Binding $parent[u:UrsaWindow].TitleBarMargin}"
+                                LeftContent="{Binding $parent[u:UrsaWindow].LeftContent}"
+                                RightContent="{Binding $parent[u:UrsaWindow].RightContent}" />
+                            <u:OverlayDialogHost/>
+                        </VisualLayerManager.ChromeOverlayLayer>
+                        <Panel>
+                            <ContentPresenter
+                                Name="PART_ContentPresenter"
+                                Margin="{TemplateBinding Padding}"
+                                HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
+                                VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
+                                Content="{TemplateBinding Content}"
+                                ContentTemplate="{TemplateBinding ContentTemplate}" />
+                        </Panel>
+                    </VisualLayerManager>
+                </Panel>
+            </ControlTemplate>
+        </Setter>
+    </ControlTheme>
+
+    <ControlTheme x:Key="{x:Type u:TitleBar}" TargetType="u:TitleBar">
+        <Setter Property="Background" Value="Transparent" />
+        <Setter Property="VerticalAlignment" Value="Top" />
+        <Setter Property="HorizontalAlignment" Value="Stretch" />
+        <Setter Property="Template">
+            <ControlTemplate TargetType="u:TitleBar">
+                <Panel Background="Transparent">
+                    <Panel>
+                        <Border
+                            Name="PART_Background"
+                            Background="{TemplateBinding Background}"
+                            IsHitTestVisible="True" />
+                        <Grid ColumnDefinitions="Auto, *, Auto, Auto" HorizontalAlignment="Stretch">
+                            <ContentPresenter
+                                Grid.Column="0"
+                                VerticalAlignment="Center"
+                                Content="{TemplateBinding LeftContent}" />
+                            <ContentPresenter
+                                Grid.Column="1"
+                                VerticalAlignment="Center"
+                                Content="{TemplateBinding Content}" />
+                            <ContentPresenter
+                                Grid.Column="2"
+                                VerticalAlignment="Center"
+                                Content="{TemplateBinding RightContent}" />
+                            <u:CaptionButtons
+                                x:Name="PART_CaptionButtons"
+                                Grid.Column="3"
+                                Margin="8 0"
+                                HorizontalAlignment="Right"
+                                VerticalAlignment="Top"
+                                DockPanel.Dock="Right"
+                                Foreground="{TemplateBinding Foreground}" />
+                        </Grid>
+                    </Panel>
+                </Panel>
+            </ControlTemplate>
+        </Setter>
+    </ControlTheme>
+
+    <ControlTheme x:Key="{x:Type u:CaptionButtons}" TargetType="u:CaptionButtons">
+        <Setter Property="Template">
+            <ControlTemplate TargetType="u:CaptionButtons">
+                <StackPanel
+                    VerticalAlignment="Stretch"
+                    Orientation="Horizontal"
+                    Spacing="2"
+                    TextElement.FontSize="10">
+                    <Button x:Name="PART_FullScreenButton" Theme="{DynamicResource CaptionButton}">
+                        <PathIcon
+                            Name="PART_FullScreenButtonIcon"
+                            Width="12"
+                            Height="12"
+                            Data="{DynamicResource WindowExpandGlyph}"
+                            Foreground="{Binding $parent[Button].Foreground}" />
+                    </Button>
+                    <Button x:Name="PART_MinimizeButton" Theme="{DynamicResource CaptionButton}">
+                        <PathIcon
+                            Width="12"
+                            Height="12"
+                            Data="{DynamicResource WindowMinimizeGlyph}"
+                            Foreground="{Binding $parent[Button].Foreground}" />
+                    </Button>
+                    <Button x:Name="PART_RestoreButton" Theme="{DynamicResource CaptionButton}" >
+                        <PathIcon
+                            Name="PART_RestoreButtonIcon"
+                            Width="12"
+                            Height="12"
+                            Data="{DynamicResource WindowMaximizeGlyph}"
+                            Foreground="{Binding $parent[Button].Foreground}" />
+                    </Button>
+                    <Button
+                        x:Name="PART_CloseButton"
+                        Background="{DynamicResource CaptionButtonClosePointeroverBackground}"
+                        BorderBrush="{DynamicResource CaptionButtonClosePressedBackground}"
+                        Theme="{DynamicResource CaptionButton}">
+                        <Button.Styles>
+                            <Style Selector="Button:pointerover">
+                                <Setter Property="Foreground" Value="White" />
+                            </Style>
+                            <Style Selector="Button:pressed">
+                                <Setter Property="Foreground" Value="White" />
+                            </Style>
+                        </Button.Styles>
+                        <PathIcon
+                            Width="12"
+                            Height="12"
+                            Data="{DynamicResource WindowCloseIconGlyph}"
+                            Foreground="{Binding $parent[Button].Foreground}" />
+                    </Button>
+                </StackPanel>
+            </ControlTemplate>
+        </Setter>
+    </ControlTheme>
+</ResourceDictionary>

src/Ursa.Themes.Semi/Controls/_index.axaml

@@ -46,6 +46,7 @@
         <ResourceInclude Source="TwoTonePathIcon.axaml" />
         <ResourceInclude Source="ToolBar.axaml" />
         <ResourceInclude Source="TimeBox.axaml"/>
+        <ResourceInclude Source="UrsaWindow.axaml"/>
         <ResourceInclude Source="VerificationCode.axaml" />
     </ResourceDictionary.MergedDictionaries>
 </ResourceDictionary>

src/Ursa/Controls/TitleBar/CaptionButtons.cs

@@ -0,0 +1,75 @@
+using Avalonia;
+using Avalonia.Controls;
+using Avalonia.Controls.Metadata;
+using Avalonia.Controls.Primitives;
+using Irihi.Avalonia.Shared.Helpers;
+using Irihi.Avalonia.Shared.Reactive;
+
+namespace Ursa.Controls;
+
+[TemplatePart(PART_CloseButton, typeof (Button))]
+[TemplatePart(PART_RestoreButton, typeof (Button))]
+[TemplatePart(PART_MinimizeButton, typeof (Button))]
+[TemplatePart(PART_FullScreenButton, typeof (Button))]
+[PseudoClasses(":minimized", ":normal", ":maximized", ":fullscreen")]
+public class CaptionButtons: Avalonia.Controls.Chrome.CaptionButtons
+{
+    private const string PART_CloseButton = "PART_CloseButton";
+    private const string PART_RestoreButton = "PART_RestoreButton";
+    private const string PART_MinimizeButton = "PART_MinimizeButton";
+    private const string PART_FullScreenButton = "PART_FullScreenButton";
+
+    private Button? _closeButton;
+    private Button? _restoreButton;
+    private Button? _minimizeButton;
+    private Button? _fullScreenButton;
+    
+    private IDisposable? _visibilityDisposable;
+    
+    protected override void OnApplyTemplate(TemplateAppliedEventArgs e)
+    {
+        _closeButton = e.NameScope.Get<Button>(PART_CloseButton);
+        _restoreButton = e.NameScope.Get<Button>(PART_RestoreButton);
+        _minimizeButton = e.NameScope.Get<Button>(PART_MinimizeButton);
+        _fullScreenButton = e.NameScope.Get<Button>(PART_FullScreenButton);
+        Button.ClickEvent.AddHandler((o, args) => OnClose(), _closeButton);
+        Button.ClickEvent.AddHandler((o, args) => OnRestore(), _restoreButton);
+        Button.ClickEvent.AddHandler((o, args) => OnMinimize(), _minimizeButton);
+        Button.ClickEvent.AddHandler((o, args) => OnToggleFullScreen(), _fullScreenButton);
+        if (this.HostWindow is not null && !HostWindow.CanResize)
+        {
+            _restoreButton.IsEnabled = false;
+        }
+        UpdateVisibility();
+    }
+
+    public override void Attach(Window hostWindow)
+    {
+        base.Attach(hostWindow);
+        _visibilityDisposable = HostWindow?.GetObservable(Window.WindowStateProperty).Subscribe((a) =>
+        {
+            UpdateVisibility();
+        });
+    }
+    
+    private void UpdateVisibility()
+    {
+        if (HostWindow is not UrsaWindow u)
+        {
+            return;
+        }
+
+        IsVisibleProperty.SetValue(u.IsCloseButtonVisible, _closeButton);
+        IsVisibleProperty.SetValue(u.WindowState != WindowState.FullScreen && u.IsRestoreButtonVisible,
+            _restoreButton);
+        IsVisibleProperty.SetValue(u.WindowState != WindowState.FullScreen && u.IsMinimizeButtonVisible,
+            _minimizeButton);
+        IsVisibleProperty.SetValue(u.IsFullScreenButtonVisible, _fullScreenButton);
+    }
+
+    public override void Detach()
+    {
+        base.Detach();
+        _visibilityDisposable?.Dispose();
+    }
+}

src/Ursa/Controls/TitleBar/TitleBar.cs

@@ -0,0 +1,94 @@
+using Avalonia;
+using Avalonia.Controls;
+using Avalonia.Controls.ApplicationLifetimes;
+using Avalonia.Controls.Primitives;
+using Avalonia.Input;
+using Avalonia.Platform;
+using Irihi.Avalonia.Shared.Helpers;
+
+namespace Ursa.Controls;
+
+public class TitleBar: ContentControl
+{
+    private CaptionButtons? _captionButtons;
+    private InputElement? _background;
+    private Window? _visualRoot;
+    
+    public static readonly StyledProperty<object?> LeftContentProperty = AvaloniaProperty.Register<TitleBar, object?>(
+        nameof(LeftContent));
+
+    public object? LeftContent
+    {
+        get => GetValue(LeftContentProperty);
+        set => SetValue(LeftContentProperty, value);
+    }
+
+    public static readonly StyledProperty<object?> RightContentProperty = AvaloniaProperty.Register<TitleBar, object?>(
+        nameof(RightContent));
+
+    public object? RightContent
+    {
+        get => GetValue(RightContentProperty);
+        set => SetValue(RightContentProperty, value);
+    }
+    
+    protected override void OnApplyTemplate(TemplateAppliedEventArgs e)
+    {
+        base.OnApplyTemplate(e);
+        this._captionButtons?.Detach();
+        this._captionButtons = e.NameScope.Get<CaptionButtons>("PART_CaptionButtons");
+        this._background = e.NameScope.Get<InputElement>("PART_Background");
+        if (!(this.VisualRoot is Window visualRoot))
+            return;
+        _visualRoot = visualRoot;
+        DoubleTappedEvent.AddHandler(OnDoubleTapped, _background);
+        PointerPressedEvent.AddHandler(OnPointerPressed, _background);
+        this._captionButtons?.Attach(visualRoot);
+        // this.UpdateSize(visualRoot);
+    }
+
+    private void OnPointerPressed(object sender, PointerPressedEventArgs e)
+    {
+        if (e.GetCurrentPoint(this).Properties.IsLeftButtonPressed)
+        {
+            if (e.ClickCount < 2) 
+            {
+                _visualRoot?.BeginMoveDrag(e);
+            }
+        }
+    }
+
+    private void OnDoubleTapped(object sender, TappedEventArgs e)
+    {
+        if (_visualRoot is not null)
+        {
+            if (_visualRoot.WindowState == WindowState.Maximized)
+            {
+                _visualRoot.WindowState = WindowState.Normal;
+            }
+            else
+            {
+                _visualRoot.WindowState = WindowState.Maximized;
+            }
+        }
+    }
+
+    private void UpdateSize(Window window)
+    {
+        Thickness offScreenMargin = window.OffScreenMargin;
+        var left = offScreenMargin.Left;
+        offScreenMargin = window.OffScreenMargin;
+        double top = offScreenMargin.Top;
+        offScreenMargin = window.OffScreenMargin;
+        double right = offScreenMargin.Right;
+        offScreenMargin = window.OffScreenMargin;
+        double bottom = offScreenMargin.Bottom;
+        this.Margin = new Thickness(left, top, right, bottom);
+        if (window.WindowState != WindowState.FullScreen)
+        {
+            this.Height = window.WindowDecorationMargin.Top;
+            if (this._captionButtons != null)
+                this._captionButtons.Height = this.Height;
+        }
+    }
+}

src/Ursa/Windows/UrsaWindow.cs

@@ -0,0 +1,96 @@
+using Avalonia;
+using Avalonia.Controls;
+using Avalonia.Platform;
+
+namespace Ursa.Controls;
+
+/// <summary>
+/// Ursa Window is an advanced Window control that provides a lot of features and customization options.
+/// </summary>
+public class UrsaWindow: Window
+{
+    protected override Type StyleKeyOverride => typeof(UrsaWindow);
+
+    public static readonly StyledProperty<bool> IsFullScreenButtonVisibleProperty = AvaloniaProperty.Register<UrsaWindow, bool>(
+        nameof(IsFullScreenButtonVisible));
+
+    public bool IsFullScreenButtonVisible
+    {
+        get => GetValue(IsFullScreenButtonVisibleProperty);
+        set => SetValue(IsFullScreenButtonVisibleProperty, value);
+    }
+    
+    public static readonly StyledProperty<bool> IsMinimizeButtonVisibleProperty = AvaloniaProperty.Register<UrsaWindow, bool>(
+        nameof(IsMinimizeButtonVisible), true);
+    
+    public bool IsMinimizeButtonVisible
+    {
+        get => GetValue(IsMinimizeButtonVisibleProperty);
+        set => SetValue(IsMinimizeButtonVisibleProperty, value);
+    }
+
+    public static readonly StyledProperty<bool> IsRestoreButtonVisibleProperty = AvaloniaProperty.Register<UrsaWindow, bool>(
+        nameof(IsRestoreButtonVisible), true);
+
+    public bool IsRestoreButtonVisible
+    {
+        get => GetValue(IsRestoreButtonVisibleProperty);
+        set => SetValue(IsRestoreButtonVisibleProperty, value);
+    }
+    
+    public static readonly StyledProperty<bool> IsCloseButtonVisibleProperty = AvaloniaProperty.Register<UrsaWindow, bool>(
+        nameof(IsCloseButtonVisible), true);
+    
+    public bool IsCloseButtonVisible
+    {
+        get => GetValue(IsCloseButtonVisibleProperty);
+        set => SetValue(IsCloseButtonVisibleProperty, value);
+    }
+    
+    public static readonly StyledProperty<bool> IsTitleBarVisibleProperty = AvaloniaProperty.Register<UrsaWindow, bool>(
+        nameof(IsTitleBarVisible));
+    
+    public bool IsTitleBarVisible
+    {
+        get => GetValue(IsTitleBarVisibleProperty);
+        set => SetValue(IsTitleBarVisibleProperty, value);
+    }
+    
+    public static readonly StyledProperty<object?> TitleBarContentProperty = AvaloniaProperty.Register<UrsaWindow, object?>(
+        nameof(TitleBarContent));
+    
+    public object? TitleBarContent
+    {
+        get => GetValue(TitleBarContentProperty);
+        set => SetValue(TitleBarContentProperty, value);
+    }
+    
+    public static readonly StyledProperty<object?> LeftContentProperty = AvaloniaProperty.Register<UrsaWindow, object?>(
+        nameof(LeftContent));
+    
+    public object? LeftContent
+    {
+        get => GetValue(LeftContentProperty);
+        set => SetValue(LeftContentProperty, value);
+    }
+    
+    public static readonly StyledProperty<object?> RightContentProperty = AvaloniaProperty.Register<UrsaWindow, object?>(
+        nameof(RightContent));
+    
+    public object? RightContent
+    {
+        get => GetValue(RightContentProperty);
+        set => SetValue(RightContentProperty, value);
+    }
+
+    public static readonly StyledProperty<Thickness> TitleBarMarginProperty = AvaloniaProperty.Register<UrsaWindow, Thickness>(
+        nameof(TitleBarMargin));
+
+    public Thickness TitleBarMargin
+    {
+        get => GetValue(TitleBarMarginProperty);
+        set => SetValue(TitleBarMarginProperty, value);
+    }
+    
+    
+}