locked
How can I set imagebackground (I want to use bubble image for chat ) in label? RRS feed

  • Question

  • User174229 posted

    Label mytextlabel = new Label { Text= msg };

    how can I set backgroundimage to mytextlabel. Image name is bubble_green.

    Below is the attached image of the bubble_green.

    Wednesday, April 6, 2016 6:40 AM

All replies

  • User179286 posted

    One whay would be to use a static or relative Layout and place the image before your Labels, therefore they would be displayed in front of the Image. There is also a complete component for such a chat view somewhere on GitHub, I just don't remember the name.

    Wednesday, April 6, 2016 7:23 AM
  • User105885 posted

    Here you go: https://github.com/EgorBo/CrossChat-Xamarin.Forms

    Wednesday, April 6, 2016 7:25 AM
  • User164604 posted

    Hi. You can try something like:

        Grid bubble = new Grid {RowSpacing = 0 };
        bubble.RowDefinitions.Add(new RowDefinition {Height = GridLength.Auto});
        bubble.RowDefinitions.Add(new RowDefinition { Height = GridLength.Auto });
    
        Image bubbleStartImage = new Image { Source = ImageSource.FromFile("bubble_bottom.png")};
        Image bubbleContentImage = new Image { Source = ImageSource.FromFile("bubble_content.png") };
    
        bubble.Children.Add(bubbleContentImage, 0, 0);
        bubble.Children.Add(bubbleStartImage, 0, 1);
    
        Grid bubbleTextContainer = new Grid {Padding = new Thickness(20)};
        Label bubbleText = new Label {Text = "Hello!", HorizontalOptions = LayoutOptions.Center, VerticalOptions = LayoutOptions.Center};
        bubbleTextContainer.Children.Add(bubbleText);
    
        bubble.Children.Add(bubbleTextContainer, 0, 0);
    

    Hope it helps.

    Wednesday, April 6, 2016 7:59 AM
  • User174229 posted

    @Thomas: Can you share an example.

    Wednesday, April 6, 2016 9:56 AM
  • User174229 posted

    @artiomby : I somehow worked but it should fit to the size of text. It is viewing but taking a huge area. It should fit with respect to text length. attached is the screenshot of the output.

    Wednesday, April 6, 2016 10:23 AM
  • User174229 posted

    missed the screenshot in that, here it is

    Wednesday, April 6, 2016 10:24 AM
  • User174229 posted

    its coming like this.

    Wednesday, April 6, 2016 10:35 AM
  • User164604 posted

    The idea is to cut your bubble into parts and create a bubble that will change its size according to the message. Something like below can help:

    Grid bubble = new Grid {RowSpacing = 0, ColumnSpacing = 0};
    
    bubble.RowDefinitions.Add(new RowDefinition { Height = GridLength.Auto });
    bubble.RowDefinitions.Add(new RowDefinition { Height = GridLength.Auto });
    bubble.RowDefinitions.Add(new RowDefinition { Height = GridLength.Auto });
    
    bubble.ColumnDefinitions.Add(new ColumnDefinition { Width = GridLength.Auto });
    bubble.ColumnDefinitions.Add(new ColumnDefinition { Width = GridLength.Auto });
    bubble.ColumnDefinitions.Add(new ColumnDefinition { Width = GridLength.Auto });
    
    Image bubbleLeftTop = new Image { Source = ImageSource.FromFile("bubble_Left_top.png")};
    Image bubbleTop = new Image { Source = ImageSource.FromFile("bubble_top.png"), Aspect = Aspect.Fill };
    Image bubbleRightTop = new Image { Source = ImageSource.FromFile("bubble_right_top.png") };
    
    Image bubbleLeft = new Image { Source = ImageSource.FromFile("bubble_left.png"), Aspect = Aspect.Fill};
    Image bubbleRight = new Image { Source = ImageSource.FromFile("bubble_right.png"), Aspect = Aspect.Fill };
    
    Image bubbleLeftBottom = new Image { Source = ImageSource.FromFile("bubble_Left_bottom.png") };
    Image bubbletBottom = new Image { Source = ImageSource.FromFile("bubble_bottom.png"), Aspect = Aspect.Fill };
    Image bubbleRighttBottom = new Image { Source = ImageSource.FromFile("bubble_right_bottom.png") };
    
    bubble.Children.Add(bubbleLeftTop, 0, 0);
    bubble.Children.Add(bubbleTop, 1, 0);
    bubble.Children.Add(bubbleRightTop, 2, 0);
    bubble.Children.Add(bubbleLeft, 0, 1);
    bubble.Children.Add(bubbleRight, 2, 1);
    bubble.Children.Add(bubbleLeftBottom, 0, 2);
    bubble.Children.Add(bubbletBottom, 1, 2);
    bubble.Children.Add(bubbleRighttBottom, 2, 2);
    
     Label bubbleText = new Label {Text = "Hello!", HorizontalOptions = LayoutOptions.Center, VerticalOptions = LayoutOptions.Center};
    
     bubble.Children.Add(bubbleText, 1, 1);
    

    And you can use any image that fits your design needs. You just have to cut it properly.

    Wednesday, April 6, 2016 11:51 AM
  • User103165 posted

    Maybe have a look at this in another thread.

    Wednesday, April 6, 2016 12:37 PM
  • User312280 posted

    @artiomby said: The idea is to cut your bubble into parts and create a bubble that will change its size according to the message. Something like below can help:

    Grid bubble = new Grid {RowSpacing = 0, ColumnSpacing = 0};
    
    bubble.RowDefinitions.Add(new RowDefinition { Height = GridLength.Auto });
    bubble.RowDefinitions.Add(new RowDefinition { Height = GridLength.Auto });
    bubble.RowDefinitions.Add(new RowDefinition { Height = GridLength.Auto });
    
    bubble.ColumnDefinitions.Add(new ColumnDefinition { Width = GridLength.Auto });
    bubble.ColumnDefinitions.Add(new ColumnDefinition { Width = GridLength.Auto });
    bubble.ColumnDefinitions.Add(new ColumnDefinition { Width = GridLength.Auto });
    
    Image bubbleLeftTop = new Image { Source = ImageSource.FromFile("bubble_Left_top.png")};
    Image bubbleTop = new Image { Source = ImageSource.FromFile("bubble_top.png"), Aspect = Aspect.Fill };
    Image bubbleRightTop = new Image { Source = ImageSource.FromFile("bubble_right_top.png") };
    
    Image bubbleLeft = new Image { Source = ImageSource.FromFile("bubble_left.png"), Aspect = Aspect.Fill};
    Image bubbleRight = new Image { Source = ImageSource.FromFile("bubble_right.png"), Aspect = Aspect.Fill };
    
    Image bubbleLeftBottom = new Image { Source = ImageSource.FromFile("bubble_Left_bottom.png") };
    Image bubbletBottom = new Image { Source = ImageSource.FromFile("bubble_bottom.png"), Aspect = Aspect.Fill };
    Image bubbleRighttBottom = new Image { Source = ImageSource.FromFile("bubble_right_bottom.png") };
    
    bubble.Children.Add(bubbleLeftTop, 0, 0);
    bubble.Children.Add(bubbleTop, 1, 0);
    bubble.Children.Add(bubbleRightTop, 2, 0);
    bubble.Children.Add(bubbleLeft, 0, 1);
    bubble.Children.Add(bubbleRight, 2, 1);
    bubble.Children.Add(bubbleLeftBottom, 0, 2);
    bubble.Children.Add(bubbletBottom, 1, 2);
    bubble.Children.Add(bubbleRighttBottom, 2, 2);
    
     Label bubbleText = new Label {Text = "Hello!", HorizontalOptions = LayoutOptions.Center, VerticalOptions = LayoutOptions.Center};
    
     bubble.Children.Add(bubbleText, 1, 1);
    

    And you can use any image that fits your design needs. You just have to cut it properly.

    @artiomby hey can you share your bubbles that you have cut into parts

    Thursday, January 25, 2018 6:14 AM
  • User369500 posted

    @artiomby hey how we can cut bubbles into parts

    Thursday, June 7, 2018 11:43 AM
  • User369500 posted

    @artiomby can you share your bubbles that you have cut into parts

    Thursday, June 7, 2018 11:44 AM