I have a class called stepview that based on btnBack (1 number back) or btnNext (1 number ahead) changes the text based on the contentid from json. This works, but not on the appearing because then i don't see a image because the index is 0 then.

the currentindex should be equal to the contentid of my json file, and now only works correctly with my label text, showing the correct text already based on the id.

The only thing that works with the photos is that if you click on next or back you will see the photo, but this is not the case with the page where the user ends up first. How do I solve this?

This are my btnNext and btnBack for showing text image based on his index from the contentid from json

 public void BtnBack_Clicked(object sender, EventArgs e)
        {
            BtnNext.IsEnabled = true;
            int currentIndex = getCurrentIndex();

            //if its the first item disable back button
            if (currentIndex.Equals(1))
            {
                BtnBack.IsEnabled = false;
            }
            var content = _protocol.Contents[currentIndex - 1];
            _contentId = content.Contentid;
            lblText.Text = content?.Text;
            string protocolName = _protocol.Name;

            //replace space with underscore to get correct picture name
            protocolName = protocolName.Replace(" ", "_");
            myImage.Source = ($"{protocolName}{content?.Contentid}.jpg");

            //get current navTitle on button click
            setNewNavTitle();
        }

        public void BtnNext_Clicked(object sender, EventArgs e)
        {
            BtnBack.IsEnabled = true;
            int currentIndex = getCurrentIndex();
            var content = _protocol.Contents[currentIndex   1];

            //do something after second last
            if (currentIndex == _protocol.Contents.Count - 2)
            {
                BtnNext.IsEnabled = false;
            }
            _contentId = content.Contentid;
            lblText.Text = content?.Text;
            string protocolName = _protocol.Name;

            //replace space with underscore to get correct picture name
            protocolName = protocolName.Replace(" ", "_");
            myImage.Source = ($"{protocolName}{content?.Contentid}.jpg");

            //get current navTitle on button click
            setNewNavTitle();
        }

when the user enters the page for the first time, it does not show an associated photo, only the text he puts in the label

this is for showing the photo on the 2 button clicks

myImage.Source = ($"{protocolName}{content?.Contentid}.jpg");

the contentid appears to be 0 on beginning

This is my Json file

  "protocols": [
    {
      "id": "1",
      "name": "Pols tellen",
      "contents": [
        {
          "chapterTitle": "Voorzorg",
          "contentid": "1",
          "text": "test1"
        },
        {
          "contentid": "2",
          "text": "test2"
        },
        {
          "chapterTitle": "Handeling",
          "contentid": "3",
          "text": "test3"
        },
        {
          "contentid": "4",
          "test1": "test4"
        },
        {
          "chapterTitle": "Nazorg",
          "contentid": "10",
          "text": "test5"
        },
        {
          "contentid": "11",
          "text": "test6"
        }

      ]
    },
}

And this is my class for recieving text and image based on his contentid (what only works now for the text in the label)

[XamlCompilation(XamlCompilationOptions.Compile)]
public partial class StepView : ContentPage
{
    //get index
    private long _contentId;

    //get step
    private Protocol _protocol;

    //go to selected step
    public StepView(Protocol protocol, string title, string chapterTitle, long contentId)
    {
        _protocol = protocol;
        InitializeComponent();
        Title = title   " - "   chapterTitle;

        // get label text
        lblText.Text = protocol.Contents.FirstOrDefault(x => x.ChapterTitle == chapterTitle).Text;
        _contentId = contentId;
    }

    public void BtnBack_Clicked(object sender, EventArgs e)
    {
        BtnNext.IsEnabled = true;
        int currentIndex = getCurrentIndex();

        //if its the first item disable back button
        if (currentIndex.Equals(1))
        {
            BtnBack.IsEnabled = false;
        }
        var content = _protocol.Contents[currentIndex - 1];
        _contentId = content.Contentid;
        lblText.Text = content?.Text;
        string protocolName = _protocol.Name;

        //replace space with underscore to get correct picture name
        protocolName = protocolName.Replace(" ", "_");
        myImage.Source = ($"{protocolName}{content?.Contentid}.jpg");

        //get current navTitle on button click
        setNewNavTitle();
    }

    //go back to home
    public async void btnHome_Clicked(object sender, EventArgs e)
    {
        //go to mainpage
        await Navigation.PushAsync(new MainPage());
    }

    public void BtnNext_Clicked(object sender, EventArgs e)
    {
        BtnBack.IsEnabled = true;
        int currentIndex = getCurrentIndex();
        var content = _protocol.Contents[currentIndex   1];

        //do something after second last
        if (currentIndex == _protocol.Contents.Count - 2)
        {
            BtnNext.IsEnabled = false;
        }
        _contentId = content.Contentid;
        lblText.Text = content?.Text;
        string protocolName = _protocol.Name;

        //replace space with underscore to get correct picture name
        protocolName = protocolName.Replace(" ", "_");
        myImage.Source = ($"{protocolName}{content?.Contentid}.jpg");

        //get current navTitle on button click
        setNewNavTitle();
    }

    private string getChapterTitle()
    {
        var currentIndex = getCurrentIndex();
        string chapterTitle = _protocol.Contents[currentIndex].ChapterTitle;

        //get the previous or next chapter based on where you clicked on
        while (currentIndex > 0 && string.IsNullOrWhiteSpace(chapterTitle))
        {
            currentIndex -= 1;
            chapterTitle = _protocol.Contents[currentIndex].ChapterTitle;
        }
        return chapterTitle;
    }

    private int getCurrentIndex()
    {
        var currentContent = _protocol.Contents.FirstOrDefault(x => x.Contentid == _contentId);
        var currentIndex = _protocol.Contents.IndexOf(currentContent);
        return currentIndex;
    }

    //get new protocol   chapter based on btnBack and btnNext
    private void setNewNavTitle()
    {
        string nextTitile = _protocol.Name   " - "   getChapterTitle();
        Title = nextTitile;
    }

how do I get the same effect for my label text for my photos? Thanks in advance

CodePudding user response：

just add this to the end of the page constructor

myImage.Source = ($"{protocolName}{content?.Contentid}.jpg");