locked
Create grid of 2*2 column. RRS feed

  • Question

  • Hi, 

    I have created the grid template to display components in  2*2 form. But when i decrease height of grid it creates the third row.

    I want to restrict from creating third column. Please suggest me the way to achieve this functionality.

    Thank,

     


    C Mahone

    Tuesday, January 8, 2013 12:09 PM

Answers

  • The reason it is labeled "MaximumRowsOrColumns" is:

    - a WrapGrid is a ItemsPanel that performs the layout of Items on behalf of your GridView
    - the WrapGrid assumes an _indefinite_ number of Items [from the ItemsSource] and requires to specify whether they need to flow column after column [Orientation=Vertical] or row per row [Orientation=Horizontal].
    - so it is basically a _either/or_ limitation; the 'unlimited' direction is that one that allows touch navigation or mouse scrolling.

    ---

    In practice, I don't see many options:

    - limit 'logically' your ViewModel ItemsSource to 4 Items at a time: in that case, you loose the touch/scroll since the WrapGrid has only 4 items to display at  time. But then again you could implement your own touch/scroll on the WrapGrid to create a sense of '4 items at a time scroll' ... not evident
    - limit 'physically' the GridView by constraining the 'infinite' dimension using MaxWidth or MaxHeight on the <GridView .... Simple but evidently depending on the size of your inner GridView Items [if they are fixed width/height, that's not too bad]
    - create a UserControl to display as single Item in the GridView that contains 4 Items [0-3;4-7;etc.] and set "MaximumRowsOrColumns" = 1. Not evident when the ItemsSource collection has items added or removed.
    - use "GridView GroupStyle" to create groups containing 4 items at a time. Again not evident when the ItemsSource collection has items added or removed.

    Wednesday, January 9, 2013 8:21 AM

All replies

  • Hi Mahone,

    Could u update the Snippet to show how your grid template has been implemented?

    Thanks,


    sankar

    Tuesday, January 8, 2013 12:44 PM
  • Here's  grid 2x2 in XAML.

        <Grid>
            <Grid.RowDefinitions>
                <RowDefinition Height="*"/>
                <RowDefinition Height="*"/>
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*" />
                <ColumnDefinition Width="*" />
            </Grid.ColumnDefinitions>
            <Rectangle Grid.Row="0" Grid.Column="0" Fill="AliceBlue"/>
            <Rectangle Grid.Row="0" Grid.Column="1" Fill="Blue"/>
            <Rectangle Grid.Row="1" Grid.Column="0" Fill="Blue"/>
            <Rectangle Grid.Row="1" Grid.Column="1" Fill="AliceBlue"/>
        </Grid>

    • Proposed as answer by sankarann Tuesday, January 8, 2013 12:51 PM
    Tuesday, January 8, 2013 12:49 PM
  • Here is sample ,

    <GridView ItemsSource="{Binding Source={StaticResource InfoSource}}" ScrollViewer.IsHorizontalScrollChainingEnabled="False" >
                                    <GridView.ItemTemplate>
                                        <DataTemplate>
                                            <Button  Click="Click">
                                             
                                            </Button>
                                        </DataTemplate>
                                    </GridView.ItemTemplate>
                                    <GridView.ItemsPanel>
                                        <ItemsPanelTemplate>
                                            <WrapGrid  ItemWidth="260" Orientation="Vertical" Margin="10,10,0,0" ItemHeight="71" VerticalChildrenAlignment="Center" />
                                        </ItemsPanelTemplate>
                                    </GridView.ItemsPanel>
                                </GridView>


    C Mahone

    Tuesday, January 8, 2013 1:10 PM
  • Thank you Andy,

    Described  answer is to design grid view, but i am intended to add grid element dynamically.

    I have added the sample code above.

    Thanks


    C Mahone

    Tuesday, January 8, 2013 1:15 PM
  • In addition to Andy's Grid solution, consider also limiting the GridView Row count as follows:

    <WrapGrid MaximumRowsOrColumns="2" ...

    Tuesday, January 8, 2013 2:10 PM
  • Thanks for reply ,

    I have added above property to WrapGrid , it almost took me near my requirement but not exactly achieved the functionality.

    When i declare  WrapGrid MaximumRowsOrColumns="2" it is restricting the grid for Rows not the column i want to specifically restrict the number of columns. 

    Could you suggest me how to achieve this requirement ??


    C Mahone

    Wednesday, January 9, 2013 6:50 AM
  • The reason it is labeled "MaximumRowsOrColumns" is:

    - a WrapGrid is a ItemsPanel that performs the layout of Items on behalf of your GridView
    - the WrapGrid assumes an _indefinite_ number of Items [from the ItemsSource] and requires to specify whether they need to flow column after column [Orientation=Vertical] or row per row [Orientation=Horizontal].
    - so it is basically a _either/or_ limitation; the 'unlimited' direction is that one that allows touch navigation or mouse scrolling.

    ---

    In practice, I don't see many options:

    - limit 'logically' your ViewModel ItemsSource to 4 Items at a time: in that case, you loose the touch/scroll since the WrapGrid has only 4 items to display at  time. But then again you could implement your own touch/scroll on the WrapGrid to create a sense of '4 items at a time scroll' ... not evident
    - limit 'physically' the GridView by constraining the 'infinite' dimension using MaxWidth or MaxHeight on the <GridView .... Simple but evidently depending on the size of your inner GridView Items [if they are fixed width/height, that's not too bad]
    - create a UserControl to display as single Item in the GridView that contains 4 Items [0-3;4-7;etc.] and set "MaximumRowsOrColumns" = 1. Not evident when the ItemsSource collection has items added or removed.
    - use "GridView GroupStyle" to create groups containing 4 items at a time. Again not evident when the ItemsSource collection has items added or removed.

    Wednesday, January 9, 2013 8:21 AM