Custom ListView items

VladKolodka.1858VladKolodka.1858 USMember ✭✭
edited July 2017 in Xamarin.Forms

Hello. I have this design:

I tried to implement it with this code, but faced with some problems.

Layout:

<ListView x:Name="Events" SeparatorVisibility="None" HasUnevenRows="True" SeparatorColor="Transparent" Margin="5" ItemSelected="Events_OnItemSelected"> <ListView.ItemTemplate> <DataTemplate> <controls:EventItem StartTime="{Binding StartDate}" IsActive="{Binding IsActive}" /> </DataTemplate> </ListView.ItemTemplate> </ListView>

EventItem (xaml):

`
<ViewCell.View>


<Frame.Resources>
































</Frame.Resources>

<Grid.ColumnDefinitions>




</Grid.ColumnDefinitions>


                <ContentView Grid.Column="3" x:Name="MoreIconWrapper" Style="{StaticResource MoreIconWrapper}" />
            </Grid>
        </Frame>

        <Frame x:Name="CheckIconWrapper" WidthRequest="36" HeightRequest="36" Padding="0" HasShadow="True"
               CornerRadius="21" BackgroundColor="Transparent"
               RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=1, Constant=-56}"
               RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height, Factor=1, Constant=-37}" />

    </RelativeLayout>
</ViewCell.View>

`

EventItem (code):

`namespace CedarMobile.Controls
{
[XamlCompilation(XamlCompilationOptions.Compile)]
public partial class EventItem
{
public static BindableProperty IsActiveProperty =
BindableProperty.Create("IsActive", typeof(bool), typeof(EventItem), false,
propertyChanged: IsActivePropertyChanged);

    private static void IsActivePropertyChanged(BindableObject bindable, object oldValue, object newValue)
    {
        if (!(newValue is bool)) return;
        var self = bindable as EventItem;

        if (self == null) return;
        var val = (bool) newValue;

        InitializeStateImage(self, val);
    }

    private static void InitializeStateImage(EventItem self, bool val)
    {
        self.CheckIconWrapper.Content = new SvgImageView
        {
            SvgAssembly = App.MainAssembly,
            SvgPath = IconFinder.FindCommon("check", val),
            WidthRequest = 36,
            HeightRequest = 36,
            Margin = new Thickness(0, 1, 0, 0)
        };
    }

    public static BindableProperty StartTimeProperty =
        BindableProperty.Create("StartTime", typeof(DateTime), typeof(EventItem), DateTime.Now,
            propertyChanged: StartTimePropertyChanged);

    private static void StartTimePropertyChanged(BindableObject bindable, object oldValue, object newValue)
    {
        if (!(newValue is DateTime)) return;
        var self = bindable as EventItem;

        if (self == null) return;
        var val = (DateTime) newValue;

        // TODO localization

        if (val.TimeOfDay < TimeSpan.FromHours(12))
        {
            // morning
            self.TimeOfDay.Text = "morning";
        }
        else if (val.TimeOfDay >= TimeSpan.FromHours(18))
        {
            // evening
            self.TimeOfDay.Text = "evening";
        }
        else
        {
            // day
            self.TimeOfDay.Text = "day";
        }
    }

    public EventItem()
    {
        InitializeComponent();

        // load "more" icon
        MoreIconWrapper.Content = new SvgImageView
        {
            SvgAssembly = App.MainAssembly,
            SvgPath = IconFinder.FindCommon("more"),
            WidthRequest = 4,
            HeightRequest = 16,
            Opacity = 0.38
        };
    }

    protected override void OnAppearing()
    {
        base.OnAppearing();

        if (CheckIconWrapper.Content == null) InitializeStateImage(this, false);
    }

    public bool IsActive
    {
        get => (bool) GetValue(IsActiveProperty);
        set => SetValue(IsActiveProperty, value);
    }

    public DateTime StartTime
    {
        get => (DateTime) GetValue(StartTimeProperty);
        set => SetValue(StartTimeProperty, value);
    }
}

}`

What I get:

Problems:
1. I need custom frame (root element of my list item) shadow, like in design.
2. Remove riple effect on tap between list items, and add this effect to root item frame.
3. I use relative layout to place green rounded svg image at the specified place. But if Ido not put the image in it'sframe, it will appear under the main list item frame. The same happens when i remove shadow from svg image frame.

Sign In or Register to comment.