在 WPF 中更新具有不同内容的列表框按钮单击

Question

所以我的 WPF 应用程序中有一个列表框和一个工具栏。工具栏只有常规控件，列表框有垂直扩展器。

我需要列表框有一组不同的扩展器，具体取决于单击的按钮。现在看起来是这样的：

<ListBox>
    <local:Select_Analysis_Panel/>
</ListBox>

其中local:Select_Analysis_Panel 是包含扩展器的单独用户控制文件。单击按钮时动态更新 ListBox 控件内容的最佳方法是什么？

在过去的几个小时里，我一直在尝试为每个扩展器集使用 set DataTemplates 并将其绑定到项目控件属性，但使用下面的代码几乎没有用处。我只是想在设置 MVVM 接口之前布置基本框架。后来我打算用你知道的ItemsSource="{Binding WhatExpanderViewModelProperty}" 或类似的东西替换ItemsSource="Network_anal"。

 <ListBox Width="250"  Margin="5,0,0,0">
            <ListBox.Resources>

                <DataTemplate DataType="Select_Analysis_Panel">
                    <local:Select_Analysis_Panel/>
                </DataTemplate>

                <DataTemplate x:Key="Network_anal" DataType="NetworkAnalysis">
                    <local:NetworkAnalysis/>
                </DataTemplate>.Resources>

            <ListBox.Template>                    
                <ControlTemplate>
                    <Border Background="Red"/>
                </ControlTemplate>                    
            </ListBox.Template>

            <ItemsControl ItemsSource="Network_anal"/>
</ListBox>

我是否采取了正确的方法来解决这个问题？

这就是我想要做的。当点击“文件”按钮时，下面的侧边栏会显示这两个扩展器：

当“网络设计”按钮时，这些扩展器会显示：

Answer 1

选项 1：

子类化部分：

这些部分中的每一个都可以从基本部分类中继承，并且每个部分都可以使用特定的DataTemplate：

<Window x:Class="MiscSamples.MultiToolbar"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="clr-namespace:MiscSamples"
        Title="MultiToolbar" Height="300" Width="300">
    <Window.Resources>
        <BooleanToVisibilityConverter x:Key="BoolToVisibilityConverter"/>
    </Window.Resources>
    <DockPanel>
        <ListBox ItemsSource="{Binding Sections}"
                 SelectedItem="{Binding SelectedSection}"
                 DisplayMemberPath="Name"
                 DockPanel.Dock="Top">
            <ListBox.ItemContainerStyle>
                <Style TargetType="ListBoxItem">
                    <Setter Property="IsEnabled" Value="{Binding IsEnabled}"/>
                    <Setter Property="Visibility" Value="{Binding IsVisible, Converter={StaticResource BoolToVisibilityConverter}}"/>
                    <Setter Property="MinWidth" Value="80"/>
                    <Setter Property="MinHeight" Value="40"/>
                    <Setter Property="Template">
                        <Setter.Value>
                            <ControlTemplate TargetType="ListBoxItem">
                                <Border BorderBrush="Black" BorderThickness="1">
                                    <ToggleButton IsChecked="{Binding IsSelected, Mode=TwoWay,RelativeSource={RelativeSource TemplatedParent}}">
                                        <ContentPresenter ContentSource="Content"/>
                                    </ToggleButton>
                                </Border>
                            </ControlTemplate>
                        </Setter.Value>
                    </Setter>
                </Style>
            </ListBox.ItemContainerStyle>
            <ListBox.ItemsPanel>
                <ItemsPanelTemplate>
                    <StackPanel Orientation="Horizontal"/>
                </ItemsPanelTemplate>
            </ListBox.ItemsPanel>
        </ListBox>
        
        <ScrollViewer Width="300" DockPanel.Dock="Left">
            <ContentPresenter Content="{Binding SelectedSection}">
                <ContentPresenter.Resources>
                    <DataTemplate DataType="{x:Type local:FileSection}">
                        <TextBlock Text="User Control For File Section"/>
                    </DataTemplate>
                    <DataTemplate DataType="{x:Type local:NetworkDesignSection}">
                        <TextBlock Text="User Control For Network Design"/>
                    </DataTemplate>
                    <DataTemplate DataType="{x:Type local:SelectAnalysisSection}">
                        <TextBlock Text="User Control For Select Analysis"/>
                    </DataTemplate>
                </ContentPresenter.Resources>
            </ContentPresenter>
        </ScrollViewer>
        
        <Grid Background="Gray">
            <TextBlock Text="Design Surface" TextAlignment="Center" VerticalAlignment="Center" FontWeight="Bold"/>
        </Grid>
    </DockPanel>
</Window>

代码背后：

public partial class MultiToolbar : Window
    {
        public MultiToolbar()
        {
            InitializeComponent();

            var vm = new MainViewModel();
            vm.Sections.Add(new FileSection() {Name = "File"});
            vm.Sections.Add(new NetworkDesignSection() { Name = "Network Design" });
            vm.Sections.Add(new SelectAnalysisSection() { Name = "Select Analysis" });

            DataContext = vm;
        }
    }

主视图模型：

public class MainViewModel: PropertyChangedBase
    {
        private ObservableCollection<Section> _sections;
        public ObservableCollection<Section> Sections
        {
            get { return _sections ?? (_sections = new ObservableCollection<Section>()); }
        }

        private Section _selectedSection;
        public Section SelectedSection
        {
            get { return _selectedSection; }
            set
            {
                _selectedSection = value;
                OnPropertyChanged("SelectedSection");
            }
        }
    }

部分：

public abstract class Section:PropertyChangedBase
    {
        public string Name { get; set; }

        private bool _isEnabled = true;
        public bool IsEnabled
        {
            get { return _isEnabled; }
            set
            {
                _isEnabled = value;
                OnPropertyChanged("IsEnabled");
            }
        }

        private bool _isVisible = true;
        public bool IsVisible
        {
            get { return _isVisible; }
            set
            {
                _isVisible = value;
                OnPropertyChanged("IsVisible");
            }
        }

        //Optionally
        //public string ImageSource {get;set;}
        //ImageSource = "/Resources/MySection.png";
    }

    public class FileSection: Section
    {
        ///... Custom logic specific to this Section
    }

    public class NetworkDesignSection:Section
    {
        ///... Custom logic specific to this Section
    }

    public class SelectAnalysisSection: Section
    {
        ///... Custom logic specific to File Section
    }

    //...etc etc etc

结果：

请注意，我使用绑定到ListBoxItem.IsSelected 属性的ToggleButtons 来模拟类似TabControl 的行为。

Answer 2

可以设置整个表单的DataContext，绑定listbox的ItemsSource，或者直接设置listbox的ItemsSource到某个集合。