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 · Accepted Answer · 2019-04-03T00:43:45.180

1

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>

edited Apr 03 '19 at 00:43

answered Apr 01 '19 at 02:36

Leo Zhu

15,726
1
7
23

Setting the row definition to auto only made it so the [button doesn't fill anymore](https://imgur.com/a/O9hIhZj), but this is probably because I'm using Fill rather than FillAndexpand. – Sander Koldenhof Apr 02 '19 at 16:37
yes，the strange thing is that I initially eliminated the extra two lines of whitespace by adding the row definition attribute,but now don't add that property and there are no extra blank lines,so what's problem now ? – Leo Zhu Apr 03 '19 at 01:08
and `ColumnDefinition Width ` you could change like above,then you don't have to set width to 50%. – Leo Zhu Apr 03 '19 at 01:17
The screenshot above is from the entire grid row. It still reserves those empty whitelines, but the button didn't fill anymore (which I fixed). – Sander Koldenhof Apr 04 '19 at 11:59

Xaml Xamarin grid column fill with minimum width

1 Answers1