Xaml Xamarin grid column fill with minimum width

Question

I got the (part of a) following grid:

<Grid Grid.Row="0" StyleClass="headerBar">
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="Auto"/>
        <ColumnDefinition Width="*"/>
    </Grid.ColumnDefinitions>

    <StackLayout Grid.Column="0" HorizontalOptions="Start" Spacing="0"
                 StyleClass="inGrid" x:Name="titleFreqStacklayout">
        <!-- title / current vessel labels. -->
        <Label StyleClass="header"
            Text="OV Frequentie"/>
        <Label StyleClass="headerSub" Grid.Column="0" x:Name="currentVesselLabel" 
            Text="huidig voertuig label"/>
        </StackLayout>

    <!-- vessel selection button. -->
    <Button Grid.Column="1" HeightRequest="40" Margin="0, 0, 2, 0"
            Text="selecteer voertuig" ClassId="selectVesselButton" x:Name="selectVesselButton"
            Clicked="SwitchViewContent"/>
</Grid>

Result:

problem:

What I'm trying to achieve is to get the width of the button to fill to the space left, while reserving a minimum width so it doesn't crop beyond the width of the text itself. I found something similar in WDF with MinWidth on the ColumnDefinition, but that does not seem to exist in Xaml. I'd love to do this in Xaml, instead of fixing this in the code-behind.

I've tried binding the ColumnDefinitions to the Width, WidthRequest, etc. and having the first Column fill (like they do in the link above) as follows but it gives an error. XAML:

<Grid.ColumnDefinitions>
    <ColumnDefinition Width="*"/>
    <ColumnDefinition Width="{Binding Width}" BindingContext="{x:Reference selectVesselButton}"/>
</Grid.ColumnDefinitions>

Error:

Value is less than 0 or not a number.

Presumably, it's because the value of Width, WidthRequest, etc. is a string (or something) instead of an integer. If this is the way to do it, how would I be able to cast whatever the value type is to int? And if it isn't, How do you do this?

EDIT: I got a temporary solution by setting the column width to 50% (50*), however, if the text inside the label gets too large, the label seems to reserve two extra white lines. Why does it do this? What I mean:

Leo Zhu - MSFT Leo Zhu - MSFT · Accepted Answer · 2019-04-01T02:36:09

you could change like this :(define Grid.RowDefinitions)

<Grid >
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*"/>
        <ColumnDefinition Width="Auto"/>
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
    </Grid.RowDefinitions>
    <StackLayout Grid.Column="0" Grid.Row="0"   HorizontalOptions="Start" Spacing="0"
                         StyleClass="inGrid" x:Name="titleFreqStacklayout">
        <!-- title / current vessel labels. -->
        <Label StyleClass="header"
               Text="OV Frequentie"/>
        <Label StyleClass="headerSub" x:Name="currentVesselLabel" 
               Text="huidig voertuig label "/>
            </StackLayout>

        <!-- vessel selection button. -->
        <Button Grid.Column="1" Grid.Row="0" HeightRequest="40" Margin="0, 0, 2, 0" VerticalOptions="CenterAndExpand"
            Text="selecteer voertuig" ClassId="selectVesselButton" x:Name="selectVesselButton" Clicked="SwitchViewContent"
                   />
</Grid>

Xaml Xamarin grid column fill with minimum width

1 Answers