Search code examples
datagridxamarin.formsalignmenteditor

xamarin.Forms DataGrid with editor

I'm trying to embed an editor in a Xamarin.Forms.DataGrid cell using following code (inspired from this sample)

<ContentPage.Content>
<StackLayout>
<dg:DataGrid ItemsSource="{Binding Items}" SelectionEnabled="True" SelectedItem="{Binding SelectedItem}"
           RowHeight="70" HeaderHeight="50" PullToRefreshCommand="{Binding RefreshCommand}" IsRefreshing="{Binding IsRefreshing}">
<dg:DataGrid.Columns>
<dg:DataGridColumn Title="Col. 1" PropertyName="Prop. 1" Width="0.7*">
    <dg:DataGridColumn.CellTemplate>
        <DataTemplate>
            <Entry Text="{Binding}" />
        </DataTemplate>
    </dg:DataGridColumn.CellTemplate>
</dg:DataGridColumn>
</dg:DataGrid.Columns>
</dg:DataGrid>
</StackLayout>
</ContentPage.Content>

Now that works ok, but the edited text is aligned top-left of the cell. So I go trying to use one of the following alignment parameters:

HorizontalOptions="Center" VerticalOptions="Center"
<!-- or >
HorizontalOptions="CenterAndExpand" VerticalOptions="CenterAndExpand"

But in both cases, I end up with text centered within the cell, but now, the editor doesn't expand (it seems as if I had padding)... And the result with either Centeror CenterAndExpand is actually the same:

enter image description here

Could anyone help me get the desired result ?

EDIT: updated with full grid's definition

BONUS question: how to get rid of the editor's border?

Solution

  • You can try this:

    <Entry Text="{Binding}" HorizontalTextAlignment="Center" />

    Bonus answer: To get rid of border you need custom renderers.

    enter image description here