在 Xamarin Forms 中将背景图像设置为页面/屏幕答案

【问题标题】：Set Background image to a page/screen in Xamarin Forms在 Xamarin Forms 中将背景图像设置为页面/屏幕
【发布时间】：2017-08-28 23:49:16
【问题描述】：

我正在尝试在 Visual Studio 2015 中使用 Xamarin Forms 制作应用程序。我想将背景图像添加到屏幕/页面。到目前为止，我已经到达这里，如下面的代码所示，但它不起作用。

这是我的 MainPage.XAML 代码。

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:TrackMyMeds"
             x:Class="TrackMyMeds.MainPage"
             BackgroundImage="/Images/blue_gradient">

    <StackLayout BackgroundColor="Gray" Padding="8,15,8,0">

        <Label HorizontalTextAlignment="Center" Text="Welcome to TrackMyMeds" TextColor="White" FontSize="40" FontAttributes="Bold">

        </Label>

        <Label HorizontalTextAlignment="Center" Text="Let us take charge of your health" TextColor="Black" FontSize="18">

        </Label>
        <StackLayout Padding="0,40,0,15">
            <Label Text="If you already have an account:" TextColor="Black">

            </Label>

            <Button Clicked="LoginPage_Clicked" Text="Log In Here!" BackgroundColor="#387ef5" TextColor="White" FontSize="18">

            </Button>
        </StackLayout>
        <StackLayout Padding="0,15,0,0">
            <Label Text="If you're new here then:" TextColor="Black">

            </Label>

            <Button Clicked="SignupPage_Clicked" Text="Sign Up Here!" BackgroundColor="#387ef5" TextColor="White" FontSize="18">

            </Button>
        </StackLayout>

    </StackLayout>

</ContentPage>

这是我的 MainPage.xaml.cs 代码：

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using Xamarin.Forms;

namespace TrackMyMeds
{
    public partial class MainPage : ContentPage
    {
        public MainPage()
        {
            InitializeComponent();
        }

        private void LoginPage_Clicked(object sender, EventArgs e)
        {
            App.Current.MainPage = new LoginPage();
        }

        private void SignupPage_Clicked(object sender, EventArgs e)
        {
            App.Current.MainPage = new SignupPage();
        }
    }
}

【问题讨论】：

图片文件在哪里？在 Forms 项目中还是在 iOS 和 Android 项目中？

标签： c# xamarin xamarin.ios xamarin.android xamarin.forms

【解决方案1】：

您需要将图像文件名添加到 MainPage.xaml 文件中，如下所示：

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:BgImgTestApp"
             x:Class="BgImgTestApp.MainPage"
             BackgroundImage="mobilebg.png">
    <Label Text="Welcome to Xamarin Forms!" 
           VerticalOptions="Center" 
           HorizontalOptions="Center" />
</ContentPage>

将您的图像文件添加到相应的文件夹中。对于 Android：Resources --> Drawable 文件夹，对于 iOS：资源文件夹，对于 Windows 和 Windows Phone：资产文件夹。您需要在 MainPage.xaml 文件中进行这三个更改以设置 Windows 桌面应用程序和 Windows Phone 应用程序的背景。

1.去掉“Form:WindowsPage”，切换到“Page”。 2.添加图片来源

MainPage.xaml

<Page
    x:Class="BgImgTestApp.Windows.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:forms="using:Xamarin.Forms.Platform.WinRT"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:BgImgTestApp.Windows"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <Image Source="Assets/mobilebg.png"/>
    </Grid>
</Page>

3.评论这个：

MainPage.xaml.cs

//LoadApplication(new .....App());

在此处查找工作示例应用程序：https://github.com/abhiguptame/xamarinsamples/tree/master/BgImgTestApp

注意：您可以根据您的设备和平台放置调整大小的图像。

【讨论】：

【解决方案2】：

如果您在 Android 上查看，则需要将文件保存在 android 项目的 drawable 文件夹中，然后只需

<ContentPage BackgroundImage = "image.jpg">... </ContentPage>

【讨论】：

【解决方案3】：

做对了，只是缩小图片大小，拖放到Android-->Resources-->drawable目录和iOS资源目录的特定文件夹中。

还是谢谢。

【讨论】：