如何使用 xamarin 在 stacklayout 上從 url 像背景一樣擴展圖像

Question

我想設置 url 中的圖像作為背景，但是當我使用填充和擴展此屬性時不起作用。

<Frame
                   BorderColor="Black"
                   CornerRadius="10"
                   HasShadow="True"
                   BackgroundColor="Transparent">

            <StackLayout>
              

                 <Image x:Name="backgroundImage"
                           Source="https://www.4freephotos.com/medium/batch/Scattered-clouds276.jpg"
                           HorizontalOptions="FillAndExpand"
                           VerticalOptions="FillAndExpand"/> 

                <Label Text="Current Data" 
                   Style="{StaticResource labelStyle}"
                   HorizontalTextAlignment="Center"
                   TextTransform="Uppercase"
                   FontSize="20"/>

                <Grid BackgroundColor="Transparent" 
                      Padding="0,20,0,0">
                    <Grid.RowDefinitions>
                        <RowDefinition Height="*" />
                        <RowDefinition Height="*" />
                        <RowDefinition Height="*" />
                    </Grid.RowDefinitions>

                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="*" />
                        <ColumnDefinition Width="*" />
                        <ColumnDefinition Width="*" />
                        <ColumnDefinition Width="*" />
                        <ColumnDefinition Width="*" />
                        <ColumnDefinition Width="*" />
                        <ColumnDefinition Width="*" />
                    </Grid.ColumnDefinitions>

                 

                    <Label Text="Clouds"
                            Style="{StaticResource labelStyle}"
                            HorizontalTextAlignment="Center"
                            Grid.Row="1"
                            Grid.Column="0"
                            FontSize="9"/>

                     <Label Text="W.Speed"
                            Style="{StaticResource labelStyle}"
                            HorizontalTextAlignment="Center"
                            Grid.Row="1"
                            Grid.Column="1"
                            FontSize="9"/>

                    <Label Text="Humidity"
                            Style="{StaticResource labelStyle}"
                            HorizontalTextAlignment="Center"
                            Grid.Row="1"
                            Grid.Column="2"
                            FontSize="9"/>

                    <Label Text="Pressure"
                            Style="{StaticResource labelStyle}"
                            HorizontalTextAlignment="Center"
                            Grid.Row="1"
                            Grid.Column="3"
                            FontSize="9"/>

                    <Label Text="Chance"
                            Style="{StaticResource labelStyle}"
                            HorizontalTextAlignment="Center"
                            Grid.Row="1"
                            Grid.Column="4"
                            FontSize="9"/>

                    <Label Text="Rain"
                            Style="{StaticResource labelStyle}"
                            HorizontalTextAlignment="Center"
                            Grid.Row="1"
                            Grid.Column="5"
                            FontSize="9"/>

                    <Label Text="Snow"
                            Style="{StaticResource labelStyle}"
                            HorizontalTextAlignment="Center"
                            Grid.Row="1"
                            Grid.Column="6"
                            FontSize="9"/>

                    <Image x:Name="IconClouds"
                           VerticalOptions="Center"
                           HorizontalOptions="Center"
                           Grid.Row="0"
                           Grid.Column="0"/>

                    <Image x:Name="IconWindSpeed"
                           VerticalOptions="Center"
                           HorizontalOptions="Center"
                           Grid.Row="0"
                           Grid.Column="1"/>

                    <Image x:Name="IconHumidity"
                           VerticalOptions="Center"
                           HorizontalOptions="Center"
                           Grid.Row="0"
                           Grid.Column="2"/>

                    <Image x:Name="IconPressure"
                           VerticalOptions="Center"
                           HorizontalOptions="Center"
                           Grid.Row="0"
                           Grid.Column="3"/>

                     <Image x:Name="IconChanceOfRain"
                           VerticalOptions="Center"
                           HorizontalOptions="Center"
                           Grid.Row="0"
                           Grid.Column="4"/>

                    <Image x:Name="IconRainValue"
                           VerticalOptions="Center"
                           HorizontalOptions="Center"
                           Grid.Row="0"
                           Grid.Column="5"/>

                    <Image x:Name="IconSnowValue"
                           VerticalOptions="Center"
                           HorizontalOptions="Center"
                           Grid.Row="0"
                           Grid.Column="6"/>

                    <Label Text="{Binding WeatherDataCurrent.Clouds.All, StringFormat='{0:0}%'}" 
                           Style="{StaticResource labelStyle}"
                           HorizontalTextAlignment="Center"
                           Grid.Row="2"
                           Grid.Column="0"
                           FontSize="9"/>

                     <Label Text="{Binding WeatherDataCurrent.Wind.Speed, StringFormat='{0:0}m/s'}" 
                           Style="{StaticResource labelStyle}"
                           HorizontalTextAlignment="Center"
                           Grid.Row="2"
                           Grid.Column="1"
                           FontSize="9"/>

                     <Label Text="{Binding WeatherDataCurrent.Main.Humidity, StringFormat='{0:0}%'}" 
                           Style="{StaticResource labelStyle}"
                           HorizontalTextAlignment="Center"
                           Grid.Row="2"
                           Grid.Column="2"
                           FontSize="9"/>

                     <Label Text="{Binding WeatherDataCurrent.Main.Pressure, StringFormat='{0:0}hPa'}" 
                           Style="{StaticResource labelStyle}"
                           HorizontalTextAlignment="Center"
                           Grid.Row="2"
                           Grid.Column="3"
                           FontSize="9"/>

                    <Label x:Name="ChanceOfRainLbl"
                           Style="{StaticResource labelStyle}"
                           HorizontalTextAlignment="Center"
                           Grid.Row="2"
                           Grid.Column="4"
                           FontSize="9"/>

                    <Label Text="{Binding WeatherDataForecastHourly.List[0].RainForecast.RainForecastValue, StringFormat='{0}mm'}" 
                           Style="{StaticResource labelStyle}"
                           HorizontalTextAlignment="Center"
                           Grid.Row="2"
                           Grid.Column="5"
                           FontSize="9"/>
                    
                    <Label Text="{Binding WeatherDataForecastHourly.List[0].SnowForecast.SnowForecastValue, StringFormat='{0}mm'}" 
                           Style="{StaticResource labelStyle}"
                           HorizontalTextAlignment="Center"
                           Grid.Row="2"
                           Grid.Column="6"
                           FontSize="9"/>

                     
                </Grid>

                <Label Text="{Binding WeatherDataForecastHourly.List[0].WeatherForecast[0].DescriptionForecast}" 
                   Style="{StaticResource labelStyle}"
                   HorizontalTextAlignment="Center"
                   TextTransform="Uppercase"
                   FontSize="20"/>

            <Image x:Name="IconCurrentTemp"
                   VerticalOptions="Center"
                   HorizontalOptions="Center"/>

            <Label Text="{Binding WeatherDataCurrent.Title}"
                   Style="{StaticResource labelStyle}"
                   HorizontalTextAlignment="Center"
                   FontSize="15"/>

            <Label Text="{Binding WeatherDataCurrent.Sys.Country}" 
                   Style="{StaticResource labelStyle}"
                   HorizontalTextAlignment="Center"
                   FontSize="15"/>

            <Label Text="{Binding WeatherDataCurrent.Main.Temperature, StringFormat='{0:0}°C'}" 
                   Style="{StaticResource labelStyle}"
                   HorizontalTextAlignment="Center"
                   FontSize="40"/>

            <Label x:Name="HighLowTemperature" 
                   Style="{StaticResource labelStyle}"
                   HorizontalTextAlignment="Center"
                   FontSize="15"/>

            <Image x:Name="IconFeelsLike"
                           VerticalOptions="Center"
                           HorizontalOptions="Center"/>

            <Label x:Name="FeelsLike" 
                   Style="{StaticResource labelStyle}"
                   HorizontalTextAlignment="Center"
                   FontSize="15"/>

            </StackLayout>
             </Frame>

有沒有辦法在 Stacklayout 上設置這個圖像？

我嘗試將封閉標簽放在封閉標簽之前，但這不起作用。

我怎樣才能把圖片作為背景？

我有很多需要背景的 Stacklayout。

Answer 1

您可以使用RelativeLayout而不是StackLayout並首先添加圖像。

 <Frame
        BackgroundColor="Transparent"
        BorderColor="Black"
        CornerRadius="10"
        HasShadow="True">
        <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 RelativeLayout.HeightConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height, Factor=1}" RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=1}">
                <!--<Image
                    x:Name="backgroundImage"
                    Aspect="AspectFill"
                    Source="https://www.4freephotos.com/medium/batch/Scattered-clouds276.jpg" />-->

                <Label
                    FontSize="20"
                    HorizontalTextAlignment="Center"
                    Style="{StaticResource labelStyle}"
                    Text="Current Data"
                    TextTransform="Uppercase" />

                  ........
                  ........
                  ........

                </StackLayout>
        </RelativeLayout>


    </Frame>