How to set scrollable bars on xaml grid with textblock

Question

new to XAML, Im trying to set vertical and horizontal scroll bars but they are not appearing. the grid is the following:

                                    <Grid ScrollViewer.HorizontalScrollBarVisibility="Visible">
                                        <Grid.RowDefinitions>
                                            <RowDefinition/>
                                            <RowDefinition/>
                                        </Grid.RowDefinitions>
                                        <Grid.ColumnDefinitions>
                                            <ColumnDefinition Width="110"/>
                                            <ColumnDefinition Width="60"/>
                                            <ColumnDefinition Width="90"/>
                                            <ColumnDefinition Width="60"/>
                                            <ColumnDefinition Width="80"/>
                                            <ColumnDefinition Width="50"/>
                                        </Grid.ColumnDefinitions>

                                        <TextBlock Grid.Row="0" Grid.Column="0" Style="{DynamicResource Resource}" Text="{l:LocText CustomerStats_Last24Hours}"></TextBlock>
                                        <TextBlock Grid.Row="0" Grid.Column="1" Style="{DynamicResource Resource}" Text="{Binding CustomerSummaryStats.Last24Hours.Count}"></TextBlock>
                                        <TextBlock Grid.Row="0" Grid.Column="2" Style="{DynamicResource Resource}" Text="{Binding CustomerSummaryStats.Last24Hours.TotalAmount, StringFormat='{}$ {0:0,0.00}'}"></TextBlock>
                                        <TextBlock Grid.Row="0" Grid.Column="3" Style="{DynamicResource Resource}" Text="{Binding CustomerSummaryStats.Last24Hours.CheckCurrency}"></TextBlock>
                                        <TextBlock Grid.Row="0" Grid.Column="4" Style="{DynamicResource Resource}" Text="{Binding CustomerSummaryStats.Last24Hours.AverageAmount, StringFormat='{}$ {0:0,0.00}'}"></TextBlock>
                                        <TextBlock Grid.Row="0" Grid.Column="5" Style="{DynamicResource Resource}" Text="{Binding CustomerSummaryStats.Last24Hours.Percentage, StringFormat='{}{0:0}%'}"></TextBlock>

                                        <TextBlock Grid.Row="1" Grid.Column="0" Style="{DynamicResource Resource}" Text="{l:LocText CustomerStats_Last7Days}"></TextBlock>
                                        <TextBlock Grid.Row="1" Grid.Column="1" Style="{DynamicResource Resource}" Text="{Binding CustomerSummaryStats.Last7Days.Count}"></TextBlock>
                                        <TextBlock Grid.Row="1" Grid.Column="2" Style="{DynamicResource Resource}" Text="{Binding CustomerSummaryStats.Last7Days.TotalAmount, StringFormat='{}$ {0:0,0.00}'}"></TextBlock>
                                        <TextBlock Grid.Row="1" Grid.Column="3" Style="{DynamicResource Resource}" Text="{Binding CustomerSummaryStats.Last7Days.CheckCurrency}"></TextBlock>
                                        <TextBlock Grid.Row="1" Grid.Column="4" Style="{DynamicResource Resource}" Text="{Binding CustomerSummaryStats.Last7Days.AverageAmount, StringFormat='{}$ {0:0,0.00}'}"></TextBlock>
                                        <TextBlock Grid.Row="1" Grid.Column="5" Style="{DynamicResource Resource}" Text="{Binding CustomerSummaryStats.Last7Days.Percentage, StringFormat='{}{0:0}%'}"></TextBlock>

I tried to do the following:

ScrollViewer.HorizontalScrollBarVisibility="Visible"

On the grid with no avail.

Is there a way to add scrollable bars?

Answer 1

Grid doesn't support that scroll funcionality. For what you want you need to wrap the Grid inside ScrollViewer:

<ScrollViewer HorizontalScrollBarVisibility="Visible">
        <Grid>
            <Grid.RowDefinitions>
                <RowDefinition/>
                <RowDefinition/>
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="110"/>
                <ColumnDefinition Width="60"/>
                <ColumnDefinition Width="90"/>
                <ColumnDefinition Width="60"/>
                <ColumnDefinition Width="80"/>
                <ColumnDefinition Width="50"/>
            </Grid.ColumnDefinitions>

            <TextBlock Grid.Row="0" Grid.Column="0" Style="{DynamicResource Resource}" Text="{l:LocText CustomerStats_Last24Hours}"></TextBlock>
            <TextBlock Grid.Row="0" Grid.Column="1" Style="{DynamicResource Resource}" Text="{Binding CustomerSummaryStats.Last24Hours.Count}"></TextBlock>
            <TextBlock Grid.Row="0" Grid.Column="2" Style="{DynamicResource Resource}" Text="{Binding CustomerSummaryStats.Last24Hours.TotalAmount, StringFormat='{}$ {0:0,0.00}'}"></TextBlock>
            <TextBlock Grid.Row="0" Grid.Column="3" Style="{DynamicResource Resource}" Text="{Binding CustomerSummaryStats.Last24Hours.CheckCurrency}"></TextBlock>
            <TextBlock Grid.Row="0" Grid.Column="4" Style="{DynamicResource Resource}" Text="{Binding CustomerSummaryStats.Last24Hours.AverageAmount, StringFormat='{}$ {0:0,0.00}'}"></TextBlock>
            <TextBlock Grid.Row="0" Grid.Column="5" Style="{DynamicResource Resource}" Text="{Binding CustomerSummaryStats.Last24Hours.Percentage, StringFormat='{}{0:0}%'}"></TextBlock>

            <TextBlock Grid.Row="1" Grid.Column="0" Style="{DynamicResource Resource}" Text="{l:LocText CustomerStats_Last24Hours}"></TextBlock>
            <TextBlock Grid.Row="1" Grid.Column="1" Style="{DynamicResource Resource}" Text="{Binding CustomerSummaryStats.Last7Days.Count}"></TextBlock>
            <TextBlock Grid.Row="1" Grid.Column="2" Style="{DynamicResource Resource}" Text="{Binding CustomerSummaryStats.Last7Days.TotalAmount, StringFormat='{}$ {0:0,0.00}'}"></TextBlock>
            <TextBlock Grid.Row="1" Grid.Column="3" Style="{DynamicResource Resource}" Text="{Binding CustomerSummaryStats.Last7Days.CheckCurrency}"></TextBlock>
            <TextBlock Grid.Row="1" Grid.Column="4" Style="{DynamicResource Resource}" Text="{Binding CustomerSummaryStats.Last7Days.AverageAmount, StringFormat='{}$ {0:0,0.00}'}"></TextBlock>
            <TextBlock Grid.Row="1" Grid.Column="5" Style="{DynamicResource Resource}" Text="{Binding CustomerSummaryStats.Last7Days.Percentage, StringFormat='{}{0:0}%'}"></TextBlock>
        </Grid>
    </ScrollViewer>

Then it will produce this result: