CODEWITHSUNDEEP
xamarinxamarin.formsxamarin.forms-styles
Samantha J T Star
Samantha J T Star

Reputation: 32828

How can I implement the adding of a ViewCell, Grid and Label in C# as a class?

I have this code:

<?xml version="1.0" encoding="UTF-8"?>
<ViewCell xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="CommentBlock">
    <Grid HeightRequest="60" VerticalOptions="CenterAndExpand" Padding="20,10" BackgroundColor="#EAEAF1">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto" />
        </Grid.ColumnDefinitions>
        <Label Style="{DynamicResource ListItemDetailTextStyleStyle}" TextColor="#59595F" Text="ABC" HorizontalOptions="FillAndExpand" VerticalOptions="CenterAndExpand" />
    </Grid>
</ViewCell>

Right now it's implemented in XAML but I need to implement in C# and have the text message (currently ABC) and height (50) able to be set as a parameter.

Can someone give some suggestions on how I could implement this as a class that I could then add to my application with:

new CommentBlock(60, "ABC");

Upvotes: 1

Views: 185

Answers (1)

Sharada
Sharada

Reputation: 13611

I believe you should be able to achieve this by simply adding a constructor in CommentBlock's code-behind, and still continue working with XAML based CommentBlock: 

public CommentBlock(string text, double height)
{
    InitializeComponent();

    _commentLbl.Text = text;
    _containerGrid.HeightRequest = height;
}

and add named reference to inner controls in CommentBlock's XAML: 

<Grid x:Name="_containerGrid" ..>
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto" />
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="Auto" />
    </Grid.ColumnDefinitions>
    <Label x:Name="_commentLbl" ../>
</Grid>

EDIT : 08/23

But if you are particularly looking for C# based implementation then following will the C# equivalent for your XAML (I added a couple of bindable properties for comment-text, and grid-height to allow for XAML based usage). 

public class CommentBlockCell : ViewCell
{
    public static readonly BindableProperty CommentTextProperty = BindableProperty.Create(
        "CommentText", typeof(string), typeof(CommentBlockCell),
        defaultValue: null);

    public string CommentText
    {
        get { return (string)GetValue(CommentTextProperty); }
        set { SetValue(CommentTextProperty, value); }
    }

    public static readonly BindableProperty GridHeightProperty = BindableProperty.Create(
        "GridHeight", typeof(double), typeof(CommentBlockCell),
        defaultValue: 30.0);

    public double GridHeight
    {
        get { return (double)GetValue(GridHeightProperty); }
        set { SetValue(GridHeightProperty, value); }
    }

    public CommentBlockCell() 
    {
        BuildControl();
    }

    public CommentBlockCell(double gridHeight, string comment)
    {
        CommentText = comment;
        GridHeight = gridHeight;

        BuildControl();
    }

    private void BuildControl()
    {
        var grid = new Grid
        {
            VerticalOptions = LayoutOptions.CenterAndExpand,
            Padding = new Thickness(20, 10),
            BackgroundColor = Color.FromHex("#EAEAF1"),
            RowDefinitions = new RowDefinitionCollection {
                new RowDefinition { Height = GridLength.Auto }
            },
            ColumnDefinitions = new ColumnDefinitionCollection {
                new ColumnDefinition { Width = GridLength.Auto }
            }
        };

        var label = new Label
        {
            HorizontalOptions = LayoutOptions.FillAndExpand,
            VerticalOptions = LayoutOptions.CenterAndExpand
        };
        //label.SetDynamicResource(VisualElement.StyleProperty, "ListItemDetailTextStyleStyle");

        label.SetBinding(Label.TextProperty, new Binding(nameof(CommentText), source: this));
        grid.SetBinding(VisualElement.HeightRequestProperty, new Binding(nameof(GridHeight), source: this));

        grid.Children.Add(label);
        View = grid;
    }
}

Usage can be either: 

new CommentBlockCell(60, "ABC");

Or in XAML: 

<local:CommentBlockCell CommentText="ABC" GridHeight="60" />

Upvotes: 2

Related Questions