locked
wpf grid freeze a row RRS feed

  • Question

  • Hi there,

    I am developing a wpf application which has the wpf grid. I have used the GridSplitter to split the grid columns; if I change the grid column size using the splitter i need to resize the controls in the wiondow based on the column width. Is there any way to identiy the grid splitter moving (I could not find a event in grid splitter for its moving)?

    Alternatively, Is it possible to have a row in wpf grid as a freezed row (i.e. it should not scroll down and up in the grid which is inside the scrollviewer)?

    Thanks in advance,
    Sekar
    Wednesday, April 23, 2008 7:02 PM

Answers

  • For your 1st question:

    The Gridsplitter has the events "DragDelta" (during moving) and "DragCompleted" (when resizing is completed).

     

    So you can listen to this events in your code to resize your other grids.

     

     

    Another possibility is to create an dependency property in your parent- control. This you can bind to the width- propery of your columns (Mode=TwoWay) in your different columns. This way you don't have to care about events :-)

     

    Friday, April 25, 2008 9:51 PM
  • You can use data binding to control the size of all grids. Here is an example. I hope this helps for you.

     

    Code Snippet

    <Grid Height="100" Margin="5">

        <Grid.ColumnDefinitions>

            <ColumnDefinition x:Name="Column1" Width="100"/>

            <ColumnDefinition Width="Auto"/>

            <ColumnDefinition x:Name="Column2" Width="*"/>

        </Grid.ColumnDefinitions>

        <DockPanel Background="SeaGreen" Grid.Column="0"/>

        <GridSplitter Width="2" ResizeBehavior="PreviousAndNext" Grid.Column="1"/>

        <DockPanel Background="SeaGreen" Grid.Column="2"/>

    </Grid>

    <Grid Height="100" Margin="5">

        <Grid.ColumnDefinitions>

            <ColumnDefinition Width="{Binding Width, ElementName=Column1}"/>

            <ColumnDefinition Width="Auto"/>

            <ColumnDefinition Width="{Binding Width, ElementName=Column2}"/>

        </Grid.ColumnDefinitions>

        <DockPanel Background="SeaGreen" Grid.Column="0"/>

        <GridSplitter Width="2" ResizeBehavior="PreviousAndNext" Grid.Column="1"/>

        <DockPanel Background="SeaGreen" Grid.Column="2"/>

    </Grid>

    <Grid Height="100" Margin="5">

        <Grid.ColumnDefinitions>

            <ColumnDefinition Width="{Binding Width, ElementName=Column1}"/>

            <ColumnDefinition Width="Auto"/>

            <ColumnDefinition Width="{Binding Width, ElementName=Column2}"/>

        </Grid.ColumnDefinitions>

        <DockPanel Background="SeaGreen" Grid.Column="0"/>

        <GridSplitter Width="2" ResizeBehavior="PreviousAndNext" Grid.Column="1"/>

        <DockPanel Background="SeaGreen" Grid.Column="2"/>

    </Grid>

     

     

    Best Regards,

    Wei Zhou

    Tuesday, April 29, 2008 8:45 AM

All replies

  • Your first question is related to WPF layout mechanism, the answer is what layout panel and control settings are you using. For example, if you use Canvas to layout controls and set control width and height properties manually, the controls size will not changed automatically. But, if you use StackPanel and do not set the control width and height properties manually, the control size by default will changed automatically when their container layout panel size changed. For more information about this topic, you can refer to the following link.

     

    http://msdn2.microsoft.com/en-us/library/ms745058.aspx

     

    For your second question, we are unable to lock or freeze a grid row in ScrollViewer. But I think that we may use an alternative way to do this. You can place a control on the top of ScrollViewer, but the control is not the child of the ScrollViewer, so when you scroll the ScrollViewer, the control position will not be changed.

     

    Best Regards,

    Wei Zhou

    Friday, April 25, 2008 3:15 AM
  • Thanks for you reply Wei Zhou,

    As I said, I have wpf  window; inside the window I have three grids, and grids have 4 columns each. I placed GridSplitter controls in between columns of the first(top) grid. If I resize the first grid columns using Gplitter, I should also resize the other grid columns accordingly. How can do this?

    Thanks,
    Sekar
    Friday, April 25, 2008 10:23 AM
  • For your 1st question:

    The Gridsplitter has the events "DragDelta" (during moving) and "DragCompleted" (when resizing is completed).

     

    So you can listen to this events in your code to resize your other grids.

     

     

    Another possibility is to create an dependency property in your parent- control. This you can bind to the width- propery of your columns (Mode=TwoWay) in your different columns. This way you don't have to care about events :-)

     

    Friday, April 25, 2008 9:51 PM
  • Thanks Georg, I like your second approach. Can you give a code snippet to do that?

    Also I would like to find whether the content of a control in a row, col (cell) goes beyond the width of the column,(partly visible), is it possible to do that? if so give the snippet for that too.

    Thanks in advance,
    Sekar
    Monday, April 28, 2008 7:24 AM
  • You can use data binding to control the size of all grids. Here is an example. I hope this helps for you.

     

    Code Snippet

    <Grid Height="100" Margin="5">

        <Grid.ColumnDefinitions>

            <ColumnDefinition x:Name="Column1" Width="100"/>

            <ColumnDefinition Width="Auto"/>

            <ColumnDefinition x:Name="Column2" Width="*"/>

        </Grid.ColumnDefinitions>

        <DockPanel Background="SeaGreen" Grid.Column="0"/>

        <GridSplitter Width="2" ResizeBehavior="PreviousAndNext" Grid.Column="1"/>

        <DockPanel Background="SeaGreen" Grid.Column="2"/>

    </Grid>

    <Grid Height="100" Margin="5">

        <Grid.ColumnDefinitions>

            <ColumnDefinition Width="{Binding Width, ElementName=Column1}"/>

            <ColumnDefinition Width="Auto"/>

            <ColumnDefinition Width="{Binding Width, ElementName=Column2}"/>

        </Grid.ColumnDefinitions>

        <DockPanel Background="SeaGreen" Grid.Column="0"/>

        <GridSplitter Width="2" ResizeBehavior="PreviousAndNext" Grid.Column="1"/>

        <DockPanel Background="SeaGreen" Grid.Column="2"/>

    </Grid>

    <Grid Height="100" Margin="5">

        <Grid.ColumnDefinitions>

            <ColumnDefinition Width="{Binding Width, ElementName=Column1}"/>

            <ColumnDefinition Width="Auto"/>

            <ColumnDefinition Width="{Binding Width, ElementName=Column2}"/>

        </Grid.ColumnDefinitions>

        <DockPanel Background="SeaGreen" Grid.Column="0"/>

        <GridSplitter Width="2" ResizeBehavior="PreviousAndNext" Grid.Column="1"/>

        <DockPanel Background="SeaGreen" Grid.Column="2"/>

    </Grid>

     

     

    Best Regards,

    Wei Zhou

    Tuesday, April 29, 2008 8:45 AM
  • This is brilliant.  However how do you set the bindings in c# code?
    Tuesday, November 4, 2008 4:01 PM
  • I had the same need, i.e., to freeze row(s) and/or column(s) in a grid, but took a different approach.

    1. Used 4 grids, contained within one larger grid.  The larger grid has 2 rows and 2 columns. First row and column are AUTO-sized.  Second row and second column are STAR-sized.
    2. Wrapped each of the inner grids in a ScrollViewer.
    3. I hid the scrollviewers in Lower left and Upper right corners. 
    4. Bound the height of the LowerLeft scrollviewer to the height of the LowerRight scrollViewer
    5. Bound the Width of the UpperRight scrollviewr to the Width of the LowerRight ScrollViewer
    6. Enabled SharedSizeGroups in the main grid.
    7. Defined columns in UR and LR grid same number of columns, with SharedSizeGroup for each column.
    8. Defined rows in LL and LR grid same number of rows, with SharedSizeGroup for each row.
    9. Added an event handler to the LR ScrollViewer ScrollChanged event.  In the event handler, simply sett the horizontal position of UR scrollviewer to match LR.  And set the vertical position of LL scrollviewer to match LR.


    UL |  UR
    --------
    LL  |  LR

    When done, the scrollbars appear around the LR quadrant, but when you scroll, the other 'fixed' quadrants follow.

    Created AddRow helper methods to add rows to both LL and LR grid and set sharedSizeGroup property.  Added AddColumn helper method that does same thing with columns on UR and LR grids.
    Monday, February 16, 2009 12:43 AM
  • William, your approach sounds good! Do you have a little sample with source code for your solution?
    Friday, September 10, 2010 3:35 PM
  • This is a really great solution but unfortunately, as I've discovered the hard way, if you have more than a certain number of columns (5 to 10) SharedSizeGroup stops working.  You can get all kinds of bizarre behaviour including flickering as the columns continually redraw.

    I experienced this problem with VS2010 and .NET 4 but it's also been reported with VS2008 and .NET 3.5 sp1.

    If anyone's found a solution I'd be very keen to hear it!

    Monday, April 18, 2011 10:28 AM