How to show/hide one image at a time in TableView's ViewCell?

MarilouMarilou PHMember ✭✭

I have a TableView with a TableSection that contains for ViewCell. The viewcells contain Label and an image that has visibility set depending on what it is clicked:

    <TableView Intent="Settings">
        <TableRoot>
                <TableSection Title="Card Front Side">
                    <ViewCell>
                            <StackLayout VerticalOptions="FillAndExpand" x:Name="englishSide" Padding="20,0,20,0">
                            <StackLayout Orientation="Horizontal" VerticalOptions="CenterAndExpand">
                                        <Label Text="English" XAlign="Center"/>
                            <Image x:Name="englishImage" Source="check3.png" HorizontalOptions="EndAndExpand" IsVisible="false"/
                    </StackLayout>
                    </StackLayout>
                    </ViewCell>
                <ViewCell>
                    <StackLayout VerticalOptions="FillAndExpand" x:Name="romajiSide" Padding="20,0,20,0">
                        <StackLayout Orientation="Horizontal" VerticalOptions="CenterAndExpand">
                                            <Label Text="Romaji" XAlign="Center"/>
                                            <Image x:Name="romajiImage" Source="check3.png" HorizontalOptions="EndAndExpand" IsVisible="false" />
                                    </StackLayout>
                    </StackLayout>
                            </ViewCell>
                <ViewCell>
                    <StackLayout VerticalOptions="FillAndExpand" x:Name="kanaSide" Padding="20,0,20,0">
                        <StackLayout Orientation="Horizontal" VerticalOptions="CenterAndExpand">
                                            <Label Text="Kana" XAlign="Center"/>
                                            <Image x:Name="kanaImage" Source="check3.png" HorizontalOptions="EndAndExpand" IsVisible="false" />
                                    </StackLayout>
                    </StackLayout>
                            </ViewCell>
                <ViewCell>
                    <StackLayout VerticalOptions="FillAndExpand" x:Name="kanjiSide" Padding="20,0,20,0">
                        <StackLayout Orientation="Horizontal" VerticalOptions="CenterAndExpand">
                                            <Label Text="Kanji" XAlign="Center"/>
                                            <Image x:Name="kanjiImage" Source="check3.png" HorizontalOptions="EndAndExpand" IsVisible="false" />
                                    </StackLayout>
                    </StackLayout>
                            </ViewCell>
        </TableSection>
    
    </TableRoot>
</TableView>

I have an event that when the Viewcell is tapped is will show/hide a certain image. So far my C# code to do this is below:

englishSide.GestureRecognizers.Add(new TapGestureRecognizer
{
NumberOfTapsRequired = 1,
    Command = new Command(() =>
    {
        englishImage.IsVisible = true;
        romajiImage.IsVisible = false;
        kanaImage.IsVisible = false;
        kanjiImage.IsVisible = false;
    })
});

romajiSide.GestureRecognizers.Add(new TapGestureRecognizer
{
    NumberOfTapsRequired = 1,
    Command = new Command(() =>
    {
        englishImage.IsVisible = false;
        romajiImage.IsVisible = true;
        kanaImage.IsVisible = false;
        kanjiImage.IsVisible = false;
    })
});
........... more code here

Obviously this would get messy if I decided have more than 4 ViewCells. Is there a way for me to clean up this code? Ideally I would like to tap on the ViewCell and set the visibility of the image in that viewcell to true and the rest of the viewcells image to false without listing and setting all of them one by one.

Answers

  • kenneth.leekenneth.lee USMember ✭✭✭

    Probably a bit too late but i suggest looking at databinding? binding them to a viewmodel where the viewmodel handles the change between romaji and english ... this method is good cause if you ever want to scale to possibly hiragana or katakana it would be a lot easier to do.

Sign In or Register to comment.