问题
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?
回答1:
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.
回答2:
See the following question how can i add dataGrid in UWP
use Microsoft.Toolkit.Uwp.UI.Controls.DataGrid Res: 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>
回答3:
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;
}
来源：https://stackoverflow.com/questions/43542792/how-to-customize-the-datagrid-in-uwp-apps