在 xamarin 中调整图像大小而不将其包装在 stacklayout 中答案

【问题标题】：resize image in xamarin without wrapping it in stacklayout在 xamarin 中调整图像大小而不将其包装在 stacklayout 中
【发布时间】：2020-02-17 13:01:29
【问题描述】：

我有一个抽签动画，在再次点击后被禁用。

这就是我的抽签动画的样子：

暂停：

玩过：

我们可以看到实际的“图像”尺寸更大。我的行定义大小是“Auto”，而抽签动画的 HeightRequest="180"、WidthRequest="180"。

我想在这里发生的是，如果禁用了抽奖动画，我与动画重叠的图像将是 (IsVisible) true。

但即使我的 HeightRequest="10" 和 WidthRequest="10" 图像看起来像这样：

如何在不使用 stacklayout 包装的情况下使其看起来像第一个图像的大小？我不想用 stacklayout 包装它，因为我希望我的 UI 具有响应性。

如果我使用此代码：


               <StackLayout Grid.Row="2"
                             Grid.ColumnSpan="2"
                             Padding="0,55,0,0">
                    <Image Source="red_record"
                           HeightRequest="85"
                           WidthRequest="85"
                           x:Name="red_record_lottie"                       
                           IsVisible="True"
                           />
                </StackLayout>

它将看起来像所需的输出（用于 UI）：

但我们知道代码不会使其响应。我怎样才能让它响应？

【问题讨论】：

你可以试试 scale 属性，降低比例直到得到想要的结果
你可以试试 Aspect="AspectFit"

标签： xamarin xamarin.forms

【解决方案1】：

尝试使用框架，因为图像是圆形的，你可以有一个框架并更改圆角半径以形成一个圆。

https://montemagno.com/xamarin-forms-how-to-clip-images-with-rounded-corners/

这可能会帮助你并进一步解释我的观点

【讨论】：

【解决方案2】：

根据你的描述，你只是想得到想要的图片大小，我建议你可以使用Grid和Frame来获取。Frame控件的CornerRadius属性可以用来创建圆形图片。

<Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="50" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="50" />
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>
        <Frame
            Margin="10"
            BorderColor="Black"
            CornerRadius="50"
            HorizontalOptions="Center"
            IsClippedToBounds="True"
            VerticalOptions="Center">
            <Image
                Margin="-20"
                Aspect="AspectFill"
                HeightRequest="100"
                Source="a11.jpg"
                WidthRequest="100" />
        </Frame>
    </Grid>

你也可以只用Frame来画圈，设置Frame的HeightRequest和WidthRequest

 <Frame
        Margin="10"
        BorderColor="Black"
        CornerRadius="50"
        HeightRequest="60"
        HorizontalOptions="Center"
        IsClippedToBounds="True"
        VerticalOptions="Center"
        WidthRequest="60">
        <Image
            Margin="-20"
            Aspect="AspectFill"
            HeightRequest="100"
            Source="a11.jpg"
            WidthRequest="100" />
    </Frame>

【讨论】：

【解决方案3】：

嗯...听起来很讽刺，我刚刚找到了一个解决方案...我用 stacklayout 包装了它??

这是对我有用的代码：


                <StackLayout Grid.Row="2"
                             Grid.ColumnSpan="2"
                             Padding="0,0,0,0">

                <forms:AnimationView x:Name="blue_record_lottie"                                                 
                                     Animation="blue_record.json" 
                                     Loop="True" 
                                     AutoPlay="False" 
                                     HeightRequest="180"
                                     WidthRequest="180"
                                     Margin="0,10,0,10"                                     
                                     OnClick="blue_record_lottie_OnClick"/>


                    <Image Source="dark_red_rec"
                           HeightRequest="85"
                           WidthRequest="85"
                           Margin="0,55,0,60"
                           x:Name="red_record_lottie"                       
                           IsVisible="False"/>
                </StackLayout>

我也很惊讶，我已经通过在我的模拟器（Pixel Pie 2：1080x1920）和我的物理设备（三星 Galaxy Core：480 x 800）上进行测试证明了这一点。

在我的像素派上：

在我的三星 Galaxy Core 上：

【讨论】：

很高兴听到您的问题已解决，请记得将您的回复标记为答案，谢谢。