How to change the alignment of the DataGrid Column header

[luni64]

How can I change the alignmnet of the column header of a m:ui datagrid? The default centered alignment doesn't look very nice for broad colums

If I restyle it by something like

<Style TargetType="DataGridColumnHeader">
        <Setter Property="HorizontalContentAlignment" Value="Left"/>
 </Style>

I loose all of the nice m:ui styling for the header. I guess I need to add a BasedOn=XXX in the style definition but how can I refere to the m:ui style?

[FuchsiaSoft]

Try this:

            <DataGrid>
                <DataGrid.ColumnHeaderStyle>
                    <Style TargetType="DataGridColumnHeader" BasedOn="{StaticResource {x:Type DataGridColumnHeader}}">
                        <Setter Property="HorizontalContentAlignment" Value="Left"/>
                    </Style>
                </DataGrid.ColumnHeaderStyle>
                <DataGrid.Columns>
                    <!-- Columns and rest of content here -->
                </DataGrid.Columns>
            </DataGrid>

I did try just doing a derived style with a global scope in App.xaml, but got some strange results.

Generally speaking though deriving from mui styles is pretty straightforward, it's covered in their wiki here: Deriving from MUI styles

EDIT

Further to the above, just re-read the deriving link and there is an explanation for giving styles a global scope:

Now when you move the custom style to App.xaml, the button again is based on the default WPF style and incorrectly rendered. Not sure why this is the case, but to solve this you need to move your custom MUI styles to a separate ResourceDictionary, and reference that ResourceDictionary in your App.xaml

That explains that then! :smiley:

[phoeson]

How to derive a style from ModernDialog style, I tried, but it does not work: <Style TargetType="mui:ModernDialog" BasedOn="{StaticResource {x:Type mui:ModernDialog}}"> <Setter Property="MinWidth" Value="500"></Setter> <Setter Property="MinHeight" Value="300"></Setter> </Style>