TextCell Style (right align Detail property)

DavidNeubauerDavidNeubauer USMember
edited August 2014 in Xamarin.Forms

Trying to build a Forms based settings page, IOS only for right now.

The following puts the detail vertically underneath the text.


Content = new TableView
{
Root = new TableRoot ("Table Title")
{
new TableSection("Section 1 Title")
{
new TextCell
{
Text = "TextCell Text",
Detail = "TextCell Detail"
},
},
},
}

I understand the Style property was removed, is there a workaround to get the detail back over on the right? I can do it by re-creating the UITableViewCell object in a Renderer but this breaks the binding.

Hep!

Posts

  • MitchMilamMitchMilam USMember ✭✭✭

    I would just create a custom cell type that uses a horizontal StackLayout

  • DavidNeubauerDavidNeubauer USMember
    edited August 2014

    That works actually quite well. This is what your talking about correct? I'm using sub classing so that I can target bits and pieces with renderers.

    public class CommonTimePicker : TimePicker 
    {
    }
    
    public class CommonTimeCell : ViewCell 
    {
        public CommonTimeCell(string text, Binding detail_binding)
        {
            Label textLabel = new Label {
                YAlign = TextAlignment.Center,
                TextColor = Color.White,
                Text = text,
            };
    
            CommonTimePicker timePicker = new CommonTimePicker { 
                BackgroundColor = Color.Transparent,
                HorizontalOptions = LayoutOptions.EndAndExpand,
            };
            timePicker.SetBinding (TimePicker.TimeProperty, detail_binding);
    
            Tapped += (object sender, EventArgs e) => {
                timePicker.Focus ();
            };
    
            View = new StackLayout {
                Orientation = StackOrientation.Horizontal,
                VerticalOptions = LayoutOptions.Center,
                Children = { 
                    textLabel,
                    timePicker,
                }
            };
        }
    }
    
  • MitchMilamMitchMilam USMember ✭✭✭

    That is it

  • stesvisstesvis USMember ✭✭✭

    If you use XAML, this is how i did it:

        <ContentPage.Content>
            <StackLayout>
    
                <TableView Intent="Data">
                    <TableRoot>
                        <TableSection Title="Section title">
                            <ViewCell>
                                <ViewCell.View>
                                    <StackLayout Orientation="Horizontal" Padding="13, 7">
                                        <Label Text="Text value" VerticalTextAlignment="Center" />
                                        <Label Text="Detail value" HorizontalOptions="EndAndExpand" HorizontalTextAlignment="End" VerticalOptions="Center"/>
                                    </StackLayout>
                                </ViewCell.View>
                            </ViewCell>
                        </TableSection>
                    </TableRoot>
                </TableView>
    
            </StackLayout>
        </ContentPage.Content>
    
Sign In or Register to comment.