WPF DataGrid Children Vertical Scrolling

Question

Hello again everybody!

The first step of my ongoing project has been completed. Now, however, I am presented a new problem inside the XAML structure.

I am trying to figure out how I'd like my data to be best presented. At the moment, I figured playing with the DataGrid would be appropriate, since the binding is powerful and the DataGrid populates items based on my Object List appropriately. However, it seems the vertical scroll bar only appears for the rows overall, rather than the rows inside the Data Columns - and my second data column can have a LONG block of text!

I'm still pretty fresh to the world of WPF, so I appreciate any input! Here is my window XAML code below:

<Window x:Class="_puffDisplay.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:_puffDisplay"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <Grid>
        <ScrollViewer VerticalScrollBarVisibility="Auto">
        <DataGrid Name ="puffCoreView" HorizontalAlignment="Left" Height="400" Margin="10,10,0,0" VerticalAlignment="Top" Width="774" ItemsSource="{Binding}" 
                  IsReadOnly="True"
                  AutoGenerateColumns="False">
            <DataGrid.Columns>
                <DataGridTextColumn Header= "Puff #" Width="350" Binding="{Binding PuffNumber}"/>
                <DataGridTextColumn Header="Puff Data" Width="350" Binding="{Binding Data}" ScrollViewer.VerticalScrollBarVisibility="Visible">

                </DataGridTextColumn>
            </DataGrid.Columns>
        </DataGrid>
        </ScrollViewer>

I need to see how I can allow the user to vertically scroll inside the second column of each row as well as the rows overall. Any suggestions?

score 1 · Accepted Answer · answered Jul 08 '18 at 23:56

1

Instead of a DataGridTextColumn use a DataGridTemplateColumn with a ScrollViewer and TextBlock. Here is one possibility...

            <DataGridTemplateColumn Header="Puff Data" Width="350">
                <DataGridTemplateColumn.CellTemplate>
                    <DataTemplate>
                        <ScrollViewer MaxHeight="100">
                            <TextBlock Text="{Binding Data}" TextWrapping="Wrap"/>
                        </ScrollViewer>
                    </DataTemplate>
                </DataGridTemplateColumn.CellTemplate>
            </DataGridTemplateColumn>

answered Jul 08 '18 at 23:56

AQuirky

4,691
2
32
51

That absolutely did it! Thank you very much. – Kieran Ojakangas Jul 09 '18 at 02:09
Side question: Any suggestion to make each DataGrid Column selectable individually? I was hoping to be able to copy and paste the data from an individual cell, if you know what I mean. – Kieran Ojakangas Jul 09 '18 at 02:10
Use SelectionUnit="Cell" on the DataGrid – AQuirky Jul 09 '18 at 16:46
Thanks man! Also, have you seen this post? https://stackoverflow.com/questions/136435/any-way-to-make-a-wpf-textblock-selectable I tried implementing the suggested code by "Torvin" to make my text in my textblock selectable but so far I don't see the text highlighting. Is this to be expected? – Kieran Ojakangas Jul 15 '18 at 14:48
@KieranOjakangas no I hadn't seen that post. I don't get it. If you want selectable text the obvious approach is to use a Textbox. – AQuirky Jul 15 '18 at 16:08

WPF DataGrid Children Vertical Scrolling

1 Answers1