WPF：ComboBox内のTreeView

Question

コンボボックスをドロップすると、フラットリストの代わりにユーザーが階層リストを取得し、選択したノードが選択されるように、WPFのComboBox内にTreeViewを配置しようとしています。 ComboBoxの値です。

私はこれを達成する方法をかなり探しましたが、私が見つけることができる最高のものは、WPFの初心者であるため、仕事をすることができないという潜在的な問題のほんの一部です。

私はWPFとデータバインディングに関する十分な知識を持っているので、データをツリービューに取り込むことができます。また、コンボボックス内でツリービューを取得することもできますが、達成できたことはまったく動作しません。私はスクリーンショットを添付して、私が意味することを示しています。スクリーンショットのコンボボックスは「開いている」ので、下部のツリービューはノードを選択できる場所で、ツリービューはコンボボックスの上に描かれています。ここで選択したノードのテキスト/値が必要です表示されるツリーに表示されます。

基本的にどのようにすればよいかわからないのは、treeviewのcurrrently selected nodeを取得してその値をコンボボックスに戻し、それを選択値として使用する方法です。ここで

は、私が現在使用しているXAMLコードです：

 <ComboBox Grid.Row="0" Grid.Column="1" VerticalAlignment="Top"> 
     <ComboBoxItem> 
      <TreeView ItemsSource="{Binding Children}" x:Name="TheTree"> 
       <TreeView.Resources> 
        <HierarchicalDataTemplate DataType="{x:Type Core:LookupGroupItem}" ItemsSource="{Binding Children}"> 
         <TextBlock Text="{Binding Path=Display}"/>        
        </HierarchicalDataTemplate> 
       </TreeView.Resources> 
      </TreeView> 
     </ComboBoxItem> 
    </ComboBox> 

スクリーンショット：

Answer 1

コンボボックス上のSelectedItemを設定するには、ツリービューでイベントハンドラを使用することができるかもしれません。これを行うために

あなたがそうのようなツリービューのタグporperty設定する必要があります：

private void treeview_MouseDoubleClick(object sender, RoutedEventArgs e) 
    { 
     try 
     { 
      TreeView tv = sender as TreeView; 
      if(tv == null) 
       return; 
      var cB = tv.Tag as ComboBox; 
      cB.SelectedItem = tv.SelectedItem; 
     } 
     catch (Exception e) 
     { 

     } 
    } 

：あなたはコンボボックスで取得することができますDoubleClickイベントに今すぐ

<TreeView Tag="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type ComboBox}}" MouseDoubleClick="treeview_MouseDoubleClick" ItemsSource="{Binding Children}" x:Name="TheTree"> 

をまた、comboBox Itemが選択されている方法をオーバーライドする必要があります。そうしないと、TreeView全体をクリックするとすぐに選択されます。

Answer 2

この質問は、あなたはおそらくthis implementationは役に立ち見つけるだろう実際にthat one

に密接に関連しています。これは内部のチェックボックス付きのコンボボックスですが、ボックス内のテキストをツリーのポップアップコンテンツから切り離す方法を知ることができます。 プロパティがモデルエンティティ上にある必要があり、モデルを通じてチェックボックスTextのプロパティにバインドされているはずであることも示しています。言い換えれば、あなたがコンボボックスに表示された内容は、コンテンツとはまったく無関係かもしれません...まあ、完全ではないかもしれませんが、ユーザーがそのコンボでいくつかのチェックボックスを選択すると、トップのテキストボックス、または「いくつかのオプションが選択された」などの表示が可能です。

HTH =）

Answer 3

私は同じ問題がありました。

コンボボックスでツリービューの動作を実装する最も簡単な方法は、TextBoxを作成し、コンボボックスのようにスタイルを設定することです。その隣に画像を追加する。トリックは、ツリービューをポップアップコントロールに入れることです。次に、ユーザーが選択したテキストボックスまたはドロップダウンイメージをクリックすると、ポップアップがテキストボックスのすぐ下に表示されます。

次に、ツリービュー項目が選択されているときに、ポップアップを閉じて、選択したテキストをテキストボックスに配置します。

XAML：

<Window x:Class="ComboBoxTreeView.MainWindow" 
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    Title="MainWindow" Height="350" Width="525" MouseEnter="Window_MouseEnter"> 
    <Grid Margin="15"> 
     <Grid.RowDefinitions> 
     <RowDefinition Height="30" /> 
     <RowDefinition Height="*" /> 
     </Grid.RowDefinitions> 
     <TextBox Grid.Row="0" x:Name="header" Width="300" Height="30" PreviewMouseDown="header_PreviewMouseDown" HorizontalAlignment="Left" /> 
     <Popup Grid.Row="1" x:Name="PopupTest" AllowsTransparency="True" IsOpen="False"> 
     <TreeView x:Name="Tree1" Initialized="Tree1_Initialized" SelectedItemChanged="Tree1_SelectedItemChanged"> 
      <TreeViewItem Header="Test1" x:Name="Tree1Item1"> 
       <TreeViewItem Header="1test1" /> 
       <TreeViewItem Header="2test2" /> 
      </TreeViewItem> 
      <TreeViewItem Header="Test2" /> 
     </TreeView> 
     </Popup> 
    </Grid> 
