Hello,
I am using following code for Carousel view. I have images where if user change the image, it keeps WebURI same. Following is UI flow.
1- User go to profile
2- From profile, user have option to go to images page where user can add images. When user add the image, it save to server with same WebURI.
3- Now, user come back to Profile page. Here it shows same image even I recall the API on Appearing of the page and add the Pictures again.
Actually I am using FFImageLoading but I have tried with simple Image control as well.
With FFImageLoading
<StackLayout Orientation="Vertical" VerticalOptions="Center">
<forms:CarouselView x:Name="MainCarosel" ItemsSource="{Binding Pictures}" Position="{Binding Position}" IsVisible="{Binding IsImageVisible}" RelativeLayout.WidthConstraint=
"{ConstraintExpression Type=RelativeToParent, Property=Width}" HeightRequest="375">
<forms:CarouselView.ItemTemplate>
<DataTemplate>
<ff:CachedImage Source="{Binding .}" CacheDuration="0" Aspect="AspectFill" RelativeLayout.WidthConstraint=
"{ConstraintExpression Type=RelativeToParent, Property=Width}" HeightRequest="375">
</ff:CachedImage>
</DataTemplate>
</forms:CarouselView.ItemTemplate>
</forms:CarouselView>
<local:CarouselIndicators IsVisible="{Binding IsImageIndicatorVisible}" Margin="0,-30,0,0" IndicatorHeight="8" IndicatorWidth="8" UnselectedIndicator="icon_dot_off" SelectedIndicator="icon_dot_on" Position="{Binding Position}" ItemsSource="{Binding Pictures}" />
</StackLayout>
With simple Image
<StackLayout Orientation="Vertical" VerticalOptions="Center">
<forms:CarouselView x:Name="MainCarosel" ItemsSource="{Binding Pictures}" Position="{Binding Position}" IsVisible="{Binding IsImageVisible}" RelativeLayout.WidthConstraint=
"{ConstraintExpression Type=RelativeToParent, Property=Width}" HeightRequest="375">
<forms:CarouselView.ItemTemplate>
<DataTemplate>
<Image Aspect="AspectFill" RelativeLayout.WidthConstraint=
"{ConstraintExpression Type=RelativeToParent, Property=Width}" HeightRequest="375">
<Image.Source>
<UriImageSource Uri="{Binding .}"
CachingEnabled="false"/>
</Image.Source>
</Image>
</DataTemplate>
</forms:CarouselView.ItemTemplate>
</forms:CarouselView>
<local:CarouselIndicators IsVisible="{Binding IsImageIndicatorVisible}" Margin="0,-30,0,0" IndicatorHeight="8" IndicatorWidth="8" UnselectedIndicator="icon_dot_off" SelectedIndicator="icon_dot_on" Position="{Binding Position}" ItemsSource="{Binding Pictures}" />
</StackLayout>
ViewModel
public async Task Appearing()
{
await getAllData();
}
private async Task getAllData()
{
ProfileData Profile = GetProfile(); //API Call
Pictures = new List<string>();
//One Way binding with control
Pictures = Profile.Pictures.Select(t => t.Value).ToList();
}