AvaloniaUI(二、无边框窗口)

　　现在我们做桌面软件，大部分都不会使用系统自带的边框和按钮，基本上都是自己定制的，本篇实现一下 无边框的窗口，avalonia 实现起来比较简单，只需要修改几个属性即可

<Style Selector="Window">
            <Setter Property="ExtendClientAreaToDecorationsHint" Value="True"></Setter>
            <Setter Property="ExtendClientAreaChromeHints" Value="NoChrome"></Setter>
            <Setter Property="ExtendClientAreaTitleBarHeightHint" Value="-1"></Setter>
            <Setter Property="SystemDecorations" Value="None"></Setter>
            <Setter Property="CanResize" Value="False"></Setter>
            <Setter Property="Background">
                <Setter.Value>
                    <SolidColorBrush Color="White" Opacity="0"></SolidColorBrush>
                </Setter.Value>
            </Setter>
        </Style>

其中 “ExtendClientAreaChromeHints” 这个属性设置为 “NoChrome” 之后窗口的边框和系统的最大化最小化还有关闭按钮就没有了，窗口也就不能用鼠标移动了，就需要自己去实现，设置为

“SystemChrome” 之后 窗口的边框就消失了，同时保留系统的最小化最大化和关闭按钮

下面附上 设置“NoChrome” 之后鼠标拖动窗口移动的代码，几乎和wpf是一致的，只是用的事件名称有改变

 public MainWindow()
    {
        InitializeComponent();
        this.PointerPressed += MainWindow_PointerPressed;
    }

    private void MainWindow_PointerPressed(object? sender, Avalonia.Input.PointerPressedEventArgs e)
    {
        if (e.Pointer.Type == PointerType.Mouse)
        {

            this.BeginMoveDrag(e);
        }
    }

 

需要注意的是，上面无边框窗口的样式中 设置背景透明色并不是直接使用 “Background=Transparent“ 而是用了一个 SolidCorloBrush 设置的Opacity=0,这么做的原因是 我发现直接设置Background=Transparent 发布在Linux(银河麒麟v10) 上，无边框的样式

会失效，使用SolidCorloBrush 才可以。

最后附上全部代码

MainWindow.axaml

<Window xmlns="https://github.com/avaloniaui"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:vm="using:AvaloniaFirst.ViewModels"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:views="clr-namespace:AvaloniaFirst.Views"
        mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"
        x:Class="AvaloniaFirst.Views.MainWindow"
        Icon="/Assets/avalonia-logo.ico"
        
        Title="AvaloniaFirst">
        <views:MainView />
    <Window.Styles>
        <Style Selector="Window">
            <Setter Property="ExtendClientAreaToDecorationsHint" Value="True"></Setter>
            <Setter Property="ExtendClientAreaChromeHints" Value="NoChrome"></Setter>
            <Setter Property="ExtendClientAreaTitleBarHeightHint" Value="-1"></Setter>
            <Setter Property="SystemDecorations" Value="None"></Setter>
            <Setter Property="CanResize" Value="False"></Setter>
            <Setter Property="Background">
                <Setter.Value>
                    <SolidColorBrush Color="White" Opacity="0"></SolidColorBrush>
                </Setter.Value>
            </Setter>
        </Style>
    </Window.Styles>
</Window>

 

MainWindow.axaml.cs

using Avalonia.Controls;
using Avalonia.Input;

namespace AvaloniaFirst.Views;

public partial class MainWindow : Window
{
    public MainWindow()
    {
        InitializeComponent();
        this.PointerPressed += MainWindow_PointerPressed;
        
    }

    private void MainWindow_PointerPressed(object? sender, Avalonia.Input.PointerPressedEventArgs e)
    {
        if (e.Pointer.Type == PointerType.Mouse)
        {

            this.BeginMoveDrag(e);
        }
    }
}

MainView.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"
             xmlns:vm="clr-namespace:AvaloniaFirst.ViewModels"
             mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"
             x:Class="AvaloniaFirst.Views.MainView"
             x:DataType="vm:MainViewModel">
  <Design.DataContext>
    <!-- This only sets the DataContext for the previewer in an IDE,
         to set the actual DataContext for runtime, set the DataContext property in code (look at App.axaml.cs) -->
    <vm:MainViewModel />
  </Design.DataContext>
    <Grid Background="White">
    <StackPanel  VerticalAlignment="Center">
        <TextBlock Text="{Binding Greeting}" HorizontalAlignment="Center" VerticalAlignment="Center"/>
        <Button x:Name="btn_close" HorizontalAlignment="Center" Width="60" Height="30">Close</Button>
    </StackPanel>
    </Grid>
</UserControl>

MainView.axaml.cs

using Avalonia;
using Avalonia.Controls;
using Avalonia.Controls.ApplicationLifetimes;

namespace AvaloniaFirst.Views;

public partial class MainView : UserControl
{
    public MainView()
    {
        InitializeComponent();
        this.btn_close.Click += Btn_close_Click;
    }

    private void Btn_close_Click(object? sender, Avalonia.Interactivity.RoutedEventArgs e)
    {
        var window = ((IClassicDesktopStyleApplicationLifetime)Application.Current.ApplicationLifetime)
                .MainWindow;
        window.Close();
    }
}

 效果图