Loading 2 DataGrids + StackPanel with ScrollViewer Taking too long, Alternatives?










0















I have 3 content items, two DataGrid and a StackPanel that all need to scroll together in a WPF application. Everything works OK with ScrollViewer as long as I only have a small dataset, but when I get to 500 rows with 150 columns, it lags for about 8 seconds before drawing the screen. After reading this: Unreasonable WPF DataGrid Loading Time I disabled the ScrollViewer and it loaded in just 2.5 seconds.



<ScrollViewer CanContentScroll="True"
HorizontalScrollBarVisibility="Visible"
VerticalScrollBarVisibility="Visible">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="20" />
<RowDefinition Height="22" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<DataGrid x:Name="DataGridViewHeader" CellEditEnding="ColumnNameUpdate" Grid.Row="0" HeadersVisibility="None" HorizontalAlignment="Stretch" Margin="0,0,0,0" VerticalAlignment="Stretch" ItemsSource="Binding" CurrentCellChanged="DataGridCellChange" Grid.Column="0" DataGridCell.Selected="DataGrid_GotFocus" />
<StackPanel Orientation="Horizontal" VerticalAlignment="Top" Name="ComboBoxPanel" Grid.Row="1" Margin="0,0,0,0" HorizontalAlignment="Left" >

</StackPanel>

<DataGrid x:Name="DataGridView" Grid.Row="2" HeadersVisibility="None" HorizontalAlignment="Stretch" Margin="0,0,0,0" VerticalAlignment="Stretch" ItemsSource="Binding" CurrentCellChanged="DataGridCellChange" Grid.Column="0"/>

</Grid>
</ScrollViewer>


The trouble is, that the ScrollViewer offers the following layout, which allows me to rename columns at the top, use a dropdown on the second row to select DataType of that column and then shows the data. With 150 columns, they have to all stay lined up, but performance is taking a huge hit.



While I realize that ScrollViewer is an easy solution, is there a better way when taking performance into account?



Layout Preview










share|improve this question
























  • My suggestion would be to use Paging on Datagrid to show minimum of 20 records. Now if user needs to search a particular record, you can provide a text filer above the grid, where the record will displayed instantly.

    – Satish Pai
    Nov 15 '18 at 16:41











  • It is a good suggestion, but not ideal. I am building a universal binary database parser youtube.com/watch?v=OMeghA82kSk and sometimes the records that help you identify the column and datatype are not visible in the first 100 or so records. I have updated my GUI to allow you to use sliders to select how many records to pull, but still would love to fix this performance issue if possible.

    – Alan
    Nov 15 '18 at 16:52











  • reasonable solution will be to have only one DataGird instead of all 2 DataGrids+StackPanel inside ScrollViewer. Retemplate DataGrid headers so each of them includes dropdown

    – ASh
    Nov 15 '18 at 18:32











  • Thanks ASh, that was what I wanted, but couldn't make headway with that when I tried here: stackoverflow.com/questions/53288632/…, here: stackoverflow.com/questions/53272634/…, or here: stackoverflow.com/questions/53215418/… So I ended up with this method

    – Alan
    Nov 15 '18 at 20:41















0















I have 3 content items, two DataGrid and a StackPanel that all need to scroll together in a WPF application. Everything works OK with ScrollViewer as long as I only have a small dataset, but when I get to 500 rows with 150 columns, it lags for about 8 seconds before drawing the screen. After reading this: Unreasonable WPF DataGrid Loading Time I disabled the ScrollViewer and it loaded in just 2.5 seconds.



<ScrollViewer CanContentScroll="True"
HorizontalScrollBarVisibility="Visible"
VerticalScrollBarVisibility="Visible">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="20" />
<RowDefinition Height="22" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<DataGrid x:Name="DataGridViewHeader" CellEditEnding="ColumnNameUpdate" Grid.Row="0" HeadersVisibility="None" HorizontalAlignment="Stretch" Margin="0,0,0,0" VerticalAlignment="Stretch" ItemsSource="Binding" CurrentCellChanged="DataGridCellChange" Grid.Column="0" DataGridCell.Selected="DataGrid_GotFocus" />
<StackPanel Orientation="Horizontal" VerticalAlignment="Top" Name="ComboBoxPanel" Grid.Row="1" Margin="0,0,0,0" HorizontalAlignment="Left" >

