CODEWITHSUNDEEP
wpfxamlmenugridgridsplitter
No74
No74

Reputation: 1

.NET GridSplitter to resize one column

My question is quite specific and did not find anything related anywhere. So first question of my life on SO, here we go. I new to WPF and XAML globaly so do not hesitate if you have any remarks to improve my code.

What I try to achieve ? I have a workspace surrounded by 4 menus. The visibility of this menu are conditioned by toggle buttons on top but I erase all that so my code is clearer. But I want menu that behave like pop up (I did not use pop up to really control the size and position, inside a certain container, of tjose menus). There are 2 menus on the left and two menus on the right. On each side, the two menu can not be opened at the same time. Same thing, I erase all this to be clear. I want my menus to be resizable. But my two menu on the left does not have the same size and should be resize individually. 

<Grid >
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="Auto"/>
        <ColumnDefinition Width="*"/>
        <ColumnDefinition Width="Auto"/>
    </Grid.ColumnDefinitions>
    <Grid Grid.Column="0" Background="Aqua" Name="LeftMenu">
        <Grid Name="LeftMenu1">
            <Grid.ColumnDefinitions>
                <ColumnDefinition MinWidth="200" MaxWidth="500" Width="300"/>
                <ColumnDefinition Width="5"/>
            </Grid.ColumnDefinitions>
            <Grid Grid.Column="0"  Name="MenuContent1"/>
            <GridSplitter Grid.Column="1" ResizeBehavior="PreviousAndCurrent" HorizontalAlignment="Stretch"/>
        </Grid>
    </Grid>
    <Grid Grid.Column="1" Name="Workspace"/>
    <Grid Grid.Column="2" Background="Aqua" Name="RightMenu">
        <Grid Name="RightMenu1">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="5"/> 
                <ColumnDefinition MinWidth="200" MaxWidth="500" Width="300"/>
            </Grid.ColumnDefinitions>
            <GridSplitter Grid.Column="0" ResizeBehavior="CurrentAndNext" HorizontalAlignment="Stretch"/> 
            <Grid Grid.Column="1" Name="MenuContent2"/>
        </Grid>
    </Grid>

</Grid>

*I only diplayed one menu on each side because I erased the visibility condition, but the second menus are the same, exept for the width.

What is my problem ? As you can see I used GridSplitter to resize the one column grid that compose each menu. While I totally get my wanted behavior on the left, it does not work on the right. When I use the Gridsplitter, the gridsplitter column ("current") is resized and not the menu column. I used the "CurrentandNext" value as it seemed logical but it is apparently not sufficient. If I fixed the GridSplitter width with maxWidth and minWidth, nothing is resied, the GridSplitter does not move.

I hope that I am clear enough and will welcome any help !

Upvotes: 0

Views: 1194

Answers (2)

EldHasp
EldHasp

Reputation: 7908

I need to have two "panels", not opened at the same time, but with a different size...

I do made a solution for the question WPF How to build docked resizable expanders and grid using XAML only? and and it works for your question too.

You made a bit of a mistake when sizing the columns.

<Grid >
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="Auto"/>
        <ColumnDefinition Width="*"/>
        <ColumnDefinition Width="Auto"/>
    </Grid.ColumnDefinitions>
    <Grid Grid.Column="0" Background="Aqua" Name="LeftMenu">
        <Grid Name="LeftMenu1">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto"/>
                <ColumnDefinition />
            </Grid.ColumnDefinitions>
            <Grid Grid.Column="0"  Name="MenuContent1" MinWidth="200" MaxWidth="500" Width="300"/>
            <GridSplitter Grid.Column="1" ResizeBehavior="PreviousAndCurrent" HorizontalAlignment="Stretch" Width="5"/>
        </Grid>
    </Grid>
    <Grid Grid.Column="1" Name="Workspace"/>
    <Grid Grid.Column="2" Background="Aqua" Name="RightMenu">
        <Grid Name="RightMenu1">
            <Grid.ColumnDefinitions>
                <ColumnDefinition/>
                <ColumnDefinition Width="Auto"/>
            </Grid.ColumnDefinitions>
            <GridSplitter Grid.Column="0" ResizeBehavior="CurrentAndNext" HorizontalAlignment="Stretch" Width="5"/>
            <Grid Grid.Column="1" Name="MenuContent2" MinWidth="200" MaxWidth="500" Width="300"/>
        </Grid>
    </Grid>

</Grid>

Upvotes: 0

Nawed Nabi Zada
Nawed Nabi Zada

Reputation: 2875

You are doing it totally wrong.

GridSplitters are meant to resize Columns and Rows.

Assume you have one Grid with to Columns:

<Grid Name="RightMenu1">
  <Grid.ColumnDefinitions>
    <ColumnDefinition Width="5"/> 
    <ColumnDefinition MinWidth="200" MaxWidth="500" Width="300"/>
  </Grid.ColumnDefinitions>

  <GridSplitter Grid.Column="0" HorizontalAlignment="Right" VerticalAlignment="Stretch" Width="3" Background="Black"/> 

  <Border Grid.Column="0" Background="Red" Margin="0,0,3,0"/>
  <Border Grid.Column="1" Background="Blue"/>
</Grid>

You have to keep your GridSplitter between the two Columns, to resize the columns. In this case Right aligned horizontal and stretched vertical.

Upvotes: 0

Related Questions