June 2016 – Depechie’s outing

Xamarin forms – multi line label custom renderer gotcha

** UPDATE **

We expanded this and added an Effect for eveyone to use in the Xamarin Forms Community Toolkit!
It’s available here : https://github.com/FormsCommunityToolkit/FormsCommunityToolkit
The effect itself resides here : https://github.com/FormsCommunityToolkit/FormsCommunityToolkit/tree/dev/src/Effects/Effects/Label

On a project I’m working on, we needed a label that would show an ellipsis at the end. ( the 3 … indicating there is more text but not enough space on the screen to fit it all )

Having this on a label control in Xamarin forms is easy, you just add the property

<Label LineBreakMode="TailTruncation" />

1	<Label LineBreakMode="TailTruncation" />

this will force the ellipsis to appear if needed.

But on a specific page we wanted to show more text to the end user and even than add an ellipsis if needed. So in other words we would love to be able to tell the label control how many lines it should at least try to display.
To get this working in Xamarin forms you’ll need to add a custom renderer. Because the Xamarin forms label control doesn’t have any property available for us to manipulate to accomplish this.

This is not difficult at all to do, but there is a small gotcha with Android when you want to pull this off!

But let’s start with what you need to do to get this working.
In the Xamarin forms PCL ( so the general one, not the iOS or Android project ), we first add a class called MultiLineLabel.cs – this will be our own custom control.
It inherits from Label and we only need to add 1 dependency property called Lines, defined as an int. It looks like this:

public class MultiLineLabel : Label
{
    private static int _defaultLineSetting = -1;

    public static readonly BindableProperty LinesProperty = BindableProperty.Create(nameof(Lines), typeof(int), typeof(MultiLineLabel), _defaultLineSetting);
    public int Lines
    {
        get { return (int)GetValue(LinesProperty); }
        set { SetValue(LinesProperty, value); }
    }
}

public class MultiLineLabel : Label

{

private static int _defaultLineSetting = -1;

public static readonly BindableProperty LinesProperty = BindableProperty.Create(nameof(Lines), typeof(int), typeof(MultiLineLabel), _defaultLineSetting);

public int Lines

{

get { return (int)GetValue(LinesProperty); }

set { SetValue(LinesProperty, value); }

}

After defining this custom control, we can use it on our XAML page, like so:

<StackLayout>
	<Label Text="NORMAL" FontSize="12" FontAttributes="Bold" />
	<Label Text="Welcome to Xamarin Forms! Let us try to create a label with text that is too long to fit on 1 line so it should wrap and implement an ellipsis if it's more than 2 lines in total"
		   VerticalOptions="Center" HorizontalOptions="Center"
		   LineBreakMode="TailTruncation"
		   Margin="20,0,20,0"/>

	<Label Text="MULTILINE" FontSize="12" FontAttributes="Bold" />
	<controls:MultiLineLabel Text="Welcome to Xamarin Forms! Let us try to create a label with text that is too long to fit on 1 line so it should wrap and implement an ellipsis if it's more than 2 lines in total"
			VerticalOptions="Center" HorizontalOptions="Center"
			LineBreakMode="TailTruncation"
			Margin="20,0,20,0"/>

	<Label Text="MULTILINE - 2 lines" FontSize="12" FontAttributes="Bold" />
	<controls:MultiLineLabel Text="Welcome to Xamarin Forms! Let us try to create a label with text that is too long to fit on 1 line so it should wrap and implement an ellipsis if it's more than 2 lines in total"
			VerticalOptions="Center" HorizontalOptions="Center"
			LineBreakMode="TailTruncation"
			Lines="2"
			Margin="20,0,20,0"/>		

