Question

如何缩放图像，而不占据未缩放图像的整个宽度/高度？在这个简单的示例中，我希望图像的大小是其所在容器的宽度和高度的25％。

<AbsoluteLayout>
       <Image
           AbsoluteLayout.LayoutFlags="All" AbsoluteLayout.LayoutBounds="0, 0, .25, .25"
           Source="{Binding NiceImage}" />
</AbsoluteLayout>

可以缩放图像，但是图像仍然占用与未缩放图像相同的空间。 Aspect似乎不起作用。

Answer 1

您可以将图像的WidthRequest绑定到父容器的WidthRequest，但是可以使用值转换器进行缩放。

如果您创建一个类似于以下内容的值转换器：

public class CoefConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
    {
        double coef = 1.0;

        if (parameter is string)
            coef = double.Parse(parameter as string);

        return (double)value * coef;
    }

    public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
    {
        throw new NotImplementedException();
    }
}

您可以像这样在标记中使用它：

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:ScaleImage"
             x:Class="ScaleImage.MainPage">

    <ContentPage.Resources>
        <ResourceDictionary>
            <local:CoefConverter x:Key="cc" />
        </ResourceDictionary>
    </ContentPage.Resources>

    <StackLayout x:Name="theStack">

        <Image Source="mountain.jpg" Aspect="AspectFit" HorizontalOptions="Start" 
               WidthRequest="{Binding Source={x:Reference theStack}, Path=Width, Converter={StaticResource cc}, ConverterParameter=0.25}"  />
        <Label Text="This is some text!" FontSize="Medium" />

    </StackLayout>

</ContentPage>

实质上，您是将Image的WidthRequest设置为父项（名为theStack）的WidthRequest，但要乘以0.25。

我在此处发布了一个示例：

https://github.com/curtisshipley/ScaleImageConverter

Answer 2

尝试将AbsoluteLayout替换为带有比例列的Grid。

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

    <Image Source="{Binding NiceImage}" Aspect="AspectFit" Grid.Column="0" />
</Grid>

在Xamarin中，如何缩放图像而不占用与未缩放图像相同的空间？

2 个答案: