Forum Xamarin.Forms

How can i add inside of BoxView image?

Hi there

How can i add inside of BoxView image or Label?

Best Answer

Answers

  • GeraldVersluisGeraldVersluis NLUniversity ✭✭✭✭

    I'm sorry but I'm not completely sure what you are trying to do here.
    Do you want to add an image to a BoxView or put an Image inside a label?

    What have you tried so far and where did you fail? Could you show some code?

  • PrasanthAsokkumarPrasanthAsokkumar USMember
    edited October 2015

    I want to add an image to a BoxView
    see the Picture

  • JordanMaxJordanMax USMember ✭✭

    @GeraldVersluis said:
    The effect you show in your image is described by Adam J. Wolf on his blog here; https://www.syntaxismyui.com/xamarin-forms-in-anger-hot-sauce/

    It does not, however, involve a BoxView.

    Link is broke :(

  • StacyMahnke.2763StacyMahnke.2763 USMember ✭✭
    edited December 2016

    I achieved this by creating two grids, one grid would hold my label in one column and the second grid in the second column. The second grid would then contain a boxview. Instead of a boxview in the second grid, add an image to the second grid.

                                    //Create the main grid
                                    var vGridCBs = new Grid
                                    {
                                        VerticalOptions = LayoutOptions.StartAndExpand,
                                        ColumnSpacing = 10,
                                        RowDefinitions =
                                        {
                                            new RowDefinition {Height = GridLength.Auto}
                                        },
                                        ColumnDefinitions =
                                        {
                                            new ColumnDefinition {Width = GridLength.Auto},
                                            new ColumnDefinition {Width = new GridLength(1, GridUnitType.Star)}
                                        }
                                    };
    
                                    //Add a label to the first column of the first grid
                                    vGridCBs.Children.Add(new Label
                                    {
                                        Text = "label text",
                                        FontSize = Device.GetNamedSize(NamedSize.Default, typeof(Label)),
                                        HorizontalOptions = LayoutOptions.Start
                                    }, 0, 1);
    
                                    //Create the second grid to place the box view into so that a border shows up
                                    var vBoxOuter = new Grid
                                    {
                                        BackgroundColor = Color.Accent,
                                        Padding = new Thickness(1,1,1,1),
                                        WidthRequest = 16,
                                        HeightRequest = 16,
                                        HorizontalOptions = LayoutOptions.Start,
                                        VerticalOptions = LayoutOptions.Start,
                                        RowDefinitions =
                                        {
                                            new RowDefinition {Height = GridLength.Auto}
                                        },
                                        ColumnDefinitions =
                                        {
                                            new ColumnDefinition {Width = GridLength.Auto}
                                        }
                                    };
    
                                    //Place the boxview into the second grid
                                    vBoxOuter.Children.Add(new BoxView
                                    {
                                        Color = Color.White,
                                        WidthRequest = 15,
                                        HeightRequest = 15,
                                        HorizontalOptions = LayoutOptions.Start,
                                        VerticalOptions = LayoutOptions.Start,
    
                                    },0, 0);
    
                                    //Add the second grid to the second column of the main grid
                                    vGridCBs.Children.Add(vBoxOuter,1,1);
    
  • DavidS.4178DavidS.4178 USMember ✭✭

    IMO a better/more idiomatic way to do this is to use a Frame with BackgroundColor set. You may need a custom renderer to get rid of some undesirable properties such as shadow, and Frame comes with some padding by default that you can get rid of. But it should be much easier than creating a Grid for it.

Sign In or Register to comment.