Xamarin.Forms - 多次加载其中的图像时扩展框架 [英] Xamarin.Forms - Frame expanding when Image inside it loaded multiple times
问题描述
我有一个水平 包含一个 每次都在拉伸.例如，如果您按 5 次按钮，则框架会拉伸 5 次.
I have a horizontal <ScrollView/>. Inside it there is a <Frame/> containing an <Image/>. The <Image/> source is loaded when a button is pressed (see the code for button below). When you press the button multiple times, the <Frame/> is stretching each time. For example, if you press the button 5 times, the frame stretches 5 times.
<ScrollView
BackgroundColor="Transparent"
Orientation="Horizontal"
HorizontalOptions="FillAndExpand">
<StackLayout
HorizontalOptions="FillAndExpand"
VerticalOptions="FillAndExpand">
<Grid BackgroundColor="Transparent">
<Grid.RowDefinitions>
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Frame Grid.Column="0"
BorderColor="White"
Margin="10,0,5,0"
CornerRadius="10"
BackgroundColor="Transparent">
<RelativeLayout>
<Image
x:Name="ImageDescriptionForecastTest"
Aspect="AspectFill"
RelativeLayout.HeightConstraint="{ConstraintExpression Type=RelativeToParent,
Property=Height,
Factor=1}"
RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToParent,
Property=Width,
Factor=1}"/>
<StackLayout>
.....
.....
</StackLayout>
</RelativeLayout>
</Frame>
当我删除这行代码时:
<Image
x:Name="ImageDescriptionForecastTest"
Aspect="AspectFill"
RelativeLayout.HeightConstraint="{ConstraintExpression Type=RelativeToParent,
Property=Height,
Factor=1}"
RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToParent,
Property=Width,
Factor=1}"/>
然后按下按钮，没有任何拉伸，一切正常.
and then press the button, nothing stretches and everything works normally.
在按钮的逻辑中，我检查天气状况并相应地更改背景:
In the very logic of the button I check weather condition and change the backgrounds accordingly:
if (descriptionForecast1 == "clear sky")
{
ImageDescriptionForecastTest.Source = "Images/ClearSky.jpg";
}
else if (descriptionForecast1 == "few clouds")
{
ImageDescriptionForecastTest.Source = "Images/FewClouds.jpg";
}
else if (descriptionForecast1 == "scattered clouds")
{
ImageDescriptionForecastTest.Source = "Images/Scattering.jpg";
}
else if (descriptionForecast1 == "broken clouds")
{
ImageDescriptionForecastTest.Source = "Images/BrokenClouds.jpg";
}
else if (descriptionForecast1 == "light rain")
{
ImageDescriptionForecastTest.Source = "Images/LightRain.jpg";
}
else if (descriptionForecast1 == "rain")
{
ImageDescriptionForecastTest.Source = "Images/Rain.jpg";
}
else if (descriptionForecast1 == "thunderstorm")
{
ImageDescriptionForecastTest.Source = "Images/Thunderstorm.jpg";
}
else if (descriptionForecast1 == "snow")
{
ImageDescriptionForecastTest.Source = "Images/Snow.jpg";
}
else if (descriptionForecast1 == "mist")
{
ImageDescriptionForecastTest.Source = "Images/Mist.jpg";
}
else if (descriptionForecast1 == "overcast clouds")
{
ImageDescriptionForecastTest.Source = "Images/OverCastClouds.jpg";
}
else if (descriptionForecast1 == "moderate rain")
{
ImageDescriptionForecastTest.Source = "Images/ModerateRain.jpg";
}
我应该在此代码中更改哪些内容以使框架不会被拉伸?
What should I change in this code so that the frame is not stretched?
我附上了模拟器的截图(例如，查看包含星期四天气信息的框架):
I have attached a screenshot from simulator (for example, look at the frame that contains weather info for Thursday):
推荐答案
我应该在此代码中更改哪些内容以使帧不被拉伸?
What should I change in this code so that the frames are not stretched ?
您应该在 Frame 中添加适当的 HeightRequest 和 WidthRequest.例如，类似这样的事情(您应该根据源图像和您想要实现的视图的外观来确定适当的值):
You should add appropriate HeightRequest and WidthRequest in your Frame. For example, something like this (appropriate values you should determine based on source images and the look of the view you want to achieve):
<Frame Grid.Column="0"
HeightRequest="200"
WidthRequest="50"
BorderColor="White"
Margin="10,0,5,0"
CornerRadius="10"
BackgroundColor="Transparent">
编辑:您可以动态设置HeightRequest 和WidthRequest，以便根据屏幕大小进行调整.例如，在 XAML 中定义 HeightRequest 和 WidthRequest 如下:
Edit:
You can set HeightRequest and WidthRequest dynamically, so that is adjustable to the screen size. For example, define HeightRequest and WidthRequest in XAML like this:
HeightRequest="{Binding heightOfFrame}"
WidthRequest="{Binding widthOfFrame}"
然后在你的页面中做这样的事情(你应该适当地设置):
Then in your page do something like this (you should set it appropriately):
public partial class MainPage : ContentPage
{
public Double heightOfFrame { get; set; }
public Double widthOfFrame { get; set; }
public MainPage()
{
InitializeComponent();
Double screenHeigth = DeviceDisplay.MainDisplayInfo.Height / DeviceDisplay.MainDisplayInfo.Density;
Double screenWidth = DeviceDisplay.MainDisplayInfo.Width / DeviceDisplay.MainDisplayInfo.Density;
//This will set the height and width to half of your screen's height and width
heightOfFrame = screenHeigth/2; //set this as you would like it to be
widthOfFrame = screenWidth/2; //set this as you would like it to be
BindingContext = this;
}
}
这篇关于Xamarin.Forms - 多次加载其中的图像时扩展框架的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
