1. Home
  2. Forum
  3. WPF
  4. Automatically Resize Grid When Window Resizes

Automatically Resize Grid When Window Resizes

I was wondering if there was anyway to automatically resize the gridcontrol when the window size changes.

This is my xaml code:

<DockPanel LastChildFill="True">
        <Canvas x:Name="canvas" Margin="0,61,0.4,87.8">
            <ScrollViewer CanContentScroll="True"
                          HorizontalScrollBarVisibility="Auto"
                          VerticalScrollBarVisibility="Auto"
                          Width="{Binding ActualWidth, ElementName=canvas}" Height="{Binding ActualHeight, ElementName=canvas}">
                <syncfusion:GridControl Name="grid" Width="{Binding ActualWidth, ElementName=canvas}" Height="{Binding ActualHeight, ElementName=canvas}" />
            </ScrollViewer>
        </Canvas> 
    </DockPanel>

Here is my code behind:

public partial class MainWindow : Window
    {
        private int rows = 10;
        private int columns = 10;
        public MainWindow()
        {
            InitializeComponent();
            configureGrid();
        }


        // Help Functions
        private void configureGrid()
        {
            // Setting the number of rows and columns.
            grid.Model.RowCount = rows;
            grid.Model.ColumnCount = columns;
            // Setting the width and height of the cells.
            grid.Model.RowHeights.DefaultLineSize = 50;
            grid.Model.ColumnWidths.DefaultLineSize = 50;
            // Setting the background of the grid.
            setGridBackgroundImage();
            // Disabling column and row resizing.
            IMouseController controller = grid.MouseControllerDispatcher.Find("ResizeRowsMouseController");
            grid.MouseControllerDispatcher.Remove(controller);
            controller = grid.MouseControllerDispatcher.Find("ResizeColumnsMouseController");
            grid.MouseControllerDispatcher.Remove(controller);
            // Configuring headers
            configureHeaders();
            grid.Model.QueryCellInfo += new Syncfusion.Windows.Controls.Grid.GridQueryCellInfoEventHandler(Model_QueryCellInfo);
        }        

        private void setGridBackgroundImage()
        {
            CellSpanBackgroundInfo item = new CellSpanBackgroundInfo(1, 1, rows, columns);
            item.Background = new ImageBrush(CreateBitMapImage("W:\\dhines\\douglas-jammer-overwatch\\DouglasJammerOverwatch\\bin\\Debug\\blueprint_pdf_to_jpg.jpg"));
            grid.Model.CellSpanBackgrounds.Add(item);
        }

        private void configureHeaders()
        {
            grid.Model.RowHeights[0] = 25;
            grid.Model.ColumnWidths[0] = 25;
            grid.Model.HeaderStyle.Background = new SolidColorBrush(Colors.NavajoWhite);
        }

        void Model_QueryCellInfo(object sender, GridQueryCellInfoEventArgs e)
        {
            if (e.Cell.RowIndex == 0 && e.Cell.ColumnIndex > 0)
            {
                e.Style.Text = GridRangeInfo.GetAlphaLabel(e.Cell.ColumnIndex);
                e.Style.HorizontalAlignment = HorizontalAlignment.Center;
                e.Style.VerticalAlignment = VerticalAlignment.Center;
            }
            else if (e.Cell.RowIndex > 0 && e.Cell.ColumnIndex == 0)
            {
                e.Style.Text = e.Cell.RowIndex.ToString();
                e.Style.HorizontalAlignment = HorizontalAlignment.Center;
                e.Style.VerticalAlignment = VerticalAlignment.Center;
            }
        }

        private BitmapImage CreateBitMapImage(string imageName)
        {
            BitmapImage image = new BitmapImage();
            image.BeginInit();
            image.CacheOption = BitmapCacheOption.OnLoad;
            image.UriSource = new Uri(imageName);
            image.EndInit();
            return image;
        }

    }

Thanks for any help.

3 Replies
KB Kanimozhi Bharathi Syncfusion Team September 12, 2016 12:40 PM UTC

Hi David,  

We have created a sample with your code example and checked by resizing the window,  the GridControl automatically resizes with the window. Please find the sample link for your reference.  


If the above stated solution is not your requirement, then could you please explain us about your requirement clearly whether you want to resize the column and row while resizing the window  or if there is any issue in resizing the GridControl?   

Regards 
Kanimozhi B 


DA David September 12, 2016 06:47 PM UTC

Hi Kanimozhi B,

Thanks for your reply and the sample you provided. I'm not too sure if I explained my requirement in the best way.

Basically the way it will work is the client will provide an image. This image is sort of like a blueprint or a topographical representation of a site. The client will also provide dimensions. For example they will specify the width and length of the image. For example the image would represent a site that would be 200 feet wide and 100 feet high. They will then also specify the dimensions for each cell. For example they would want the cells to represent an area of 10 feet wide by 10 feet high. From here we will determine how many rows and columns would be needed. In this scenario we would need 20 columns (image is 200 feet wide and cell width is 10 feet, 200/10 = 20) and 10 rows (image is 100 feet high and cell height is 10 feet, 100/10 = 10). In this application we have the grid control nested inside of a canvas control which covers around 80% of the screen. The grid control needs to be bound to the height and width of the canvas. So if the window resizes the grids rows and columns resize to the dimensions of the canvas. Basically we want the grid to cover the width and height of the canvas and to resize along with it. So in this example the grid will always have 20 columns and 10 rows even when the size of the grid control is being changed, based on the height and width of the canvas control.

KB Kanimozhi Bharathi Syncfusion Team September 13, 2016 10:55 AM UTC

Hi David, 

We have analyzed your query and prepared a sample based on your requirement by invoking SizeChanged Event of GridControl and setting the height and width for the rows/columns. Please find the sample link for your reference. 



Regards 
Kanimozhi B 


Loader.
Up arrow icon