How to customize the datagrid in UWP apps

Question

I am currently implementing an UWP application. The mockups for the application includes design for displaying an image and text in same column within data grid and highlighting the grid column for few seconds based on some condition.

As far as I know there is no control available for DataGrid in UWP, so please suggest me if there is any other Grid available in market which I can used as an alternative for datagrid or we need to customize the DataGrid to meet our requirements?

Answer 1

I use the SyncFusion SfDataGrid which is amazing, and free with a community license if you have less than $1 million in revenue.

I customize mine using both XAML and C# code behind.

    <Page.Resources>
    <Style x:Key="dgHeaderStyle" TargetType="grid:GridHeaderCellControl">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="grid:GridHeaderCellControl">
                    <Border Background="#FFC8C8C8" BorderThickness="0">
                        <TextBlock VerticalAlignment="Center"
                                       FontWeight="Bold"
                                       Foreground="Black"
                                       TextWrapping="Wrap" TextAlignment="Center"
                                       Text="{Binding HeaderText}" SelectionHighlightColor="{x:Null}" FontFamily="Segoe UI" />
                    </Border>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</Page.Resources>

                <grid:SfDataGrid FontSize="14" Grid.Row="0" SelectedIndex="0" HeaderStyle="{StaticResource dgHeaderStyle}" x:Name="dgMain" AutoGenerateColumns="False" CurrentCellBorderBrush="{x:Null}" RowSelectionBrush="#FFC6DBE9" GroupRowSelectionBrush="{x:Null}" BorderBrush="#7F808080" BorderThickness="1"  x:FieldModifier="public" SelectionChanged="dgMain_SelectionChanged" AllowSelectionOnPointerPressed="True" AllowGrouping="False" AllowSorting="False" IsDoubleTapEnabled="False" IsHoldingEnabled="False" IsRightTapEnabled="False" ShowColumnWhenGrouped="False" NavigationMode="Row" Tapped="dgMain_Tapped" FontFamily="Segoe UI" RowHeaderWidth="0" AllowDraggingColumns="False" Foreground="Black" Background="{x:Null}" HorizontalAlignment="Left" RequestedTheme="Default" ShowDetailsViewIndentCell="False" SelectionMode="Single" FrozenColumnCount="1" SelectionUnit="Row" IsReadOnly="True" MinHeight="100" MinWidth="100" RowHoverHighlightingBrush="#FFB1D6F0" SelectionForegroundBrush="Black">
                <grid:SfDataGrid.Columns>
                    <grid:GridTextColumn TextAlignment="Center" HeaderText="Record" Width="80" MappingName="Record" />
                    <grid:GridTextColumn TextAlignment="Center" HeaderText="" Width="300" MappingName="Col01" />
                    <grid:GridTextColumn TextAlignment="Center" HeaderText="" Width="300" MappingName="Col02" />
                    <grid:GridTextColumn TextAlignment="Center" HeaderText="" Width="300" MappingName="Col03" />
                    <grid:GridTextColumn TextAlignment="Center" HeaderText="" Width="300" MappingName="Col04" />
                    <grid:GridTextColumn TextAlignment="Center" HeaderText="" Width="300" MappingName="Col05" />
                    <grid:GridTextColumn TextAlignment="Center" HeaderText="" Width="300" MappingName="Col06" />
                    <grid:GridTextColumn TextAlignment="Center" HeaderText="" Width="300" MappingName="Col07" />
                    <grid:GridTextColumn TextAlignment="Center" HeaderText="" Width="300" MappingName="Col08" />
                    <grid:GridTextColumn TextAlignment="Center" HeaderText="" Width="300" MappingName="Col09" />
                    <grid:GridTextColumn TextAlignment="Center" HeaderText="" Width="300" MappingName="Col10" />
                    <grid:GridTextColumn TextAlignment="Center" HeaderText="" Width="300" MappingName="Col11" />
                    <grid:GridTextColumn TextAlignment="Center" HeaderText="" Width="300" MappingName="Col12" />
                    <grid:GridTextColumn TextAlignment="Center" HeaderText="" Width="300" MappingName="Col13" />
                    <grid:GridTextColumn TextAlignment="Center" HeaderText="" Width="300" MappingName="Col14" />
                    <grid:GridTextColumn TextAlignment="Center" HeaderText="" Width="300" MappingName="Col15" />
                    <grid:GridTextColumn TextAlignment="Center" HeaderText="" Width="300" MappingName="Col16" />
                    <grid:GridTextColumn TextAlignment="Center" HeaderText="" Width="300" MappingName="Col17" />
                    <grid:GridTextColumn TextAlignment="Center" HeaderText="" Width="300" MappingName="Col18" />
                    <grid:GridTextColumn TextAlignment="Center" HeaderText="" Width="300" MappingName="Col19" />
                    <grid:GridTextColumn TextAlignment="Center" HeaderText="" Width="300" MappingName="Col20" />
                    <grid:GridTextColumn TextAlignment="Center" HeaderText="" Width="300" MappingName="Col21" />
                    <grid:GridTextColumn TextAlignment="Center" HeaderText="" Width="300" MappingName="Col22" />
                    <grid:GridTextColumn TextAlignment="Center" HeaderText="" Width="300" MappingName="Col23" />
                    <grid:GridTextColumn TextAlignment="Center" HeaderText="" Width="300" MappingName="Col24" />
                    <grid:GridTextColumn TextAlignment="Center" HeaderText="" Width="300" MappingName="Col25" />
                    <grid:GridTextColumn TextAlignment="Center" HeaderText="" Width="300" MappingName="Col26" />
                    <grid:GridTextColumn TextAlignment="Center" HeaderText="" Width="300" MappingName="Col27" />
                    <grid:GridTextColumn TextAlignment="Center" HeaderText="" Width="300" MappingName="Col28" />
                    <grid:GridTextColumn TextAlignment="Center" HeaderText="" Width="300" MappingName="Col29" />
                    <grid:GridTextColumn TextAlignment="Center" HeaderText="" Width="300" MappingName="Col30" />
                    <grid:GridTextColumn TextAlignment="Center" HeaderText="" Width="300" MappingName="Col31" />
                    <grid:GridTextColumn TextAlignment="Center" HeaderText="" Width="300" MappingName="Col32" />
                    <grid:GridTextColumn TextAlignment="Center" HeaderText="" Width="300" MappingName="Col33" />
                    <grid:GridTextColumn TextAlignment="Center" HeaderText="" Width="300" MappingName="Col34" />
                    <grid:GridTextColumn TextAlignment="Center" HeaderText="" Width="300" MappingName="Col35" />
                    <grid:GridTextColumn TextAlignment="Center" HeaderText="" Width="300" MappingName="Col36" />
                    <grid:GridTextColumn TextAlignment="Center" HeaderText="" Width="300" MappingName="Col37" />
                    <grid:GridTextColumn TextAlignment="Center" HeaderText="" Width="300" MappingName="Col38" />
                    <grid:GridTextColumn TextAlignment="Center" HeaderText="" Width="300" MappingName="Col39" />
                    <grid:GridTextColumn TextAlignment="Center" HeaderText="" Width="300" MappingName="Col40" />
                    <grid:GridTextColumn TextAlignment="Center" HeaderText="" Width="300" MappingName="Col41" />
                    <grid:GridTextColumn TextAlignment="Center" HeaderText="" Width="300" MappingName="Col42" />
                    <grid:GridTextColumn TextAlignment="Center" HeaderText="" Width="300" MappingName="Col43" />
                    <grid:GridTextColumn TextAlignment="Center" HeaderText="" Width="300" MappingName="Col44" />
                    <grid:GridTextColumn TextAlignment="Center" HeaderText="" Width="300" MappingName="Col45" />
                    <grid:GridTextColumn TextAlignment="Center" HeaderText="" Width="300" MappingName="Col46" />
                    <grid:GridTextColumn TextAlignment="Center" HeaderText="" Width="300" MappingName="Col47" />
                    <grid:GridTextColumn TextAlignment="Center" HeaderText="" Width="300" MappingName="Col48" />
                    <grid:GridTextColumn TextAlignment="Center" HeaderText="" Width="300" MappingName="Col49" />
                    <grid:GridTextColumn TextAlignment="Center" HeaderText="" Width="300" MappingName="Col50" />
                </grid:SfDataGrid.Columns>
            </grid:SfDataGrid>

