Xaml Xamarin 网格列填充最小宽度答案

【问题标题】：Xaml Xamarin grid column fill with minimum widthXaml Xamarin 网格列填充最小宽度
【发布时间】：2019-08-21 21:58:48
【问题描述】：

我得到了（a 的一部分）以下网格：

<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>

结果：

问题：

我想要实现的是让按钮的宽度填充到左边的空间，同时保留最小宽度，这样它就不会超出文本本身的宽度。我在 ColumnDefinition 上找到了带有 MinWidth 的 something similar in WDF，但这似乎在 Xaml 中不存在。我喜欢在 Xaml 中执行此操作，而不是在代码隐藏中修复此问题。

我尝试将 ColumnDefinitions 绑定到 Width、WidthRequest 等，并按如下方式填充第一个 Column（就像他们在上面的链接中所做的那样），但它给出了一个错误。 XAML：

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

错误：

值小于 0 或不是数字。

大概是因为Width、WidthRequest等的值是一个字符串（或什么）而不是一个整数。如果这是这样做的方法，我将如何将值类型转换为 int？如果不是，你是怎么做到的？

编辑：我通过将列宽设置为 50% (50*) 得到了一个临时解决方案，但是，如果标签内的文本变得太大，标签似乎会保留两条额外的白线。为什么这样做？我的意思：

【问题讨论】：

标签： xaml xamarin data-binding

【解决方案1】：

你可以这样改变 :(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>

【讨论】：

将行定义设置为 auto 只会使 button doesn't fill anymore，但这可能是因为我使用的是 Fill 而不是 FillAndexpand。
是的，奇怪的是我最初通过添加行定义属性消除了额外的两行空白，但是现在不添加该属性并且没有额外的空白行，这是什么问题现在？
和ColumnDefinition Width 你可以像上面那样改变，那么你不必将宽度设置为50%。
上面的截图来自整个网格行。它仍然保留那些空的白线，但按钮不再填充（我已修复）。