CODEWITHSUNDEEP
wpfxamlgrid-layout
user3156570
user3156570

Reputation: 51

How can I fill all the space in a datagrid text column header with a grid?

I'm incredibly new to wpf, and I'm having trouble with some formatting in my column headers. I want to have a Textblock with my title, and a button in my header that will eventually be a filter function. What I've written so far:

<DataGrid ItemsSource="{Binding diagrams}" SelectedItem="{Binding selectedDiagram, Mode=TwoWay}" AutoGenerateColumns="False" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="0,25,0,0" Height="450" Width="746">
        <DataGrid.Columns>
            <DataGridTextColumn Width="Auto" CanUserReorder="True" CanUserResize="True" CanUserSort="True" Binding="{Binding iD}">
                <DataGridTextColumn.Header>
                    <Grid>                         # <--Problems in here
                        <Grid.ColumnDefinitions>   #
                            <ColumnDefinition/>    #
                            <ColumnDefinition/>    #
                        </Grid.ColumnDefinitions>  #
                        <TextBlock Text="ID" HorizontalAlignment="Left" Grid.Column="0"/>
                        <Button Content="^" HorizontalAlignment="Right" Grid.Column="1"/>
                    </Grid>
                </DataGridTextColumn.Header>
            </DataGridTextColumn>
            <DataGridTextColumn Header="Description" Width="Auto" CanUserReorder="True" CanUserResize="True" CanUserSort="True" Binding="{Binding description}"/>
            <DataGridTextColumn Header="Date Changed" Width="Auto" CanUserReorder="True" CanUserResize="True" CanUserSort="True" Binding="{Binding dateChanged}"/>
            <DataGridTextColumn Header="Created By" Width="Auto" CanUserReorder="True" CanUserResize="True" CanUserSort="True" Binding="{Binding createdBy}"/>
            <DataGridTextColumn Header="Type" Width="Auto" CanUserReorder="True" CanUserResize="True" CanUserSort="True" Binding="{Binding type}"/>
        </DataGrid.Columns>
    </DataGrid>

ends up with the grid only taking up the minimum required space and having the title and button directly side by side. As you may have guessed from my alignment in the textblock and button I want them on opposite sides of the column header, or at least somewhat apart.

I realised that the grid can't be star sized to fill the available space, and neither can a stackpanel or dockpanel (my instincts tell me I've gotten something fundementally wrong with that idea, but again I am a total newb)

I can't really dictate a standard size for the header or grid, as the text filling the column can be of greatly varying lengths and despite my best efforts I still can't find a way to force the grid to fill the empty space. Can anyone can help? Preferably using small words?

Upvotes: 5

Views: 4043

Answers (3)

Locke
Locke

Reputation: 1165

I have a slightly improved answer, which helped me out and is MUCH simpler/cleaner.

On the Column, set the HeaderStyle... For your example, it would be as follows:

                                        <DataGridTextColumn.HeaderStyle>
                                            <Style TargetType="{x:Type DataGridColumnHeader}">
                                                <Setter Property="HorizontalContentAlignment" Value="Stretch" />
                                            </Style>
                                        </DataGridTextColumn.HeaderStyle>

No template necessary and it'll stretch to fill.

Upvotes: 7

yo chauhan
yo chauhan

Reputation: 12315

I dont think this will work directly .Try it using style and Binding the width of Grid like

DataGridColumnHeader Style

<Style x:Key="StarLengthHeader" TargetType="{x:Type DataGridColumnHeader}">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type DataGridColumnHeader}">
                    <Grid Width="{TemplateBinding Width}">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="Auto"/>
                            <ColumnDefinition Width="*"/>
                            <ColumnDefinition Width="Auto"/>
                        </Grid.ColumnDefinitions>
                        <TextBlock Text="ID" HorizontalAlignment="Left" Grid.Column="0"/>
                        <Button Content="^"  HorizontalContentAlignment="Left" HorizontalAlignment="Right" Grid.Column="2"/>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

DataGridColumnHeader

 <DataGridTextColumn HeaderStyle="{StaticResource StarLengthHeader}"  Width="*" CanUserReorder="True" CanUserResize="True" CanUserSort="True" Binding="{Binding iD}" />

I hope this will be hepfull.

Output

Output

Upvotes: 1

Mashton
Mashton

Reputation: 6415

Have you tried using the grid for layout by adding a middle column that will handle the resizing?

<Grid.ColumnDefinitions>
  <ColumnDefinition Width="Auto"/>
  <ColumnDefinition Width="*"/>
  <ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>

Then position your textblock in column 0 and your button in column 2

EDIT: Although I appreciate this may not work as I've had all sorts of fun with DataGrids and trying to size the columns ...

Upvotes: 0

Related Questions