Question

在保持正常高度的同时，将图像适合屏幕宽度存在很大问题。我从我的数据库中收集不同的图像（取决于您之前点击的内容），因此图像高度/宽度始终不同。我怎样才能使图像始终填满屏幕宽度，同时保持正常高度？

现在有些图像填充宽度，同时保持正常高度，而有些图像没有。

我尝试过：

AspectFill会裁掉图像的某些部分，因此此解决方案不起作用。

Fill拉伸图像，这也不是一个好的解决方案。

theimage.WidthRequest = App.ScreenWidth;我也尝试这样做来解决这个问题，我从AppDelegete获得了ScreenWidth，但是图像根本没有改变它的宽度。

然后我还尝试添加这样的grid.column：

<Grid.RowDefinitions>

<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>

</Grid.RowDefinitions>

<Grid.ColumnDefinitions>

<ColumnDefinition x:Name = "width"/>

</Grid.ColumnDefinitions>

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

并在代码中连接它：

width.Width = App.ScreenWidth;

但是有些图像保持不变，并且没有填满屏幕宽度。

我是否必须使用自定义渲染器才能成功地使图像填充屏幕宽度，同时保持其正常高度？

这是我现有的代码（我用上面的代码示例改变了一百万次）：

<ScrollView HorizontalOptions = "FillAndExpand" VerticalOptions = "FillAndExpand" >
<StackLayout HorizontalOptions = "FillAndExpand" VerticalOptions = "FillAndExpand">
<Grid>

<Grid.RowDefinitions>

    <RowDefinition Height="Auto"/>
    <RowDefinition Height="100"/>

</Grid.RowDefinitions>

<StackLayout Grid.Row="0" BackgroundColor = "Red" HorizontalOptions = "FillAndExpand" VerticalOptions = "FillAndExpand">

    <Image Grid.Row="1"  x:Name="theimage" Aspect = "AspectFit"  HorizontalOptions = "FillAndExpand" VerticalOptions = "FillAndExpand" />

    <Button Clicked="clickFunc" TextColor="White" Grid.Row="1" HeightRequest="80" WidthRequest="120" BorderRadius="40" HorizontalOptions="End" VerticalOptions="Start" />

<StackLayout Grid.Row="1" Padding="10,20,10,0">

    <Label TextColor = "#474747" x:Name="title" Text="" HorizontalOptions="Start" FontFamily="Helvetica Neue" FontAttributes="Bold" />

</StackLayout>
</StackLayout>
</Grid> 
</StackLayout>
</ScrollView>

我现在已经没有想法解决这个问题了。我必须做一个渲染器才能使它工作吗？

Answer 1

最好的选择是让你学习如何使用MVVM。（陡峭但值得体验）

你可以做的是

查看

<Image Source="{Binding ImageSource,Mode=TwoWay,UpdateSourceTrigger=PropertyChanged }" Width="100" Height="{Binding SourceImageHeight,Mode=OneWay,UpdateSourceTrigger=PropertyChanged}"></Image>

使用此方法可以在ViewModel（类）中设置Xaml属性的值这使得您的代码非常动态。

查看代码背后（设置datacontext（也可以在视图中设置））

InitializeComponent(); viewModel = new YourViewModel(); this.DataContext = viewModel;

<强>视图模型

public class YourViewModel { private String _imageSource = ""; public String ImageSource { get{return _imageSource;} set{_imageSource = value; NotifyPropertyChanged(m => m.ImageSource); } } private Int _sourceImageHeight = 0; public Int SourceImageHeight { get{return _sourceImageHeight ;} set{_sourceImageHeight = value; NotifyPropertyChanged(m => m.SourceImageHeight); } } }

你需要做的就是

ImageSource = ImageLocation

和

SourceImageHeight = 1200

注意：在Viewmodel中，如果你不使用私有变量（_imageSource / _sourceImageHeight）而是在setter中使用公共变量名（ImageSource / SourceImageHeight），你将创建一个无限循环

如何使图像使用它的全宽，同时保持Xamarin Forms中的正常高度？

1 个答案: