将图像添加到 Xaml 中按钮的背景答案

【问题标题】：Add an image to the background of a button in Xaml将图像添加到 Xaml 中按钮的背景
【发布时间】：2019-11-11 14:44:30
【问题描述】：

我有 4 个按网格排列的按钮。我希望每个按钮都能显示一个与该按钮大小完全相同的图像，但不知道如何做到这一点。我现在正在尝试以下方法，但是当我包含该行时出现错误“无法设置按钮的内容，因为它没有内容属性属性”。

我尝试将图像添加到网格中的第一个按钮，但图像太大。无论我使用的手机大小如何，我都希望图像能够完美地覆盖按钮的大小。

这是我的代码：

<Grid>
        <Grid.RowDefinitions>
                <RowDefinition Height="30"/>
                <RowDefinition Height="30"/>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
        </Grid.ColumnDefinitions>
        <Label Grid.Row="0" Grid.ColumnSpan="2" Text="Welcome," HorizontalOptions="Center" FontSize="Large" TextColor="Aqua"/>
        <Label Grid.Row="1" Grid.ColumnSpan="2" Text="User" HorizontalOptions="Center" FontSize="Large" TextColor="Aqua"/>     
        <Button Grid.Row="2" Grid.Column="0" Image="iris_light" Text="Student&#x0a;Directory" TextColor="Aqua"/>
        <Button Grid.Row="2" Grid.Column="1" Text="Executive&#x0a;Directory" TextColor="Aqua"/>
        <Button Grid.Row="3" Grid.Column="0" Text="Voting" TextColor="Aqua"/>

        <Button Grid.Row="3" Grid.Column="1" Text="Map" TextColor="Aqua">

            <Image Source="iris_light"/>

        </Button>
</Grid>

【问题讨论】：

一种可能的解决方案是将两个网格重叠在一起。一个带有图像的网格，一个带有按钮的网格。但是当我将一个网格放在另一个网格上时，底部的网格是不可见的

标签： android ios image xaml button

【解决方案1】：

如果你想要这样（意味着 Image 属性对你来说不够灵活），你必须编写一个自定义渲染器。

与 Windows 不同，iOS 和 Android 不基于 XAML，因此它们的控件内容不可编辑，因为它不受底层操作系统的支持。

【讨论】：

【解决方案2】：

解决了我的问题：

<Grid BackgroundColor="Transparent">
        <Grid.RowDefinitions>
                <RowDefinition Height="30"/>
                <RowDefinition Height="30"/>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
        </Grid.ColumnDefinitions>
        <Label Grid.Row="0" Grid.ColumnSpan="2" Text="Welcome," HorizontalOptions="Center" FontSize="Large" TextColor="Aqua"/>
        <Label Grid.Row="1" Grid.ColumnSpan="2" Text="User" HorizontalOptions="Center" FontSize="Large" TextColor="Aqua"/>     
        <Image Grid.Row="2" Grid.Column="0" Source="iris_light"/>
        <Button Grid.Row="2" Grid.Column="0" BackgroundColor="Transparent" Text="Student&#x0a;Directory" TextColor="Aqua"/>
        <Image Grid.Row="2" Grid.Column="1" Source="iris_light"/>
        <Button Grid.Row="2" Grid.Column="1" BackgroundColor="Transparent" Text="Executive&#x0a;Directory" TextColor="Aqua"/>
        <Image Grid.Row="3" Grid.Column="0" Source="iris_light"/>
        <Button Grid.Row="3" Grid.Column="0" BackgroundColor="Transparent" Text="Voting" TextColor="Aqua"/>
        <Image Grid.Row="3" Grid.Column="1" Source="iris_light"/>
        <Button Grid.Row="3" Grid.Column="1" BackgroundColor="Transparent" Text="Map" TextColor="Aqua"/>
    </Grid>

【讨论】：