Change content stack panel dynamically with button click WPF

Question

I would like to change stack panel content/data on button click in the same window.

I have a menu list on left and on the right of the window I have 2 stackpanel which I want to update. This is actually my configuration screen. Following is my XAML code:

<Window x:Class="Manager.Screens.Configurations"
        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:Manager.Screens"
        mc:Ignorable="d"
        Title="Configurations" Height="850" Width="1000" WindowStyle="None" >

    <Border 
          BorderBrush="Black" 
          BorderThickness="0" 
          Padding="0">
        <Grid Background="White" ShowGridLines="True" Margin="-3,0,0,0">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="200*"/>
                <ColumnDefinition Width="263*"/>
                <ColumnDefinition Width="Auto"/>
            </Grid.ColumnDefinitions>

            <StackPanel Grid.Column="0" Grid.Row="0" HorizontalAlignment="Left" Name="StackPanel1" VerticalAlignment="Top" Height="Auto" Width="Auto">
                <Image Source="Resources\Images\config_back.jpg" Stretch="Fill" Opacity="0.65" Height="Auto" Margin="-3,-2,0,0"/>
                <Button Margin="0,-1450,0,60" Height="38" Background="Transparent">
                    <StackPanel Orientation="Horizontal" Width="332">
                        <Image Source="Resources\Images\tools.png" Margin="75,0,25,0"/>
                        <TextBlock Text="General" VerticalAlignment="Center" FontSize="18" FontWeight="Bold" Foreground="#FFFF8C3D"/>
                    </StackPanel>
                </Button>
                <Button Margin="0,-1350,0,10" Height="38" Background="Transparent">
                    <StackPanel Orientation="Horizontal" Width="332">
                        <Image Source="Resources\Images\setting.png" Margin="75,0,25,0"/>
                        <TextBlock Text="Settings" VerticalAlignment="Center" FontSize="18" FontWeight="Bold" Foreground="#FFFF8C3D"/>
                    </StackPanel>
                </Button>
                <Button Margin="0,-1250,0,-40" Height="38" Background="Transparent">
                    <StackPanel Orientation="Horizontal" Width="332">
                        <Image Source="Resources\Images\user.png" Margin="75,0,25,0"/>
                        <TextBlock Text="Limits/Stations" VerticalAlignment="Center" FontSize="18" FontWeight="Bold" Foreground="#FFFF8C3D"/>
                    </StackPanel>
                </Button>
                <Button Margin="0,-1150,0,-90" Height="38" Background="Transparent">
                    <StackPanel Orientation="Horizontal" Width="332">
                        <Image Source="Resources\Images\user.png" Margin="75,0,25,0"/>
                        <TextBlock Text="Portions" VerticalAlignment="Center" FontSize="18" FontWeight="Bold" Foreground="#FFFF8C3D"/>
                    </StackPanel>
                </Button>
                <Button Margin="0,-1050,0,-140" Height="38" Background="Transparent">
                    <StackPanel Orientation="Horizontal" Width="332">
                        <Image Source="Resources\Images\user.png" Margin="75,0,25,0"/>
                        <TextBlock Text="Label Templates" VerticalAlignment="Center" FontSize="18" FontWeight="Bold" Foreground="#FFFF8C3D"/>
                    </StackPanel>
                </Button>

                <Button Margin="0,-950,0,-190" Height="38" Background="Transparent">
                    <StackPanel Orientation="Horizontal" Width="332">
                        <Image Source="Resources\Images\user.png" Margin="75,0,25,0"/>
                        <TextBlock Text="RFID Containers" VerticalAlignment="Center" FontSize="18" FontWeight="Bold" Foreground="#FFFF8C3D"/>
                    </StackPanel>
                </Button>
                <Button Margin="0,-850,0,-240" Height="38" Background="Transparent">
                    <StackPanel Orientation="Horizontal" Width="332">
                        <Image Source="Resources\Images\user.png" Margin="75,0,25,0"/>
                        <TextBlock Text="User Management" VerticalAlignment="Center" FontSize="18" FontWeight="Bold" Foreground="#FFFF8C3D"/>
                    </StackPanel>
                </Button>
            </StackPanel>

            <StackPanel Grid.Column="1" Grid.Row="0" HorizontalAlignment="Stretch" Name="StackPanel2" VerticalAlignment="Top" Orientation="Vertical">

            </StackPanel>

            <StackPanel Grid.Column="2" Grid.Row="0" HorizontalAlignment="Left" Name="StackPanel3" VerticalAlignment="Top">
                <TextBlock FontSize="18" HorizontalAlignment="Center" Margin="0,0,0,15">StackPanel3</TextBlock>
                <Button Margin="10">Button 7</Button>
                <Button Margin="10">Button 8</Button>
                <Button Margin="10">Button 9</Button>
                <TextBlock>ColumnDefinition.Width="Auto"</TextBlock>
                <TextBlock>StackPanel.HorizontalAlignment="Left"</TextBlock>
                <TextBlock>StackPanel.VerticalAlignment="Top"</TextBlock>
                <TextBlock>StackPanel.Orientation="Vertical"</TextBlock>
                <TextBlock>Button.Margin="10"</TextBlock>
            </StackPanel>
        </Grid>
    </Border>

