Scroll down Menu at the top

GeetSGeetS USMember ✭✭✭

In Mobile at the Top 3 line menu when clicked displays menu but it touches the top. So, in order to show it down I had used Header at the Top, like as explained in https://forums.xamarin.com/discussion/35913/listview-header-and-footer
I had used it in .cs like:
BindingContext = IdentityHelper.Users.UserName;
listView.SetBinding (ListView.HeaderProperty, new Binding("."));

Now, it's displaying Logged in User Name at the Top.The only problem is I want to set Background & Textcolor of Header ? How can that be done?

Best Answer

  • GeetSGeetS US ✭✭✭
    edited July 2017 Accepted Answer

    Since I hadn't got any relevant solution for the header background, so rather then header, I had used StackLayout as explained here https://almirvuk.blogspot.in/2016/10/how-to-make-master-detail-page.html
    In MasterPage.xaml:
    ContentPage.Content
    StackLayout Orientation="Vertical" BackgroundColor="#0B56A5" Margin="0,20,0,0"
    StackLayout Orientation="Horizontal" BackgroundColor="#ff9800" HorizontalOptions="FillAndExpand" HeightRequest="60"
    StackLayout Orientation="Vertical" VerticalOptions="CenterAndExpand" HorizontalOptions="CenterAndExpand"
    plugin:CircleImage
    Grid.Row="0"
    Grid.Column="0"
    HeightRequest="35"
    WidthRequest="35"
    BorderThickness="2"
    BorderColor="#03A9F4"
    Aspect="AspectFill"
    HorizontalOptions="Center"
    VerticalOptions="Center" Source="Profile.png"
    StackLayout
    StackLayout Orientation="Vertical" HorizontalOptions="StartAndExpand"
    Label x:Name="lblLoggedinUser" VerticalOptions="CenterAndExpand" HorizontalOptions="Center" TextColor="White"
    StackLayout E
    StackLayout E
    ListView x:Name="MenuList" RowHeight="40" BackgroundColor="#0B56A5"
    ListView.ItemTemplate
    DataTemplate
    ViewCell
    StackLayout VerticalOptions="FillAndExpand" Orientation="Horizontal" Padding="20,10,0,10" Spacing="20"
    Image Source="{Binding Icon}" VerticalOptions="Center" WidthRequest="25" HeightRequest="25"
    Label Text="{Binding Caption}" VerticalOptions="Center" TextColor="#FFF" FontSize="Small"
    StackLayout E
    ViewCell E
    DataTemplate E
    ListView.ItemTemplate E
    ListView E
    StackLayout E
    ContentPage.Content E

    And in MasterPage.xaml.cs
    public ListView ListView { get { return MenuList; } }
    public MasterPage()
    {
    InitializeComponent();
    lblLoggedinUser.Text = IdentityHelper.Users.UserName;
    //BindingContext = IdentityHelper.Users.UserName;
    //MenuList.SetBinding(ListView.HeaderProperty, new Binding(".")); //Display Logged in username in Header --G06072017
    var menuItems = new MenuClientService().GetMenuNavigationAsync().Result;
    MenuList.ItemsSource = menuItems;
    }

Answers

  • GeetSGeetS USMember ✭✭✭
    edited July 2017 Accepted Answer

    Since I hadn't got any relevant solution for the header background, so rather then header, I had used StackLayout as explained here https://almirvuk.blogspot.in/2016/10/how-to-make-master-detail-page.html
    In MasterPage.xaml:
    ContentPage.Content
    StackLayout Orientation="Vertical" BackgroundColor="#0B56A5" Margin="0,20,0,0"
    StackLayout Orientation="Horizontal" BackgroundColor="#ff9800" HorizontalOptions="FillAndExpand" HeightRequest="60"
    StackLayout Orientation="Vertical" VerticalOptions="CenterAndExpand" HorizontalOptions="CenterAndExpand"
    plugin:CircleImage
    Grid.Row="0"
    Grid.Column="0"
    HeightRequest="35"
    WidthRequest="35"
    BorderThickness="2"
    BorderColor="#03A9F4"
    Aspect="AspectFill"
    HorizontalOptions="Center"
    VerticalOptions="Center" Source="Profile.png"
    StackLayout
    StackLayout Orientation="Vertical" HorizontalOptions="StartAndExpand"
    Label x:Name="lblLoggedinUser" VerticalOptions="CenterAndExpand" HorizontalOptions="Center" TextColor="White"
    StackLayout E
    StackLayout E
    ListView x:Name="MenuList" RowHeight="40" BackgroundColor="#0B56A5"
    ListView.ItemTemplate
    DataTemplate
    ViewCell
    StackLayout VerticalOptions="FillAndExpand" Orientation="Horizontal" Padding="20,10,0,10" Spacing="20"
    Image Source="{Binding Icon}" VerticalOptions="Center" WidthRequest="25" HeightRequest="25"
    Label Text="{Binding Caption}" VerticalOptions="Center" TextColor="#FFF" FontSize="Small"
    StackLayout E
    ViewCell E
    DataTemplate E
    ListView.ItemTemplate E
    ListView E
    StackLayout E
    ContentPage.Content E

    And in MasterPage.xaml.cs
    public ListView ListView { get { return MenuList; } }
    public MasterPage()
    {
    InitializeComponent();
    lblLoggedinUser.Text = IdentityHelper.Users.UserName;
    //BindingContext = IdentityHelper.Users.UserName;
    //MenuList.SetBinding(ListView.HeaderProperty, new Binding(".")); //Display Logged in username in Header --G06072017
    var menuItems = new MenuClientService().GetMenuNavigationAsync().Result;
    MenuList.ItemsSource = menuItems;
    }

  • GeetSGeetS USMember ✭✭✭
    edited March 2018

    Found this useful Link to create Menu: https://almirvuk.blogspot.in/2016/10/how-to-make-master-detail-page.html
    In .xaml, declare listview as under:
    ListView x:Name="MenuList" RowHeight="40" BackgroundColor="#0B56A5" ItemSelected="OnMenuItemSelected"
    .....
    But as explained in the link to declare TargetType as Type,one can leave that as code as below:
    public partial class MainPage : MasterDetailPage
    {
    public MainPage()
    {
    InitializeComponent();
    lblLoggedinUser.Text = IdentityHelper.User().UserName;
    GetMenuItems();
    }

        private async void GetMenuItems()
        {
            var ucService = new MenuClient();
            string roleId = IdentityHelper.GetRoles();
            var menuItems = await ucService.GetMenuByRoleId(roleId);
            MenuList.ItemsSource = menuItems;
        }
    
        private void OnMenuItemSelected(object sender, SelectedItemChangedEventArgs e)   
        {
            var item = (MenuNavigation)e.SelectedItem;
            var page = item.MobileAppPage;
            switch (page)
            {
                case "AboutUsPage":
                    Detail = new NavigationPage(new AboutUsPage());
                    break;
                case "ContactUsPage":
                   Detail = new NavigationPage(new ContactUsPage());
                    break;
                case "DashBoard":
                    Detail = new NavigationPage(new DashboardPage());
                    break;
                default:
                    Detail = new NavigationPage(new DefaultPage());
                    break;
            }         
        }          
    }
    
Sign In or Register to comment.