C# WPF - How to Change a 'Preferences' Window's Displayed Grid using a ListView?

Question

I am currently in the process of making a 'Preferences' window in my C# WPF program.

The aim of this window is to have a ListView on the left, and a list of tweakable controls on the right.

Each item in the ListView directly corresponds to a Grid that contains all of the controls under the selected item's content.

Once the item in the ListView is changed, the current grid's visibility must be collapsed, and the grid that corresponds to the item selected's visibility must be changed to visible.

I thought that DataBinding might work for this, however I have no idea how to use it. Could someone please inform me how to implement this feature?

I have only one grid at the moment. The whole window looks like this:

<Window x:Class="DarkOrbit_Skill_Price_Calculator.DarkOrbit_Skill_Price_Calculator___Preferences"
        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:DarkOrbit_Skill_Price_Calculator"
        mc:Ignorable="d"
        Title="DarkOrbit Skill Price Calculator - Preferences" Height="360" Width="640" WindowStartupLocation="CenterScreen" WindowStyle="ToolWindow">
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto"/>
            <ColumnDefinition Width="Auto"/>
        </Grid.ColumnDefinitions>
        <ListView Name="ListView_PreferenceOption" Width="150" Margin="5" SelectionChanged="SelectionChanged_ListView_PreferenceOption">
            <ListViewItem IsSelected="True">
                <StackPanel Orientation="Horizontal">
                    <Image Source="Images\Installing Updates.png" Height="35"/>
                    <TextBlock Text="Update" FontSize="14" FontFamily="Segoe UI" VerticalAlignment="Center" Margin="5"/>
                </StackPanel>
            </ListViewItem>
        </ListView>
        <Grid Margin="5" Name="Grid_Update" Grid.Column="1">
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="Auto"/>
            </Grid.RowDefinitions>
            <StackPanel Orientation="Horizontal">
                <Label Content="Update Version Architecture" VerticalAlignment="Center"/>
                <ComboBox IsReadOnly="True" Width="100" Margin="5">
                    <ComboBoxItem Content="64-Bit"/>
                    <ComboBoxItem Content="32-Bit" IsSelected="True"/>
                </ComboBox>
            </StackPanel>
        </Grid>
    </Grid>
</Window>

I have absolutely no clue as to how to swap the grid depending on the index selected.

Answer 1

You can bind the visibility of each grid to the selected state of its corresponding list item by referencing the ListViewItem element. Something like this:

<Grid>
    <Grid.Resources>
        <BooleanToVisibilityConverter x:Key="Converter" />
    </Grid.Resources>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="Auto"/>
        <ColumnDefinition Width="Auto"/>
    </Grid.ColumnDefinitions>
    <ListView Width="150" Margin="5">
        <ListViewItem IsSelected="True" x:Name="One">
            <TextBlock Text="Update" FontSize="14" FontFamily="Segoe UI"
                VerticalAlignment="Center" Margin="5"/>
        </ListViewItem>
        <ListViewItem IsSelected="False" x:Name="Two">
            <TextBlock Text="Foo" FontSize="14" FontFamily="Segoe UI"
                VerticalAlignment="Center" Margin="5"/>
        </ListViewItem>
    </ListView>
    <Grid Margin="5" Grid.Column="1"
        Visibility="{Binding IsSelected, ElementName=One, Converter={StaticResource Converter}}">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="Auto"/>
        </Grid.RowDefinitions>
        <StackPanel Orientation="Horizontal">
            <Label Content="Update Version Architecture" VerticalAlignment="Center"/>
            <ComboBox IsReadOnly="True" Width="100" Margin="5">
                <ComboBoxItem Content="64-Bit"/>
                <ComboBoxItem Content="32-Bit" IsSelected="True"/>
            </ComboBox>
        </StackPanel>
    </Grid>
    <Grid Margin="5" Grid.Column="1"
        Visibility="{Binding IsSelected, ElementName=Two, Converter={StaticResource Converter}}">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="Auto"/>
        </Grid.RowDefinitions>
        <StackPanel Orientation="Horizontal">
            <Label Content="Update Something Else" VerticalAlignment="Center"/>
            <ComboBox IsReadOnly="True" Width="100" Margin="5">
                <ComboBoxItem Content="64-Bit"/>
                <ComboBoxItem Content="32-Bit" IsSelected="True"/>
            </ComboBox>
        </StackPanel>
    </Grid>
</Grid>

Answer 2

For those who are having the same predicament and want to use C# code to make this work, I eventually thought of the following code:

StackPanel[] allGrids = { Grid_1, Grid_2, Grid_3, Grid_4, ... }; //Replace StackPanel with the
//type of control you are using, e.g. Grid or WrapPanel. 

foreach (StackPanel grid in allGrids)
{
    grid.Visibility = Visibility.Collapsed; //collapse all grids
}

allGrids[(your listview/other control).SelectedIndex].Visibility = Visibility.Visible;
//make the grid you need visible