wpf：グリッドスプリッタはグリッドの外側で使用できますか？

Question

私はStackPanelを持っており、ユーザーが実行時に追加する列をレイアウトするのに最適です。しかし、列のサイズを変更できるようにしたいと思い、GridSplitterコントロールについて読んでいました。ここに私が疑問に思っているものがあります： GridSplitterは、WinFormsスプリッタの代わりにwpfですか？言い換えれば、これは、ユーザーがウィンドウの領域のサイズを変更できるようにするための事実上の方法ですか？ Gridの内部でのみ動作しますか？スタックパネルやドックパネルの中にアイテムがある場合でも、私はWinFormsでスプリッタを使用した方法と同じようにグリッドスプリッタを使用できますか？ Gridを使用する必要がある場合、どうすればStackPanelのように動作させることができますか？

Answer 1

以下は、項目を列として追加できるユーザーコントロールです。列の間にグリッドスプリッターがあります。ユーザーは、削除ボタンをクリックして追加した列を削除し、列を後ろのコードを使用して追加することができます。それがあなたが探していたものかどうか私に教えてください。

<UserControl x:Class="SmartGridDemo.SmartGrid" 
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"> 
    <Grid Name="_grid"> 
     <Grid.RowDefinitions> 
      <RowDefinition Height="Auto" /> 
      <RowDefinition Height="*" /> 
     </Grid.RowDefinitions> 
    </Grid> 
</UserControl> 

の背後にあるユーザーコントロールスマートグリッドコード：

using System; 
using System.Linq; 
using System.Windows; 
using System.Windows.Controls; 
using System.Windows.Media; 

namespace SmartGridDemo 
{ 
    public partial class SmartGrid : UserControl 
    { 
     public SmartGrid() 
     { 
      InitializeComponent(); 
     } 

     public void Add(UIElement child) 
     { 
      int columnIndex = _grid.ColumnDefinitions.Count(); 

      _grid.ColumnDefinitions.Add(
       new ColumnDefinition() 
       { 
        Width = new GridLength(columnIndex == 0 ? 0 :5) 
       }); 

      GridSplitter gridSplitter = 
       new GridSplitter() 
       { 
        HorizontalAlignment = HorizontalAlignment.Stretch, 
        VerticalAlignment = VerticalAlignment.Stretch, 
        ResizeDirection = GridResizeDirection.Columns, 
        Background = Brushes.Black 
       }; 

      _grid.Children.Add(gridSplitter); 
      Grid.SetColumn(gridSplitter, columnIndex); 
      Grid.SetRow(gridSplitter, 0); 
      Grid.SetRowSpan(gridSplitter, 2); 

      columnIndex++; 

      _grid.ColumnDefinitions.Add(new ColumnDefinition() { Width = GridLength.Auto }); 

      Button button = new Button(); 
      button.Content = "Delete"; 
      button.Tag = new TagTuple() {Child = child, GridSplitter = gridSplitter}; 
      button.Click += new RoutedEventHandler(DeleteButton_Click); 

      _grid.Children.Add(button); 
      Grid.SetColumn(button, columnIndex); 
      Grid.SetRow(button, 0); 

      _grid.Children.Add(child); 
      Grid.SetColumn(child, columnIndex); 
      Grid.SetRow(child, 1); 
     } 

     private void DeleteButton_Click(object sender, RoutedEventArgs e) 
     { 
      Button button = sender as Button; 
      int columnIndex = Grid.GetColumn(button); 
      TagTuple tagTuple = button.Tag as TagTuple; 
      _grid.Children.Remove(tagTuple.GridSplitter); 
      _grid.Children.Remove(tagTuple.Child); 
      _grid.Children.Remove(button as UIElement); 

      _grid.ColumnDefinitions.RemoveAt(_grid.ColumnDefinitions.Count() - 1); 
      _grid.ColumnDefinitions.RemoveAt(_grid.ColumnDefinitions.Count() - 1); 

      foreach (UIElement child in _grid.Children) 
      { 
       int columnIndexForChild = Grid.GetColumn(child); 
       if (columnIndexForChild > columnIndex) 
       { 
        Grid.SetColumn(child, columnIndexForChild - 2); 
       } 
      } 
     } 

     private class TagTuple 
     { 
      public GridSplitter GridSplitter { get; set; } 
      public UIElement Child { get; set; } 
     } 
    } 
} 

デモコード、テキストボックスにテキストを追加して、新しい列を追加するボタンを追加ヒット、XAML：

ユーザーコントロールスマートグリッドXAMLは

<Window x:Class="SmartGridDemo.Window1" 
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    xmlns:local="clr-namespace:SmartGridDemo"  
    Title="SmartGridDemo" Height="300" Width="300"> 
    <Grid> 
     <Grid.RowDefinitions> 
      <RowDefinition Height="Auto" /> 
      <RowDefinition Height="*" /> 
     </Grid.RowDefinitions> 
     <Grid.ColumnDefinitions> 
      <ColumnDefinition Width="*" /> 
      <ColumnDefinition Width="Auto" /> 
     </Grid.ColumnDefinitions> 
     <TextBox Name="_texBox" Grid.Row="0" Grid.Column="0" /> 
     <Button Content="Add" Click="AddButton_Click" Grid.Row="0" Grid.Column="1" /> 
     <local:SmartGrid x:Name="_smartGrid" Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="2" /> 
    </Grid> 
</Window> 

デモンストレーションコード：

ここで

using System; 
using System.Windows; 
using System.Windows.Controls; 

namespace SmartGridDemo 
{ 
    public partial class Window1 : Window 
    { 
     public Window1() 
     { 
      InitializeComponent(); 

      _smartGrid.Add(new TextBlock() { Text = "AAA" }); 
      _smartGrid.Add(new TextBlock() { Text = "BBB" }); 
      _smartGrid.Add(new TextBlock() { Text = "CCC" }); 
      _smartGrid.Add(new TextBlock() { Text = "DDD" }); 
      _smartGrid.Add(new TextBlock() { Text = "EEE" }); 
      _smartGrid.Add(new TextBlock() { Text = "FFF" }); 
     } 

     private void AddButton_Click(object sender, RoutedEventArgs e) 
     { 
      _smartGrid.Add(new TextBlock() { Text = _texBox.Text }); 
     } 
    } 
} 

Answer 2

GridSplitterはグリッド内でのみ動作し、ユーザーがコントロールのサイズを変更できる最も簡単な方法です。 グリッド（グリッドスプリッター付き）をスタックパネルと同じように動作させることを意味しますか？スタックパネルはそれぞれの子供に正確にフィットし、グリッドスプリッターを備えたグリッドはユーザーに任せます。

Answer 3

オープンソースWPF SplitContainerです： [http://wpfsplitcontainer.codeplex.com/]