Question

我目前正在实施一个UWP应用程序。该应用程序的模型包括用于在数据网格内的同一列中显示图像和文本的设计，并根据某些条件突出显示网格列几秒钟。

据我所知，UWP中没有可用于DataGrid的控件，所以请建议我，如果市场上有任何其他Grid可用作datagrid的替代品，或者我们需要自定义DataGrid以满足我们的要求要求？

Answer 1

是的，UWP中没有内置的DataGrid控件。如果您想将数据显示为表格，可以使用ListView和GridView，自定义其ItemTemplate，使其看起来像DataGrid。更多详情请参阅this similar thread。

正如@Xavier Eoro所说，如果你不想自己定制，你可以使用第三方包。例如，MyToolkit包含您可以参考的DataGrid控件。 SyncFusion还包含DataGrid控件，但已付款。

Answer 2

请参阅以下问题 how can i add dataGrid in UWP

使用Microsoft.Toolkit.Uwp.UI.Controls.DataGrid资源：https://docs.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

我使用的SyncFusion SfDataGrid很棒，如果您的收入少于100万美元，则可免费获得社区许可证。

我使用XAML和C＃代码自定义我的。

    <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>

您可以通过编程方式完成一些很酷的工作，例如隐藏列：

dgMain.Columns[c].IsHidden = true;

并自动调整行的大小以填充内容：

            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;
    }

如何在UWP应用程序中自定义数据网格

3 个答案: