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屋!