CODEWITHSUNDEEP
avaloniauiavalonia
Cedric Royer-Bertrand
Cedric Royer-Bertrand

Reputation: 741

How to update a control in the code behind in Avalonia?

I'm trying to update a canvas according to selected item in a grid. I'm using the event OnSelected() but how can I find the canvas to update it?

The official documentation talk about view activation but I'm unable to make it work... (The documentation is not very noob friendly to be honest). Edit: It's ReactUI and I'm using MVVM, so I should try to access the component directly in the code behind. How can I do that?

View: I've name the canvas 'viewer' it's the one I want to update in the code behind

<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:LocalArena.ViewModels"
             mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"
             x:Class="LocalArena.Views.MapsView"
             x:DataType="vm:MapsViewModel">
  <Grid ColumnDefinitions="*" RowDefinitions="*,2*">
      <Viewbox Grid.Row="0" Grid.Column="0" Stretch="Uniform">
          <Canvas x:Name="viewer" Width="200" Height="100" MaxWidth="200" MaxHeight="100" Background="Yellow" Margin="3"/>
      </Viewbox>
      <DataGrid Grid.Row="1" Grid.Column="0" Margin="3" ItemsSource="{Binding MapItems}"
                SelectedItem="{Binding SelectedMapItem}" AutoGenerateColumns="True" IsReadOnly="True"
                GridLinesVisibility="All" BorderThickness="1" BorderBrush="Gray">
      </DataGrid>
  </Grid>
</UserControl>

ViewModel: I may miss an MVVM namespace? or my ViewModel should inherit from another class?

using CommunityToolkit.Mvvm.ComponentModel;
using System.Collections.Generic;
using System.Collections.ObjectModel;
using System.Diagnostics;
using System.Linq;

public partial class MapsViewModel : ViewModelBase
{
    [ObservableProperty]
    private MapItem? _selectedMapItem;
    partial void OnSelectedMapItemChanged(MapItem? value)
    {
        // I want to update the Canvas 'viewer' here
        // What's the syntax or method to use?
        Debug.WriteLine("Map selection changed");
    }
    public ObservableCollection<MapItem> MapItems { get; }
    private List<Map> _maps;
    public MapsViewModel()
    {
        _maps = new List<Map>()
        {
            new Map{ Seed = "seed-001", Type="Imported", SizeX=24, SizeY=12 },
            new Map{ Seed = "seed-002", Type="Imported", SizeX=12, SizeY=6 },
        };

        MapItems = new ObservableCollection<MapItem>(_maps.Select(x => new MapItem(x.Seed, x.Type)).ToList());
    }
}

public record MapItem(string Seed, string Type);

public class Map
{
    public string Seed { get; set; }
    public string Type { get; set; }
    public int SizeX { get; set; }
    public int SizeY { get; set; }
}

public class ViewModelBase : ObservableObject
{
}

Upvotes: 0

Views: 888

Answers (1)

Cedric Royer-Bertrand
Cedric Royer-Bertrand

Reputation: 741

I found the answer... The 'viewer' is accessible in the code behind as a property...but not in the ViewModel... :D

The way to do the update for the 'Viewer' is with a ContenControl

Upvotes: 0

Related Questions