Добавить изображение на фон кнопки в Xaml

Question

У меня 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>

Answer 1

Решил мою проблему:

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

Answer 2

Если вы хотите это (это означает, что свойство Image недостаточно гибкое для вас), вы должны написать собственный рендерер.

В отличие от Windows, iOS и Android не основаны на XAML, поэтому их содержимоеТаким образом, элементы управления недоступны для редактирования, так как они не поддерживаются базовой ОС.