locked
multible DataGrids in a variable Grid RRS feed

  • Question

  • Hi,

    I have a app which creates multible DataGrids at Runtime. Unfortunately are all the generated grids one below the other.

    When there are more than 3 DataGrids are crated, I'm running out of space at my screen. Now is possible to put the Datagrids in a Grid with x Columns and y Rows (x and y are standing for some ints which should be bound to a codebehind section)? Maybe via CodeBehind?

    Here my xaml:

    <ItemsControl ItemsSource="{Binding Column}" Grid.Row="0" Grid.Column="0">
                        <ItemsControl.ItemTemplate>
                            <DataTemplate>
                               <controlsData:DataGrid  
                               AutoGenerateColumns="False"
                               Width="auto" Height="auto"
                               CanUserResizeColumns="True"
                               ItemsSource="{Binding}"
                               CurrentCellChanged="MainGrid_CurrentCellChanged"/>
                        </DataTemplate>
                        </ItemsControl.ItemTemplate>
                    </ItemsControl>


    Wednesday, July 13, 2011 7:39 AM

Answers

  • That is because you only have one item in the WrapPanel. In order for it to work with the ItemsControl, you must set the ItemsPanel to use the WrapPanel:

        <ItemsControl ItemsSource="{Binding Column}"
            <ItemsControl.ItemsPanel>
                <ItemsPanelTemplate>
                    <toolkit:WrapPanel></toolkit:WrapPanel>
                </ItemsPanelTemplate>
            </ItemsControl.ItemsPanel>
            <ItemsControl.ItemTemplate>
                <DataTemplate>
                        <controlsData:DataGrid  
                               AutoGenerateColumns="False"
                               Width="auto" Height="auto"
                               CanUserResizeColumns="True"
                               ItemsSource="{Binding}"
                               CurrentCellChanged="MainGrid_CurrentCellChanged"/>
                </DataTemplate>
            </ItemsControl.ItemTemplate>
        </ItemsControl>
    Friday, July 15, 2011 10:15 AM

All replies

  • Hey JJR89,

    You could wrap the ItemsControl in a ScrollViewer like such:

        <ScrollViewer>
            <ItemsControl ItemsSource="{Binding Column}" Grid.Row="0" Grid.Column="0">
                <ItemsControl.ItemTemplate>
                    <DataTemplate>
                        <controlsData:DataGrid  
                               AutoGenerateColumns="False"
                               Width="auto" Height="auto"
                               CanUserResizeColumns="True"
                               ItemsSource="{Binding}"
                               CurrentCellChanged="MainGrid_CurrentCellChanged"/>
                    </DataTemplate>
                </ItemsControl.ItemTemplate>
            </ItemsControl>
        </ScrollViewer>

    Another possible solution is to use the WrapPanel from the Silverlight Toolkit (see interactive examples here)

    Thursday, July 14, 2011 12:56 AM
  • Thanks again Shawn :)

    I want them to be in a grid-like alignment, so the scrollview is no solution for me.


    But the wrappanel looks like exactly the solution i was looking for. The only problem: It doesn't work correctly. It seems the wrappanel recognize the generated datagrids as one "object". They are still in the same order.


    <toolkit:WrapPanel Width="2000" Background="Blue"  Orientation="Horizontal">
    <ItemsControl ItemsSource="{Binding Column}" Grid.Row="0" Grid.Column="0">
                        <ItemsControl.ItemTemplate>
                            <DataTemplate>
                               <controlsData:DataGrid  
                               AutoGenerateColumns="False"
                               Width="auto" Height="auto"
                               CanUserResizeColumns="True"
                               ItemsSource="{Binding}"
                               CurrentCellChanged="MainGrid_CurrentCellChanged"/>
                        </DataTemplate>
                        </ItemsControl.ItemTemplate>
                    </ItemsControl>
                    </toolkit:WrapPanel>


    Friday, July 15, 2011 5:00 AM
  • That is because you only have one item in the WrapPanel. In order for it to work with the ItemsControl, you must set the ItemsPanel to use the WrapPanel:

        <ItemsControl ItemsSource="{Binding Column}"
            <ItemsControl.ItemsPanel>
                <ItemsPanelTemplate>
                    <toolkit:WrapPanel></toolkit:WrapPanel>
                </ItemsPanelTemplate>
            </ItemsControl.ItemsPanel>
            <ItemsControl.ItemTemplate>
                <DataTemplate>
                        <controlsData:DataGrid  
                               AutoGenerateColumns="False"
                               Width="auto" Height="auto"
                               CanUserResizeColumns="True"
                               ItemsSource="{Binding}"
                               CurrentCellChanged="MainGrid_CurrentCellChanged"/>
                </DataTemplate>
            </ItemsControl.ItemTemplate>
        </ItemsControl>
    Friday, July 15, 2011 10:15 AM
  • Hi JJR89,

    I was once asked to load several modules on demand using Prism
    region manager in a main shell.xaml...
    the problem was that it soon became obvious
    they wouldn't all fit on screen...
    so I had to find a way to contract | expand them...

    In my case I used Martin Grayson Blacklight DragDockPanelHost and DragDockPanel controls...
    http://mightymeaty.members.winisp.net/blacklight.silverlight/
    this way I could load each module on demand in separate DragDockPanel container region... and
    expand or retract each one as I wished...

    Here's modified style live sample
    http://usfromdhaka.com/shamrat231/t65/


    I assume this method could work just as well in your case with datagrid...

    Ex:

    <blacklight:DragDockPanelHost>
      <blacklight:DragDockPanel Margin="15" Style="{StaticResource DragDockPanelStyle}">
         <Canvas x:Name="myContainer1">
          <sdk:Datagrid .../>   
       <Canvas>
      </blacklight:DragDockPanel>
      <blacklight:DragDockPanel Margin="15" Style="{StaticResource DragDockPanelStyle}">
         <Canvas x:Name="myContainer2">
          <sdk:Datagrid .../>   
       <Canvas>
      </blacklight:DragDockPanel>
    <blacklight:DragDockPanel Margin="15" Style="{StaticResource DragDockPanelStyle}"> 
       <Canvas x:Name="myContainer3">
          <sdk:Datagrid .../>       
       <Canvas> 
    </blacklight:DragDockPanel>
    ....

    <blacklight:DragDockPanelHost>

    If this answer your question please Mark as an answer. Thank you.

    Sunday, July 17, 2011 3:46 PM
  • @Shawn: Thanks, that did it. I will try to study some Silverlight books to get my stuff done without asking silly questions :)


    @MawashiKid: Looks fancy. Thanks for the hint.

    Monday, July 18, 2011 4:32 AM