How to change the image if Image URI is same even with different image?

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();  
}

Best Answer

Answers

  • AndreiMisiukevich_AndreiMisiukevich_ USMember ✭✭✭✭✭

    And as for CarouselView
    I propose to use https://github.com/AndreiMisiukevich/CardView

Sign In or Register to comment.