Search code examples
wpfxaml

Apply Material Design to FilterDataGrid on a WPF project

I am using Material Design and DataGridFilter

I am trying to apply the Material Design to the DataGridFilter Headers, and I am sort-of able to apply it by doing this;

            <fdg:FilterDataGrid x:Name="MainDataGrid" Grid.Row="0" AutoGenerateColumns="False" IsReadOnly="True" SelectionChanged="DataGrid_SelectionChanged" SelectionMode="Single" ItemsSource="{Binding LoadedNcrs}" FilterPopupBackground="White" Style="{StaticResource FilterDatagridStyle}">
                <fdg:FilterDataGrid.Resources>
                    <Style TargetType="{x:Type DataGridColumnHeader}" BasedOn="{StaticResource MaterialDesignDataGridColumnHeader}" />
                </fdg:FilterDataGrid.Resources>
                <fdg:FilterDataGrid.Columns>
                    <fdg:DataGridTextColumn Header="Record ID" Binding="{Binding ID, Mode=OneWay}" SortDirection="Descending" IsColumnFiltered="True" />
                    <fdg:DataGridTextColumn Header="Status" Binding="{Binding Status, Mode=OneWay}" IsColumnFiltered="True" />
                    <fdg:DataGridTextColumn Header="Client" Binding="{Binding ClientCode, Mode=OneWay}" IsColumnFiltered="True" />
                    <fdg:DataGridTextColumn Header="Order Number" Binding="{Binding OrderNumber, Mode=OneWay}" IsColumnFiltered="True" />
                    <fdg:DataGridTextColumn Header="Raised By" Binding="{Binding RaisedBy, Mode=OneWay}"  IsColumnFiltered="True" />
                    <fdg:DataGridTextColumn Header="Raised On" Binding="{Binding DateRaised, Mode=OneWay}" IsColumnFiltered="True" />
                </fdg:FilterDataGrid.Columns>
            </fdg:FilterDataGrid>

However, that results in this;

The Result

The filter button "pushes" away the text and hides it.

My skills with styling are fairly limited.

How can I solve this? I have tried to simply make the header transparent without mixing in Material Design - but that resulted in the sorting indicator to disappear.

Solution

  • Turns out the solution was very simple

    <Style TargetType="{x:Type DataGridColumnHeader}" BasedOn="{StaticResource MaterialDesignDataGridColumnHeader}">
 <Setter Property="HorizontalContentAlignment" Value="Stretch" />
</Style>

    Credit goes to the author of DataGridFilter answered here.