Multi line text?

[cameron]

Segmented control doesn't seem to support multi line text (separated by newline character).

Is there a way we can make this work? Is this something that can be added via a custom renderer for both ios and android?

[Lance | Manager Technical Support]

Hello Cameron,

Currently, the RadSegmentedControl doesn't have an ItemTemplate option where you can define the content of the segment. As far as using a Custom Renderer, this isn't an option as the control is purely a Xamarin.Forms control that doesn't have a native-control renderer to override.

We do have the feature request on the backlog, you can up-vote and following it here: SegmentedControl: Enable users to display custom content in order to visualize complex objects (if you've followed the item, you'll be notified of status changes immediately).

Alternative Option

Depending on your scenario, maybe a RadTabView might work for your needs. The TabView can use a custom header, in which you could draw a box around the title, take a look at the Custom TabView Header example. The Example draws a line underneath the header, but you could easily expand on it to draw the border around it.

Regards,
Lance | Tech Support Engineer, Sr.
Progress Telerik

[cameron]

Hi Lance.

If this control is set up purely in xamarin forms, Is it using the xamarin forms label to display the text? If so, can we expose the LineBreakMode property somehow, or perhaps use reflection?

[Lance | Manager Technical Support]

Hi Cameron,

My apologies, I was incorrect in stating this control is one the of the purely Xamarin.Forms controls in the suite. While exploring the source code to find a property you could use for reflection purposes, I discovered that you can indeed extend the control's renderer to access the native elements.

The renderer's class name is SegmentedControlRenderer, this is what you can inherit from on each platform

Demo

As one example, I created a custom renderer for the UWP project, in which the native control has an ItemTemplate property you can set. So I first created a DataTemplate in App.xaml with a key "CustomSegmentItemTemplate", which contains a TextBlock with TextWrapping set to Wrap:

<Application x:Class="Segmented_CustomRenderers.UWP.App"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             RequestedTheme="Light">

    <Application.Resources>
        <DataTemplate x:Name="CustomSegmentItemTemplate">
            <TextBlock Text="{Binding}" Foreground="Red" TextWrapping="Wrap"/>
        </DataTemplate>
    </Application.Resources>
</Application>

In the Custom Renderer, I do the following:

- Extend the Telerik SegmentedControlRenderer
- Added the required assembly attribute so that the app will use the custom renderer instead of the default one
- Set the ItemTemplate using the DataTemplate that was defined in App.xaml

using Windows.UI.Xaml;
using Segmented_CustomRenderers.UWP.CustomRenderers;
using Telerik.XamarinForms.Input;
using Telerik.XamarinForms.InputRenderer.UWP;
using Xamarin.Forms.Platform.UWP;

[assembly: ExportRenderer(typeof(RadSegmentedControl), typeof(MySegmentedControlRenderer))]
namespace Segmented_CustomRenderers.UWP.CustomRenderers
{
    public class MySegmentedControlRenderer : SegmentedControlRenderer
    {
        protected override void OnElementChanged(ElementChangedEventArgs<RadSegmentedControl> e)
        {
            base.OnElementChanged(e);

            if (e.NewElement != null)
            {
                this.Control.ItemTemplate = Application.Current.Resources["CustomSegmentItemTemplate"] as DataTemplate;
            }
        }

    }
}

Here's the result at runtime




Next Steps

You will of course need to take a similar approach across all the platforms and use that platform's specific approach for wrapping text. 

In the case of iOS and Android, I wasn't able to immediately find a way to set the text wrapping, however I'm the UWP expert and am not intimately familiar with the iOS and Android level platform specifics for text wrapping.

I'll ask the development team members if there is a way to set the text wrapping on the native control, but it may be the case that the reason why we haven't exposed an ItemTemplate or Text wrapping attribute yet is due to native control limitations. In the meantime here are a couple screenshots from my attached demo to give you a head start on iOS and Android:

iOS





Android



If you get stuck, open a Support Ticket. We do try to monitor and answer the forums, but this is limited to available resources. Whereas a support ticket carries high priority and gets assigned directly to the engineers who actually built the component.

I hope I was able to get you closer to your goal. 

Regards,
Lance | Tech Support Engineer, Sr.
Progress Telerik

[DiscoDan]

this is great, just what I was looking for Lance, thank you. Will this approach also work in the dataform SegmentedEditor?

Is there any way that we can render the segmented control onto 2 (or more lines)? if there are more than 5 options it gets a bit quished..

thanks in advance

[Lance | Manager Technical Support]

Hello DiscoDan,

Just quickly following up in this forum thread to that the community can see the high level answer. Yes, this can be done using a DataForm CustomEditor. In the editor overrides, you can access the SegmentEditor instance and modify values there. 

Regards,
Lance | Tech Support Engineer, Sr.
Progress Telerik