How to create/move grid at specific x,y location?


  • I would like to create multiple instance of Grid in window at different x, y co-ordinates. Each grid could have different height and width. Could any one help or point in right direction how to achieve this?


    I could do this with Canvas, but it will not resize any element, as I would like to add label and buttons within each grid.


    I tried doing with ScaleTransoform and TranslateTransoform as below but this is not working!



    <Window x:Class="WpfApplicationGrid.Window1"
        Title="Window1" Height="Auto" Width="Auto">
        <Grid ShowGridLines="True">
            <!-- Create background grid -->
            <Grid RenderTransformOrigin="0.0,0.0" ShowGridLines="True" Background="Gray" Opacity="0.5">
                    <ScaleTransform ScaleX="1" ScaleY="1"/>
            <!-- Create grid at (0,0) of 50% height and width -->
            <Grid RenderTransformOrigin="0.0,0.0" ShowGridLines="True" Background="Yellow">
                        <ScaleTransform ScaleX="0.50" ScaleY="0.50" />    
                        <TranslateTransform X="0" Y="0" />
            <!-- Create grid at (0.5,0.5) of 50% height and width -->
            <Grid RenderTransformOrigin="0.0,0.0" ShowGridLines="True" Background="Aqua">
                        <ScaleTransform ScaleX="0.50" ScaleY="0.50" />
                        <TranslateTransform X="0.50" Y="0.50" />


    • Edited by dboooooy Tuesday, August 25, 2009 8:46 AM typo
    Tuesday, August 25, 2009 7:55 AM

All replies

  • If you want resize them in runtime you can insert each grid in a ViewBox

    Please mark posts as answers/helpful if it answers your question
    Tuesday, August 25, 2009 10:39 AM
  • Yes, i could use viewbox to scale elements at runtime, but how do i position Grid element at x, y location?

    Tuesday, August 25, 2009 11:14 AM
  • You want to be able to resize the controls automatically based on the space they reside in?  But, you also want to be able to position them manually?

    Sounds to me like this is a combination of Grid and Canvas that does not mix.  I'd try setting up some column and row definitions in your Grid that mock the locations of where you'd place them in a Canvas.  Something like this:

    <Grid Background="Blue">
            <RowDefinition Height="50" />
            <RowDefinition />
            <ColumnDefinition Width="50" />
            <ColumnDefinition />
        <Grid Grid.Row="1" Grid.Column="1" Background="Red" />

    Only problem is the Grid location can't be dynamically changed as easily as just setting Canvas.Left to a new value.
    Tuesday, August 25, 2009 12:05 PM
  • Thanks Nick, 

    Well what i really want to do is 

    1. Create a grid at relative screen coordinates of percentage height and width
    2. In case window is resized - i would like grid to resize as well.

    For example
    Create Grid at (x = 0.50, y = 0.50) which is center of the windows, grid size is (height = 50%, width = 50%). 

    It is same as creaing grid with 2 rows and colums of Star unit lengh, and adding new grid at cell (1, 1) (which i am trying to avoid).

    Is there any way to do these? 

    • Edited by dboooooy Tuesday, August 25, 2009 3:19 PM typo
    Tuesday, August 25, 2009 2:43 PM