Ben Johnson
Reputation: 985
How to fill StackLayout to the end with image background and remove spacing between grid using xamarin
I want to stretch a picture of the whole StackLayout but it stretches to the middle. I also want to reduce the distance between the rows and columns in the grid. My code:
<Frame
BorderColor="White"
Margin="10,0,10,0"
CornerRadius="10"
HasShadow="True"
BackgroundColor="Transparent">
<RelativeLayout>
<Image
Aspect="AspectFill"
RelativeLayout.HeightConstraint="{ConstraintExpression Type=RelativeToParent,
Property=Height,
Factor=0.5}"
RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToParent,
Property=Width,
Factor=1}"
Source="https://www.4freephotos.com/medium/batch/Scattered-clouds276.jpg" />
<StackLayout>
<Label x:Name="DateTimeForecast1"
Style="{StaticResource labelStyle}"
HorizontalTextAlignment="Center"
VerticalTextAlignment="Center"
VerticalOptions="Center"
FontSize="14"/>
<Label x:Name="DateTimeForecast2"
Style="{StaticResource labelStyle}"
HorizontalTextAlignment="Center"
FontSize="14"/>
<Grid BackgroundColor="Transparent"
Padding="0,0,0,0">
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Image x:Name="IconForecast11"
VerticalOptions="Center"
HorizontalOptions="Center"
Grid.Row="0"
Grid.Column="0"/>
<Label Text="{Binding WeatherDataForecastHourly.List[0].WeatherForecast[0].DescriptionForecast}"
Style="{StaticResource labelStyle}"
HorizontalTextAlignment="Center"
Grid.Row="1"
Grid.Column="0"
FontSize="14"/>
<Image x:Name="IconForecast12"
VerticalOptions="Center"
HorizontalOptions="Center"
Grid.Row="0"
Grid.Column="1"/>
<Label x:Name="AvgTempForecastDay1"
Style="{StaticResource labelStyle}"
HorizontalTextAlignment="Center"
Grid.Row="1"
Grid.Column="1"
FontSize="14"/>
<Image x:Name="IconForecast13"
VerticalOptions="Center"
HorizontalOptions="Center"
Grid.Row="0"
Grid.Column="2"/>
<Label Text="{Binding WeatherDataForecastHourly.List[0].WindForecast.WindForecastValue, StringFormat='{0:0}m/s'}"
Style="{StaticResource labelStyle}"
HorizontalTextAlignment="Center"
Grid.Row="1"
Grid.Column="2"
FontSize="14"/>
<Image x:Name="IconForecast14"
VerticalOptions="Center"
HorizontalOptions="Center"
Grid.Row="0"
Grid.Column="3"/>
<Label Text="{Binding WeatherDataForecastHourly.List[0].CloudsForecast.CloudsForecastValue, StringFormat='{0:0}%'}"
Style="{StaticResource labelStyle}"
HorizontalTextAlignment="Center"
Grid.Row="1"
Grid.Column="3"
FontSize="14"/>
<Image x:Name="IconForecast15"
VerticalOptions="Center"
HorizontalOptions="Center"
Grid.Row="0"
Grid.Column="4"/>
<Label x:Name="ChanceOfRainForecast1"
Style="{StaticResource labelStyle}"
HorizontalTextAlignment="Center"
Grid.Row="1"
Grid.Column="4"
FontSize="14"/>
<Image x:Name="IconForecast5Days1"
VerticalOptions="Center"
HorizontalOptions="Center"
Grid.Row="2"
Grid.Column="0"/>
<Image x:Name="IconForecast5Days2"
VerticalOptions="Center"
HorizontalOptions="Center"
Grid.Row="2"
Grid.Column="1"/>
<Image x:Name="IconForecast5Days3"
VerticalOptions="Center"
HorizontalOptions="Center"
Grid.Row="2"
Grid.Column="2"/>
<Image x:Name="IconForecast5Days4"
VerticalOptions="Center"
HorizontalOptions="Center"
Grid.Row="2"
Grid.Column="3"/>
<Image x:Name="IconForecast5Days5"
VerticalOptions="Center"
HorizontalOptions="Center"
Grid.Row="2"
Grid.Column="4"/>
<Label Text="Feels like"
Style="{StaticResource labelStyle}"
HorizontalTextAlignment="Center"
Grid.Row="3"
Grid.Column="0"
FontSize="14"/>
<Label Text="{Binding WeatherDataForecastHourly.List[0].MainForecasts.FeelsLikeForecast, StringFormat='{0:0}°C'}"
Style="{StaticResource labelStyle}"
HorizontalTextAlignment="Center"
Grid.Row="4"
Grid.Column="0"
FontSize="14"/>
<Label Text="Min °C"
Style="{StaticResource labelStyle}"
HorizontalTextAlignment="Center"
Grid.Row="3"
Grid.Column="1"
FontSize="14"/>
<Label x:Name="MinTempForecastDay1"
Style="{StaticResource labelStyle}"
HorizontalTextAlignment="Center"
Grid.Row="4"
Grid.Column="1"
FontSize="14"/>
<Label Text="Max °C"
Style="{StaticResource labelStyle}"
HorizontalTextAlignment="Center"
Grid.Row="3"
Grid.Column="2"
FontSize="14"/>
<Label x:Name="MaxTempForecastDay1"
Style="{StaticResource labelStyle}"
HorizontalTextAlignment="Center"
Grid.Row="4"
Grid.Column="2"
FontSize="14"/>
<Label Text="Rain"
Style="{StaticResource labelStyle}"
HorizontalTextAlignment="Center"
Grid.Row="3"
Grid.Column="3"
FontSize="14"/>
<Label Text="{Binding WeatherDataForecastHourly.List[0].RainForecast.RainForecastValue, StringFormat='{0}mm'}"
Style="{StaticResource labelStyle}"
HorizontalTextAlignment="Center"
Grid.Row="4"
Grid.Column="3"
FontSize="14"/>
<Label Text="Snow"
Style="{StaticResource labelStyle}"
HorizontalTextAlignment="Center"
Grid.Row="3"
Grid.Column="4"
FontSize="14"/>
<Label Text="{Binding WeatherDataForecastHourly.List[0].SnowForecast.SnowForecastValue, StringFormat='{0}mm'}"
Style="{StaticResource labelStyle}"
HorizontalTextAlignment="Center"
Grid.Row="4"
Grid.Column="4"
FontSize="14"/>
<Image x:Name="IconForecast5Days26"
VerticalOptions="Center"
HorizontalOptions="Center"
Grid.Row="5"
Grid.Column="0"/>
<Image x:Name="IconForecast5Days27"
VerticalOptions="Center"
HorizontalOptions="Center"
Grid.Row="5"
Grid.Column="1"/>
<Image x:Name="IconForecast5Days28"
VerticalOptions="Center"
HorizontalOptions="Center"
Grid.Row="5"
Grid.Column="2"/>
<Image x:Name="IconForecast5Days29"
VerticalOptions="Center"
HorizontalOptions="Center"
Grid.Row="5"
Grid.Column="3"/>
<Image x:Name="IconForecast5Days30"
VerticalOptions="Center"
HorizontalOptions="Center"
Grid.Row="5"
Grid.Column="4"/>
<Label Text="Humidity"
Style="{StaticResource labelStyle}"
HorizontalTextAlignment="Center"
Grid.Row="6"
Grid.Column="0"
FontSize="14"/>
<Label Text="{Binding WeatherDataForecastHourly.List[0].MainForecasts.HumidityForecast, StringFormat='{0:0}%'}"
Style="{StaticResource labelStyle}"
HorizontalTextAlignment="Center"
Grid.Row="7"
Grid.Column="0"
FontSize="14"/>
<Label Text="Pressure"
Style="{StaticResource labelStyle}"
HorizontalTextAlignment="Center"
Grid.Row="6"
Grid.Column="1"
FontSize="14"/>
<Label Text="{Binding WeatherDataForecastHourly.List[0].MainForecasts.PressureForecast, StringFormat='{0:0}mb'}"
Style="{StaticResource labelStyle}"
HorizontalTextAlignment="Center"
Grid.Row="7"
Grid.Column="1"
FontSize="14"/>
<Label Text="Ground"
Style="{StaticResource labelStyle}"
HorizontalTextAlignment="Center"
Grid.Row="6"
Grid.Column="2"
FontSize="14"/>
<Label Text="{Binding WeatherDataForecastHourly.List[0].MainForecasts.PressureGroundLevelForecast, StringFormat='{0:0}mb'}"
Style="{StaticResource labelStyle}"
HorizontalTextAlignment="Center"
Grid.Row="7"
Grid.Column="2"
FontSize="14"/>
<Label Text="Sea Level"
Style="{StaticResource labelStyle}"
HorizontalTextAlignment="Center"
Grid.Row="6"
Grid.Column="3"
FontSize="14"/>
<Label Text="{Binding WeatherDataForecastHourly.List[0].MainForecasts.SeaLevelForecast, StringFormat='{0:0}mb'}"
Style="{StaticResource labelStyle}"
HorizontalTextAlignment="Center"
Grid.Row="7"
Grid.Column="3"
FontSize="14"/>
<Label Text="Direction"
Style="{StaticResource labelStyle}"
HorizontalTextAlignment="Center"
Grid.Row="6"
Grid.Column="4"
FontSize="14"/>
<Label Text="{Binding WeatherDataForecastHourly.List[0].WindForecast.WindDirectionForecastValue, StringFormat='{0:0}°'}"
Style="{StaticResource labelStyle}"
HorizontalTextAlignment="Center"
Grid.Row="7"
Grid.Column="4"
FontSize="14"/>
</Grid>
</StackLayout>
</RelativeLayout>
</Frame>
With this code the image itself is stretched to the middle of the StackLayout.
I will attach a screenshot:
It also makes an ugly impression on me that there is a huge distance between the rows and columns themselves. Can you give an example of how to reduce the distance between the lines and how to stretch the picture of the whole StackLayout
Upvotes: 0
Views: 46
Answers (2)
FelixSimon
Reputation: 11
As Cole mentioned before, use "auto" instead of "*" and maybe more rows will help you to achieve what youre looking for.
<Grid.RowDefinitions>
<RowDefinition Height="auto" />
<RowDefinition Height="auto" />
<RowDefinition Height="auto" />
<RowDefinition Height="auto" />
...
</Grid.RowDefinitions>
Upvotes: 0
ColeX
Reputation: 14475
I want to stretch a picture of the whole StackLayout but it stretches to the middle.
Set the image's height same as the parent layout .
<Image Aspect="AspectFill"
RelativeLayout.HeightConstraint="{ConstraintExpression Type=RelativeToParent,
Property=Height,
Factor=1}"
RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToParent,
Property=Width,
Factor=1}"
Source="https://www.4freephotos.com/medium/batch/Scattered-clouds276.jpg" />
I also want to reduce the distance between the rows and columns in the grid. My code:
Set RowDefinition.Height as auto , * will occupy the whole space with all rows .
<Grid.RowDefinitions>
<RowDefinition Height="auto" />
<RowDefinition Height="auto" />
<RowDefinition Height="auto" />
<RowDefinition Height="auto" />
<RowDefinition Height="auto" />
<RowDefinition Height="auto" />
<RowDefinition Height="auto" />
<RowDefinition Height="auto" />
</Grid.RowDefinitions>
Upvotes: 1
Related Questions
- How to remove empty space in StackLayout - Xamarin
- How to expand StackLayout inside Grid in Xamarin Forms?
- How to expand image like a background from url on stacklayout using xamarin
- Spacing between stack layouts containing Grid in Xamarin Forms
- remove extra space in xamarin forms layout
- Fill all the screen with StackLayout
- How to use an Image on multiple rows in a Grid properly in Xamarin Forms
- How can I make the background of a grid fill from top to bottom?
- Xamarin grid and StackLayout
- how to Fill Image fullscreen in stackLayout in Xamarin?