Trying to create buttons with dynamic sizes. (Visualizing the monitor setup on your computer)

[devedse]

I'm trying to write a piece of code to visualize the different monitors that are connected to my computer and visualize them as buttons.
Something like this:

My viewmodel contains this:

 public class MainWindowViewModel : ViewModelBase
 {
     public string Greeting => "Welcome to Avalonia!";

     public ObservableCollection<ScreenInfo> Screens { get; }

     public MainWindowViewModel()
     {
         //Design time
         Screens = new ObservableCollection<ScreenInfo>();
         Screens.Add(new ScreenInfo()
         {
             OriginalBounds = new PixelRect(0, 0, 2560, 1440),
             RelativeBounds = new Rect(0, 0, 0.42, 1),
             Primary = true,
             WorkingArea = new PixelRect(0, 0, 1920, 1080),
             PixelDensity = 1
         });
         Screens.Add(new ScreenInfo()
         {
             OriginalBounds = new PixelRect(0, 0, 3440, 1440),
             RelativeBounds = new Rect(0.42, 0, 0.58, 1),
             Primary = true,
             WorkingArea = new PixelRect(0, 0, 1920, 1080),
             PixelDensity = 1
         });
     }
}

And my MainView:

<Window xmlns="https://github.com/avaloniaui"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:vm="using:Test123.ViewModels"
		xmlns:localconverters="clr-namespace:Test123.Converters"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"
        x:Class="Test123.Views.MainWindow"
        Icon="/Assets/avalonia-logo.ico"
        Title="Test123">

	<Design.DataContext>
		<vm:MainWindowViewModel/>
	</Design.DataContext>

	<Window.Resources>
		<localconverters:RelativeToActualConverter x:Key="RelativeToActualConverter" />
		<localconverters:RelativeToActualMultiConverter x:Key="RelativeToActualMultiConverter" />
	</Window.Resources>

	<StackPanel>
		<!-- Debugging Text -->
		<TextBlock Text="{Binding Greeting}"
                   Foreground="Black"
                   FontSize="30"
                   HorizontalAlignment="Center"
                   VerticalAlignment="Top" />

		<Canvas x:Name="ScreenCanvas2" Background="LightGray" Width="800" Height="450">
			<ItemsControl Items="{Binding Screens}">
				<ItemsControl.ItemsPanel>
					<ItemsPanelTemplate>
						<Canvas />
					</ItemsPanelTemplate>
				</ItemsControl.ItemsPanel>
				<ItemsControl.ItemTemplate>
					<DataTemplate>
						<Button Content="{Binding Name}"
								Background="LightBlue"
								Foreground="Black">
							<!-- Bind Canvas.Left -->
							<Canvas.Left>
								<MultiBinding Converter="{StaticResource RelativeToActualMultiConverter}">
									<Binding Path="RelativeBounds.X" />
									<Binding ElementName="ScreenCanvas2" Path="Bounds.Width" />
								</MultiBinding>
							</Canvas.Left>

							<!-- Bind Canvas.Top -->
							<Canvas.Top>
								<MultiBinding Converter="{StaticResource RelativeToActualMultiConverter}">
									<Binding Path="RelativeBounds.Y" />
									<Binding ElementName="ScreenCanvas2" Path="Bounds.Height" />
								</MultiBinding>
							</Canvas.Top>

							<!-- Bind Width -->
							<Button.Width>
								<MultiBinding Converter="{StaticResource RelativeToActualMultiConverter}">
									<Binding Path="RelativeBounds.Width" />
									<Binding ElementName="ScreenCanvas2" Path="Bounds.Width" />
								</MultiBinding>
							</Button.Width>

							<!-- Bind Height -->
							<Button.Height>
								<MultiBinding Converter="{StaticResource RelativeToActualMultiConverter}">
									<Binding Path="RelativeBounds.Height" />
									<Binding ElementName="ScreenCanvas2" Path="Bounds.Height" />
								</MultiBinding>
							</Button.Height>
						</Button>
					</DataTemplate>
				</ItemsControl.ItemTemplate>
			</ItemsControl>
		</Canvas>

	</StackPanel>

</Window>

And a converter to convert the relative positions to an actual size inside the canvas (as the canvas should be able to dynamically resize later:

    public class RelativeToActualMultiConverter : IMultiValueConverter
    {
        public object Convert(IList<object?> values, Type targetType, object? parameter, CultureInfo culture)
        {
            if (values.Count >= 2)
            {
                Console.WriteLine("values[0]: " + values[0] + " values[1]: " + values[1]);
                if (values[0] is double relativeValue && values[1] is double actualSize)
                {
                    return relativeValue * actualSize;
                }
            }

            return 0;
        }

        public object? ConvertBack(IList<object?> values, Type targetType, object? parameter, CultureInfo culture)
        {
            throw new NotImplementedException();
        }
    }

This however only shows a grey square:

I've been trying for the past 3 hours to get this to work, but haven't been able to.

[thevortexcloud]

There is an example for binding to a canvas in the docs in a list control.

https://docs.avaloniaui.net/docs/concepts/custom-itemspanel

Although that example is technically a violation of MVVM as it gives the view model some direct coupling to the view.

Why your one is not working, I am not sure though. Does it display anything if you hard code a value in your view?

Also Avalonia already has an API for querying screen info.

#15901

[devedse]

Ok so I managed to fix it 😄 thanks to your post and some other things:

1. I found out the templates for Avalonia I had installed where for .NET 5.0. Apparently my dotnet install command didn't overwrite them somehow.
2. Your example itempanel took me through the right steps to solve everything.

Anyway here's the working code if anyone's interested:

<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:Test123.ViewModels"
             xmlns:localmodels="clr-namespace:Test123.Models"
             xmlns:localconverters="clr-namespace:Test123.Converters"
             mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"
             x:Class="Test123.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>

	<StackPanel>
		<StackPanel.Resources>
			<localconverters:RelativeToActualMultiConverter x:Key="RelativeToActualMultiConverter" />
		</StackPanel.Resources>

		<TextBlock Text="{Binding Greeting}"/>

		<Button Command="{Binding LoadScreensCommand}" Content="Reload Screens"/>

		<ItemsControl ItemsSource="{Binding Screens}">
			<ItemsControl.ItemsPanel>
				<ItemsPanelTemplate>
					<Canvas Width="600" Height="250" Background="Blue" Margin="3"/>
				</ItemsPanelTemplate>
			</ItemsControl.ItemsPanel>
			<ItemsControl.ItemTemplate>
				<DataTemplate>
					<Rectangle Fill="Green" Stroke="OrangeRed" StrokeThickness="5">
						<!-- Bind Width using the converter -->
						<Rectangle.Width>
							<MultiBinding Converter="{StaticResource RelativeToActualMultiConverter}">
								<Binding Path="RelativeBounds.Width"/>
								<Binding Path="Width" RelativeSource="{RelativeSource AncestorType=Canvas}"/>
							</MultiBinding>
						</Rectangle.Width>
						<!-- Bind Height using the converter -->
						<Rectangle.Height>
							<MultiBinding Converter="{StaticResource RelativeToActualMultiConverter}">
								<Binding Path="RelativeBounds.Height"/>
								<Binding Path="Height" RelativeSource="{RelativeSource AncestorType=Canvas}"/>
							</MultiBinding>
						</Rectangle.Height>
					</Rectangle>
				</DataTemplate>
			</ItemsControl.ItemTemplate>
			<ItemsControl.Styles>
				<Style Selector="ContentPresenter" x:DataType="localmodels:ScreenInfo">
					<Setter Property="Canvas.Left">
						<Setter.Value>
							<MultiBinding Converter="{StaticResource RelativeToActualMultiConverter}">
								<Binding Path="RelativeBounds.X"/>
								<Binding Path="Width" RelativeSource="{RelativeSource AncestorType=Canvas}"/>
							</MultiBinding>
						</Setter.Value>
					</Setter>

					<Setter Property="Canvas.Top">
						<Setter.Value>
							<MultiBinding Converter="{StaticResource RelativeToActualMultiConverter}">
								<Binding Path="RelativeBounds.Y"/>
								<Binding Path="Height" RelativeSource="{RelativeSource AncestorType=Canvas}"/>
							</MultiBinding>
						</Setter.Value>
					</Setter>
				</Style>
			</ItemsControl.Styles>
		</ItemsControl>

	</StackPanel>

</UserControl>

    public class ScreenInfo
    {
        public PixelRect OriginalBounds { get; set; }
        public Rect RelativeBounds { get; set; }
        public bool IsPrimary { get; set; }


        public PixelRect WorkingArea { get; set; }
        public double Scaling { get; set; }
    }

public partial class MainViewModel : ViewModelBase
{
    [ObservableProperty]
    private string _greeting = "Welcome to Avalonia!";
    private readonly ScreenService _screenService;

    public ObservableCollection<ScreenInfo> Screens { get; }

    public ICommand LoadScreensCommand => new RelayCommand(LoadScreens);

    public MainViewModel()
    {
        //Design time
        Screens = new ObservableCollection<ScreenInfo>(MockScreens());

    }

    public MainViewModel(ScreenService screenService)
    {
        Screens = new ObservableCollection<ScreenInfo>(MockScreens());
        _screenService = screenService;
    }


    private void LoadScreens()
    {
        Screens.Clear();
        foreach (var screen in _screenService.GetScreens())
        {
            Screens.Add(screen);
        }
    }

    private List<ScreenInfo> MockScreens()
    {
        return new List<ScreenInfo>()
            {
                new ScreenInfo()
                {
                    OriginalBounds = new PixelRect(0, 0, 2560, 1440),
                    RelativeBounds = new Rect(0, 0, 0.42, 1),
                    IsPrimary = true,
                    WorkingArea = new PixelRect(0, 0, 100, 100),
                    Scaling = 1
                },
                new ScreenInfo()
                {
                    OriginalBounds = new PixelRect(2560, 0, 3440, 1440),
                    RelativeBounds = new Rect(0.42, 0, 0.58, 1),
                    IsPrimary = false,
                    WorkingArea = new PixelRect(150, 0, 100, 200),
                    Scaling = 1
                }
            };
    }
}

    public class RelativeToActualMultiConverter : IMultiValueConverter
    {
        public object Convert(IList<object?> values, Type targetType, object? parameter, CultureInfo culture)
        {
            double retval = 0;

            if (values.Count == 2)
            {
                Console.WriteLine("values[0]: " + values[0] + " values[1]: " + values[1]);
                if (values[0] is double relativeValue && values[1] is double actualSize)
                {
                    retval = relativeValue * actualSize;
                }
            }

            Console.WriteLine("\tretval: " + retval);
            return retval;
        }

        public object? ConvertBack(IList<object?> values, Type targetType, object? parameter, CultureInfo culture)
        {
            throw new NotImplementedException();
        }
    }

[devedse]

Btw another question I ran into related to your second comment regarding the screens info API. The problem I'm running into is that I want to load the screens during my ViewModel setup. However the Window doesn't exist yet then. It's not related to my initial question, but I'm a bit lost in how I would go about this. Currently I've just added a button to click to "Reload the screens" which can be clicked manually after the Window is available, but I'm sure there must be a better way.

[thevortexcloud]

If you don't care too much about MVVM, you can access a top level by using the Application class. Different lifetimes have different top levels. As long as Avalonia has started and there is at least one view, it will probably work.

https://docs.avaloniaui.net/docs/concepts/application-lifetimes

That said, I personally would suggest avoiding that entirely and just have the view pass the information to the view model when it loads. If you are using ReactiveUI, you can also make an interaction to have the view model request data from the view whenever the view model is activated. Which is how I typically manage things like file pickers.

#13484 (reply in thread)

There is non ReactiveUI samples here for an interaction

https://github.com/AvaloniaUI/Avalonia.Samples/tree/main/src/Avalonia.Samples/ViewInteraction/MvvmDialogSample

[devedse]

Thanks I'll check it out :)