Grid Splitter in WPF

Question

Voglio un layout come VS 2008. In cui voglio due colonne e seconde colonne è nuovamente diviso in due.

L'ho fatto nella xaml menzionata di seguito, ma il GridSplitter non è visibile verticalmente (che divide due colonne).

Voglio che sia il GridSplitter s sia ridimensionabile. Uno GridSplitter ridimensiona il riquadro e pannello destro della mano sinistra e un altro GridSplitter ridimensiona riquadro superiore della sottogriglia e riquadro di destra ..

La Seconda GridSplitter sta lavorando attraverso questo XAML, ma io non sono in grado di produrre codice XAML che divide la mano destra Pannello e riquadro sinistro .. Aiuto !!

<Window x:Class="AlarmUI_2.Window1" 
     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
     Title="Window1" Height="300" Width="300"> 
    <Grid> 
     <Grid.ColumnDefinitions> 
      <ColumnDefinition Width="*"/> 
      <ColumnDefinition Width="*"/> 
     </Grid.ColumnDefinitions> 
     <StackPanel Background="Aqua" Grid.Column="0" > 
      <TextBlock FontSize="35" Foreground="#58290A" 
         TextWrapping="Wrap">Left Hand Side</TextBlock> 
     </StackPanel> 
     <GridSplitter Grid.Column="0" ResizeDirection="Auto" 
         Grid.RowSpan="1" 
         HorizontalAlignment="Stretch" 
         VerticalAlignment="Center"/> 
     <Grid Grid.Column="1"> 
      <Grid.RowDefinitions>    
       <RowDefinition Height="*" /> 
       <RowDefinition Height="*" /> 
      </Grid.RowDefinitions> 
      <ListBox Grid.Row="0" Background="Red"> 
       <ListBoxItem>Hello</ListBoxItem> 
       <ListBoxItem>World</ListBoxItem> 
      </ListBox> 
      <GridSplitter Grid.Row="1" Height="5" Background="Gray" 
          VerticalAlignment="Top" HorizontalAlignment="Stretch" /> 
      <ListBox Grid.Row="1" Background="Violet" Margin="0,5,0,0"> 
       <ListBoxItem>Hello</ListBoxItem> 
       <ListBoxItem>World</ListBoxItem> 
      </ListBox> 
     </Grid> 
    </Grid> 
</Window> 

Answer 1

Cambio splitter verticale per

<GridSplitter Grid.Column="0" Width="5" ResizeDirection="Auto" 
      Grid.RowSpan="1" 
      HorizontalAlignment="Right" 
      VerticalAlignment="Stretch"/> 

Questo sarà modo molto meglio utilizzare GridSplitter

<Grid> 
    <Grid.ColumnDefinitions> 
     <ColumnDefinition Width="*"/> 
     <ColumnDefinition Width="5"/> 
     <ColumnDefinition Width="*"/> 
    </Grid.ColumnDefinitions> 

    <StackPanel Background="Aqua" Grid.Column="0" > 
     <TextBlock FontSize="35" Foreground="#58290A" 
      TextWrapping="Wrap">Left Hand Side</TextBlock> 


    </StackPanel> 

    <GridSplitter Grid.Column="1" HorizontalAlignment="Stretch"/> 

    <Grid Grid.Column="2"> 
     <Grid.RowDefinitions> 
      <RowDefinition Height="*" /> 
      <RowDefinition Height="5" /> 
      <RowDefinition Height="*" /> 
     </Grid.RowDefinitions> 
     <ListBox Grid.Row="0" Background="Red"> 
      <ListBoxItem>Hello</ListBoxItem> 
      <ListBoxItem>World</ListBoxItem> 
     </ListBox> 
     <GridSplitter Grid.Row="1" Background="Gray" HorizontalAlignment="Stretch"/> 
     <ListBox Grid.Row="2" Background="Violet"> 
      <ListBoxItem>Hello</ListBoxItem> 
      <ListBoxItem>World</ListBoxItem> 
     </ListBox> 
    </Grid> 
</Grid> 

Answer 2

ho acheived la funzionalità, la XAML è seguito indicate:

<Grid.ColumnDefinitions> 
     <ColumnDefinition Width="*"/> 
     <ColumnDefinition Width="*"/> 
    </Grid.ColumnDefinitions> 

    <StackPanel Background="Aqua" Grid.Column="0" > 
     <TextBlock FontSize="35" Foreground="#58290A" 
       TextWrapping="Wrap">Left Hand Side</TextBlock> 


    </StackPanel> 


    <GridSplitter HorizontalAlignment="Right" ResizeDirection="Columns" Width="5" /> 

    <Grid Grid.Column="1"> 
     <Grid.RowDefinitions>    
     <RowDefinition Height="*" /> 
     <RowDefinition Height="*" /> 
    </Grid.RowDefinitions> 




    <ListBox Grid.Row="0" Background="Red"> 
     <ListBoxItem>Hello</ListBoxItem> 
     <ListBoxItem>World</ListBoxItem> 
    </ListBox> 
    <GridSplitter Grid.Row="1" Height="5" Background="Gray" 
        VerticalAlignment="Top" HorizontalAlignment="Stretch" /> 
    <ListBox Grid.Row="1" Background="Violet" Margin="0,5,0,0"> 
     <ListBoxItem>Hello</ListBoxItem> 
     <ListBoxItem>World</ListBoxItem> 
    </ListBox> 
     </Grid> 
</Grid> 

Answer 3

I GridSplitters dovrebbero probabilmente essere sulla propria riga/colonna nella griglia, non è la condivisione di un cella con gli altri controlli.

Answer 4

tuo GridSplitter è dietro gli altri controlli Ecco perché non si può vedere. Puoi spostarlo in fondo al tuo file XAML (quindi aggiunto per ultimo) o usare la proprietà allegata Panel.ZIndex. Inoltre devi impostare correttamente la larghezza dello splitter:

<Grid> 
    <Grid.ColumnDefinitions> 
     <ColumnDefinition Width="*"/> 
     <ColumnDefinition Width="*"/> 
     <ColumnDefinition Width="*"/> 
    </Grid.ColumnDefinitions> 
    <StackPanel Background="Aqua" Grid.Column="0" > 
     <TextBlock FontSize="35" Foreground="#58290A" 
      TextWrapping="Wrap">Left Hand Side</TextBlock> 
    </StackPanel> 
    <Grid Grid.Column="1"> 
     <Grid.RowDefinitions> 
      <RowDefinition Height="*" /> 
      <RowDefinition Height="*" /> 
     </Grid.RowDefinitions> 
     <ListBox Grid.Row="0" Background="Red"> 
      <ListBoxItem>Hello</ListBoxItem> 
      <ListBoxItem>World</ListBoxItem> 
     </ListBox> 
     <GridSplitter Grid.Row="1" Height="5" Background="Gray" 
       VerticalAlignment="Top" HorizontalAlignment="Stretch" /> 
     <ListBox Grid.Row="1" Background="Violet" Margin="0,5,0,0"> 
      <ListBoxItem>Hello</ListBoxItem> 
      <ListBoxItem>World</ListBoxItem> 
     </ListBox> 
    </Grid> 
    <GridSplitter Grid.Column="0" ResizeDirection="Columns" 
      Grid.RowSpan="1" Width="5" 
      HorizontalAlignment="Right"/> 
</Grid>