Xaml Responsive DataGrid with Scroll Bar

Question

I have a grid with a Datagrid attached. I am having issues created a datagrid that resizes as the window resizes. I have set MinHeight and MinWidth, but it just seems to create a static Height and Width. I also have scroll bar set to be visible, but no scroll bar appears?

The closest I've come to responsive design is setting my Height="2300" and Width="2700", but the scroll bar still doesn't appear. And the table I plan to populate my Datagrid with will likely be much bigger than these dimensions, and need scrolling.

I have tried using techniques from other SE questions, but nothing seems to work how I'd expect.

    <!--Grid View Assett Info - Populate Table from DB -->
    <Grid x:Name="grid_AssetView"  VerticalAlignment="Top" Margin="10,236,10,10" Style="{StaticResource Grid_Shadow}">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto"/>
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
        </Grid.RowDefinitions>
        <DataGrid VerticalAlignment="Top" 
                  Margin="0,0,0,0" 
                  Grid.Column="0"  Grid.Row="0" 
                  ScrollViewer.CanContentScroll ="True" 
                  ScrollViewer.VerticalScrollBarVisibility="Auto" 
                  ScrollViewer.HorizontalScrollBarVisibility="Auto" 
                  MinWidth="772" MinHeight="230"/>
    </Grid>

My Style Sheets

        <Style x:Key="Grid_Shadow" TargetType="Grid">
            <Setter Property="Background" Value="#FFF9FBFD"/>
            <Setter Property="BitmapEffect">
                <Setter.Value>
                    <DropShadowBitmapEffect
                        Color="Black"
                        Direction="320"
                        ShadowDepth="10"
                        Softness="50"
                        Opacity="0.1">

                    </DropShadowBitmapEffect>
                </Setter.Value>
            </Setter>
        </Style>

score 1 · Accepted Answer · answered Mar 05 '18 at 17:55

u have to set the ColumnDefinition Width="*" instead of "Auto" as follows

<!--Grid View Assett Info - Populate Table from DB -->
<Grid x:Name="grid_AssetView"  VerticalAlignment="Top" Margin="10,236,10,10" Style="{StaticResource Grid_Shadow}">
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*"/>
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
    </Grid.RowDefinitions>
    <DataGrid VerticalAlignment="Top" 
              Margin="0,0,0,0" 
              Grid.Column="0"  Grid.Row="0" 
              ScrollViewer.CanContentScroll ="True" 
              ScrollViewer.VerticalScrollBarVisibility="Auto" 
              ScrollViewer.HorizontalScrollBarVisibility="Auto" 
               MinHeight="230"/>
</Grid>

then the datagrid will resize automatically. I also removed MinWidth to show that resizing works without problems.

Also the scrollbars will be visible if there are contents.

I hope it helps.

Perfect thanks, so what is Auto used for? I figured I needed Auto first, then if I was to add as second column I would use * to split. — Mwspencer, Mar 05 '18 at 18:33
nevermind I found the answer to that here: https://stackoverflow.com/questions/3164651/what-is-the-different-between-auto-and-when-setting-width-height-for-a-gri — Mwspencer, Mar 05 '18 at 18:36

Xaml Responsive DataGrid with Scroll Bar

1 Answers1