时间戳

首页 > 解决方案 > 如何在框架内使用网格分隔条目和图像？

xaml - 如何在框架内使用网格分隔条目和图像？

问题描述

我正在制作一个右边Entry有一个。Image

我遇到的问题是文本放在后面Image，我想要做的是文本在到达时被切断Image，将条目与Image. 我正在使用 aFrame和在它里面， a Grid。我试图将右边距添加到Entry但Image正在滚动。我Entry正在使用 NuGet：Xamarin.Forms.Visual.Material

在此处输入图像描述

这是我的代码：

<StackLayout>
    <Frame BackgroundColor="Transparent" HasShadow="False">
        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto" />
                <ColumnDefinition Width="*" />
            </Grid.ColumnDefinitions>
            <Entry
                        x:Name="entrycontrol"
                        BackgroundColor="{Binding Source={x:Reference ValidateView}, Path=BGColor}"
                        HeightRequest="60"
                        Visual="Material"
                        WidthRequest="{Binding Source={x:Reference ValidateView}, Path=Width}" />
            <Image
                        x:Name="ImageRight"
                        Grid.Column="0"
                        Margin="0,0,5,0"
                        HeightRequest="25"
                        HorizontalOptions="End" />
        </Grid>
    </Frame>
</StackLayout>

我在后面的代码Source中Image建立它。

标签： xamlxamarin.forms

解决方案

您的主要问题是您将您的控件覆盖Image在控件之上Entry。您需要指定 aGrid.Column="1"以便它使用右侧列。Grid可以在 Microsoft 网站上找到有关布局如何工作的详细说明

我建议您不需要绑定控件的WidthRequest属性Entry。另外，我会交换您的列定义。Auto表示该列的大小将增长，*这意味着它将根据已定义的其他列的大小拉伸到一个大小。

总结一下你想要的东西：

<StackLayout>
    <Frame BackgroundColor="Transparent" HasShadow="False">
        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*" /> <!-- swapped -->
                <ColumnDefinition Width="Auto" /> <!-- swapped -->
            </Grid.ColumnDefinitions>
            <Entry x:Name="entrycontrol"
                   BackgroundColor="{Binding Source={x:Reference ValidateView}, Path=BGColor}"
                   HeightRequest="60"
                   Visual="Material" />
            <Image x:Name="ImageRight"
                   Grid.Column="1"
                   Margin="0,0,5,0"
                   HeightRequest="25"
                   HorizontalOptions="End" />
        </Grid>
    </Frame>
</StackLayout>

更好的是，如果你有一个固定的图像尺寸，那么你可以简单地设置你ColumnDefinition的尺寸。

推荐阅读