How can i make a label fit/ auto size the grid row and column specified for it?

Kelve17Kelve17 Member ✭✭

Hi,
I am using Grid layout to try making the app responsive and when i use label and set a font size to it, the label sometimes surpasses the space (grid.row & grid.colum) alocated for it.

Is it possible to make the label always fit the alocated space ?

<Grid RowSpacing="0">
            <Grid.RowDefinitions>
                <RowDefinition Height="3.5*"/>
                <RowDefinition Height="6.5*"/>
            </Grid.RowDefinitions>
            <Grid Grid.Row="0" Grid.Column="0">
                <Image x:Name="imagemNav" Grid.Row="0" Grid.Column="0" Source="{local:ImageResource KiaiDay.Images.navigationImage.png}" Aspect="Fill"
                    HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand"/>
                <Grid Padding="20,10,20,0" ColumnSpacing="0" RowSpacing="0">
                    <Grid.RowDefinitions>
                        <RowDefinition Height="3.5*"/>
                        <RowDefinition Height="4.5*"/>
                        <RowDefinition Height="2*"/>
                    </Grid.RowDefinitions>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="6*"/>
                        <ColumnDefinition Width="4*"/>
                    </Grid.ColumnDefinitions>

...
                    <StackLayout Grid.Column="0" Grid.Row="1" Grid.ColumnSpan="2" Spacing="4">
                        <Label Text="Some text" FontSize="50" TextColor="White" FontFamily="{ StaticResource RegularFont}" Margin="20,0,0,0"/>
                        <Label Text="Some other text" FontSize="20" TextColor="White" FontFamily="{ StaticResource LightFont  }" Margin="25,-10,0,0"     
                                    Opacity="0.7"/>
                    </StackLayout>
...
</Grid>

Posts

  • JohnHardmanJohnHardman GBUniversity mod
    edited July 14

    @Kelve17 said:
    Hi,
    I am using Grid layout to try making the app responsive and when i use label and set a font size to it, the label sometimes surpasses the space (grid.row & grid.colum) alocated for it.

    Is it possible to make the label always fit the alocated space ?

    There are various approaches.

    The easiest is to make the Grid adjust to its content, by using Auto for Row height and Column width. See https://docs.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/layouts/grid#rows-and-columns

    Along with that, use the Label's LineBreakMode to wrap when required. See https://docs.microsoft.com/en-us/dotnet/api/xamarin.forms.label.linebreakmode?view=xamarin-forms

    However, note that there seems to still be a XF bug when laying out Grid's that contain wrapped Labels, where just occasionally a Label gets cropped, even though every other Label is ok.

    The alternative is to dynamically change the Label's FontSize until the text of the Label fits inside the space available in the Grid. I've seen various versions of this. One can be found at https://github.com/xamarin/XamarinCommunityToolkit/tree/master/Toolkit/Effects/Label . I've not seen a UWP implementation though. However, UWP does have the very handy ViewBox control, which can be used in a custom renderer with a related custom view to make anything fit in the space available. Note that the Effects that you find using that link will shrink text to fit, but do not expand it to make it as big as the space allows.

  • Kelve17Kelve17 Member ✭✭

    Hi, i've tried to use the effect but it didnt seem to work so well...
    And wrapping wouldnt be a good decision for me since this part of the view should be used as Navigation Bar.

  • JohnHardmanJohnHardman GBUniversity mod

    @Kelve17 said:
    Hi, i've tried to use the effect but it didnt seem to work so well...

    I found that the effect works ok for Android and iOS, but that it only makes the font smaller, not larger, so you might initially want to set the font to a large size so that the effect then reduces it until the text just fits into the space available.

  • Kelve17Kelve17 Member ✭✭

    So, i should set it the the biggest value possible ?

    Besides that, when i landscape it resizes very well and then when i return to normal(not landscape) it does not resize again ...

  • JohnHardmanJohnHardman GBUniversity mod

    @Kelve17 said:
    So, i should set it the the biggest value possible ?

    The biggest value you ever expect to fit.

    @Kelve17 said:
    Besides that, when i landscape it resizes very well and then when i return to normal(not landscape) it does not resize again

    When the orientation changes (or more accurately, when the containing layout changes size), the size needs to be set to the big value again and the effect code re-executed. It's a pain, I know.

  • Kelve17Kelve17 Member ✭✭

    How can i detect when the orientation changes ? Sorry, im not very experencied in xamarin.forms ...

  • JohnHardmanJohnHardman GBUniversity mod

    @Kelve17 said:
    How can i detect when the orientation changes ? Sorry, im not very experencied in xamarin.forms ...

    All VisualElement objects have a SizeChanged event handler that you can use

  • Kelve17Kelve17 Member ✭✭

    @JohnHardman said:

    @Kelve17 said:
    How can i detect when the orientation changes ? Sorry, im not very experencied in xamarin.forms ...

    All VisualElement objects have a SizeChanged event handler that you can use

    Alright. Thanks @JohnHardman for the patience and for the help. I think i can go on my own from here :)

Sign In or Register to comment.