在 Xamarin Forms 中将背景图像设置为页面/屏幕 [英] Set Background image to a page/screen in Xamarin Forms

问题描述

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

I am trying to make an app, using Xamarin Forms, in Visual Studio 2015. I want to add background image to the screen/page. So far, I have reached here, as seen in the below code but it doesn't work.

这是我的 MainPage.XAML 代码.

This is my MainPage.XAML code.

<?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 代码:

This is my MainPage.xaml.cs code:

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();
        }
    }
}

推荐答案

需要将图片文件名添加到 MainPage.xaml 文件中，如下所示:

You need to add the image file name to MainPage.xaml file as following:

<?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:资源 --> Drawable 文件夹，对于 iOS:资源文件夹，对于 Windows &Windows Phone:资产文件夹.您需要在 MainPage.xaml 文件中进行这三个更改以设置 Windows 桌面应用程序和 Windows Phone 应用程序的背景.

Add your image file to respective folders. For Android: Resources --> Drawable folder, For iOS: Resources folder, For Windows & Windows Phone: Assets folder. You need to do these three changes in MainPage.xaml file for setting Background for Windows Desktop App and Windows Phone App.

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

1.Remove "Form: WindowsPage", switch to "Page". 2.Add Image Source

MainPage.xaml

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

MainPage.xaml.cs

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

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

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

Find the working sample app here: https://github.com/abhiguptame/xamarinsamples/tree/master/BgImgTestApp

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

Note: You may put resized images according to your device and platform.

这篇关于在 Xamarin Forms 中将背景图像设置为页面/屏幕的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！