C# WPF - 如何使用 ListView 更改 'Preferences' 窗口的显示网格？

Question

我目前正在我的 C# WPF 程序中制作“首选项”窗口。

这个窗口的目的是在左侧有一个 ListView，在右侧有一个可调整的控件列表。

ListView 中的每个项目直接对应一个 Grid，该 Grid 包含所选项目内容下的所有控件。

一旦 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 元素将每个网格的可见性绑定(bind)到其相应列表项的选定状态。像这样:

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