Forum Xamarin.Forms
We are excited to announce that the Xamarin Forums are moving to the new Microsoft Q&A experience. Q&A is the home for technical questions and answers at across all products at Microsoft now including Xamarin!

We encourage you to head over to Microsoft Q&A for .NET for posting new questions and get involved today.

Help with a ViewCell in iOS

I've been trying my darndest to get this looking right but can't make it work. Any possibly way this can be solved in Xaml without a custom cell renderer?


Here's what I'm attempting in Xaml:

<ScrollView> <StackLayout> <ActivityIndicator IsRunning="{Binding IsFetching}" /> <ListView ItemsSource="{Binding Events}" Header="2015" Footer=""> <ListView.ItemTemplate> <DataTemplate> <ViewCell Height="55"> <ViewCell.View> <StackLayout Orientation="Horizontal" Padding="5" BackgroundColor="White"> <StackLayout> <BoxView WidthRequest="44" HeightRequest="5" BackgroundColor="Purple" /> <Label Text="AUG" FontSize="12" HeightRequest="13" HorizontalOptions="Center" VerticalOptions="Start" FontAttributes="Bold"/> <Label Text="31" FontSize="13" VerticalOptions="StartAndExpand" HorizontalOptions="Center" /> </StackLayout> <StackLayout Orientation="Vertical" HorizontalOptions="StartAndExpand"> <Label Text="Relay For Life of" FontSize="14" VerticalOptions="End" TextColor="Gray"/> <Label Text="Hope City" FontSize="16" FontAttributes="Bold" VerticalOptions="StartAndExpand"/> </StackLayout> </StackLayout> </ViewCell.View> </ViewCell> </DataTemplate> </ListView.ItemTemplate> </ListView> </StackLayout> </ScrollView>

Tagged:

Posts

  • DavidDancyDavidDancy AUMember ✭✭✭✭

    @MarkWilkinson.4991 As far as I'm aware the row height is set to 44 unless you set it to something else (this I think is the standard row height on iOS). I'd try setting the RowHeight property of your ListView to 55:

    <ListView ItemsSource="{Binding Events}" RowHeight="55">

    Your Header can also be a View, not just text. Add this above the <ListView.ItemTemplate> tag:

    <ListView.HeaderTemplate>
        <DataTemplate>
            <Label Text="2015" FontSize="Micro" TextColor="Gray" />
        </DataTemplate>
    </ListView.HeaderTemplate>
    

    You can put whatever you like inside the DataTemplate - it's just a View, so you should be able to achieve your formatting target with a bit of experimenting. I just guessed at the font size and text color. :)

    I see you've used StackLayout extensively. This isn't a bad thing but you should be aware that StackLayout has an internal Spacing attribute that you may need to adjust to get the visual effect of the "Relay for Life of" sitting directly on top of the "Hope City". The same goes for the calendar elements on the left. You should also take a look at the XAlign property of the Label element to help you get the text lined up properly.

    As an alternative to StackLayout you may like to consider using a Grid. According to the docs this can be faster to render as it doesn't have to do quite as many calculations in the layout cycle.

Sign In or Register to comment.