C# WPF - Как изменить отображаемую сетку окна «Предпочтения» с помощью ListView?

Question

В настоящее время я создаю окно «Настройки» в моей программе C# WPF.

Цель этого окна - иметь ListView слева и список настраиваемых элементов управления справа.

Каждый элемент в ListView непосредственно соответствует сетке, которая содержит все элементы управления под содержимым выбранного элемента.

После изменения элемента в элементе ListView текущая видимость сетки должна быть свернута, а сетка, соответствующая видимости выбранного элемента, должна быть изменена на видимую.

Я думал, что DataBinding может работать для этого, однако я понятия не имею, как его использовать. Может кто-нибудь, пожалуйста, сообщите мне, как реализовать эту функцию?

У меня есть только одна сетка в данный момент. Все окно выглядит следующим образом:

<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> 

У меня нет абсолютно никакого понятия о том, как поменять сетку в зависимости от индекса выбранного.

Answer 1

Вы можете привязать видимость каждой сетки к выбранному состоянию соответствующего элемента списка, ссылаясь на элемент ListViewItem. Что-то вроде этого:

<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

Для тех, кто с тем же затруднительным положением, и хочет использовать C# код, чтобы сделать эту работу, я в конце концов думал о следующем коде:

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