XAML xamarin.forms:图像似乎无法按比例放大到其容器

yquaqz18  于 2023-02-06  发布在  其他
关注(0)|答案(1)|浏览(177)

快来人帮帮我!!
这个图片在一个stacklayout里面,stacklayout在一个scrollview里面。基本上就是这样。看这个:

<Image BackgroundColor="Green" x:Name="img_mainPic"/>

太好了,我的图片显示在原来的大小我猜,但左和右有一个大的绿色酒吧-空白。
让我们添加:

VerticalOptions="FillAndExpand"

我们得到:

Wtf它在做什么??为什么绿色的条现在在底部??
好吧,让我们试着添加:
方面=“方面填充”

太好了,好多了,正是我想要的。
好吧,但现在现实一点:不给我的图像一个固定的高度来缩放它会有多难?(因为这样它就会工作,但其他格式的其他图片就不会了...)
完整代码:

<?xml version="1.0" encoding="UTF-8" ?>
<ContentPage
    xmlns="http://xamarin.com/schemas/2014/forms"
    BackgroundColor="White"
    xmlns:helpers="clr-namespace:Khaled.Helpers"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:abstractions="clr-namespace:Plugin.CrossPlatformTintedImage.Abstractions;assembly=Plugin.CrossPlatformTintedImage.Abstractions"
    x:Class="Khaled.Views.Page_FullAd">
    <NavigationPage.TitleView>
            <Grid>
            </Grid>
    </NavigationPage.TitleView>
    <ContentPage.Content>
        <RefreshView IsRefreshing="False" x:Name="refreshview_view" Refreshing="RefreshView_Refreshing">
           <ScrollView>
                <StackLayout Spacing="0">
                    <Image Aspect="AspectFill" VerticalOptions="FillAndExpand" x:Name="img_mainPic"/>
                    <BoxView HeightRequest="1" BackgroundColor="{StaticResource LightGray}"/>
                    <Grid HeightRequest="50">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="*"/>
                            <ColumnDefinition Width="*"/>
                            <ColumnDefinition Width="*"/>
                            <ColumnDefinition Width="*"/>
                            <ColumnDefinition Width="*"/>
                        </Grid.ColumnDefinitions>
                        <Frame x:Name="frame_telephone" Padding="10" HasShadow="False">
                            <Image Source="btn_telephone" VerticalOptions="Center" HorizontalOptions="Center"/>
                            <Frame.GestureRecognizers>
                                <TapGestureRecognizer Tapped="Tapped_Quicks"/>
                            </Frame.GestureRecognizers>
                        </Frame>
                        <Frame x:Name="frame_gps" Grid.Column="1" Padding="10"  HasShadow="False">
                            <Image Source="btn_gps" VerticalOptions="Center" HorizontalOptions="Center"/>
                            <Frame.GestureRecognizers>
                                <TapGestureRecognizer Tapped="Tapped_Quicks"/>
                            </Frame.GestureRecognizers>
                        </Frame>
                        <Frame x:Name="frame_mail" Margin="2" Grid.Column="2" Padding="10"  HasShadow="False">
                            <Image Source="btn_mail" VerticalOptions="Center" HorizontalOptions="Center"/>
                            <Frame.GestureRecognizers>
                                <TapGestureRecognizer Tapped="Tapped_Quicks"/>
                            </Frame.GestureRecognizers>
                        </Frame>
                        <Frame x:Name="frame_share" Grid.Column="3" Padding="10"  HasShadow="False">
                            <Image Source="btn_share" VerticalOptions="Center" HorizontalOptions="Center"/>
                            <Frame.GestureRecognizers>
                                <TapGestureRecognizer Tapped="Tapped_Quicks"/>
                            </Frame.GestureRecognizers>
                        </Frame>
                        <Frame  CornerRadius="0" x:Name="frame_heart" Grid.Column="4" Padding="10"  HasShadow="False">
                            <abstractions:TintedImage TintColor="Transparent"
                                                      VerticalOptions="Center"
                                                      HorizontalOptions="Center"
                                                      Source="img_fav"
                                                      x:Name="img_heart"/>
                            <Frame.GestureRecognizers>
                                <TapGestureRecognizer Tapped="Tapped_Quicks"/>
                            </Frame.GestureRecognizers>
                        </Frame>
                    </Grid>
                    <BoxView HeightRequest="1" BackgroundColor="{StaticResource LightGray}"/>
                    <Grid ColumnSpacing="0">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="*"/>
                            <ColumnDefinition Width="*"/>
                            <ColumnDefinition Width="*"/>
                        </Grid.ColumnDefinitions>
                        <Frame CornerRadius="0" Padding="5,10,5,5" x:Name="tab1" HasShadow="False" BackgroundColor="White">
                            <Label FontSize="13"
                                   FontAttributes="Bold"
                                   VerticalOptions="Center"
                                   TextColor="{StaticResource TextBlack}"
                                   HorizontalOptions="Center"
                                   Text="{helpers:Translate DESCRIPTION}"/>
                            <Frame.GestureRecognizers>
                                <TapGestureRecognizer Tapped="Tapped_tabs"/>
                            </Frame.GestureRecognizers>
                        </Frame>
                         <Frame CornerRadius="0" Padding="5" x:Name="tab2" HasShadow="False"  BackgroundColor="{StaticResource TabGray}" Grid.Column="1">
                            <Label FontSize="13"
                                   FontAttributes="Bold"
                                   TextColor="{StaticResource TextBlack}"
                                   VerticalOptions="Center"
                                   HorizontalOptions="Center"
                                   Text="{helpers:Translate ACTIONS}"/>
                             <Frame.GestureRecognizers>
                                <TapGestureRecognizer Tapped="Tapped_tabs"/>
                            </Frame.GestureRecognizers>
                        </Frame>
                         <Frame CornerRadius="0" Padding="5" x:Name="tab3" HasShadow="False"  BackgroundColor="{StaticResource TabGray}"  Grid.Column="2" >
                            <Label FontSize="13"
                                   FontAttributes="Bold"
                                   TextColor="{StaticResource TextBlack}"
                                   VerticalOptions="Center"
                                   HorizontalOptions="Center"
                                   Text="{helpers:Translate BOOKSLOT}"/>
                             <Frame.GestureRecognizers>
                                <TapGestureRecognizer Tapped="Tapped_tabs"/>
                            </Frame.GestureRecognizers>
                        </Frame>
                    </Grid>
                    <!--changeable layouts-->
                    <StackLayout Margin="0,10,0,0" BackgroundColor="White" Padding="15" x:Name="layout1">
                        <Label TextColor="{StaticResource TextBlack}" x:Name="label_description"/>
                        <Grid Margin="0,30,0,0" RowSpacing="15" BackgroundColor="Transparent">
                            <Grid.RowDefinitions>
                                <RowDefinition Height="30"/>
                                <RowDefinition Height="30"/>
                                <RowDefinition Height="30"/>
                                <RowDefinition Height="30"/>
                                <RowDefinition Height="30"/>
                            </Grid.RowDefinitions>
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="50"/>
                                <ColumnDefinition Width="*"/>
                            </Grid.ColumnDefinitions>
                            <Label x:Name="label_adresse"
                                   VerticalOptions="Center"
                                   FontSize="14"
                                   Grid.Row="0" Grid.Column="1">
                                <Label.GestureRecognizers>
                                    <TapGestureRecognizer Tapped="Tapped_Quicks"/>
                                </Label.GestureRecognizers>
                            </Label>
                            <Label x:Name="label_hours"
                                   VerticalOptions="Center"
                                   FontSize="14"
                                   Grid.Row="1" Grid.Column="1"/>
                            <Label x:Name="label_telephone"
                                   VerticalOptions="Center"
                                   FontSize="14"
                                   Grid.Row="2" Grid.Column="1">
                                <Label.GestureRecognizers>
                                    <TapGestureRecognizer Tapped="Tapped_Quicks"/>
                                </Label.GestureRecognizers>
                            </Label>
                            <Label x:Name="label_email"
                                   VerticalOptions="Center"
                                   FontSize="14"
                                   Grid.Row="3" Grid.Column="1">
                                <Label.GestureRecognizers>
                                    <TapGestureRecognizer Tapped="Tapped_Quicks"/>
                                </Label.GestureRecognizers>
                            </Label>
                            <Label x:Name="label_web"
                                   VerticalOptions="Center"
                                   FontSize="14"
                                   Grid.Row="4" Grid.Column="1">
                                <Label.GestureRecognizers>
                                    <TapGestureRecognizer Tapped="Tapped_Quicks"/>
                                </Label.GestureRecognizers>
                            </Label>
                            <Image Source="btn_gps"
                                   Grid.Row="0" Grid.Column="0"/>
                            <Image Source="btn_clock"
                                   Grid.Row="1" Grid.Column="0"/>
                            <Image Source="btn_telephone"
                                   Grid.Row="2" Grid.Column="0"/>
                            <Image Source="btn_mail"
                                   Margin="3"
                                   Grid.Row="3" Grid.Column="0"/>
                            <Image Source="btn_web"
                                   Grid.Row="4" Grid.Column="0"/>
                        </Grid>
                    </StackLayout>
                </StackLayout>
            </ScrollView>
        </RefreshView>
    </ContentPage.Content>
</ContentPage>
qni6mghb

qni6mghb1#

要将图像放大到其容器,可以使用frame并将其高度绑定到image高度,然后设置Aspect="AspectFill"。下面是XAMl代码供您参考:

<ScrollView>
         <StackLayout Spacing="0">

            <Grid  HorizontalOptions="Center" Margin="0"  > 

                   <Grid.ColumnDefinitions>

                         <ColumnDefinition Width="*" />

                   </Grid.ColumnDefinitions>

                   <Grid.RowDefinitions>

                         <RowDefinition Height="Auto" />
 
                  </Grid.RowDefinitions>

                  <Frame Padding="0" Margin="0"  HeightRequest="{Binding Source={x:Reference image}, Path=Height}" HasShadow="False"   Grid.Row="0" Grid.Column="0" VerticalOptions="Start" >

                    <Image x:Name="image"   Source="uk.png" Aspect="AspectFill" /> 
                   

                 </Frame>

             </Grid>

          </StackLayout>
</ScrollView>

相关问题