</StackPanel>

<DataGrid x:Name="DataGridView" Grid.Row="2" HeadersVisibility="None" HorizontalAlignment="Stretch" Margin="0,0,0,0" VerticalAlignment="Stretch" ItemsSource="Binding" CurrentCellChanged="DataGridCellChange" Grid.Column="0"/>

</Grid>
</ScrollViewer>


The trouble is, that the ScrollViewer offers the following layout, which allows me to rename columns at the top, use a dropdown on the second row to select DataType of that column and then shows the data. With 150 columns, they have to all stay lined up, but performance is taking a huge hit.



While I realize that ScrollViewer is an easy solution, is there a better way when taking performance into account?



Layout Preview










share|improve this question
























  • My suggestion would be to use Paging on Datagrid to show minimum of 20 records. Now if user needs to search a particular record, you can provide a text filer above the grid, where the record will displayed instantly.

    – Satish Pai
    Nov 15 '18 at 16:41











  • It is a good suggestion, but not ideal. I am building a universal binary database parser youtube.com/watch?v=OMeghA82kSk and sometimes the records that help you identify the column and datatype are not visible in the first 100 or so records. I have updated my GUI to allow you to use sliders to select how many records to pull, but still would love to fix this performance issue if possible.

    – Alan
    Nov 15 '18 at 16:52











  • reasonable solution will be to have only one DataGird instead of all 2 DataGrids+StackPanel inside ScrollViewer. Retemplate DataGrid headers so each of them includes dropdown

    – ASh
    Nov 15 '18 at 18:32











  • Thanks ASh, that was what I wanted, but couldn't make headway with that when I tried here: stackoverflow.com/questions/53288632/…, here: stackoverflow.com/questions/53272634/…, or here: stackoverflow.com/questions/53215418/… So I ended up with this method

    – Alan
    Nov 15 '18 at 20:41













0












0








0


1






I have 3 content items, two DataGrid and a StackPanel that all need to scroll together in a WPF application. Everything works OK with ScrollViewer as long as I only have a small dataset, but when I get to 500 rows with 150 columns, it lags for about 8 seconds before drawing the screen. After reading this: Unreasonable WPF DataGrid Loading Time I disabled the ScrollViewer and it loaded in just 2.5 seconds.



<ScrollViewer CanContentScroll="True"
HorizontalScrollBarVisibility="Visible"
VerticalScrollBarVisibility="Visible">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="20" />
<RowDefinition Height="22" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<DataGrid x:Name="DataGridViewHeader" CellEditEnding="ColumnNameUpdate" Grid.Row="0" HeadersVisibility="None" HorizontalAlignment="Stretch" Margin="0,0,0,0" VerticalAlignment="Stretch" ItemsSource="Binding" CurrentCellChanged="DataGridCellChange" Grid.Column="0" DataGridCell.Selected="DataGrid_GotFocus" />
<StackPanel Orientation="Horizontal" VerticalAlignment="Top" Name="ComboBoxPanel" Grid.Row="1" Margin="0,0,0,0" HorizontalAlignment="Left" >

</StackPanel>

<DataGrid x:Name="DataGridView" Grid.Row="2" HeadersVisibility="None" HorizontalAlignment="Stretch" Margin="0,0,0,0" VerticalAlignment="Stretch" ItemsSource="Binding" CurrentCellChanged="DataGridCellChange" Grid.Column="0"/>

</Grid>
</ScrollViewer>


The trouble is, that the ScrollViewer offers the following layout, which allows me to rename columns at the top, use a dropdown on the second row to select DataType of that column and then shows the data. With 150 columns, they have to all stay lined up, but performance is taking a huge hit.



While I realize that ScrollViewer is an easy solution, is there a better way when taking performance into account?



Layout Preview










share|improve this question
















I have 3 content items, two DataGrid and a StackPanel that all need to scroll together in a WPF application. Everything works OK with ScrollViewer as long as I only have a small dataset, but when I get to 500 rows with 150 columns, it lags for about 8 seconds before drawing the screen. After reading this: Unreasonable WPF DataGrid Loading Time I disabled the ScrollViewer and it loaded in just 2.5 seconds.



<ScrollViewer CanContentScroll="True"
HorizontalScrollBarVisibility="Visible"
VerticalScrollBarVisibility="Visible">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="20" />
<RowDefinition Height="22" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<DataGrid x:Name="DataGridViewHeader" CellEditEnding="ColumnNameUpdate" Grid.Row="0" HeadersVisibility="None" HorizontalAlignment="Stretch" Margin="0,0,0,0" VerticalAlignment="Stretch" ItemsSource="Binding" CurrentCellChanged="DataGridCellChange" Grid.Column="0" DataGridCell.Selected="DataGrid_GotFocus" />
<StackPanel Orientation="Horizontal" VerticalAlignment="Top" Name="ComboBoxPanel" Grid.Row="1" Margin="0,0,0,0" HorizontalAlignment="Left" >

</StackPanel>

<DataGrid x:Name="DataGridView" Grid.Row="2" HeadersVisibility="None" HorizontalAlignment="Stretch" Margin="0,0,0,0" VerticalAlignment="Stretch" ItemsSource="Binding" CurrentCellChanged="DataGridCellChange" Grid.Column="0"/>

</Grid>
</ScrollViewer>


The trouble is, that the ScrollViewer offers the following layout, which allows me to rename columns at the top, use a dropdown on the second row to select DataType of that column and then shows the data. With 150 columns, they have to all stay lined up, but performance is taking a huge hit.



While I realize that ScrollViewer is an easy solution, is there a better way when taking performance into account?



Layout Preview







wpf datagrid scrollview scrollbar






share|improve this question















share|improve this question













share|improve this question




share|improve this question








edited Nov 15 '18 at 20:41







Alan

















asked Nov 15 '18 at 16:25









AlanAlan

839818




839818












  • My suggestion would be to use Paging on Datagrid to show minimum of 20 records. Now if user needs to search a particular record, you can provide a text filer above the grid, where the record will displayed instantly.

    – Satish Pai
    Nov 15 '18 at 16:41











  • It is a good suggestion, but not ideal. I am building a universal binary database parser youtube.com/watch?v=OMeghA82kSk and sometimes the records that help you identify the column and datatype are not visible in the first 100 or so records. I have updated my GUI to allow you to use sliders to select how many records to pull, but still would love to fix this performance issue if possible.

    – Alan
    Nov 15 '18 at 16:52











  • reasonable solution will be to have only one DataGird instead of all 2 DataGrids+StackPanel inside ScrollViewer. Retemplate DataGrid headers so each of them includes dropdown

    – ASh
    Nov 15 '18 at 18:32











  • Thanks ASh, that was what I wanted, but couldn't make headway with that when I tried here: stackoverflow.com/questions/53288632/…, here: stackoverflow.com/questions/53272634/…, or here: stackoverflow.com/questions/53215418/… So I ended up with this method

    – Alan
    Nov 15 '18 at 20:41

















  • My suggestion would be to use Paging on Datagrid to show minimum of 20 records. Now if user needs to search a particular record, you can provide a text filer above the grid, where the record will displayed instantly.

    – Satish Pai
    Nov 15 '18 at 16:41











  • It is a good suggestion, but not ideal. I am building a universal binary database parser youtube.com/watch?v=OMeghA82kSk and sometimes the records that help you identify the column and datatype are not visible in the first 100 or so records. I have updated my GUI to allow you to use sliders to select how many records to pull, but still would love to fix this performance issue if possible.

    – Alan
    Nov 15 '18 at 16:52











  • reasonable solution will be to have only one DataGird instead of all 2 DataGrids+StackPanel inside ScrollViewer. Retemplate DataGrid headers so each of them includes dropdown

    – ASh
    Nov 15 '18 at 18:32











  • Thanks ASh, that was what I wanted, but couldn't make headway with that when I tried here: stackoverflow.com/questions/53288632/…, here: stackoverflow.com/questions/53272634/…, or here: stackoverflow.com/questions/53215418/… So I ended up with this method

    – Alan
    Nov 15 '18 at 20:41
















