更新列表框不同的內容在WPF按鈕點擊

Question

所以我有一個列表框和一個工具欄在我的WPF應用程序。工具欄只具有常規控件，而列表框具有垂直擴展器。

我需要列表框有一個不同的擴展器集，具體取決於單擊哪個按鈕。現在它看起來像這樣：

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

哪裏local:Select_Analysis_Panel是包含擴展獨立用戶控件文件。單擊按鈕時動態更新ListBox控件內容的最佳方法是什麼？

在過去的幾個小時裏，我一直在嘗試爲每個擴展器集合使用set DataTemplates，並用下面的代碼很少用到綁定到items控件屬性。我只是試圖在設置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> 

我對此採取正確的方法嗎？

這是我正在嘗試做的。點擊「文件」按鈕時，下方的側欄顯示這兩個擴展：

而當「網絡設計」按鈕，這些擴展器dipslayed：

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 

結果：

請注意，我用ToggleButton少不了的ListBoxItem.IsSelected財產模擬TabControl - 喜歡行爲。

Answer 2

您可以設置的DataContext整個表格並將listbox的ItemsSource或將listbox的ItemsSource直接綁定到某個集合。