Active Project

 

Active Project for Task Manager

Code for Custom Entry Visit here

Class for this Page Visit here

ActiveProject.xaml

 <ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" 
             xmlns:TemplatedPage="clr-namespace:TaskManagerUIDesign.Views.Template" 
             xmlns:custom="clr-namespace:TaskManagerUIDesign.Controls"
             x:Class="TaskManagerUIDesign.Views.ActiveProject"
             BackgroundColor="#F5F5F5"
             Title="Active Projects">
    <ContentPage.Content>
        <ScrollView HorizontalOptions="Start" VerticalOptions="Start" >
            <StackLayout HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" >
                <Label Text="10 Projects are active." TextColor="Black" Margin="20,20,20,0"></Label>
                <Frame CornerRadius="20" Margin="10,5">
                    <StackLayout Margin="-20">
                        <custom:CustomEntry CornerRadius="20" Margin="0" BorderColor="LightGray" HorizontalTextAlignment="Start" FontSize="17"
                                HeightRequest="50" Placeholder="Search Project" BackgroundColor="White" PlaceholderColor="Gray" TextColor="#0C1F4B"/>
                    </StackLayout>
                </Frame>
                <CollectionView x:Name="cv" HeightRequest="400"
                HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">
                    <CollectionView.ItemsLayout>
                        <LinearItemsLayout Orientation="Horizontal" />
                    </CollectionView.ItemsLayout>
                    <CollectionView.ItemTemplate >
                        <DataTemplate>
                            <TemplatedPage:ActiveProjectTemplate></TemplatedPage:ActiveProjectTemplate>
                        </DataTemplate>
                    </CollectionView.ItemTemplate>
                </CollectionView>

                <Grid RowDefinitions="Auto, Auto, Auto"
                HorizontalOptions="FillAndExpand" VerticalOptions="StartAndExpand" Padding="20,-25,20,0">

                    <Label Grid.Row="0" Text="My Task" FontAttributes="Bold" FontSize="23" TextColor="#0C1F4B"  VerticalOptions="StartAndExpand" HorizontalOptions="StartAndExpand" />
                    <Grid ColumnDefinitions="*,*,*" Grid.Row="1" HorizontalOptions="FillAndExpand" Padding="0,5">
                        <Label x:Name="btnRecent" Margin="10,0,0,0"  Grid.Column="0" Text="Recent" VerticalOptions="CenterAndExpand" HorizontalOptions="StartAndExpand"  TextColor="#0C1F4B">
                            <Label.GestureRecognizers>
                                <TapGestureRecognizer Tapped="btnRecent_Clicked"/>
                            </Label.GestureRecognizers>
                        </Label>
                        <Label x:Name="btnToday" Grid.Column="1" Text="Today" VerticalOptions="CenterAndExpand" HorizontalOptions="StartAndExpand"  TextColor="DarkGray">
                            <Label.GestureRecognizers>
                                <TapGestureRecognizer Tapped="btnToday_Clicked"/>
                            </Label.GestureRecognizers>
                        </Label>
                        <Label x:Name="btnUpcoming" Grid.Column="2" Text="Upcoming" VerticalOptions="CenterAndExpand" HorizontalOptions="StartAndExpand"  TextColor="DarkGray">
                            <Label.GestureRecognizers>
                                <TapGestureRecognizer Tapped="btnToday_Clicked"/>
                            </Label.GestureRecognizers>
                        </Label>
                    </Grid>

                    <ListView Grid.Row="2" x:Name="listView" HeightRequest="400" ItemSelected="listView_ItemSelected" HasUnevenRows="True">
                        <ListView.ItemTemplate>
                            <DataTemplate>
                                <ViewCell >
                                    <custom:TaskView/>
                                </ViewCell>
                            </DataTemplate>
                        </ListView.ItemTemplate>
                    </ListView>

                    <ListView Grid.Row="2" x:Name="listView1" HeightRequest="400" IsVisible="true" ItemSelected="listView_ItemSelected" HasUnevenRows="True">
                        <ListView.ItemTemplate>
                            <DataTemplate>
                                <ViewCell >
                                    <custom:NewTaskView/>
                                </ViewCell>
                            </DataTemplate>
                        </ListView.ItemTemplate>
                    </ListView>

                </Grid>
            </StackLayout>
        </ScrollView>
    </ContentPage.Content>
</ContentPage>  

ActiveProject.cs

 public partial class ActiveProject : ContentPage
    {
        public List<ProjectViewModel> projects { get; set; }
        public ActiveProject()
        {
            InitializeComponent();
            listView.ItemsSource = new TrackActivityModel().GetTask();
        }
        protected override void OnAppearing()
        {
            base.OnAppearing();
            projects = new List<ProjectViewModel>(ProjectModel.Get());
            cv.ItemsSource = projects;
        }

        private void listView_ItemSelected(object sender, SelectedItemChangedEventArgs e)
        {
            if (listView.SelectedItem != null)
                listView.SelectedItem = null;
        }

        private void btnRecent_Clicked(object sender, EventArgs e)
        {
            ChangeButtonAppearance((Label)sender);
            listView.IsVisible = true;
            listView1.IsVisible = false;
            listView.ItemsSource = new TrackActivityModel().GetTask();
        }

        private void btnToday_Clicked(object sender, EventArgs e)
        {
            ChangeButtonAppearance((Label)sender);
            listView1.IsVisible = true;
            listView.IsVisible = false;
            listView1.ItemsSource = new TrackActivityModel().GetTask();
        }

        private void ChangeButtonAppearance(Label btn)
        {
            if (btn.Text == "Recent")
            {
                ChangeButtonColor(btnRecent, true);
                ChangeButtonColor(btnToday, false);
                ChangeButtonColor(btnUpcoming, false);
            }
            else if (btn.Text == "Today")
            {
                ChangeButtonColor(btnRecent, false);
                ChangeButtonColor(btnToday, true);
                ChangeButtonColor(btnUpcoming, false);
            }
            else if (btn.Text == "Upcoming")
            {
                ChangeButtonColor(btnRecent, false);
                ChangeButtonColor(btnToday, false);
                ChangeButtonColor(btnUpcoming, true);
            }
        }

        private void ChangeButtonColor(Label btn, bool isSelected)
        {
            if (isSelected)
                btn.TextColor = Color.FromHex("#0C1F4B");
            else
                btn.TextColor = Color.DarkGray;
        }        
    }  

ActiveProjectTemplate.xaml

 <ContentView xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" xmlns:models="clr-namespace:TaskManagerUIDesign.Models"
             x:Class="TaskManagerUIDesign.Views.Template.ActiveProjectTemplate">
    <ContentView.Content>
        <StackLayout HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" Padding="10,5,10,10" WidthRequest="300">
        <Frame x:DataType="models:ProjectViewModel" HasShadow="True" CornerRadius="20" BackgroundColor="White">
            <Grid ColumnDefinitions="*,*" RowDefinitions="Auto,Auto,Auto,Auto,Auto,Auto" 
                   HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">
                    <Frame CornerRadius="20"  Grid.Row="0" Grid.ColumnSpan="2" HeightRequest="150"> 
                    <StackLayout>
                        <Image  Source="{Binding Img}" Aspect="AspectFill" HeightRequest="190" Margin="-20"></Image>
                    </StackLayout>
                </Frame>
                <Label Margin="0,10,0,0" Grid.Row="1" Grid.ColumnSpan="2" Text="{Binding Name}" FontAttributes="Bold" TextColor="Black"/>
                <Label  Grid.Row="2" Grid.ColumnSpan="2" Text="{Binding Status}" FontAttributes="Bold" TextColor="{Binding StatusColor}"></Label>
                <Label Grid.Row="3" Grid.Column="0" Text="DeadLine" FontAttributes="Bold" TextColor="Black"></Label>
                <Label Grid.Row="3" Grid.Column="1" Text="{Binding DeadLine}" TextColor="Black"></Label>
                <Label Grid.Row="4" Grid.Column="0" Text="Task Left" FontAttributes="Bold" TextColor="Black"></Label>
                <Label Grid.Row="4" Grid.Column="1" Text="{Binding TaskLeft}" TextColor="Black"></Label>
                <ProgressBar Grid.Row="5" Grid.ColumnSpan="2" Progress="{Binding Progress}" HorizontalOptions="FillAndExpand"></ProgressBar>
            </Grid>
        </Frame>
        </StackLayout>
    </ContentView.Content>
</ContentView>  

For more information Please visit here. Please share your feedback.