Multi line text?

6 posts, 0 answers
  1. cameron
    cameron avatar
    5 posts
    Member since:
    Apr 2018

    Posted 21 May 2018 Link to this post

    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?

  2. Lance | Principal TSE
    Admin
    Lance | Principal TSE avatar
    1043 posts

    Posted 22 May 2018 Link to this post

    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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  3. cameron
    cameron avatar
    5 posts
    Member since:
    Apr 2018

    Posted 23 May 2018 in reply to Lance | Principal TSE Link to this post

    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?

  4. Lance | Principal TSE
    Admin
    Lance | Principal TSE avatar
    1043 posts

    Posted 24 May 2018 Link to this post

    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: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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  5. DiscoDan
    DiscoDan avatar
    1 posts
    Member since:
    Oct 2014

    Posted 14 Jun 2018 in reply to Lance | Principal TSE Link to this post

    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

  6. Lance | Principal TSE
    Admin
    Lance | Principal TSE avatar
    1043 posts

    Posted 14 Jun 2018 Link to this post

    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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Back to Top