4

How to: Create a GridSplitter, that customizes the size of a DockPanel (C#, WPF)

This is my GridSplitter code, but unfortunately it is not working: I am not allowed to change the size of my grid. I can see the GridSplitter, but I cannot use it.

<DockPanel DockPanel.Dock="Left" Name="dockPanel_1" Width="200">
    <StackPanel />
    <DockPanel />
</DockPanel>
<Grid>
    <GridSplitter ShowsPreview="True" Width="5" HorizontalAlignment="Right" VerticalAlignment="Stretch" />
</Grid>
<DockPanel DockPanel.Dock="Right" Name="dockPanel_2">
    <StackPanel />
    <DockPanel />
</DockPanel>

PS: If you know how to save the changed size, so that its to the same size when restarting the application, just add to your post.

Thanks in advance.

sjantke
  • 605
  • 4
  • 9
  • 35
  • 1
    For saving the GridSplitters size layout, pls see this SO QA: http://stackoverflow.com/questions/5018544/wpf-gridsplitter-saving-and-restoring-location-and-splitting-proportionately – S2S2 May 21 '14 at 08:13
  • Take a look at this solution https://www.codeproject.com/Articles/34377/DockPanel-Splitter-Control-for-WPF – jv_ Sep 23 '17 at 16:04

1 Answers1

13

If you want to be able to resize columns/row then instead of DockPanel you can use Grid with GridSplitter 

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="200"/>
        <ColumnDefinition/>
    </Grid.ColumnDefinitions>
    <DockPanel Name="dockPanel_1">
        <StackPanel />
        <DockPanel />
    </DockPanel>
    <GridSplitter Width="5" HorizontalAlignment="Right" VerticalAlignment="Stretch" ResizeBehavior="CurrentAndNext"/>
    <DockPanel Grid.Column="1" Name="dockPanel_2">
        <StackPanel />
        <DockPanel />
    </DockPanel>
</Grid>
dkozl
  • 32,814
  • 8
  • 87
  • 89
  • Thanks for your help. That is what I am looking for. I have edited my post, please see above. I still have problems with that. – sjantke May 21 '14 at 07:05
  • Check my updated example. Basically you need columns/rows to be resized and your `Grid` is empty, aprart from `GridSplitter` so **replace** outer `DockPanel` with `Grid` (like in my example) and put inner `DockPanels` as 2 columns of the `Grid`. Layout should stay the same but you should be able to resize left/right columns – dkozl May 21 '14 at 08:11
  • Thank you, dkozl. There is just a little problem: The `GridSplitter` goes with `Width="5"` --> unfortunately, it is on top of the left `DockPanel`. That "kills" a bit of the width of the `DockPanel`. – sjantke May 21 '14 at 09:57
  • So set `Margin` on the `DockPanel` to something like `Margin="0,0,5,0"` – dkozl May 21 '14 at 09:58