MUY MUY IMPORTANTE, NO CREAR COLUMNAS VACÍAS, SIN VINCULACIÓN, SI USTED CRANCA GENERARÁ UN ERROR Y LA LISTA NO SE CARGARÁ, SI CREE 3 COLUMNAS, DEBE ENLACE A LA LISTA EN LAS TRES COLUMNAS
Lo primero es lo primero: veremos qué documentación tenemos sobre esto, hay dos bibliotecas OpenSource que nos permiten generar DataGrids en UWP, entiendo que el DataGrid no puede ser nativo dentro del entorno de desarrollo de UWP, por lo que al revisar vemos que tiene 2 formas este primer enlace:
1- Página de la documentación: https://github.com/RSuter/MyToolkit/wiki/DataGrid
Esto es muy fácil de cargar fácilmente:
Descargue el NuGet: https://www.nuget.org/packages/MyToolkit.Extended/
o busque en la ventana de NuGet: "MyToolkit.Extended" e instale
importar el uso en XAML: xmlns:controls="using:MyToolkit.Controls"
El nombre Plactas es la lista en el VIEWMODEL y se declara así
public List<Placta> Plactas { get => plactas; set => Set(ref plactas, value); }
private List<Placta> plactas;
Este es el Código en XAML de la Lista:
<Grid>
<controls: DataGrid x: Name = "DataGrid" ItemsSource = "{Binding Plactas}" SelectedItem = "{Binding PlactaSelected, Mode = TwoWay}" DefaultOrderIndex = "0" SelectionMode = "Extended">
<controls: DataGrid.Columns> <!--This is important here are Columns. Code and Name are fields in the Model-->
<controls: DataGridTextColumn Width = "150" Header = "Code" Binding = "{Binding Code}" />
<controls: DataGridTextColumn Width = "300" Header = "Name" Binding = "{Binding Name}" />
</controls:DataGrid.Columns>
<controls: DataGrid.ItemDetailsTemplate>
<DataTemplate> <!--Here create comments when you selected item-->
<StackPanel Margin = "10,10,10,5">
<TextBlock Text = "Date of creation:" FontWeight = "Bold" />
<TextBlock Text = "{Binding FCreated}" />
</StackPanel>
</DataTemplate>
</controls:DataGrid.ItemDetailsTemplate>
</controls: DataGrid>
</Grid>
¡¡¡FÁCIL!!! pero este diseño puede no llamar la atención, no te preocupes, por eso estoy aquí, hay otra biblioteca OpenSource ... así que veremos una segunda opción
2- Página de la documentación: https://docs.microsoft.com/en-us/windows/communitytoolkit/controls/datagrid
Descargue el NuGet: https://github.com/Microsoft/WindowsCommunityToolkit
o busque en la ventana de NuGet: "Microsoft.Toolkit.Uwp.UI.Controls.DataGrid" e instale
importar el uso en XAML: xmlns:control="using:Microsoft.Toolkit.Uwp.UI.Controls"
Crear código en XAML:
<Grid Grid.Row="4">
<control:DataGrid Grid.Row="1" ItemsSource="{Binding Plactas}" Margin="12" GridLinesVisibility="All" AlternatingRowBackground="LightGray" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" HorizontalScrollBarVisibility="Visible" VerticalScrollBarVisibility="Visible" AutoGenerateColumns="False">
<control:DataGrid.Columns>
<control:DataGridTextColumn Header="Mountain" Tag="Mountain" Binding="{Binding Codigo}"/>
ya con esto se cargaría la lista en el DataGrid
Lo bueno de este tipo de DataGrid es que permite la edición mucho mejor, aquí les dejo la documentación para que pueda visualizar los campos y las líneas: https://docs.microsoft.com/es-es/windows/communitytoolkit/controls / datagrid_guidance / styling_formatting_options
Este es el resultado:
Encima del primer diseño de DataGrid:
Y este es el segundo diseño: