2017-07-10 3 views
0

Ich bin ziemlich neu mit Xamarin Forms und ich versuche, die XAML-Seite zu teilen, um ein Hintergrundbild in der obersten "Zeile" und einen weißen Hintergrund in der unteren "Zeile" zu haben .Xamarin Forms - Hintergrundbild für die halbe Seite

Check the following example

Der graue Hintergrund stellt das Bild Hintergrund Zur Zeit habe ich, und es in dem Content Tag gelegen ist. In diesem Fall erreicht der weiße Hintergrund nicht die gesamte Breite des Bildschirms (da er sich innerhalb eines Grid.Row der ContentPage befindet) und nicht den unteren Bildschirmrand. Wenn ich nur das Hintergrundbild in der ersten Reihe des Rasters hinzufügen, wird der Seitentitel (Iniciar Session) nicht das Hintergrundbild haben.

Ich muss nur die gesamte ContentPage in 2 Zeilen teilen, eine mit einem Hintergrundbild und die andere ohne es. Ich muss es wirklich in XAML, nicht in C# tun.

Irgendwelche Ideen?

Vielen Dank im Voraus!

+0

erstellen Sie ein Raster mit 2 Zeilen, und platzieren Sie Ihr Bild in der BG der ersten Zeile. Fügen Sie dann zu jeder Zeile ein weiteres verschachteltes Raster hinzu, das die anderen Steuerelemente enthält. – Jason

+0

@Jason danke für die Antwort! Wenn ich das Hintergrundbild zu einem Gitter hinzufüge, habe ich diese weißen Polsterungen. Die einzige Möglichkeit, die Paddings loszuwerden, besteht darin, das Hintergrundbild der ContentPage hinzuzufügen. ContentPage -> Image = Keine Paddings, aber kein halber/halber Hintergrund. ContentPage -> Grid -> Image = Halbe/halbe Hintergrund, aber Paddings. – TRDrake

+0

sollten Sie in der Lage sein, die Polsterung auf dem Raster zu ändern, so dass es die gesamte Seite füllt – Jason

Antwort

0

Sie einfach Ihre Anfrage mit einem Relative-Layout erreichen können (here klicken für Relative-Layout in Xamarin Dokumentation zu lernen):

<?xml version="1.0" encoding="utf-8"?> 
<ContentPage 
    xmlns="http://xamarin.com/schemas/2014/forms" 
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" 
    x:Class="YourNamesapce.YourPage"> 
    <RelativeLayout> 
     <Image 
      RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToParent, 
      Property=Width,Factor=1}" 
      RelativeLayout.HeightConstraint="{ConstraintExpression Type=RelativeToParent, 
      Property=Height,Factor=0.5}" 
      Source="icon.png" 
      Aspect="AspectFill"/> 

    <Grid 
     RelativeLayout.WidthConstraint="{ConstraintExpression 
     Type=RelativeToParent,Property=Width,Factor=1}" 
     RelativeLayout.HeightConstraint="{ConstraintExpression 
     Type=RelativeToParent,Property=Height,Factor=1}"> 
     <!-- Your Grid Layout--> 
    </Grid> 
</RelativeLayout> 

standardmäßig die Hintergrundseite Farbe weiß ist, so wird dies arbeiten, ansonsten setzen Sie das Hintergrundfarbenattribut der Seite auf das gewünschte.