Zmiana Visibility StackPanelu za pomocą buttona

Cześć :)

Potrzebuję pomocy, chce zrobić tak, aby po kliknięciu w button (Zaloguj się), StackPanel zmienił wartość Visibility na Hidden, a inny StackPanel zmienił wartość na Visible. To wszystko przy wykorzystaniu MVVM, bez żadnego code-behind. Udało mi się jak na razie utworzyć Command dla przycisku, Messagebox po wciśnięciu działa.

XAML:

<Window x:Class="SmartHomeDemo.Views.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        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:local="clr-namespace:SmartHomeDemo"
        xmlns:VM="clr-namespace:SmartHomeDemo.ViewModels"
        mc:Ignorable="d"
        Title="" Height="500" Width="500"
        ResizeMode="CanMinimize"
        WindowStyle="None"
        BorderBrush="DarkGray"
        BorderThickness="1">
    
    <Window.DataContext>
        <VM:LoginViewModel/>
    </Window.DataContext>

    <Grid Margin="0,0,-0.4,-2.4">
        <DockPanel Background="#FF3F3F3E" 
                   HorizontalAlignment="Left" 
                   Height="41" LastChildFill="False" 
                   VerticalAlignment="Top" Width="498" 
                   Margin="0,0,-0.4,0">
            <Image DockPanel.Dock="Left" 
                   Height="40" VerticalAlignment="Top" 
                   Width="47" 
                   Source="C:\Users\Tomek\source\repos\SmartHomeDemo\SmartHomeDemo\Images\smart_icon.png"/>
            <Label DockPanel.Dock="Left" 
                   Margin="0,0,10,0" 
                   Content="SmartHome" Height="40" 
                   VerticalAlignment="Top" FontFamily="Corbel" 
                   FontSize="20" Foreground="White" 
                   FontWeight="Bold"/>
            <Button BorderThickness="0" 
                    Background="Transparent" 
                    DockPanel.Dock="Right" 
                    Content="X" Height="40" 
                    VerticalAlignment="Top" Width="35"/>
            <Button BorderThickness="0" 
                    Background="Transparent" 
                    DockPanel.Dock="Right" 
                    Content="_" Height="40" 
                    VerticalAlignment="Top" 
                    Width="35"/>
            <Button Command="{Binding MyCommand }" 
                    BorderThickness="0" 
                    Background="Transparent" 
                    DockPanel.Dock="Right" 
                    Content="Zaloguj się" 
                    Height="40" FontSize="16" 
                    FontStyle="Italic" 
                    VerticalAlignment="Top"/>
        </DockPanel>
        <StackPanel Background="#FF3F3F3E" 
                    HorizontalAlignment="Left" 
                    Height="460" Margin="0,38,0,-0.4" 
                    VerticalAlignment="Top" 
                    Width="129">
            <Image Height="30" 
                   VerticalAlignment="Top" 
                   Width="129" 
                   Source="C:\Users\Tomek\source\repos\SmartHomeDemo\SmartHomeDemo\Images\list.png" RenderTransformOrigin="0.434,1.556" Margin="0,21,0,0"/>
            <Image Height="43" 
                   Margin="0,60,-0.2,0" 
                   Source="C:\Users\Tomek\source\repos\SmartHomeDemo\SmartHomeDemo\Images\temp.png"/>
            <Image Height="45" 
                   Margin="0,40,-0.2,0" 
                   Source="C:\Users\Tomek\source\repos\SmartHomeDemo\SmartHomeDemo\Images\light.png"/>
            <Image Height="45" 
                   Margin="0,45,-0.2,0" 
                   Source="C:\Users\Tomek\source\repos\SmartHomeDemo\SmartHomeDemo\Images\locker.png"/>
            <Image Height="45" 
                   Margin="0,45,-0.2,0" 
                   Source="C:\Users\Tomek\source\repos\SmartHomeDemo\SmartHomeDemo\Images\comment.png"/>


        </StackPanel>
        <Button Name="ListaButton" 
                Visibility="Hidden" 
                BorderThickness="0" 
                Background="Transparent" 
                Content="Lista urządzeń" 
                HorizontalAlignment="Left" 
                Margin="0,41,0,0" 
                VerticalAlignment="Top" 
                Width="129" Height="90" 
                Foreground="White" 
                FontWeight="Bold" 
                FontSize="14" 
                Padding="0,50,0,0"/>
        <Button Name="TempButton" 
                Visibility="Hidden" 
                BorderThickness="0" 
                Background="Transparent" 
                Content="Temperatura" 
                HorizontalAlignment="Left" 
                Margin="0,131,0,0" 
                VerticalAlignment="Top" 
                Width="129" Height="90" 
                Foreground="White" 
                FontWeight="Bold" 
                FontSize="14" 
                Padding="0,50,0,0"/>
        <Button Name="LightButton" 
                Visibility="Hidden" 
                BorderThickness="0" 
                Background="Transparent" 
                Content="Oświetlenie" 
                HorizontalAlignment="Left" 
                Margin="0,221,0,0" 
                VerticalAlignment="Top" 
                Width="129" Height="90" 
                Foreground="White" 
                FontWeight="Bold" 
                FontSize="14" 
                Padding="0,50,0,0"/>
        <Button Name="SaftyButton" 
                Visibility="Hidden" 
                BorderThickness="0" 
                Background="Transparent" 
                Content="Bezpieczeństwo" 
                HorizontalAlignment="Left" 
                Margin="0,311,0,0" 
                VerticalAlignment="Top" 
                Width="129" Height="90" 
                Foreground="White" 
                FontWeight="Bold" 
                FontSize="14" 
                Padding="0,50,0,0"/>
        <Button Name="CommentButton" 
                Visibility="Hidden" 
                BorderThickness="0" 
                Background="Transparent" 
                Content="Komunikaty" 
                HorizontalAlignment="Left" 
                Margin="0,401,0,0" 
                VerticalAlignment="Top" 
                Width="129" Height="97" 
                Foreground="White" 
                FontWeight="Bold" 
                FontSize="14" 
                Padding="0,50,0,0"/>

        <StackPanel Name="StartPanel" 
                    Visibility="Visible" 
                    Background="DarkGray" 
                    HorizontalAlignment="Left" 
                    Height="459" Margin="129,41,0,0" 
                    VerticalAlignment="Top" 
                    Width="369">
            <Label Content="Witamy w aplikacji do zarządzania domem !" 
                   VerticalAlignment="Stretch" 
                   Margin="25,0,0,0" 
                   FontSize="16" 
                   Foreground="Black" />
            <Label Content="Zaloguj się, aby kontynuować..." 
                   Margin="84,25,84,0" 
                   Height="33" 
                   FontSize="14"/>
            <Image Height="246" 
                   Margin="0,50,-0.2,0" 
                   Source="C:\Users\Tomek\source\repos\SmartHomeDemo\SmartHomeDemo\Images\home.png"/>

        </StackPanel>
        <StackPanel Name="LoginStackPanel" 
                    Visibility="Hidden" 
                    Background="DarkGray" 
                    HorizontalAlignment="Left" 
                    Height="459" Margin="129,41,0,0" 
                    VerticalAlignment="Top" 
                    Width="369"/>
        <StackPanel Name="ListaStackPanel" 
                    Visibility="Hidden" 
                    Background="DarkGray" 
                    HorizontalAlignment="Left" 
                    Height="459" 
                    Margin="129,41,0,0" 
                    VerticalAlignment="Top" 
                    Width="369"/>
        <StackPanel Name="TempStackPanel" 
                    Visibility="Hidden" 
                    Background="DarkGray" 
                    HorizontalAlignment="Left" 
                    Height="459" 
                    Margin="129,41,0,0" 
                    VerticalAlignment="Top" 
                    Width="369"/>
        <StackPanel Name="LightStackPanel" 
                    Visibility="Hidden" 
                    Background="DarkGray" 
                    HorizontalAlignment="Left" 
                    Height="459" Margin="129,41,0,0" 
                    VerticalAlignment="Top" 
                    Width="369"/>
        <StackPanel Name="SaftyStackPanel" 
                    Visibility="Hidden" 
                    Background="DarkGray" 
                    HorizontalAlignment="Left" 
                    Height="459" 
                    Margin="129,41,0,0" 
                    VerticalAlignment="Top" 
                    Width="369"/>
        <StackPanel Name="CommentStackPanel" 
                    Visibility="Hidden" 
                    Background="DarkGray" 
                    HorizontalAlignment="Left" 
                    Height="459" Margin="129,41,0,0" 
                    VerticalAlignment="Top" 
                    Width="369"/>
    </Grid>
