Xamarin Forms Datagrid Uneven Row Height | Different Rows SOLVED
Datagrid control for Xamarin forms is almost must have in each Xamarin.Forms app. It provides the way to show data in nice grid and has great support for MVVM concept. Even though this is a great control it was so frustrating to see that you cannot set Xamarin DataGrid row height to "Auto" so that content of data grid occupies needed space. You can only set fix row height, same for all rows. This is not enough if you have severals rows a generaly different amount of content for individual rows. After some fighting it seems there is solution for this issue seems to be pretty simple. Just extract ListView from int DataGrid Resources and set the HasUnevenRows poroperty to true. Enjoy your coding. Your MST Team
<dg:DataGrid
Grid.Row="1"
Grid.ColumnSpan="2"
Margin="5,0"
ActiveRowColor="LightSkyBlue"
BackgroundColor="AliceBlue"
BorderColor="AliceBlue"
BorderThickness="0.5"
HeaderBackground="SteelBlue"
HeaderBordersVisible="True"
HeaderHeight="35"
HeaderTextColor="White"
HorizontalOptions="FillAndExpand"
ItemsSource="{Binding TraceManagerVM.TraceEntries}"
SelectedItem="{Binding TraceManagerVM.CurrentEntry}"
SelectionEnabled="True"
VerticalOptions="FillAndExpand">
<dg:DataGrid.Resources>
<Style TargetType="ListView">
<Setter Property="HasUnevenRows" Value="True" />
</Style>
</dg:DataGrid.Resources>
<dg:DataGrid.Columns>
<dg:DataGridColumn
Title="..."
Width="40"
HorizontalContentAlignment="CenterAndExpand"
VerticalContentAlignment="CenterAndExpand"
PropertyName="TraceIcon">
<dg:DataGridColumn.HeaderLabelStyle>
<Style TargetType="Label">
<Setter Property="HorizontalOptions" Value="CenterAndExpand" />
<Setter Property="Margin" Value="10,0,0,0" />
<Setter Property="VerticalOptions" Value="CenterAndExpand" />
<Setter Property="FontAttributes" Value="Bold" />
<Setter Property="TextColor" Value="White" />
</Style>
</dg:DataGridColumn.HeaderLabelStyle>
<dg:DataGridColumn.CellTemplate>
<DataTemplate>
<ContentView>
<Image
Margin="0"
HeightRequest="40"
HorizontalOptions="Center"
Source="{Binding}"
VerticalOptions="Center"
WidthRequest="40" />
</ContentView>
</DataTemplate>
</dg:DataGridColumn.CellTemplate>
</dg:DataGridColumn>
</dg:DataGrid.Columns>
<dg:DataGrid.RowsBackgroundColorPalette>
<dg:PaletteCollection>
<Color>AliceBlue</Color>
<Color>#FFE1F0FD</Color>
</dg:PaletteCollection>
</dg:DataGrid.RowsBackgroundColorPalette>
<dg:DataGrid.RowsTextColorPalette>
<dg:PaletteCollection>
<Color>SteelBlue</Color>
</dg:PaletteCollection>
</dg:DataGrid.RowsTextColorPalette>
</dg:DataGrid>
Shall you have any questions please leave a comment. Enjoy your coding and best regards from MST Team.
Post a Comment
0 Comments
Thanks!