</Window>

I haven't written any controls or functions so far please help me as I am new how can it be done in WPF.

Answer 1

Basically there are three main approaches to show / hide controls on your view. Here's the code that provides you with an example of each:

XAML:

<Window x:Class="WpfApp1.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"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <Window.Resources>
        <BooleanToVisibilityConverter x:Key="BooleanToVisibilityConverter"/>
    </Window.Resources>
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition />
            <RowDefinition />
            <RowDefinition />
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition/>
            <ColumnDefinition/>
        </Grid.ColumnDefinitions>

        <Rectangle Grid.Column="0" Grid.Row="0" Visibility="{Binding IsBlueRectangleVisible, Converter={StaticResource BooleanToVisibilityConverter}}" Fill="Blue" />
        <Button Grid.Column="1" Grid.Row="0" Content="Binding to ViewModel" Command="{Binding BlueRectangleSwitchCommand}"/>

        <Rectangle Grid.Column="0" Grid.Row="1" Visibility="{Binding ElementName=toggleBtn, Path=IsChecked, Converter={StaticResource BooleanToVisibilityConverter}}" Fill="Red" />
        <ToggleButton Grid.Column="1" Grid.Row="1" x:Name="toggleBtn" Content="Toggle switch" />

        <Rectangle x:Name="greenRectangle" Grid.Column="0" Grid.Row="2" Fill="Green" />
        <Button Grid.Column="1" Grid.Row="2" Content="Code behind" Click="GreenRectangleBtnClick"/>
    </Grid>
</Window>

Code behind:

public partial class MainWindow : Window, INotifyPropertyChanged
{

    public MainWindow()
    {
        InitializeComponent();

        // Blue rectangle
        // Initialize the command that is binded to one of your buttons
        BlueRectangleSwitchCommand = new RelayCommand(o => 
        {
            // Switches the flag binded to Visibility property of one of your Rectangles
            IsBlueRectangleVisible = !IsBlueRectangleVisible;
            // Notify that UI shoud be re-rendered
            OnPropertyChanged(nameof(IsBlueRectangleVisible));
        });
        // Next line is needed in order to bind this object to the DataContext of itself (wierd, isn't it?)
        // So the MainWindow would know where to llok up for the properties you are binding to in XAML
        DataContext = this;
    }

    // Blue rectangle
    // Property that is binded to Visibility property of one of your Rectangles
    public bool IsBlueRectangleVisible { get; set; }
    // Blue rectangle
    // Property that is binded to Command property of one of your Rectangles
    public ICommand BlueRectangleSwitchCommand { get; private set; }

    // Blue rectangle
    // This implementation of INotifyPropertyChanged interface allows you to use OnPropertyChanged 
    // that is needed for notifying UI that your properties changed
    #region INotifyPropertyChanged
    public event PropertyChangedEventHandler PropertyChanged;

    protected void OnPropertyChanged(string propertyName)
        => PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
    #endregion

    // Green rectangle
    private void GreenRectangleBtnClick(object sender, RoutedEventArgs e)
    {
        greenRectangle.Visibility = greenRectangle.Visibility == Visibility.Visible
            ? Visibility.Collapsed
            : Visibility.Visible;
    }
}

I added commentaries so you could easily distinguish between each of them. As it's up to you to decide which one suits you more.

But here's what I suggest:

1. If you don't need to track the actual state, use the Toggle switch (Red);
2. If you need to track the state of the switch or to switch if from your code behind - use Binding to ViewModel (Blue);
3. Never use the third one. Okay, this is a joke, sort of. If you need a really simple UI in a small application - use it all you want. But if there's a possibility that your app is going to grow so you'll need a separation of concerns, test-ability, etc, don't even look to this approach. It'll make your application a noodle pan (Green).