CODEWITHSUNDEEP
wpflayoutdatagridtabcontroltabitem
Nick Strupat
Nick Strupat

Reputation: 5063

How do I get a DataGrid to fill a TabItem

I have the following layout

<DockPanel>
    <StackPanel DockPanel.Dock="Top" Orientation="Horizontal" Margin="10">
        ...
    </StackPanel>
    <TabControl>
        <TabItem Header="Summary">
            <DataGrid   ItemsSource="{Binding SummaryData}"
                        CanUserAddRows="False"
                        CanUserDeleteRows="False"
                        IsReadOnly="True"
                        HeadersVisibility="Column"
                        CanUserSortColumns="False" />
        </TabItem>
        ...
    </TabControl>
</DockPanel>

Without the DataGrid, the TabControl and TabItems fill the rest of the container perfectly, but when I add the DataGrid it stretches everything out to display all of the rows and columns.

EDIT: more clarity

I am looking to have the DataGrid stretch veritcally and horizontally to fill the TabItem. If it needs more space, I'd like to have the DataGrid's scrollbars appear.

Upvotes: 1

Views: 5624

Answers (3)

ΩmegaMan
ΩmegaMan

Reputation: 31616

The accepted answer is a work around...

The tab control will expand within its container along with any tab items. By making a grid its container and specifying row/column to be * sized (expanding within window) that will trickle down to datagrid. 

<Grid>
<Grid.ColumnDefinitions>
    <ColumnDefinition Width="15"/>
    <ColumnDefinition Width="*"/>
    <ColumnDefinition Width="15"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
    <RowDefinition Height="15"/>            
    <RowDefinition Height="*"/>
    <RowDefinition Height="10"/> 
    <RowDefinition Height="100"/> 
    <RowDefinition Height="15"/>
</Grid.RowDefinitions>

<TabControl Name="tabOperations" 
            Grid.Row="1"
            Grid.Column="1"
            TabStripPlacement="Top" 
            Margin="0,0,0,4"
            >
    <TabItem Header="Provider Accounts" >
        <DataGrid AutoGenerateColumns="True"
                IsReadOnly="True"
                ItemsSource="{Binding ProviderAccounts}"/>
        </TabItem>
    </TabControl>
<GridSplitter Grid.Row="2"
                Height="3"
                Grid.Column="1"
                HorizontalAlignment="Stretch" />

<TextBox Grid.Row="3" Grid.Column="1"
            TextWrapping="Wrap" Text="{Binding Status}"
            Margin="0,4,0,0"
            />

So regardless of size of the main window, it spans.

Horizontal Sized Vertical Sized

Upvotes: 0

Nick Strupat
Nick Strupat

Reputation: 5063

I got the following to do what I want.

<TabItem Header="Summary" >
    <Grid x:Name="SummaryGrid">
        <DataGrid Height="{Binding ElementName=SummaryGrid, Path=ActualHeight}"
                  ItemsSource="{Binding SummaryData}"
                  CanUserAddRows="False"
                  CanUserDeleteRows="False"
                  IsReadOnly="True"
                  HeadersVisibility="Column"
                  CanUserSortColumns="False" />
    </Grid>
</TabItem>

It works until I change the size of the parent panel. The ActualHeight isn't updated. It is good enough for now though.

Upvotes: 1

Sisyphe
Sisyphe

Reputation: 4684

Is it the kind of behavior you are looking for ?

<DockPanel>
    <StackPanel DockPanel.Dock="Top" Orientation="Horizontal" Margin="10">
        <TextBox Text="tttt" />
    </StackPanel>
    <TabControl VerticalAlignment="Top" HorizontalAlignment="Left">
        <TabItem Header="Summary">
            <DataGrid CanUserAddRows="False"
                      CanUserDeleteRows="False"
                      IsReadOnly="True"
                      HeadersVisibility="Column"
                      CanUserSortColumns="False">
                <DataGrid.Columns>
                    <DataGridTextColumn Header="Column 1" Binding="{Binding}"></DataGridTextColumn>
                </DataGrid.Columns>
                <sys:String>Entry</sys:String>
            </DataGrid>
        </TabItem>
    </TabControl>
</DockPanel>

By setting those alignments you will have the DataGrid stretch to the available space in the TabItem. but I'm not sure that's exactly waht you are looking for.

You can play with VerticalAlignment and HorizontalAlignment to get exactly what you need. (setting it to Top/Left/Stretch to get only TabItem, or DataGrid or both stretch the way you want)

Upvotes: 0

Related Questions