</Window>

Kod Command :

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows.Input;
using SmartHomeDemo.ViewModels;
namespace SmartHomeDemo.Commands
{
    internal class UserLoginCommand : ICommand
    {
        Action<object> executeMethod;
        Func<object, bool> canExecuteMethod;

        public UserLoginCommand(Action<object> executeMethod, Func<object, bool> canExecuteMethod)
        {
            this.executeMethod = executeMethod;
            this.canExecuteMethod = canExecuteMethod;
        }


       

        public bool CanExecute(object parameter)
        {
            return true;
        }

        public void Execute(object parameter)
        {
            executeMethod(parameter);
        }


        public event EventHandler CanExecuteChanged;
    } 
}

ViewModel:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Input;
using SmartHomeDemo.Views;
using SmartHomeDemo.Commands;
using System.ComponentModel;

namespace SmartHomeDemo.ViewModels
{
    public class LoginViewModel : INotifyPropertyChanged
    {

        
    
        public ICommand MyCommand { get; set; }
        public LoginViewModel()
        {
           
            MyCommand = new UserLoginCommand(ExecuteMethod, canExecuteMethod);
        }

        public event PropertyChangedEventHandler PropertyChanged;

        private bool canExecuteMethod(object parameter)
        {
            return true;
        }
        
        private void ExecuteMethod(object parameter)
        {
            MessageBox.Show("Test");
        }
    }
}

Czytałem, że trzeba używać jakiegoś convertera znalazłem coś takiego tylko nie wiem jak to użyć:

using System;
using System.Collections.Generic;
using System.Globalization;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Data;

namespace SmartHomeDemo
{
    class BooleanToVisibilityConverter : IValueConverter
    {
        public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
        {
            bool? boolValue = value as bool?;
            return boolValue.HasValue && boolValue.Value ? Visibility.Visible : Visibility.Collapsed;
        }

        public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
        {
            Visibility? visibilityValue = value as Visibility?;
            return visibilityValue.HasValue && visibilityValue.Value == Visibility.Visible;
        }
    }
}

Proszę o pomoc i wytłumaczenie mi tego w miarę możliwości.
BTW. Może posiada ktoś jakieś polskie źródła do nauki MVVM ? Angielski u mnie nie jest na zbyt wysokim poziomie i ciężko mi pojąć niektóre rzeczy.

Czytałem, że trzeba używać jakiegoś convertera...

A tam konwertera. Starczy skorzystać z jednego z frameworków MVVM i odejdzie 3/4 Twojego kodu. Przykład z Prism'em w załączniku.

Dziękuję w sumie racja :P Pewnie skorzystam z tego faktycznie 3/4 kodu mnie :O
A byłbyś w stanie mi to wytłumaczyć bez frameworka :) ?

I czym się różni Collapsed od Hidden?

Mógłby ktoś wyjaśnić tą konstrukcję?

 public DelegateCommand SwitchStacks
        {
            get => switchStacks ?? (switchStacks = new DelegateCommand(() =>
            {
                FirstStackVisibility = Visibility.Collapsed;
                SecondStackVisibility = Visibility.Visible;
            }));
        }

W załączniku masz opisane co i jak bez frameworka, w formie komentarzy w kodzie. Oczywiście jest to czubek góry lodowej i robienie większych rzeczy bez Prisma czy czegoś innego to męczarnia; w końcu po to frameworki zostały stworzone żeby upraszczać różne rzeczy.

PS: Masz też opisany kod, o który prosiłeś żeby wyjaśnić. Enjoy.
;)

PS2: https://stackoverflow.com/questions/886742/difference-between-visibility-collapsed-and-visibility-hidden