Forum Xamarin Xamarin.Forms

Add label beneath a TableView with settings intent

Disappointingly, I cannot show pictures which would help a lot with this. I have a page where I have a single switch with a description beneath it, with the following xaml:

<?xml version="1.0" encoding="UTF-8"?>
<ContentPage
    xmlns="..."
    xmlns:x="..."
    x:Class="MyApp.SettingsPage"
    Title="Some setting">
         <TableView Intent="Settings" VerticalOptions="Start">
                <TableRoot>
                    <TableSection Title="Advanced Setting">
                        <SwitchCell Text="Enable Advanced Setting"/>
                    </TableSection>
                </TableRoot>
            </TableView>
            <Label TextColor="Gray"
                   FontSize="Small"
                   Text="This setting enables something internal"/>
    </StackLayout>
</ContentPage>

As you 'would' see, the problem is that the label is pushed to the very end of the page. In contrast, Apple's own settings page enables this kind of description in a nice system font and size. Again, disappointingly, I cannot show you this.

One solution would be to use a stacklayout for the tableview and the label. However, this has the effect of having a white background for the rest of the page, in stark contrast to the system default of light grey background with dark grey text description that you'd get on an iPhone settings page.

How would I go about solving this? If there is no nice way of doing it, please say so rather than giving me an ugly hack. Ideally the tableview would take up only the space it actually used, or there is a property I can use, or even an element inside the TableView.

Answers

  • LandLuLandLu Member, Xamarin Team Xamurai

    TableView will take the rest space by default so the other controls will be pushed to the end. If you want your TableView to take the space depending on its content you could try using Custom Renderer:

    [assembly: ExportRenderer(typeof(TableView), typeof(CustomTableViewRenderer))]
    namespace App.iOS
    {
        public class CustomTableViewRenderer : TableViewRenderer
        {
            public override void Draw(CGRect rect)
            {
                base.Draw(rect);
    
                Element.HeightRequest = Control.ContentSize.Height;
            }
        }
    }
    

    But the stack layout will show a background area for the rest space as you didn't have enough controls(only a tableview and a label) to take the whole space in this way.
    Then which effect do you really want to achieve?

Sign In or Register to comment.