My suggestion would be to use Paging on Datagrid to show minimum of 20 records. Now if user needs to search a particular record, you can provide a text filer above the grid, where the record will displayed instantly.

– Satish Pai
Nov 15 '18 at 16:41





My suggestion would be to use Paging on Datagrid to show minimum of 20 records. Now if user needs to search a particular record, you can provide a text filer above the grid, where the record will displayed instantly.

– Satish Pai
Nov 15 '18 at 16:41













It is a good suggestion, but not ideal. I am building a universal binary database parser youtube.com/watch?v=OMeghA82kSk and sometimes the records that help you identify the column and datatype are not visible in the first 100 or so records. I have updated my GUI to allow you to use sliders to select how many records to pull, but still would love to fix this performance issue if possible.

– Alan
Nov 15 '18 at 16:52





It is a good suggestion, but not ideal. I am building a universal binary database parser youtube.com/watch?v=OMeghA82kSk and sometimes the records that help you identify the column and datatype are not visible in the first 100 or so records. I have updated my GUI to allow you to use sliders to select how many records to pull, but still would love to fix this performance issue if possible.

– Alan
Nov 15 '18 at 16:52













reasonable solution will be to have only one DataGird instead of all 2 DataGrids+StackPanel inside ScrollViewer. Retemplate DataGrid headers so each of them includes dropdown

– ASh
Nov 15 '18 at 18:32





reasonable solution will be to have only one DataGird instead of all 2 DataGrids+StackPanel inside ScrollViewer. Retemplate DataGrid headers so each of them includes dropdown

– ASh
Nov 15 '18 at 18:32













Thanks ASh, that was what I wanted, but couldn't make headway with that when I tried here: stackoverflow.com/questions/53288632/…, here: stackoverflow.com/questions/53272634/…, or here: stackoverflow.com/questions/53215418/… So I ended up with this method

– Alan
Nov 15 '18 at 20:41





Thanks ASh, that was what I wanted, but couldn't make headway with that when I tried here: stackoverflow.com/questions/53288632/…, here: stackoverflow.com/questions/53272634/…, or here: stackoverflow.com/questions/53215418/… So I ended up with this method

– Alan
Nov 15 '18 at 20:41












1 Answer
1






active

oldest

votes


















0














remove ScrollViewer and add



 VirtualizingStackPanel.IsVirtualizing="True" 
VirtualizingStackPanel.VirtualizationMode = "recycling"
EnableColumnVirtualization = "true"
EnableRowVirtualization = "true"
VirtualizingPanel.IsVirtualizingWhenGrouping="True"
MaxWidth="2560" MaxHeight="1600"





