CODEWITHSUNDEEP
c#wpfxaml
Mwspencer
Mwspencer

Reputation: 1183

Xaml Responsive DataGrid with Scroll Bar

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>

Upvotes: 0

Views: 820

Answers (1)

na th
na th

Reputation: 145

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.

Upvotes: 1

Related Questions