</Window> 

そして、ここでの背後にあるコードです：

using System; 
using System.Collections.Generic; 
using System.Linq; 
using System.Text; 
using System.Windows; 
using System.Windows.Controls; 
using System.Windows.Data; 
using System.Windows.Documents; 
using System.Windows.Input; 
using System.Windows.Media; 
using System.Windows.Media.Imaging; 
using System.Windows.Navigation; 
using System.Windows.Shapes; 

namespace ComboBoxTreeView 
{ 
    /// <summary> 
    /// Interaction logic for MainWindow.xaml 
    /// </summary> 
    public partial class MainWindow : Window 
    { 
     public MainWindow() 
     { 
     InitializeComponent(); 
     } 

     private void Window_MouseEnter(object sender, MouseEventArgs e) 
     { 

     } 

     private void Tree1_SelectedItemChanged(object sender, RoutedPropertyChangedEventArgs<object> e) 
     { 
     var trv = sender as TreeView; 
     var trvItem = trv.SelectedItem as TreeViewItem; 
     if (trvItem.Items.Count != 0) return; 
     header.Text = trvItem.Header.ToString(); 
     PopupTest.IsOpen = false; 
     } 

     private void Tree1_Initialized(object sender, EventArgs e) 
     { 
     var trv = sender as TreeView; 
     var trvItem = new TreeViewItem() { Header="Initialized item"}; 
     var trvItemSel = trv.Items[1] as TreeViewItem; 
     trvItemSel.Items.Add(trvItem); 
     } 

     private void header_PreviewMouseDown(object sender, MouseButtonEventArgs e) 
     { 
     PopupTest.Placement = System.Windows.Controls.Primitives.PlacementMode.RelativePoint; 
     PopupTest.VerticalOffset = header.Height; 
     PopupTest.StaysOpen = true; 
     PopupTest.Height = Tree1.Height; 
     PopupTest.Width = header.Width; 
     PopupTest.IsOpen = true; 
     } 
    } 
} 

Answer 4

私はあなたがtreeViewItemsその後、コンボ1by1に追加するforeachことができると思い

はここunstylized例です。

それぞれのツリービュー項目の展開イベントでは、その子をコンボボックスに追加します。

ただし、展開可能アイテムの高さを高さ= 18dなどの1つの行のように設定します。まだこのコントロールを必要とする人のために

// == Append Item into combobox ================= 
TreeViewItem root = new TreeViewItem(); 
root.Header = "item 1"; 
TreeViewItem t1 = new TreeViewItem(); 
t1.Header = "Expanding..."; 
root.Items.Add(t1); 
// ============================================== 

// == root expandind event ============================== 
root.Height = 18.00d; 
TreeViewItem[] items = GetRootChildren(root.Tag); 
foreach(TreeViewItem item in items) 
{ 
    combox1.Items.Add(item); 
} 
// ====================================================== 

Answer 5

、私は私のSilverlight controlのWPFのバージョンを実装しました。これはビューモデルでのみ機能し、特別なインターフェイスを実装するためにこれらのビューモデルが必要ですが、それ以外は使用するのが難しくありません。

は、WPFでは、次のようになります。WpfComboboxTreeview.zip

Answer 6

それは古い話題だが、それは誰かに役立つことができます：

あなたがここからソースコードとサンプルアプリケーションをダウンロードすることができます。

コンボボックスと似たようなことをしようとすると、代わりにポップアップを使用しようとしましたが、動作しています。 すてきな機能にするには、多くの微調整が必​​要です。

<Expander Header="TestCS"> 
    <Popup IsOpen="{Binding IsExpanded, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type Expander}}}"> 
     <TreeView ItemsSource="{Binding CSTree.CSChildren}"> 
      <TreeView.Resources> 
       <HierarchicalDataTemplate ItemsSource="{Binding CSChildren}" DataType="{x:Type ViewModel:ObservableCS}"> 
        <StackPanel Orientation="Horizontal"> 
         <TextBlock FontSize="16" Text="{Binding CSName}"></TextBlock> 
        </StackPanel> 
       </HierarchicalDataTemplate> 
      </TreeView.Resources> 
     </TreeView> 
    </Popup> 
</Expander>