[英]insert background image in a grid, that fits the size with Xamarin forms pcl
I have the need to insert a background in a grid that is suitable alone according to the device size. 我需要根据设备大小在单独适合的网格中插入背景。 I tried a thousand combinations but remains small, or does not fit all. 我尝试了上千种组合,但仍然很小,或者不适合所有组合。 In the picture below you can see circled in red the image that I have to adapt to the Grid, Grid which is in the second half of the bottom screen. 在下面的图片中,您可以看到红色圆圈内的是我必须适应网格的图像,该网格位于底部屏幕的下半部分。
I'm trying to put the image in the grid, the image has x: Name = "backgroundImage", what is the object that I have to adapt to the entire grid of the second half of the screen, how can I do? 我正在尝试将图像放入网格中,图像具有x:Name =“ backgroundImage”,我要适应屏幕后半部分整个网格的对象是什么,我该怎么办? here's the 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"
x:Class="Fimap.Login"
BackgroundColor="#333">
<ContentPage.Padding>
<OnPlatform x:TypeArguments="Thickness"
iOS="0,0,0,0"
Android="0,0,0,0"
WinPhone="0,0,0,0" />
</ContentPage.Padding>
<ContentPage.Content>
<ScrollView>
<StackLayout VerticalOptions="Center" HorizontalOptions="CenterAndExpand" Orientation="Vertical" Spacing="0">
<ActivityIndicator x:Name="loadingBeforeLogin" IsVisible="true" Color="#008ECC" IsRunning="true" />
</StackLayout>
<RelativeLayout VerticalOptions="Center" HorizontalOptions="CenterAndExpand" x:Name="allContent">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="5*"></RowDefinition>
<RowDefinition Height="5*"></RowDefinition>
</Grid.RowDefinitions>
<!-- immagini loghi e scritta login sopra-->
<Grid Grid.Row="0" BackgroundColor="#1f2429">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="2*"></ColumnDefinition>
<ColumnDefinition Width="6*"></ColumnDefinition>
<ColumnDefinition Width="2*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions Height="*">
<RowDefinition Height="2*"></RowDefinition>
<RowDefinition Height="6*"></RowDefinition>
</Grid.RowDefinitions>
<Image Aspect="AspectFit" x:Name="logoScritta" Grid.Row="0" Grid.Column="1" Source="Images/fimaLogoLogin.png"></Image>
<Image Aspect="AspectFit" x:Name="logo" Grid.Row="1" Grid.Column="1" Source="Images/logo.png"></Image>
<Label TextColor="#fff" Grid.Row="2" FontSize="22" Grid.Column="1" Text="Login" />
</Grid>
<!-- username e password input e ricorda password -->
<Grid Grid.Row="1">
<Image x:Name="backgroundImage"/>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="2*"></ColumnDefinition>
<ColumnDefinition Width="6*"></ColumnDefinition>
<ColumnDefinition Width="2*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="1*"></RowDefinition>
<RowDefinition Height="2*"></RowDefinition>
<RowDefinition Height="2*"></RowDefinition>
<RowDefinition Height="2*"></RowDefinition>
<RowDefinition Height="2*"></RowDefinition>
<RowDefinition Height="2*"></RowDefinition>
</Grid.RowDefinitions>
<ActivityIndicator x:Name="loading" Grid.Row="0" Grid.Column="1" IsVisible="false" Color="#008ECC" IsRunning="true" />
<Label TextColor="#2196F3" Grid.Row="1" Grid.Column="1" Text="" />
<Entry TextColor="#2196F3" PlaceholderColor="#A9D6FA" FontSize="24" Grid.Row="1" Grid.Column="1" Placeholder="Username" x:Name="UsernameEntry" Text="" />
<Label TextColor="#2196F3" Grid.Row="2" Grid.Column="1" Text="" />
<Entry TextColor="#2196F3" PlaceholderColor="#A9D6FA" FontSize="24" Grid.Row="2" Grid.Column="1" Placeholder="Password" IsPassword="True" x:Name="PasswordEntry" Text="" />
<Button x:Name="LoginButton" FontSize="22" Grid.Row="3" Grid.Column="1" Text="Accedi" Clicked="Login_OnClicked"/>
<Grid Grid.Row="4" Grid.Column="1">
<Grid.RowDefinitions>
<RowDefinition Height="1*"></RowDefinition>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="7*"></ColumnDefinition>
<ColumnDefinition Width="3*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Label TextColor="#2196F3" Text="Ricorda accesso" Grid.Row="0" Grid.Column="0"></Label>
<Switch x:Name="switchRememberPassword" Grid.Row="0" Grid.Column="1"></Switch>
</Grid>
<Label x:Name="recuperaPassword" Grid.Row="5" Grid.Column="1" TextColor="#2196F3" Text="Hai dimenticato la password?" FontSize="12"></Label>
</Grid>
</Grid>
</RelativeLayout>
</ScrollView>
</ContentPage.Content>
</ContentPage>
SOLUTION add image from codebehind c# into RelativeLayout with name relative 解决方案:将图像从C#的代码后面添加到具有相对名称的RelativeLayout中
Image backgroundImage = new Image();
backgroundImage.Source = "loginBackground.png";
backgroundImage.Aspect = Aspect.AspectFill;
relative.Children.Add(backgroundImage,
Constraint.RelativeToParent((parent) =>
{
backgroundImage.WidthRequest = parent.Width;
return 0;
}),
Constraint.RelativeToParent((parent) =>
{
return parent.Height - backgroundImage.Height;
})
);
In iOS project before calling the App constructor: 在iOS项目中,调用App构造函数之前:
App.ScreenSize = new Size(UIScreen.MainScreen.Bounds.Width, UIScreen.MainScreen.Bounds.Height);
In App class in PCL: 在PCL的App类中:
public static Size ScreenSize; public static Size ScreenSize;
And simply when giving the size of grid columns and rows you should use it something like: 并且简单地给出网格列和行的大小时,应使用类似以下内容的方法:
App.ScreenSize.Width * 1, App.ScreenSize.Height * 1
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.