How to display full text in the Label when the ViewCell's Tapped event is executed?

Elad770

Member
Joined
Oct 4, 2021
Messages
20
Programming Experience
1-3
Hello everyone
I'm quite new to Xamarin Forms, I'm trying to build a ListView of all kinds of messages that are built in such a way that there is a title and the content of the message itself is displayed as two lines with 3 dots at the end, the idea I want to do is that as soon as some 'message' is selected the content of the message should appear in full , and when the same message is selected again, the content of a message should be partially the same as at the beginning
MainPage.xaml:
    <ListView BackgroundColor="#FFBCDFFF"
            x:Name="listView"
            Margin="0,8,0,0"
            HasUnevenRows="True"
            SelectionMode="Single"
            ItemsSource="{Binding Items}"
            SeparatorVisibility="None">
            <ListView.ItemTemplate>
                <DataTemplate>
                    <ViewCell x:Name="viewCellMain"  Tapped="ViewCell_Tapped">
                        <StackLayout Padding="5,25,6,5" Orientation="Vertical" >
                            <Frame  xct:ShadowEffect.Color="Green"
                                       x:Name="fr"
                                     xct:ShadowEffect.Radius="6"   CornerRadius="8"  Padding="0,10,0,0">
                                <cardView:CardView
                                CardViewHasShadow="True"
                                CardViewInnerFrameOutlineColorThickness="0">
                                    <cardView:CardView.CardViewContent>
                                        <StackLayout
                                          Padding="0">
                                            <Grid>
                                                <Grid.ColumnDefinitions>
                                                    <ColumnDefinition Width="auto" />
                                                    <ColumnDefinition Width="auto" />
                                                </Grid.ColumnDefinitions>
                                                <Image  HeightRequest="50" Margin="20,0,0,0" Grid.Column="0" HorizontalOptions="Start"  Source="{Binding Image}" />

                                                <Label Grid.Column="1"
                                                       FontFamily="VarelaRound"
                                                       Padding="0,10,0,0"
                                                       FontSize="18"
                                                       TextColor="#ff7100"
                                                Text="{Binding Title}" />
                                            </Grid>
                                                <Grid x:Name="gridText">
                                                <Label
                                                    x:Name="lab"
                                                    MaxLines="2"
                                                    FontFamily="Montserrat"
                                                    LineBreakMode="TailTruncation"
                                                    TextColor="Black"
                                                    Margin="70,0,0,0"
                                                    Padding="0,0,0,15"
                                                    FontSize="16"
                                                    Text="{Binding Description,Mode=TwoWay}" />
                                            </Grid>
                                        </StackLayout>
                                    </cardView:CardView.CardViewContent>
                            </cardView:CardView>
                            </Frame>
                        </StackLayout>   
                    </ViewCell>
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>
The problem right now
that I use several controls that wrap the Label (as in the code above) that contains the message itself, and the significant control that should perform the Tapped event is the ViewCell (and not the Tapped of the ListView itself), and when the event is activated I change the definition of LineBreakMode WrapWrap (so that it displays the entire message in full) has the problem that for some reason after every 4 messages, the LineBreakMode setting affects a message that follows them.
Because xaramin is not fully flexible like wpf with full access to xaml controls in the code behind I miss a few things
Continue the code:
using ViewModels;
using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using Xamarin.Forms;
    //code bhiend
    public partial class MainPage : ContentPage
    {
        public MainPage()
        {
            InitializeComponent();
            BindingContext= new CardItemsViewModel();
        }
        Grid grid;
        Label lab;
        private void ViewCell_Tapped(object sender, EventArgs e)
        {
            if (grid != null)
            {
                //color Grid white of massage previously
                //selected when click on massage Other
                grid.Background = new SolidColorBrush(Color.White);
            }
              
            var viewCell = (ViewCell)sender;
            var gridText = viewCell.FindByName<Grid>("gridText");
            var tlab = viewCell.FindByName<Label>("lab");
            if (viewCell.View != null)
            {
                gridText.Background = new SolidColorBrush(Color.FromHex("#e8e9eb"));
                grid = gridText;
            }
            if (lab == tlab || tlab.LineBreakMode == LineBreakMode.WordWrap)
            {

                string newString = lab.Text;
               // lab.MaxLines = 2;
               // lab.Text = newString;
                lab.LineBreakMode = LineBreakMode.TailTruncation;


            }
            else
            {
                tlab.LineBreakMode = LineBreakMode.WordWrap;
                lab = tlab;
            }
        }

      
    }

//model
using System;
using System.Collections.Generic;
using System.Text;


    public class CardItem
    {
        public string Id { get; set; }

        public string Title { get; set; }
        
        public string Image { get; set; }
        public string Description { get; set; }
    }

//ViewModel
using Models;
using System;
using System.Collections.Generic;
using System.Collections.ObjectModel;
using System.Linq;
using System.Text;

namespace App1.ViewModels
{
    public  class CardItemsViewModel
    {
        private CardItem _selectedItem;

        public ObservableCollection<CardItem> Items { get; }

        public CardItemsViewModel()
        {
            Items = new ObservableCollection<CardItem>();
            //array Images of folder drawable
            string[] images = new string[] { "Lion_Gold.png", "Lion_Silver.png" , "LionHutGradient.png" };
            //Array of all messages
            string[,] labels = new string[,] {
                { "2021 BMW 4 Series", "BMW 4 Series owners rate getting into and out of their cars as their least favorite thing about them, but difficulty in this area is to be expected given the type of vehicle this is. With low-slung coupes and convertibles, style takes precedence over utility." },
                { "2016 BMW 328i","Civan Advanced Technologies develops and manufactures revolutionary high power, single mode lasers with dynamic beams for material processing application. With constant growth, we are h..." },
                { "BMW 7 series G11/G12 Sedan 2019","The 7 BMW 11 Series (G2019) retains the classic virtues of the series, complementing them with fresh exteriors and interiors, as well as new technologies. The 7 BMW 11 Series (G2019) is a premium front-engined sedan with a transverse powertrain, rear-wheel drive or all-wheel drive." },
                { "2023 BMW 7 Series renderings","The new 7 Series and the first-ever i7 will take a drastically new design direction compared to the outgoing model. The current 7er is gorgeous, there’s no denying that, but we are getting a little used to BMW’s evolutionary design approach. Judging by these renderings, the new sedan will retain its stately overall appearance but will mix it with a completely redesigned front fascia." }
            };

            for (int i = 0; i < 40; i++)
            {

                int rand = new Random().Next(0, images.Length);
                string img = images[rand];
                int rand2 = new Random().Next(0, labels.GetLength(0));
                Items.Add(new CardItem()
                {
                    Image = img,
                    Title = labels[rand2,0],
                    Description = labels[rand2, 1],
                    Id = CreateId()
                });
                
            }
        }
        private string CreateId()
        {
            if(Items.Count==0)
            {
                return "1";
            }
            return int.Parse(new List<CardItem>(Items).Max(m => m.Id)) + 1+ "";
        }
    }
}
I also upload screenshots, the second picture is the problem I mentioned every fifth message the label changes even though it is not selected
1664831831722.png
1664831472057.png
1664831551936.png
 

Attachments

  • 1664831520293.png
    1664831520293.png
    196.6 KB · Views: 6
Back
Top Bottom