WPF - First datagrid of two, max height

Question

I am trying to create a UserControl that can be use like a frozingDatagrid for row (cause there is no one by default). My UserControl is basic :

<UserControl ..>
   <Grid>
       <Grid.RowDefinitions>
           <RowDefinition Height="auto" />
           <RowDefinition Height="*"/>
       </Grid.RowDefinitions>

       <Datagrid Name="Frozen" Grid.Row="0" MaxHeight="{Binding Height, RelativeSource={RelativeSource FindAncestor, AncestorLevel=1, AncestorType={x:Type UserControl}}}" ... />
       <Datagrid Name="Normal" Grid.Row="1" ... />
   </Grid>

I want the scroll option only for the Normal datagrid, except if the Frozen datagrid height exceed the height of the user control. For now the Frozen datagrid his expend for all items he contains.

EDIT :

I am able to get the result you have with your example.

But when i resize my window smaller if the frozen part become cut and no scroll bar appear. I thought that put MaxHeight property would be good, but its like the style apply before the control is generate on screen so UserControl doesn't have a heigth. So its set MaxHeight to NaN and my datagrid is longer then my control so I miss data.

Thanks

Sory would like to add image to help, but i dont have enought rep.... =( — Northik
You can still upload your image to some image host, and add a link in your question. — qqbenq

qqbenq qqbenq · Accepted Answer · 2014-09-18T16:01:24

I think you are after something like this (But with DataGrids instead of simple TextBlocks - I currenty only have access to Kaxaml, but the basic idea is the same):

frozen vs normal

Here is the XAML for that (without the full lorem ipsum part):

<Grid x:Name="grid" Height="400" Width="350">
       <Grid.RowDefinitions>
           <RowDefinition Height="auto" />
           <RowDefinition x:Name="normalRow" Height="*"/>
       </Grid.RowDefinitions>

       <TextBlock x:Name="Frozen" Grid.Row="0" 
                  MaxHeight="{Binding Path=Height, ElementName=grid}" 
                  Background="LightBlue" TextWrapping="Wrap" Padding="5">
           Lorem ipsum dolor...
       </TextBlock>

       <ScrollViewer x:Name="Normal" Grid.Row="1" 
                     MaxHeight="{Binding Path=Height, ElementName=normalRow}" >
           <TextBlock Margin="5" TextWrapping="Wrap">
               Lorem ipsum dolor...
           </TextBlock>
       </ScrollViewer>
</Grid>

The main idea is to name the RowDefinition, and bind the "Normal" part's Height to it's Height property, while binding the first row's MaxHeight to the Height of the Grid.

A common "trick" I often use: name your UserControl (e.g.: x:Name="Instance"), that way you can easily bind to it's properties, in this case the Width and Height of the outermost Grid control.

Update:

The problem that the content of the first row gets cut if you size the control to a small enough size could be fixed by introducing a MaxHeight to that RowDefinition, and binding it to the Height of the Grid itself, but unfortunately it seems that setting a RowDefinition's Heigth to Auto causes it to disregard any MaxHeight setting (see this question)...

But here is a workaround:

<UserControl x:Name="instance">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition x:Name="normalRow" Height="*"/>
        </Grid.RowDefinitions>

        <ScrollViewer x:Name="Frozen" Grid.Row="0" 
                     ScrollViewer.VerticalScrollBarVisibility="Auto"
                     MaxHeight="{Binding ElementName=instance, Path=Height}">
            <TextBlock x:Name="test" Background="LightBlue" TextWrapping="Wrap" Padding="5" >
               Lorem ipsum dolor ...
            </TextBlock>
        </ScrollViewer>

        <ScrollViewer x:Name="Normal" Grid.Row="1" 
                     ScrollViewer.VerticalScrollBarVisibility="Auto"
                     MaxHeight="{Binding Path=Height, ElementName=normalRow}" >
            <TextBlock Margin="5" TextWrapping="Wrap">
               Lorem ipsum dolor ...
            </TextBlock>
        </ScrollViewer>
    </Grid>
</UserControl>

The trick is to bind the first column's content's MaxHeight to the Height of the UserControl.

Of course in your case the ScrollViewers are not really needed as the DataGrid has built-in scrollbars, but I hope you get the idea.

WPF - First datagrid of two, max height

1 Answers