Touch001 Solving Tray Icon and minimalize UI problem on Arch Linux with C# in Avalonia

Stipec — Thu, 31 Mar 2022 20:23:44 +0000

When I started to think about features for my project it came to my mind, that when the user minimalizes the application it should be hidden from the taskbar, and when I was thinking deeply then I figured out that only hiding will not be enough. The user needs to be able somehow to return from the hidden application. And the solution is to have a Tray Icon, on Windows, it is always on the taskbar on the right side, where you can find some tray icons like Network or Volume. I was curious if it will work on Linux too. Because I am using Endeavour with Plasma flavour, I knew there it should be possible somehow, but I was not sure if the Avalonia framework supports it. I googled this problem and found out there are some git projects solving this problem too. So I decided to open IDE and write some code. Firstly I started with a minimalizing problem because I thought it will be easier. When I started coding this, I easily figured out that it will not be so easy. So I googled a little bit for the first problem in official Avalonia Sources. I found out that I can do it in a way that I can register to PropertyChanged event on MainWindow, filter my specific property and then hide MainWindow. So I tried it like bellow

private void MyMainWindow_PropertyChanged(object? sender, AvaloniaPropertyChangedEventArgs e)
{
    if (sender is MainWindow && e.NewValue is WindowState windowState && windowState == WindowState.Minimized)
    {
        myMainWindow?.Hide();
    }
}

I felt there should be an easier solution like this. So I googled a little bit more. I ended on google around page 10, where I find an Avalonion Gitter post on how I can try it. The post was telling about overriding the HandleWindowStateChanged method. So I tried it, and it worked properly. So then I tried it on Endeavour Linux and easily figured it out, that on Linux Task Bar Icon is not hiding after minimalize. I also saw some glitches on Windows and Linux, when you returned back to MainWindow it was not shown properly. The same post suggested calling some methods. I tried it and it worked on both platforms. And final code for Minimalize, Hide app and Hide Icon Bar is written below. Maybe it will help someone someday.

public partial class MainWindow : Window
{
    public MainWindow()
    {
        InitializeComponent();
    }

    protected override void HandleWindowStateChanged(WindowState state)
    {
        if (state == WindowState.Minimized)
        {
            ShowInTaskbar = false;
            Hide();
        }

        if(state == WindowState.Normal)
        {
            ShowInTaskbar = true;
            this.BringIntoView();
            Activate();
            Focus();
            base.HandleWindowStateChanged(state);
        }
    }
}

Right now I do not know how to write tests for this behaviour, but at least it can be the next Touch article for it.

At this moment I still had not implemented a solution for Tray Icon. On the official Avalonia webpage, I found that Avalonia supports Tray Icon already, so I do not need to use some solution from git. But unlucky there was no documentation or Wiki for this how to use it. So I experimented.

At the end I had a code similar to this.

public partial class App : Application
{
    private MainWindow? myMainWindow;

    public override void Initialize()
    {
        AvaloniaXamlLoader.Load(this);
    }

    public override void OnFrameworkInitializationCompleted()
    {
        if (ApplicationLifetime is IClassicDesktopStyleApplicationLifetime desktop)
        {
            myMainWindow = new MainWindow
            {
                DataContext = new MainWindowViewModel(),
            };
            desktop.MainWindow = myMainWindow;

            RegisterTrayIcon();
        }

        base.OnFrameworkInitializationCompleted();
    }

    private void RegisterTrayIcon()
    {
        var trayIcon = new TrayIcon
        {
            IsVisible = true,
            ToolTipText = "TestToolTipText",
            Command = ReactiveCommand.Create(ShowApplication),
            Icon = new WindowIcon("/Assets/avalonia-logo.ico")
        };
    }

    private void ShowApplication()
    {
        if(myMainWindow != null)
        {
            myMainWindow.WindowState = WindowState.Normal;
            myMainWindow.Show();
        }
    }
}

And It was not working. I used also the ReactiveUI library for easy Command creation as shown below.

Command = ReactiveCommand.Create(ShowApplication),

Where I also implemented behaviour what will happen when the user clicks on Tray Icon, for us it will show the application back.

private void ShowApplication()
{
    if(myMainWindow != null)
    {
        myMainWindow.WindowState = WindowState.Normal;
        myMainWindow.Show();
    }
}

It failed during runtime when it was loading Icon. I figured it out that for this I cannot use .ico, but some transparent png image. So I needed to load it as Bitmap and then create WindowIcon. So I replaced this line with the code below.

Icon = new WindowIcon(new Bitmap("C:/Icons/test.png"))

After this change, the code worked correctly. The app was hiding, when I clicked on Tray Icon it was shown back. but when I closed an application it failed during closing. Luckily exception thrown at this moment helped me to solve this problem. It was saying that I did not set Tray Icon value as Attached property. So I implemented it and yes, it works how it is expected on both platforms.

So the final code is shown below. Feel free to use and comment below the article. What do you think about this?

public partial class App : Application
{
    private MainWindow? myMainWindow;

    public override void Initialize()
    {
        AvaloniaXamlLoader.Load(this);
    }

    public override void OnFrameworkInitializationCompleted()
    {
        if (ApplicationLifetime is IClassicDesktopStyleApplicationLifetime desktop)
        {
            myMainWindow = new MainWindow
            {
                DataContext = new MainWindowViewModel(),
            };
            desktop.MainWindow = myMainWindow;

            RegisterTrayIcon();
        }

        base.OnFrameworkInitializationCompleted();
    }

    private void RegisterTrayIcon()
    {
        var trayIcon = new TrayIcon
        {
            IsVisible = true,
            ToolTipText = "TestToolTipText",
            Command = ReactiveCommand.Create(ShowApplication),
            Icon = new WindowIcon(new Bitmap("C:/Icons/test.png"))
        };

        var trayIcons = new TrayIcons
        {
            trayIcon
        };

        SetValue(TrayIcon.IconsProperty, trayIcons);
    }

    private void ShowApplication()
    {
        if(myMainWindow != null)
        {
            myMainWindow.WindowState = WindowState.Normal;
            myMainWindow.Show();
        }
    }
}

101 touches of coding Linux tool with C# for fun

Stipec — Wed, 30 Mar 2022 21:28:50 +0000

It is hard to start such a blog, but at least it can serve me as feedback during developing a Linux application with C#.

You can ask if I am crazy, C# and Linux it is not a good idea but you know what, I do not care, I know, or at least I think I know how to code within C#. So why not use my existing experience and create something that will help. At least for me. I like UI applications, and Linux has plenty of space where such applications exist only in the form of terminals. For me, I see a space in managing installed software, especially this is a problem in Arch Linux distributions.

So I will try to create a UI tool for installing, uninstalling, updating applications installed on Arch-based distributions of Linux.

You can still ask, why 101 and what touch means.
Actually, 101 is a cool number, like 101 dalmatians. So it means I do not know how many specific articles for this topic I will write. Problems will show if it is relevant to share it as an article in my blog.

But still, touches? What do you mean by that you can ask? Basically, it will be one touch for one article I would like to share with others. It can refer to some specific problem or solution I will face.

What tools do I plan to use during such a journey?

As the title says I will use C# and Linux, but more specifically I have an idea of what I want to use so in the list below it is written, but by the time I will update it when I use something else, so I can then check backwards as a retrospective my chosen paths. Also next to that, I will use the yay tool, which has plenty of possibilities for what I need to execute behind the UI for the user.

Arch Linux - I will use Endeavour distribution, currently, the latest is the Atlantis Neo release
C#
for UI with C#, I will use the Avalonia framework, together with its Avalonia.Diagnostics and Avalonia.ReativeUI
ReactiveUI.Fody, for simplifying and removing the need of implementing INotifyPropertyChanged interface for each View Model
for logs, I will use Serilog together with Serilog.Sinks.Constole and Serilog.Sinks.File
Splat for Service Location together with Spat.Serilog to simplify logging
CliWrap for executing yay commands
NUnit for unit tests
Currently not sure but maybe also FluentAssertions
Specflow with NUnit for BDD tests
Own tasks and targets for MSBuild as a building mechanism
for CI/CD maybe Azure Dev Ops
GitHub and maybe GitHub free actions

I decided that my project will be called *yay_see_sharp.* Because in base it will be UI for yay in C#.

If you liked this, you can follow my next progress and give me feedback during articles.

Also from this article, you will be able to navigate to my next “touches”.

The list is here: