Collection View not showing in master detail page

AustyAusty Member ✭✭✭

why is it that when l use the following code in my master detail page app.xaml.cs the collection view on the page does not show

 public App()
        {
            MainPage = new comicAppFinal.MainPage();
        }

but when the code below the collection view shows but l can not access the masterdetail page functionality anymore.

public App()
{
   MainPage = new Navigation(new MainPage())
}

Best Answer

Answers

  • AustyAusty Member ✭✭✭

    Below is the mainpage.xaml page

      <?xml version="1.0" encoding="UTF-8"?>
    <MasterDetailPage xmlns="http://xamarin.com/schemas/2014/forms" 
                 xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
                 x:Class="comicAppFinal.MainPage"
                 xmlns:local="clr-namespace:comicAppFinal;assembly=comicAppFinal"   
                 BackgroundColor="#282626">
        <MasterDetailPage.Master>
            <local:MasterPage x:Name="masterPage" />
        </MasterDetailPage.Master>
        <MasterDetailPage.Detail>
            <NavigationPage>
                <x:Arguments>
                    <local:HomePage />
                </x:Arguments>
            </NavigationPage>
        </MasterDetailPage.Detail>
    </MasterDetailPage>
    

    Below is the mainpage.xaml.cs class

        namespace comicAppFinal
        {
            // Learn more about making custom code visible in the Xamarin.Forms previewer
            // by visiting https://aka.ms/xamarinforms-previewer
    
    
            [XamlCompilation(XamlCompilationOptions.Compile)]
            public partial class MainPage : MasterDetailPage
            {
                public MainPage()
                {
                    InitializeComponent();
                    masterPage.Menu.ItemSelected += OnSelectedItem;
    
                }
    
                private void OnSelectedItem(object sender, SelectedItemChangedEventArgs e)
                {
                    throw new NotImplementedException();
                }
            }
        }
    
    Below is the code that contains the collection view i.e homepage.xaml
    
    <?xml version="1.0" encoding="UTF-8"?>
    <ContentPage xmlns="http://xamarin.com/schemas/2014/forms" 
                 xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
                 x:Class="comicAppFinal.HomePage"
                 BackgroundColor="#282626">
    
            <NavigationPage.TitleView  >  
            <StackLayout Orientation="Horizontal" >
              <Image Source="logo.png"  HorizontalOptions="CenterAndExpand"/>
              <Image Source="search.png"  HorizontalOptions="End" Margin="0,0,20,0"/>   
            </StackLayout>     
        </NavigationPage.TitleView>
    <StackLayout>
            <ScrollView>
    
                <StackLayout>
                      <Image Source="boxer_woman.jpg" />
                      <StackLayout HeightRequest="550" 
                           BackgroundColor="#282626"
                            Margin="0,-150,0,55">
    
           <Label Text="New &amp; Trending"
            FontSize="Medium"
            HorizontalTextAlignment="Center" 
            TextColor="White"
            FontAttributes="Bold" 
            Margin="0,0,0,0"/> 
    
          <CollectionView ItemsSource="{Binding sliders}" 
                    HorizontalOptions="CenterAndExpand" >
        <CollectionView.ItemsLayout>
            <ListItemsLayout>
                <x:Arguments>
                    <ItemsLayoutOrientation>Horizontal</ItemsLayoutOrientation>    
                </x:Arguments>
            </ListItemsLayout>             
         </CollectionView.ItemsLayout>        
        <CollectionView.ItemTemplate>
            <DataTemplate>
                <Grid Padding="0,10,0,0" >
                    <Grid.RowDefinitions >
                        <RowDefinition Height="Auto" />
                        <RowDefinition Height="Auto" />
                    </Grid.RowDefinitions>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="Auto" />
                    </Grid.ColumnDefinitions>
                    <Image Source="{Binding Url}"
                           Aspect="AspectFill"
                           HeightRequest="165"
                           WidthRequest="155" 
                           Grid.Row="0"
                           VerticalOptions="CenterAndExpand"
                           HorizontalOptions="CenterAndExpand"/>
                     <Label Text="{Binding Name}" TextColor="white" 
                            FontSize="Small"
                            HorizontalTextAlignment="Center"
                            VerticalTextAlignment="End"
                            Margin="-30"/>       
                </Grid>
            </DataTemplate>
        </CollectionView.ItemTemplate>
    </CollectionView>
      <Label Text="Popular"   VerticalTextAlignment="Center" TextColor="White" 
                   HorizontalTextAlignment="Center" 
             FontSize="Medium"
             FontAttributes="Bold"
             Margin="0,0,0,0"/>
    <CollectionView ItemsSource="{Binding sliders}" 
                    HorizontalOptions="CenterAndExpand" >
        <CollectionView.ItemsLayout>
            <ListItemsLayout>
                <x:Arguments>
                    <ItemsLayoutOrientation>Horizontal</ItemsLayoutOrientation>    
                </x:Arguments>
            </ListItemsLayout>             
         </CollectionView.ItemsLayout>        
        <CollectionView.ItemTemplate>
            <DataTemplate>
                <Grid Padding="0,7,0,0" >
                    <Grid.RowDefinitions >
                        <RowDefinition Height="Auto" />
                        <RowDefinition Height="Auto" />
                    </Grid.RowDefinitions>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="Auto" />
                    </Grid.ColumnDefinitions>
                    <Image Source="{Binding Url}"
                           Aspect="AspectFill"
                           HeightRequest="165"
                           WidthRequest="155" 
                           Grid.Row="0"
                           VerticalOptions="CenterAndExpand"
                           HorizontalOptions="CenterAndExpand"/>
                     <Label Text="{Binding Name}" TextColor="white" 
                            FontSize="Small"
                            HorizontalTextAlignment="Center"
                            VerticalTextAlignment="End"
                            Margin="-30"/>       
                </Grid>
            </DataTemplate>
        </CollectionView.ItemTemplate>
    </CollectionView>                    
    
    
    
                    </StackLayout>
    
                </StackLayout>
    
            </ScrollView>
    
        <StackLayout BackgroundColor="Black" VerticalOptions="EndAndExpand" 
                         HorizontalOptions="FillAndExpand" Orientation="Horizontal"
                         Margin="0">
               <StackLayout Orientation="Vertical" WidthRequest="130" >
                    <Image Source="home.png" WidthRequest="35" 
                           HorizontalOptions="Center" />
                    <Label Text="Home" FontSize="Micro" HorizontalOptions="Center" 
                           TextColor="White"/>
                </StackLayout>
                  <StackLayout Orientation="Vertical" WidthRequest="70" >
                    <Image Source="character.png" WidthRequest="29" 
                           HorizontalOptions="Center" />
                    <Label Text="Character" FontSize="Micro" HorizontalOptions="Center" 
                           TextColor="White"/>
                </StackLayout>
                  <StackLayout Orientation="Vertical" WidthRequest="100" >
                    <Image Source="download.png" WidthRequest="35" 
                           HorizontalOptions="Center" />
                    <Label Text="Download" FontSize="Micro" HorizontalOptions="Center" 
                           TextColor="White"/>
                </StackLayout>
                  <StackLayout Orientation="Vertical" WidthRequest="50" >
                    <Image Source="profile.png" WidthRequest="35" 
                           HorizontalOptions="Center" />
                    <Label Text="Profile" FontSize="Micro" HorizontalOptions="Center" 
                           TextColor="White"/>
                </StackLayout>     
            </StackLayout>
    </StackLayout>
    </ContentPage>
    

    Below is homepage.cs code

    namespace comicAppFinal
    {
        // Learn more about making custom code visible in the Xamarin.Forms previewer
        // by visiting https://aka.ms/xamarinforms-previewer
        public class Slidex
        {
            public string Url { get; set; }
            public string Name { get; set; }
    
        }
    
        [XamlCompilation(XamlCompilationOptions.Compile)]
        public partial class HomePage : ContentPage
        {
            public ObservableCollection<Slidex> sliders { get; set; }
            public ObservableCollection<Slidex> sliders1 { get; set; }
            public HomePage()
            {
                InitializeComponent();
                sliders = new ObservableCollection<Slidex>
            {
                new Slidex{ Url = "jessica_jones.jpg",Name="Jessica Jones"},
                new Slidex{ Url ="america.jpg",Name="America"},
                new Slidex{ Url ="boxer_woman.jpg",Name="Boxer Woman"},
                new Slidex{ Url ="fables.jpg",Name="Fables"}
            };
    
                BindingContext = this;
            }
        }
    
    }
    

    Please help anyone

  • JarvanJarvan Member, Xamarin Team Xamurai

    @Austy
    I reproduced you code. The CollectionView could be shown. Is it only that the collection view is not displayed or is the entire home page empty?

    1.Have you set the binding context in page.xaml.cs?
    2.Try to show the homepage directly to check if the problem is due to collectionview.

  • AustyAusty Member ✭✭✭

    @yelinzh just the collection view could not be shown.The labels above the collectionview even displays..what is the problem with mine then

  • JarvanJarvan Member, Xamarin Team Xamurai
    edited July 17

    @Austy
    1.Have you set the binding context in page.xaml.cs?
    2.Try to show the collectionview in a contentpage directly.

  • AustyAusty Member ✭✭✭

    @yelinzh l have set the binding context in page.see code below

      public class Slidex
        {
            public string Url { get; set; }
            public string Name { get; set; }
    
        }
    
        [XamlCompilation(XamlCompilationOptions.Compile)]
        public partial class HomePage : ContentPage
        {
            public ObservableCollection<Slidex> sliders { get; set; }
            public ObservableCollection<Slidex> sliders1 { get; set; }
            public HomePage()
            {
                InitializeComponent();
                sliders = new ObservableCollection<Slidex>
            {
                new Slidex{ Url = "jessica_jones.jpg",Name="Jessica Jones"},
                new Slidex{ Url ="america.jpg",Name="America"},
                new Slidex{ Url ="boxer_woman.jpg",Name="Boxer Woman"},
                new Slidex{ Url ="fables.jpg",Name="Fables"}
            };
    
                BindingContext = this;
            }
        }``
    
  • AustyAusty Member ✭✭✭

    @yelinzh the collection view works in a content page but not in a masterdetail page. Please note in my master detail page l edit app.cs to the below code

    public App()
            {
                MainPage = new comicAppFinal.MainPage();
            }
    
  • JarvanJarvan Member, Xamarin Team Xamurai
    edited July 17

    @Austy
    Try to create a project using Master-Detail template. Add your homepage code and test.

  • AustyAusty Member ✭✭✭

    @yelinzh l have created a project using the master detail template like u suggested but everytime l try to build l get 2 errors

    The type or namespace 'App' could not be found (are you missing a using directive or an assembly reference)
    and something about link assemblies

  • JarvanJarvan Member, Xamarin Team Xamurai

    @Austy
    Where did you get the error?

  • AustyAusty Member ✭✭✭

    @yelinzh your question is not clear but l get the error when l try to run the application or build the application

  • JarvanJarvan Member, Xamarin Team Xamurai
    edited July 17

    @Austy
    What's the version of nuget packages? Have you updated them when using collectionview?

  • AustyAusty Member ✭✭✭

    @yelinzh l had not even pasted the code that contains collection view in the application yet..l created the projects and wanted to run immediately before editing and it threw the error.

  • AustyAusty Member ✭✭✭

    @yelinzh l have cleaned and rebuilt the app.The collection view shows well on android but its not showing on IOS...Your demo works fine too

  • AustyAusty Member ✭✭✭

    @Yelinzh it works fine now..l honestly dont know what l did ooh..but its working fine..l have one more question though..why does my app appear bigger on android.. l have attached images for IOS and android for you to see...

  • JarvanJarvan Member, Xamarin Team Xamurai
    edited July 18

    @Austy
    Remove the NavigationPage in App.cs

    public App()
    {
        InitializeComponent();
    
        //MainPage = new NavigationPage( new MainPage());
        MainPage = new MainPage();
    }
    
  • AustyAusty Member ✭✭✭

    @Yelinzh when l comment it out as suggested above l get Foundation.Monotouch exception.

  • JarvanJarvan Member, Xamarin Team Xamurai

    @Austy
    Sorry for my mistake, I've modified the code.

  • AustyAusty Member ✭✭✭

    @Yelinzy.. which code exactly..l am not using your demo code directly in my project. l cant because my project is not using mvvm..any ways any suggestions on my android question above..Thanks so far BOSS...

Sign In or Register to comment.