Help with a ViewCell in iOS RRS feed

  • Question

  • User112478 posted

    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>

    Tuesday, April 28, 2015 5:48 PM

All replies

  • User31385 posted

    @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:

            <Label Text="2015" FontSize="Micro" TextColor="Gray" />

    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.

    Wednesday, April 29, 2015 3:55 AM