share|improve this answer






















    Your Answer






    StackExchange.ifUsing("editor", function ()
    StackExchange.using("externalEditor", function ()
    StackExchange.using("snippets", function ()
    StackExchange.snippets.init();
    );
    );
    , "code-snippets");

    StackExchange.ready(function()
    var channelOptions =
    tags: "".split(" "),
    id: "1"
    ;
    initTagRenderer("".split(" "), "".split(" "), channelOptions);

    StackExchange.using("externalEditor", function()
    // Have to fire editor after snippets, if snippets enabled
    if (StackExchange.settings.snippets.snippetsEnabled)
    StackExchange.using("snippets", function()
    createEditor();
    );

    else
    createEditor();

    );

    function createEditor()
    StackExchange.prepareEditor(
    heartbeatType: 'answer',
    autoActivateHeartbeat: false,
    convertImagesToLinks: true,
    noModals: true,
    showLowRepImageUploadWarning: true,
    reputationToPostImages: 10,
    bindNavPrevention: true,
    postfix: "",
    imageUploader:
    brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
    contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
    allowUrls: true
    ,
    onDemand: true,
    discardSelector: ".discard-answer"
    ,immediatelyShowMarkdownHelp:true
    );



    );













    draft saved

    draft discarded


















    StackExchange.ready(
    function ()
    StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53323826%2floading-2-datagrids-stackpanel-with-scrollviewer-taking-too-long-alternatives%23new-answer', 'question_page');

    );

    Post as a guest















    Required, but never shown

























    1 Answer
    1






    active

    oldest

    votes








    1 Answer
    1






    active

    oldest

    votes









    active

    oldest

    votes






    active

    oldest

    votes









    0














    remove ScrollViewer and add



     VirtualizingStackPanel.IsVirtualizing="True" 
    VirtualizingStackPanel.VirtualizationMode = "recycling"
    EnableColumnVirtualization = "true"
    EnableRowVirtualization = "true"
    VirtualizingPanel.IsVirtualizingWhenGrouping="True"
    MaxWidth="2560" MaxHeight="1600"





    share|improve this answer



























      0














      remove ScrollViewer and add



       VirtualizingStackPanel.IsVirtualizing="True" 
      VirtualizingStackPanel.VirtualizationMode = "recycling"
      EnableColumnVirtualization = "true"
      EnableRowVirtualization = "true"
      VirtualizingPanel.IsVirtualizingWhenGrouping="True"
      MaxWidth="2560" MaxHeight="1600"





      share|improve this answer

























        0












        0








        0







        remove ScrollViewer and add



         VirtualizingStackPanel.IsVirtualizing="True" 
        VirtualizingStackPanel.VirtualizationMode = "recycling"
        EnableColumnVirtualization = "true"
        EnableRowVirtualization = "true"
        VirtualizingPanel.IsVirtualizingWhenGrouping="True"
        MaxWidth="2560" MaxHeight="1600"





        share|improve this answer













        remove ScrollViewer and add



         VirtualizingStackPanel.IsVirtualizing="True" 
        VirtualizingStackPanel.VirtualizationMode = "recycling"
        EnableColumnVirtualization = "true"
        EnableRowVirtualization = "true"
        VirtualizingPanel.IsVirtualizingWhenGrouping="True"
        MaxWidth="2560" MaxHeight="1600"






        share|improve this answer












        share|improve this answer



        share|improve this answer










        answered Dec 18 '18 at 8:21









        Ghotekar RahulGhotekar Rahul

        134




        134





























            draft saved

            draft discarded
















































            Thanks for contributing an answer to Stack Overflow!


            • Please be sure to answer the question. Provide details and share your research!

            But avoid


            • Asking for help, clarification, or responding to other answers.

            • Making statements based on opinion; back them up with references or personal experience.

            To learn more, see our tips on writing great answers.




            draft saved


            draft discarded














            StackExchange.ready(
            function ()
            StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53323826%2floading-2-datagrids-stackpanel-with-scrollviewer-taking-too-long-alternatives%23new-answer', 'question_page');

            );

            Post as a guest















            Required, but never shown





















































            Required, but never shown














            Required, but never shown












            Required, but never shown







            Required, but never shown

































            Required, but never shown














            Required, but never shown












            Required, but never shown







            Required, but never shown







            這個網誌中的熱門文章

            How to read a connectionString WITH PROVIDER in .NET Core?

            Node.js Script on GitHub Pages or Amazon S3

            Museum of Modern and Contemporary Art of Trento and Rovereto