MVVM, XAML

UWP DataGrid

This is a simple data grid control that displays data in rows in columns. Columns can be displayed using DataGridTextColumn and DataGridTemplateColumn to allow customization of each cells.

<DG:DataGrid HorizontalAlignment="Stretch" VerticalAlignment="Stretch" ItemsSource="{Binding Products, UpdateSourceTrigger=PropertyChanged}" SelectedValue="{Binding SelectedValue, UpdateSourceTrigger=PropertyChanged, Mode=TwoWay}">
      <DG:DataGrid.Columns>
        <DG:DataGridTextColumn Width="100" Binding="{Binding ProductId}" Header="ProductId" />
        <DG:DataGridTextColumn Width="120" Binding="{Binding Brand}" Header="Brand" />
        <DG:DataGridTextColumn Binding="{Binding Name}" Header="Name" />
        <DG:DataGridTextColumn Binding="{Binding Description}" Header="Description" />
        <DG:DataGridTextColumn Width="80" Binding="{Binding Quantity}" Header="Quantity" />
        <DG:DataGridTemplateColumn Header="Remarks">
          <DG:DataGridTemplateColumn.Background>
            <SolidColorBrush Opacity="0.5" Color="CadetBlue" />
          </DG:DataGridTemplateColumn.Background>
          <DG:DataGridTemplateColumn.CellTemplate>
            <DataTemplate>
              <TextBox HorizontalAlignment="Stretch" VerticalAlignment="Stretch" AcceptsReturn="True"                    Text="{Binding Remarks}" />
            </DataTemplate>
          </DG:DataGridTemplateColumn.CellTemplate>
        </DG:DataGridTemplateColumn>
      </DG:DataGrid.Columns>
    </DG:DataGrid>

datagrid
Download the source from Github

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s