如何使图像自动调整大小以使宽度为100%并相应调整高度?

时间:2017-07-18 20:26:15

标签: xamarin.forms

我有以下简单的XAML页面:

<?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="Test.UserGuides.VPN">
    <ContentPage.Content>
        <ScrollView>
            <StackLayout HorizontalOptions="Center" VerticalOptions="Center" Margin="10,10,10,10">
                <Label Margin="10,10,10,10" Text="How to connect to VPN." HorizontalOptions="Center" />
                <Label Margin="10,10,10,10" Text="If you have a corporate notebook, look for the Cisco AnyConnect application. Either in your start menu, on your desktop, or in your taskbar." />
                <Image x:Name="imgVPN1" Margin="10,10,10,10" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" />
                <Label Margin="10,10,10,10" Text="Select your region and press the Connect button." />
            </StackLayout>
        </ScrollView>
    </ContentPage.Content>
</ContentPage>

在构造函数中,我调用一个方法来加载图像:

private void LoadImages()
{
    imgVPN1.Aspect = Aspect.AspectFit;
    ImageSource imagesrc = ImageSource.FromResource("Test.Files.CiscoAnyConnect.PNG");
    imgVPN1.Source = imagesrc;
}

结果在我的(相当大的高DPI)手机上看起来像这样:

imgur link 1

当然,我希望图像自动扩展,以便占据整个屏幕宽度。同时保持纵横比。但是我怎样才能做到这一点?我已经尝试将Aspect放到&#34; AspectFill&#34;,并添加了

imgVPN1.WidthRequest = Application.Current.MainPage.Width;

对于LoadImages方法,但这会使最终结果如下所示:

imgur link 2

我一直在玩各种Horizo​​ntalOptions,VerticalOptions,Aspects,GridView,StackLayouts ......最终结果总是第一个或第二个截图。那么我怎样才能达到我想要的目标呢?

2 个答案:

答案 0 :(得分:7)

这是可以做的。 XML几乎没有改变,我只是删除了图像布局选项

<ContentPage.Content>
        <ScrollView>
            <StackLayout HorizontalOptions="Center" VerticalOptions="Center" Margin="10,10,10,10">
                <Label Margin="10,10,10,10" Text="How to connect to VPN." HorizontalOptions="Center" />
                <Label Margin="10,10,10,10" Text="If you have a corporate notebook, look for the Cisco AnyConnect application. Either in your start menu, on your desktop, or in your taskbar." />
                <Image x:Name="imgVPN1" Margin="10,10,10,10" />
                <Label Margin="10,10,10,10" Text="Select your region and press the Connect button." />
            </StackLayout>
        </ScrollView>
    </ContentPage.Content>

在相对布局中实现一切并不简单(我有代码,如果有人需要它让我知道)我找到了更简单的方法。关键是图像不能正确缩放并占据太多空间。但是我们知道这个图像的大小比例,所以我们可以使用它。在代码中我们需要重写OnSizeAllocated,因为在构造函数中宽度尚未知。然后很容易

protected override void OnSizeAllocated(double width, double height)
{
    base.OnSizeAllocated(width, height);
    imgVPN1.WidthRequest = width;
    imgVPN1.HeightRequest = width / 2.152; //given that image is 411 x 191
}

如果需要,您可以使用除页面之外的其他宽度。例如,您可以使用堆栈布局宽度来考虑边距以获得更高的精度,但这已经在调整。或者你实际上可以像这样使用图像宽度

 protected override void OnSizeAllocated(double width, double height)
 {
     base.OnSizeAllocated(width, height);
     double needHeight=imgVPN1.Width / 2.152;
     if (imgVPN1.Height != needHeight)
         imgVPN1.HeightRequest = needHeight;
 }

enter image description here

答案 1 :(得分:0)

这就是你需要的。

Option Explicit

Sub productPicture()

    Dim LastRow As Long
    Dim MatchRow As Long

    ' first clear the Range where you want to paste
    ThisWorkbook.Sheets(2).Range("D9:G17").Clear

    With ThisWorkbook.Sheets(1)
        LastRow = .Cells(.Rows.Count, 1).End(xlUp).Row

        ' === instead of Loop use Match function ==
        ' make sure Match was able to find a amatch in the range
        If Not IsError(Application.Match(ThisWorkbook.Sheets(2).Range("C4").Value, .Range("A2:A" & LastRow), 0)) Then
            MatchRow = Application.Match(ThisWorkbook.Sheets(2).Range("C4").Value, .Range("A2:A" & LastRow), 0)

            ' Copy >> Paste in a 1-line command
            .Range("B" & MatchRow).Copy Destination:=ThisWorkbook.Sheets(2).Range("D9")
        End If
    End With

End Sub