Mochi
Mochi

Reputation: 1117

How to bind data to a string instead of label?

I have the following code from SyncFusion that binds property book BookName to a Label.

listView = new SfListView() { ItemSpacing = 5 };
                listView.WidthRequest = 350;
                listView.ItemTemplate = new DataTemplate(() =>
                {
                    ViewCell viewCell = new ViewCell();
                    var grid = new Grid() { RowSpacing = 1 };
                    grid.ColumnDefinitions.Add(new ColumnDefinition() { Width = 50 });
                    grid.ColumnDefinitions.Add(new ColumnDefinition() { Width = 200 });
                    grid.ColumnDefinitions.Add(new ColumnDefinition() { Width = 50 });
                    var contactImage = new Image()
                    {
                        VerticalOptions = LayoutOptions.Center,
                        HorizontalOptions = LayoutOptions.Center,
                        HeightRequest = 50
                    };
                    contactImage.SetBinding(Image.SourceProperty, new Binding("ContactImage"));
                    var contactName = new Label()
                    {
                        HorizontalTextAlignment = TextAlignment.Center,
                        LineBreakMode = LineBreakMode.NoWrap,
                        FontSize = Font.SystemFontOfSize(NamedSize.Medium).FontSize,
                    };
                    contactName.SetBinding(Label.TextProperty, new Binding("ContactName"));
                    var contactType = new Image()
                    {
                        VerticalOptions = LayoutOptions.End,
                        HorizontalOptions = LayoutOptions.End,
                        HeightRequest = 50,
                    };
                    contactType.SetBinding(Image.SourceProperty, new Binding("ContactType"));
                    grid.Children.Add(contactImage, 0, 0);
                    grid.Children.Add(contactName, 1, 0);
                    grid.Children.Add(contactType, 2, 0);
                    viewCell.View = grid;
                    return viewCell;
                });

However, for my project I want to be able to format two of my properties into separate font attributes.

The solution I thought of that could give me the most power is to format two string properties using formatted string and setting the label's formattedText as shown below. However, I cannot retrieve the binding in a string. Another solution I can think of is to have separate labels for each binding and combining them using a Stack Layout but that solution is inconsistent throughout my UI. Thank you in advance!

   var unformattedBookName = new Binding("BookName");
   var unformattedBookDescription = new Binding("BookDescription");
   var formattedString = new FormattedString();
   formattedString.Spans.Add(new Span { Text = "{Binding unformattedBookName}", ForegroundColor = Color.Red, FontAttributes = FontAttributes.Bold });
   formattedString.Spans.Add(new Span { Text = "italic small.", FontAttributes = FontAttributes.Italic, FontSize = Device.GetNamedSize(NamedSize.Small, typeof(Label)) });
   var bookName = new Label()
                {

                    VerticalOptions = LayoutOptions.Center,
                    HorizontalOptions = LayoutOptions.Start,
                    HeightRequest = 100,
                    FontAttributes = FontAttributes.Bold,
                    FontSize = 16,
                    FormattedText = formattedString 
                }

EDIT: FINAL SOLUTION As @Jason suggested, I was able to combine both bindings into one and setting my formatted string to a single label. =)

  var formattedString = new FormattedString();
                var bookSpan = new Span
                {
                    ForegroundColor = Color.Red,
                    FontAttributes = FontAttributes.Bold
                };
                bookSpan.SetBinding(Span.TextProperty, "BookName");

                var bookDescriptionSpan = new Span
                {
                    ForegroundColor = Color.Red,
                    FontAttributes = FontAttributes.Italic,
                    FontSize = Device.GetNamedSize(NamedSize.Small, typeof(Label))
                };
                bookDescriptionSpan.SetBinding(Span.TextProperty, "BookDescription");

                formattedString.Spans.Add(bookSpan);
                formattedString.Spans.Add(bookDescriptionSpan);

                var combineBookLabel = new Label()
                {

                    VerticalOptions = LayoutOptions.Center,
                    HorizontalOptions = LayoutOptions.Start,
                    HeightRequest = 100,
                    FontAttributes = FontAttributes.Bold,
                    FontSize = 16,
                    FormattedText = formattedString
                };

Upvotes: 0

Views: 127

Answers (2)

Dinesh
Dinesh

Reputation: 46

The solution suggested by Jason is right one. You can use the same to achieve your requirement.

Regards, Dinesh Babu Yadav [Syncfusion Team]

Upvotes: 0

Jason
Jason

Reputation: 89082

that is not how you set a binding in code. The {Binding ...} syntax is for XAML. To do it in code use

var span = new Span() { ... };
span.SetBinding(Span.TextProperty, "BookName");

Upvotes: 3

Related Questions