You can do cool stuff programmatically like hiding columns:

dgMain.Columns[c].IsHidden = true;

And automatically resizing rows to fill content:

            dgMain.QueryRowHeight += dataGrid_QueryRowHeight;

        private void dataGrid_QueryRowHeight(object sender, QueryRowHeightEventArgs e)
    {
        if (dgMain != null &&
            !dgMain.GridColumnSizer.GetAutoRowHeight(e.RowIndex, gridRowResizingOptions, out autoHeight)) return;

        e.Height = autoHeight;
        e.Handled = true;
    }

Answer 2

See the following question how can i add dataGrid in UWP

use Microsoft.Toolkit.Uwp.UI.Controls.DataGrid Res: https://learn.microsoft.com/en-us/windows/uwpcommunitytoolkit/controls/datagrid

Exp:https://github.com/Microsoft/WindowsCommunityToolkit//tree/harinikmsft/datagrid/Microsoft.Toolkit.Uwp.UI.Controls.DataGrid/DataGrid

xmlns:controls="using:Microsoft.Toolkit.Uwp.UI.Controls"



<Page.Resources>
    <CollectionViewSource x:Name="CVSposts" />
</Page.Resources>
<Grid>

    <controls:DataGrid x:Name="DataGridTTT" AutoGenerateColumns="False"  x:DefaultBindMode="TwoWay" Grid.Row="1" >
            <controls:DataGrid.Columns>
                <controls:DataGridTextColumn Header="PostId"   Binding="{Binding PostId}" />
                <controls:DataGridTextColumn Header="Title"  Binding="{Binding Title}" />
            <controls:DataGridTextColumn Header="Content1"  Binding="{Binding Content1}" />
            <controls:DataGridTemplateColumn Tag="Col">
                    <controls:DataGridTemplateColumn.CellTemplate>
                        <DataTemplate  >
                            <Grid Name="Grid1" Tag="{Binding BlogId, Mode=TwoWay , UpdateSourceTrigger=PropertyChanged}">
                                <ComboBox  x:Name="ComboBoxTTT"     
                            SelectedValue="{Binding BlogId, Mode=TwoWay , UpdateSourceTrigger=PropertyChanged}"
                                SelectedValuePath="BlogId"   DisplayMemberPath="Url"   ItemsSource="{Binding Blogss}"
                                />
                            </Grid>
                        </DataTemplate>
                    </controls:DataGridTemplateColumn.CellTemplate>
                </controls:DataGridTemplateColumn>

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

</Grid>

Answer 3

Yes, there’s no build-in DataGrid control in UWP. If you want to show your data as a table, you could use ListView and GridView, custom its ItemTemplate to make it look like a DataGrid. More details please reference this similar thread.

As @Xavier Eoro mentioned, if you don't want to custom it your-self, you can use a third party package. For example, MyToolkit contains a DataGrid control you can reference. SyncFusion also contains DataGrid control, but it is paid.