Chat Application

ShaunGrechShaunGrech USMember ✭✭

Hi guys,

I'm trying to create a chat application on Xamarin Forms. I've been having problems with the UI. I have created a Renderer for the ViewCell however I've been having a problem with placing the Entry under the list. When the keyboard is open the list does not scroll up like it should.

1) Does anyone have a good Xamarin Forms chat example where the entry is at the bottom?
2) If I decide to implement the whole view natively for IOS and Android, can I bind the button to the ViewModel? How do I set the 'Command' property to a UIButton?

Thanks
Shaun

Answers

  • ThomasBurkhartThomasBurkhart DEMember ✭✭✭✭

    I don't have an answer for you, but I guess with a different Title you will get more response, something like "How to make Listview Scroll Keyboard appears" or the like.

  • ShaunGrechShaunGrech USMember ✭✭

    Hi Thomas,

    Thanks for the reply. The thing is that I have managed to make it visible with a hack, but I'm looking for a more complete solution on Xamarin Forms. Quite surprised that I didn't find good examples of a Chat application with the textbox at the bottom (as is standard).

    Thanks again
    Shaun

  • ThomasBurkhartThomasBurkhart DEMember ✭✭✭✭

    Could you show us your XAML of the page? Maybe someone has an Idea

  • ShaunGrechShaunGrech USMember ✭✭

    I have found a way how to fix it in IOS but I would like to have seperate views for IOS and Android (as in a chatview for each of them). Is it possible to bind a UIButton in an IOS renderer to a Command in your ViewModel for example?

    Thanks
    Shaun

  • BrightLeeBrightLee KRMember ✭✭✭

    I'm in.

    I'm sure you already saw this example.
    https://github.com/EgorBo/CrossChat-Xamarin.Forms

    But that's not a common chat app. it's upside-down.
    Dealing with forms' ListView is the tricky part to make chat app but this example skipped it.

  • ShaunGrechShaunGrech USMember ✭✭

    Yes I have but as you pointed out its at the top and it proved to be quite tricky to place the Textbox at the bottom especially when the keyboard pops up.

    Thanks anyway :)

  • AdrianKnightAdrianKnight USMember ✭✭✭✭

    I wish Xamarin handled this out of the box. The current latest pre-release can't do it.

  • RaymondKellyRaymondKelly USMember ✭✭✭

    @ShaunGrech You need a stack inside the outside stack with a name. Then you will need to hook the keyboard and shift the stack up and down when you get the keyboard notification for shown and hidden. This way the text box is always above the keyboard and you can still see the recent chat messages. However I am still struggling with landscape issues with they keyboard and ListView issues. Be ready for pain and disappointment with Xamarin Forms and your chat app. I have been struggling with mine for months and still plagued with XF issues. Nothing has been easy :(

  • i hope this helps for your UI
    and by the way i used height and width requests for better view which i have got from device specific customproperties
    so try to give your own required values for height and width requests for grid and stacks

    i have placed entry under a list and this is my code:

        InitializeComponent();
            messagingText = new ObservableCollection<string>();
            Grid standard = new Grid()
            {,
                BackgroundColor = Color.White,
                VerticalOptions = LayoutOptions.CenterAndExpand,
                HorizontalOptions = LayoutOptions.CenterAndExpand,
                RowDefinitions = {
                    new RowDefinition{Height = new GridLength(9, GridUnitType.Star)},
                    new RowDefinition{Height = new GridLength(2.5, GridUnitType.Star)}
                },
                ColumnDefinitions = {
                    new ColumnDefinition{Width = new GridLength(1,GridUnitType.Star)}
                }
            };
    
            Editor msgbox = new Editor()
            {
                Text = "Enter Your Message",
                TextColor = Color.Green,
                BackgroundColor = Color.Gray,
                VerticalOptions = LayoutOptions.CenterAndExpand,
                HorizontalOptions = LayoutOptions.StartAndExpand,
            };
    
            Button submit = new Button()
            {
                Text = ">",
                TextColor = Color.Navy,
                BackgroundColor = Color.Gray,
                //WidthRequest = (appWidth * 15) / 100,
                //HeightRequest = (appWidth * 15) / 100,
                VerticalOptions = LayoutOptions.CenterAndExpand,
                HorizontalOptions = LayoutOptions.EndAndExpand,
                Command = new Command(() => 
                {
                    try
                    {
                        messagingText.Add(msgbox.Text);
                    }
                    catch (Exception ex)
                    {
                        var msg = ex.Message;
                    }
                })
            };
            ListView lv = new ListView()
            {
                ItemsSource = messagingText,
                VerticalOptions = LayoutOptions.CenterAndExpand,
                HorizontalOptions = LayoutOptions.CenterAndExpand,
            };
            StackLayout bodyHolder = new StackLayout()
            {
                BackgroundColor = Color.Transparent,
                Orientation = StackOrientation.Horizontal,
                VerticalOptions = LayoutOptions.FillAndExpand,
                HorizontalOptions = LayoutOptions.Fill,
                Children = { lv }
            };
            StackLayout footerHolder = new StackLayout()
            {
                BackgroundColor = Color.Olive,
                Orientation = StackOrientation.Horizontal,
                VerticalOptions = LayoutOptions.FillAndExpand,
                HorizontalOptions = LayoutOptions.Fill,
                Children = { msgbox, submit }
            };
            standard.Children.Add(bodyHolder, 0, 0);
            standard.Children.Add(footerHolder, 0, 1);
            Content = standard;
        }
    
  • ShaunGrechShaunGrech USMember ✭✭

    Thanks, I will try it out.

  • AdamMeaneyAdamMeaney USMember ✭✭✭✭

    As an aside, to answer a question posed at the top, if you went to Native code for this, there is a way to do Bindings for that in development at least.

    This Pull Request looks promising for that, and is just awaiting review to merge in to consider for future stable release.

  • ShaunGrechShaunGrech USMember ✭✭

    @AdamMeaney Thanks for that. Just to be clear, at the moment there is no way in production to bind Views to ViewModels which I have in my PCL correct in production?

    The PR looks very promising and it would be great as it will give us the flexibility of decoupling the views from the ViewModel in Native projects.

    Thanks
    Shaun

  • AdamMeaneyAdamMeaney USMember ✭✭✭✭

    Not using Xamarin itself.

    Probably one of the MVVM frameworks like Prism or FreshMVVM would do it, but I am unfamiliar with how they operate.

  • BrightLeeBrightLee KRMember ✭✭✭

    @ShaumGrech

    Can you update what you've done so far?
    It seems really hard to make chat with using XF itself.

  • ShaunGrechShaunGrech USMember ✭✭

    @BBright I will have a look at this.

    So far this is what I have done: https://github.com/IncredibleWeb/Xamarin-Forms-Chat-Client

  • BrightLeeBrightLee KRMember ✭✭✭

    Thanks. I will look at it.
    But I don't have azure enviroment so far, could you attach screenshot how it looks like?
    And can you share some experience that chat source code?

    @ShaunGrech

  • ShaunGrechShaunGrech USMember ✭✭

    @BBright I have deployed the Server on my own environment so that you can test the client code as is. Let me know if you encounter any more difficulties.

  • nikkanikka USMember ✭✭

    @ShaunGrech in Android, in order for ListView (and everything else) to resize when screen size changes (when the keyboard pops up), you'll have to set AdjustResize flag on your main activity.

  • BrianKillenBrianKillen USMember ✭✭

    Shaun, you might check out my github...

    https://github.com/bbkillen/ChatListView

    All the code for a custom renderer and InputAccessoryView implementation are there. Mine is a custom ListView renderer. It worked out really slick.

  • marcfermarcfer BRMember ✭✭
    edited April 16

    @BrianKillen said:
    Shaun, you might check out my github...

    https://github.com/bbkillen/ChatListView

    All the code for a custom renderer and InputAccessoryView implementation are there. Mine is a custom ListView renderer. It worked out really slick.

    Nice! Beaultifull... i will use this code in my app ;)
    Let me ask you...i tried to run your code but the screen appears blank... so, to try has to put some itens on the listview ?

    The android has the image to attach a file in a message ? Or just the ios (based on the example images)?
    And about Windows Phone ?? :(

    Thankssss.

  • HugoCruzHugoCruz USMember ✭✭

    @ShaunGrech said:
    Thanks, I will try it out.

    Could you show this done in XAML?

  • HugoCruzHugoCruz USMember ✭✭

    @VenkataSivaprasadReddyPulagam said:
    i hope this helps for your UI
    and by the way i used height and width requests for better view which i have got from device specific customproperties
    so try to give your own required values for height and width requests for grid and stacks

    i have placed entry under a list and this is my code:

      InitializeComponent();
          messagingText = new ObservableCollection<string>();
          Grid standard = new Grid()
          {,
              BackgroundColor = Color.White,
              VerticalOptions = LayoutOptions.CenterAndExpand,
              HorizontalOptions = LayoutOptions.CenterAndExpand,
              RowDefinitions = {
                  new RowDefinition{Height = new GridLength(9, GridUnitType.Star)},
                  new RowDefinition{Height = new GridLength(2.5, GridUnitType.Star)}
              },
              ColumnDefinitions = {
                  new ColumnDefinition{Width = new GridLength(1,GridUnitType.Star)}
              }
          };
    
          Editor msgbox = new Editor()
          {
              Text = "Enter Your Message",
              TextColor = Color.Green,
              BackgroundColor = Color.Gray,
              VerticalOptions = LayoutOptions.CenterAndExpand,
              HorizontalOptions = LayoutOptions.StartAndExpand,
          };
    
          Button submit = new Button()
          {
              Text = ">",
              TextColor = Color.Navy,
              BackgroundColor = Color.Gray,
              //WidthRequest = (appWidth * 15) / 100,
              //HeightRequest = (appWidth * 15) / 100,
              VerticalOptions = LayoutOptions.CenterAndExpand,
              HorizontalOptions = LayoutOptions.EndAndExpand,
              Command = new Command(() => 
              {
                  try
                  {
                      messagingText.Add(msgbox.Text);
                  }
                  catch (Exception ex)
                  {
                      var msg = ex.Message;
                  }
              })
          };
          ListView lv = new ListView()
          {
              ItemsSource = messagingText,
              VerticalOptions = LayoutOptions.CenterAndExpand,
              HorizontalOptions = LayoutOptions.CenterAndExpand,
          };
          StackLayout bodyHolder = new StackLayout()
          {
              BackgroundColor = Color.Transparent,
              Orientation = StackOrientation.Horizontal,
              VerticalOptions = LayoutOptions.FillAndExpand,
              HorizontalOptions = LayoutOptions.Fill,
              Children = { lv }
          };
          StackLayout footerHolder = new StackLayout()
          {
              BackgroundColor = Color.Olive,
              Orientation = StackOrientation.Horizontal,
              VerticalOptions = LayoutOptions.FillAndExpand,
              HorizontalOptions = LayoutOptions.Fill,
              Children = { msgbox, submit }
          };
          standard.Children.Add(bodyHolder, 0, 0);
          standard.Children.Add(footerHolder, 0, 1);
          Content = standard;
      }
    

    Could you show this done in XAML?

  • JohnButlerJohnButler USMember ✭✭

    @BrianKillen said:
    Shaun, you might check out my github...

    https://github.com/bbkillen/ChatListView

    All the code for a custom renderer and InputAccessoryView implementation are there. Mine is a custom ListView renderer. It worked out really slick.

    Has anyone got this build to work? I have tried to tinker with it but I cant get it to display anything but a white screen. The screenshots look great!

Sign In or Register to comment.