在 Xamarin 表单中使用带有图像和文本的按钮

Posted 2023-02-26

【中文标题】在 Xamarin 表单中使用带有图像和文本的按钮

【英文标题】：Using Button with image and text in Xamarin Forms

【发布时间】：2018-11-10 06:35:11

【问题描述】：

我是 Xamarin 表单的新手，并且有一个基本问题要找出的最佳方法。

任务是设计一个具有如下按钮布局的主页：

我可以使用 Buttons 和 StackLayout 来完成这个布局。我使用了 Button 的 ContentLayout 属性来设置对齐方式（例如）：

ContentLayout="右，80" ContentLayout="右，25" ContentLayout="右，100" ContentLayout="右，10"

这样图像向右移动，间距定义了文本和图像之间的空间。我必须为每个似乎错误的按钮设置不同的间距。我没有找到任何更好的方法来将文本设置为左对齐，并且默认情况下它似乎是居中对齐的。

Button 是否有任何属性可用于左对齐按钮文本。或者有什么更好的方法来使用这种基本设计的按钮。

【问题讨论】：

不，我不认为您可以默认执行此操作。您要么想要创建一个自定义渲染器来更改本机文本控件的文本方向，要么创建一个自定义按钮布局/实现。我倾向于建议后一种方法。

【参考方案1】：

我认为按钮没有其他方法，但在您的情况下，我建议您使用 StackLayout 不使用在按钮中使用 ContentLayout 属性，因为您总是需要在结束了。

 <StackLayout Orientation="Vertical">
                <StackLayout Orientation="Horizontal" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" Padding="10">
                    <Label Text="Small Text" HorizontalOptions="StartAndExpand" VerticalOptions="CenterAndExpand"/>
                    <Image Source="image.png" HorizontalOptions="EndAndExpand" VerticalOptions="CenterAndExpand"/>
                </StackLayout>
                <StackLayout Orientation="Horizontal" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" Padding="10">
                    <Label Text="This is large text" HorizontalOptions="StartAndExpand" VerticalOptions="CenterAndExpand"/>
                    <Image Source="image.png" HorizontalOptions="EndAndExpand" VerticalOptions="CenterAndExpand"/>
                </StackLayout>
            </StackLayout>