	<Label Text="MULTILINE - 3 lines" FontSize="12" FontAttributes="Bold" />
	<controls:MultiLineLabel Text="Welcome to Xamarin Forms! Let us try to create a label with text that is too long to fit on 1 line so it should wrap and implement an ellipsis if it's more than 2 lines in total"
			VerticalOptions="Center" HorizontalOptions="Center"
			LineBreakMode="TailTruncation"
			Lines="3"
			Margin="20,0,20,0"/>
</StackLayout>

<Label Text="Welcome to Xamarin Forms! Let us try to create a label with text that is too long to fit on 1 line so it should wrap and implement an ellipsis if it's more than 2 lines in total"

VerticalOptions="Center" HorizontalOptions="Center"

LineBreakMode="TailTruncation"

Margin="20,0,20,0"/>

<controls:MultiLineLabel Text="Welcome to Xamarin Forms! Let us try to create a label with text that is too long to fit on 1 line so it should wrap and implement an ellipsis if it's more than 2 lines in total"

VerticalOptions="Center" HorizontalOptions="Center"

LineBreakMode="TailTruncation"

Margin="20,0,20,0"/>

VerticalOptions="Center" HorizontalOptions="Center"

LineBreakMode="TailTruncation"

Lines="2"

Margin="20,0,20,0"/>

VerticalOptions="Center" HorizontalOptions="Center"

LineBreakMode="TailTruncation"

Lines="3"

Margin="20,0,20,0"/>

</StackLayout>

We will be using this Lines property in our custom renderers.
First up the iOS custom renderer for our MultiLineLabel. Create a class in the Xamarin forms iOS project called CustomMultiLineLabelRenderer.cs with following code:

[assembly: ExportRenderer(typeof(MultiLineLabel), typeof(CustomMultiLineLabelRenderer))]
namespace LabelWrappingTest.iOS
{
    public class CustomMultiLineLabelRenderer : LabelRenderer
    {
        protected override void OnElementChanged(ElementChangedEventArgs<Label> e)
        {
            base.OnElementChanged(e);

            MultiLineLabel multiLineLabel = (MultiLineLabel)Element;

            if (multiLineLabel != null && multiLineLabel.Lines != -1)
                Control.Lines = multiLineLabel.Lines;
        }
    }
}

[assembly: ExportRenderer(typeof(MultiLineLabel), typeof(CustomMultiLineLabelRenderer))]

namespace LabelWrappingTest.iOS

{

public class CustomMultiLineLabelRenderer : LabelRenderer

{

protected override void OnElementChanged(ElementChangedEventArgs<Label> e)

{

base.OnElementChanged(e);

MultiLineLabel multiLineLabel = (MultiLineLabel)Element;

if (multiLineLabel != null && multiLineLabel.Lines != -1)

Control.Lines = multiLineLabel.Lines;

}

You’ll notice that we are checking if the user specified a value for the Lines dependency property and if this is true, we pass this to the actual iOS UIKit.UILabel control by setting it’s Lines property. With this in place we get following result.

So iOS is done and looking great. Now add the Android renderer. Create a CustomMultiLineLabelRenderer.cs class in the Xamarin forms Android project with following code:

public class CustomMultiLineLabelRenderer : LabelRenderer
{
    protected override void OnElementChanged(ElementChangedEventArgs<Label> e)
    {
        base.OnElementChanged(e);

        MultiLineLabel multiLineLabel = (MultiLineLabel)Element;

        if (multiLineLabel != null && multiLineLabel.Lines != -1)
        {                
            Control.SetLines(multiLineLabel.Lines);
        }
    }
}

public class CustomMultiLineLabelRenderer : LabelRenderer

{

protected override void OnElementChanged(ElementChangedEventArgs<Label> e)

{

base.OnElementChanged(e);

MultiLineLabel multiLineLabel = (MultiLineLabel)Element;

if (multiLineLabel != null && multiLineLabel.Lines != -1)

{

Control.SetLines(multiLineLabel.Lines);

}

This doesn’t look all that different from the iOS counterpart… instead of setting a property we now use a method SetLines on the Android.Widget.TextView indicating how many lines we want it to display.
But wait, if we try this and look at the result, we’ll notice that it doesn’t work!!

It took me a while to figure this out ( I’m no Android expert 😉 ). But after taking a look in the Xamarin forms source code ( glad it’s open source 😉 ) I noticed they will always force a SetSingleLine(true) when setting the TailTruncation LineBreakMode…
Code can be seen here https://github.com/xamarin/Xamarin.Forms/blob/2d9288eee6e6f197364a64308183725e7bd561f9/Xamarin.Forms.Platform.Android/Renderers/LabelRenderer.cs#L179

So the fix is easy… you need to reset this Single Line forcing, the final code looks like this ( in your custom renderer ) :

[assembly: ExportRenderer(typeof(MultiLineLabel), typeof(CustomMultiLineLabelRenderer))]
namespace LabelWrappingTest.Droid
{
    public class CustomMultiLineLabelRenderer : LabelRenderer
    {
        protected override void OnElementChanged(ElementChangedEventArgs<Label> e)
        {
            base.OnElementChanged(e);

            MultiLineLabel multiLineLabel = (MultiLineLabel)Element;

            if (multiLineLabel != null && multiLineLabel.Lines != -1)
            {
                Control.SetSingleLine(false);
                Control.SetLines(multiLineLabel.Lines);
            }
        }
    }
}

[assembly: ExportRenderer(typeof(MultiLineLabel), typeof(CustomMultiLineLabelRenderer))]

namespace LabelWrappingTest.Droid

{

public class CustomMultiLineLabelRenderer : LabelRenderer

{

protected override void OnElementChanged(ElementChangedEventArgs<Label> e)

{

base.OnElementChanged(e);

MultiLineLabel multiLineLabel = (MultiLineLabel)Element;

if (multiLineLabel != null && multiLineLabel.Lines != -1)

{

Control.SetSingleLine(false);

Control.SetLines(multiLineLabel.Lines);

}

With that in place we’ll get following result

Yeah success!
To start I’ve done a pull request on Xamarin forms to counter this SingleLine forcing, but not sure this will be added though… https://github.com/xamarin/Xamarin.Forms/pull/234
So better be safe and add the extra line in your own custom renderer for now.

As always example project up on github here…

UWP – Auto resizable flyout

So imaging you have this great looking layout in your UWP app, all set up with the new guidelines.
Meaning a side bar for navigation and a master detail section, that will dynamically change when you don’t have enough space to fit and master and detail.

We are talking about this layout:

But of course like in most other apps, you want to enable some filtering on the content. That way the user can find the items that are more important to him… So for UWP there is a wonderful control that has all the needed qualities for such a feature; the MenuFlyout !
Now if you add this control, as is, it will only render itself in a certain width and height depending on the content that it contains. Meaning that most of the time, it will look tiny and out of place with the rest of the visual elements.
Here is a Phone screenshot example : notice how the flyout hovers above the side pane and it’s width is only calculated to it’s content

What we would love to have, is a Flyout that takes up the full width size of the parent control it’s contained in… in other words in our example, have an equal width to the column that hosts the item list.
Let me show you how you can accomplish this.

First up, create this nice triple design, by using the new SplitView control, this will give you the side pane. Of course you’ll still need to add 2 columns to host the list and the detail content.
We’ll use the new Visual State Manager settings style to change the layout if we use the app on smaller screens!
Do note we are using a button with an empty button style to render the text for filter selection and a FlyoutMenu is attatched to that button. They are contained in the MasterColumn

        <SplitView.Content>
            <UserControl>
            <Grid x:Name="LayoutRoot"
                  Loaded="OnLayoutRootLoaded">
                <VisualStateManager.VisualStateGroups>
                    <VisualStateGroup x:Name="AdaptiveStates"
                                      CurrentStateChanged="OnAdaptiveStatesCurrentStateChanged">
                        <VisualState x:Name="Mobile">
                            <VisualState.StateTriggers>
                                <AdaptiveTrigger MinWindowWidth="0" />
                            </VisualState.StateTriggers>
                            <VisualState.Setters>
                                <Setter Target="MasterColumn.Width" Value="*" />
                                <Setter Target="DetailColumn.Width" Value="0" />
                                <Setter Target="MasterListView.SelectionMode" Value="None" />
                            </VisualState.Setters>
                        </VisualState>
                        <VisualState x:Name="Desktop">
                            <VisualState.StateTriggers>
                                <AdaptiveTrigger MinWindowWidth="720" />
                            </VisualState.StateTriggers>
                            <VisualState.Setters>
                                <Setter Target="MasterColumn.Width" Value="*" />
                                <Setter Target="DetailColumn.Width" Value="1.8*" />
                            </VisualState.Setters>
                        </VisualState>                        
                    </VisualStateGroup>
                </VisualStateManager.VisualStateGroups>

                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto" />
                    <RowDefinition Height="*" />
                </Grid.RowDefinitions>

                <Grid.ColumnDefinitions>
                    <ColumnDefinition x:Name="MasterColumn" />
                    <ColumnDefinition x:Name="DetailColumn" />
                </Grid.ColumnDefinitions>

                <Button x:Name="FilterButton"
                        Style="{StaticResource EmptyButtonStyle}"
                        Content="Showing all items"
                        Margin="10,5,0,10"
                        Grid.Row="0"
                        Grid.Column="0" FontWeight="Bold">
                    <Button.Flyout>
                        <MenuFlyout x:Name="FilterFlyout" Opened="OnFilterFlyoutOpened">
                            <MenuFlyoutItem Text="all items" />
                            <MenuFlyoutItem Text="my items" />
                            <MenuFlyoutItem Text="friends' items" />
                        </MenuFlyout>
                        </Button.Flyout>
                    </Button>

                    <ListView x:Name="MasterListView"
                          Grid.Row="1" Grid.Column="0"
                          ItemContainerTransitions="{x:Null}"
                          ItemTemplate="{StaticResource MasterListViewItemTemplate}"
                          IsItemClickEnabled="True"
                          ItemClick="OnMasterListViewItemClick">
                    <ListView.ItemContainerStyle>
                        <Style TargetType="ListViewItem">
                            <Setter Property="HorizontalContentAlignment" Value="Stretch" />
                        </Style>
                    </ListView.ItemContainerStyle>
                </ListView>

                <ContentPresenter x:Name="DetailContentPresenter"
                                  Grid.Column="1"
                                  Grid.RowSpan="2"
                                  BorderThickness="1,0,0,0"
                                  Padding="24,0"
                                  BorderBrush="{ThemeResource SystemControlForegroundBaseLowBrush}"
                                  Content="{x:Bind MasterListView.SelectedItem, Mode=OneWay}"
                                  ContentTemplate="{StaticResource DetailContentTemplate}">
                    <ContentPresenter.ContentTransitions>
                        <!-- Empty by default. See MasterListView_ItemClick -->
                        <TransitionCollection />
                    </ContentPresenter.ContentTransitions>
                </ContentPresenter>
            </Grid>
            </UserControl>
        </SplitView.Content>
    </SplitView>

<SplitView.Content>

<Grid x:Name="LayoutRoot"

Loaded="OnLayoutRootLoaded">

<VisualStateManager.VisualStateGroups>

<VisualStateGroup x:Name="AdaptiveStates"

CurrentStateChanged="OnAdaptiveStatesCurrentStateChanged">

<VisualState.StateTriggers>

</VisualState.StateTriggers>

<VisualState.Setters>

</VisualState.Setters>

</VisualState>

<VisualState.StateTriggers>

</VisualState.StateTriggers>

<VisualState.Setters>

</VisualState.Setters>

</VisualState>

</VisualStateGroup>

</VisualStateManager.VisualStateGroups>

<Grid.RowDefinitions>

</Grid.RowDefinitions>

<Grid.ColumnDefinitions>

</Grid.ColumnDefinitions>

<Button x:Name="FilterButton"

Style="{StaticResource EmptyButtonStyle}"

Content="Showing all items"

Margin="10,5,0,10"

Grid.Row="0"

Grid.Column="0" FontWeight="Bold">

<Button.Flyout>

</MenuFlyout>

</Button.Flyout>

</Button>

<ListView x:Name="MasterListView"

Grid.Row="1" Grid.Column="0"

ItemContainerTransitions="{x:Null}"

ItemTemplate="{StaticResource MasterListViewItemTemplate}"

IsItemClickEnabled="True"

ItemClick="OnMasterListViewItemClick">

<ListView.ItemContainerStyle>

</Style>

</ListView.ItemContainerStyle>

</ListView>

<ContentPresenter x:Name="DetailContentPresenter"

Grid.Column="1"

Grid.RowSpan="2"

BorderThickness="1,0,0,0"

Padding="24,0"

BorderBrush="{ThemeResource SystemControlForegroundBaseLowBrush}"

Content="{x:Bind MasterListView.SelectedItem, Mode=OneWay}"

ContentTemplate="{StaticResource DetailContentTemplate}">

<ContentPresenter.ContentTransitions>

</ContentPresenter.ContentTransitions>

</ContentPresenter>

</Grid>

</UserControl>

</SplitView.Content>

</SplitView>

Now that we have this all setup up, only thing left to do is calculate the actual width of the MasterColumn and use that to change the size of the flyout. But also take into account the side pane width to shit the flyout in place.
We will recalculate each time the flyout opens, because the app could be resized by the user before the flyout is actually opened.
So you’ll see a handler hooked up called for the Opened event called OnFilterFlyoutOpened with following code

MenuFlyout menuFlyout = sender as MenuFlyout;
Style style = new Style { TargetType = typeof(MenuFlyoutPresenter) };
style.Setters.Add(new Setter(MinWidthProperty, MasterColumn.ActualWidth));

//Assuming we didn't set a different Compact Pane size other than using the default one
var paneSize = Convert.ToInt32((Application.Current.Resources["SplitViewCompactPaneThemeLength"] as double?).Value);
style.Setters.Add(new Setter(MarginProperty, new Thickness(paneSize, 0, 0, 0)));

menuFlyout.MenuFlyoutPresenterStyle = style;

MenuFlyout menuFlyout = sender as MenuFlyout;

Style style = new Style { TargetType = typeof(MenuFlyoutPresenter) };

style.Setters.Add(new Setter(MinWidthProperty, MasterColumn.ActualWidth));

//Assuming we didn't set a different Compact Pane size other than using the default one

var paneSize = Convert.ToInt32((Application.Current.Resources["SplitViewCompactPaneThemeLength"] as double?).Value);

style.Setters.Add(new Setter(MarginProperty, new Thickness(paneSize, 0, 0, 0)));

menuFlyout.MenuFlyoutPresenterStyle = style;

The trick here is to change the MenuFlyoutPresenterStyle, with that style we can apply a minimum width to the actual flyout. That width should be equal to the width of the Master column…
We also apply some margin to compensate for the side pane.
By doing all this we now get following nice result :

As ever this sample can be found on my GitHub right here…