Question

我想为页面设置背景图片。现在我正在使用

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms" 
        xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" 
        x:Class="M.LaunchPage"
        Title ="M" BackgroundImage="Mars.jpg">
    <ContentPage.Content> 
      <StackLayout Padding="10,0,10,10" > 
        <Button VerticalOptions="CenterAndExpand" Text="Sign Up" TextColor="White" Clicked="OnSignUp" BackgroundColor="Maroon" />  
        <StackLayout Padding="10,0,10,10" Orientation="Horizontal" VerticalOptions="EndAndExpand" />
      </StackLayout> 
    </ContentPage.Content>
</ContentPage>

效果很好，但图像被多次填充以适应屏幕。有谁建议更好的代码，以便我可以完美地适应页面上的图像？

感谢。

Answer 1

这取决于平台，例如在iOS上，表格的iOS PageRender中使用了以下内容：

View.BackgroundColor = UIColor.FromPatternImage(UIImage.FromBundle(bgImage));

当View.BackgroundColor UIController尺寸小于View的{{1}}尺寸时，FromPatternImage将最终平铺图片，因为BackgroundImage旨在与< strong>小重复模式（用于内存和绘制性能原因）而不是全屏/页面图像。

为了不发生这种自动平铺，您将在运行时根据设备的屏幕分辨率和页面大小在代码中分配背景图像，而不是在XAML中静态分配。

注意：您可以绑定ViewModel中的<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Simple PDF.js with zoom</title> <script src="pdfjs/build/pdf.js"></script> </head> <body> <h1>Simple PDF.js with zoom</h1> <button id="nextbutton" type="button">next page</button> <button id="prevbutton" type="button">prev page</button> <button id="zoominbutton" type="button">zoom in</button> <button id="zoomoutbutton" type="button">zoom out</button> <br> <canvas id="the-canvas" style="border:1px solid black"></canvas> <script id="script"> var pageNum = 1; var pdfScale = 1; // make pdfScale a global variable var shownPdf; // another global we'll use for the buttons var url = './helloworld.pdf' // PDF to load: change this to a file that exists; function renderPage(page) { var scale = pdfScale; // render with global pdfScale variable var viewport = page.getViewport(scale); var canvas = document.getElementById('the-canvas'); var context = canvas.getContext('2d'); canvas.height = viewport.height; canvas.width = viewport.width; var renderContext = { canvasContext: context, viewport: viewport }; page.render(renderContext); } function displayPage(pdf, num) { pdf.getPage(num).then(function getPage(page) { renderPage(page); }); } var pdfDoc = PDFJS.getDocument(url).then(function getPdfHelloWorld(pdf) { displayPage(pdf, 1); shownPdf = pdf; }); var nextbutton = document.getElementById("nextbutton"); nextbutton.onclick = function() { if (pageNum >= shownPdf.numPages) { return; } pageNum++; displayPage(shownPdf, pageNum); } var prevbutton = document.getElementById("prevbutton"); prevbutton.onclick = function() { if (pageNum <= 1) { return; } pageNum--; displayPage(shownPdf, pageNum); } var zoominbutton = document.getElementById("zoominbutton"); zoominbutton.onclick = function() { pdfScale = pdfScale + 0.25; displayPage(shownPdf, pageNum); } var zoomoutbutton = document.getElementById("zoomoutbutton"); zoomoutbutton.onclick = function() { if (pdfScale <= 0.25) { return; } pdfScale = pdfScale - 0.25; displayPage(shownPdf, pageNum); } </script> </body> </html>属性，以便计算要使用的图像。

Answer 2

您应该使用每个平台规范，例如在iOS中，您需要拥有Mars@2x.jpg和Mars @ 3x.jpg，在我们的平台项目中，您可以在“Mars”中指定它将选择正确的。

在Android上将图像设置在正确的dpi文件夹中。

Xamarin形式：设置背景图像

2 个答案: