How to change the Datagrid selcted row color and data grid Header Font in UWP xaml

Question

i want to change the data grid selected row color and height of the data grid columns in uwp xaml i am using xamarin forms. after installing the packages from NuGet. i am able to use the data grid. now problem is how to change the data grid column/row height and selected row color in uwp

my data grid xaml code : =

 <controls:DataGrid AutoGenerateColumns="False"    CanUserResizeColumns="False" IsReadOnly="True" Margin="31,21,103,483" Name="UserListView" VerticalScrollBarVisibility="Auto"  UseLayoutRounding="True" HorizontalScrollBarVisibility="Auto" TabIndex="4" FontSize="14" Background="White"  
       HeadersVisibility="Column"   SelectedIndex="0" HorizontalGridLinesBrush="#E1E1E1" IsTabStop="True" RenderTransformOrigin="0.504,0.739" Grid.Row="2" BorderBrush="#E1E1E1" BorderThickness="1" Grid.Column="2" Grid.ColumnSpan="7" >

        <controls:DataGrid.Columns   >

          <controls:DataGridTemplateColumn     CanUserReorder="False" CanUserResize="False" Width="50" x:Name="userCheckBox" >
                <controls:DataGridTemplateColumn.CellTemplate >
                    <DataTemplate>
                        <CheckBox  Foreground="#444444" Height="10" Width="10" Margin="15,10,0,10"   x:Name="IndvCheckBox" DataContext="{Binding userId}" Unchecked="UserUnchecked"  Checked="UserChecked"  UseLayoutRounding="True">

                        </CheckBox>
                    </DataTemplate>
                </controls:DataGridTemplateColumn.CellTemplate>
            </controls:DataGridTemplateColumn>

            <controls:DataGridTemplateColumn  CanUserReorder="False" CanUserResize="False"   Header="Name" Width="380"  >
                <controls:DataGridTemplateColumn.CellTemplate   >
                    <DataTemplate>
                        <TextBlock  Margin="10,20,0,10"  x:Name="NameTextBox" Foreground="#444444" FontSize="12" FontFamily="Montserrat" >
                            <Run Text="{Binding userPrefix}" />
                            <Run Text="{Binding userFirstName}" />
                            <Run Text="{Binding userLastName}" />
                        </TextBlock>
                    </DataTemplate>
                </controls:DataGridTemplateColumn.CellTemplate>
            </controls:DataGridTemplateColumn>

        <controls:DataGridTemplateColumn  CanUserReorder="False" CanUserResize="False"   Header="Email" Width="380" >
                <controls:DataGridTemplateColumn.CellTemplate >
                    <DataTemplate>
                        <TextBlock  Margin="10,20,0,10" Text="{Binding userEmail}" x:Name="NameTextBox" Foreground="#444444" FontSize="12" FontFamily="Montserrat" />
                    </DataTemplate>
                </controls:DataGridTemplateColumn.CellTemplate>
            </controls:DataGridTemplateColumn>

            <controls:DataGridTemplateColumn CanUserReorder="False" CanUserResize="False"  Header="Phone" Width="250" >
                <controls:DataGridTemplateColumn.CellTemplate >
                    <DataTemplate>
                        <TextBlock  FontSize="12" Margin="10,20,0,10"  Text="{Binding userPhone}"   Foreground="#444444" FontFamily="Montserrat"/>
                    </DataTemplate>
                </controls:DataGridTemplateColumn.CellTemplate>
            </controls:DataGridTemplateColumn>

            <controls:DataGridTemplateColumn Tag="Col" Header="Update" Width="*">
                <controls:DataGridTemplateColumn.CellTemplate >
                    <DataTemplate>
                  <Image HorizontalAlignment="Left" VerticalAlignment="Top" Margin="10,20,0,10" Height="15" DataContext="{Binding userId}"  Width="15" Source="Images/Edit.png" Tapped="GridUpdateBtnClick"  />
                    </DataTemplate>
                </controls:DataGridTemplateColumn.CellTemplate>
            </controls:DataGridTemplateColumn>

        </controls:DataGrid.Columns>
    </controls:DataGrid>

Answer 1

How to change the Datagrid selcted row color

There is ActiveRowColor property in DataGrid control that used to manage Row selected color. For more please refer this.

<dg:DataGrid  ActiveRowColor="Red"/>

and data grid Header Font in UWP xaml

You could use the following code to manage the header font size.

<dg:DataGrid.HeaderFontSize>
    <OnIdiom  x:TypeArguments="x:Double">
        <OnIdiom.Tablet>15</OnIdiom.Tablet>
        <OnIdiom.Phone>12</OnIdiom.Phone>
    </OnIdiom>
</dg:DataGrid.HeaderFontSize>

Unfortunately, DataGrid does not provide FontFamily property for Header. So you need set HeaderLabelStyle like the following.

<dg:DataGrid.HeaderLabelStyle>
    <Style TargetType="Label">
        <Setter Property="FontFamily" Value="SimSun"></Setter>
    </Style>
</dg:DataGrid.HeaderLabelStyle>