Skip to main content
Home Forums Silverlight Programming Silverlight Controls and Silverlight Toolkit How to set DataGrid height inside a tabitem
2 replies. Latest Post by anilgv on November 6, 2009.
(0)
anilgv
Member
10 points
12 Posts
11-06-2009 1:44 PM |
I have a TabItem under which I have placed a DataGrid control.
My xaml looks like:
<controls:TabItem x:Name="ViewEvent" Header="View Event"> <data:DataGrid x:Name="EventGrid" AutoGenerateColumns="False" RowHeight="30" LoadingRow="loadRowEvent" Height="400" > <data:DataGrid.Columns> <data:DataGridTextColumn Binding="{Binding Domain}" Header="Domain"/> <data:DataGridTextColumn Binding="{Binding EventId}" Header="Event ID"/> </data:DataGrid.Columns> </data:DataGrid> </controls:TabItem>
For the datagrid whatever height I am setting only that much height is occupied in tab item and the remaining is left unoccupied.
For example, I had set the datagrid height to 400 only half the tab item space is occupied with the data grid and the remaining space to the bottom of browser is left empty.
If I don't give any height for the datagrid, when the datagrid gets populated with the data, it overruns the webpage and also no horizontal and vertical scroll bars are visible.
What needs to be done so that datagrid expands to the maximum available space of the tabitem, instead of hardcoding the height?
Thank you.
Cleon26
392 points
111 Posts
11-06-2009 3:53 PM |
Have you adjusted the styles for the TabControl or TabItem or DataGrid? By default, it should be behaving as you wish.I tried this quick project using sample data from Blend and it worked fine. Make sure that if you have changed the styles at all you set these properties (on the TabControl, the TabItem, and the DataGrid)...HorizontalAlignment="Stretch"HorizontalContentAlignment="Stretch"VerticalAlignment="Stretch"VerticalContentAlignment="Stretch"<Grid x:Name="LayoutRoot" Background="PaleGoldenrod"> <controls:TabControl BorderBrush="Red" Margin="10" HorizontalAlignment="Stretch" HorizontalContentAlignment="Stretch" VerticalAlignment="Stretch" VerticalContentAlignment="Stretch"> <controls:TabItem Header="TabItem" HorizontalAlignment="Stretch" HorizontalContentAlignment="Stretch" VerticalAlignment="Stretch" VerticalContentAlignment="Stretch"> <data:DataGrid BorderBrush="Green" DataContext="{Binding Source={StaticResource SampleDataSource}}" ItemsSource="{Binding Collection, Mode=OneWay}" HorizontalAlignment="Stretch" HorizontalContentAlignment="Stretch" VerticalAlignment="Stretch" VerticalContentAlignment="Stretch" RowHeight="30"> </data:DataGrid> </controls:TabItem> </controls:TabControl></Grid>
11-06-2009 4:30 PM |
It is working now after making the LayoutRoot grid row that contains the "TabControl" as star sized (ex: 400*).
Now I am able to see the datagrid to the max extent of the tabitem.
FYI, now it is working even without using the following properties (at any of the TabControl, TabItem, DataGrid).HorizontalAlignment="Stretch"HorizontalContentAlignment="Stretch"VerticalAlignment="Stretch"VerticalContentAlignment="Stretch"
How to set DataGrid height inside a tabitem