create a page

[Marius]

I have Set all think like i want in TemplateList.xml but i can't figure out how it work so that when i click on something in the list it shows when i click on it. every page is very simple its only some text and some pictures in it. not need like comments, etc that i finded in the essential-ui-kit-for-xamarin.forms-master. only need text, pictures and some button on the navigation bare on the top. what do i do to create that?

Attachment: Pages_ced305c3.zip

[Yuvaraj Palanisamy]

Hi Marius, 

 

Greetings from Syncfusion. 

 

If you want to change the layout of the navigation bar element, you can change the template as per the need. In Xamarin.Forms Essential UIKit added the page list template layout in the below view. 

 

https://github.com/syncfusion/essential-ui-kit-for-xamarin.forms/blob/master/EssentialUIKit/AppLayout/Views/TemplatePage.xaml  

 

In our Xamarin.Forms Essential UI Kit project, with the help of SelectionChanged event we can pass the template page name and create new instance for the page and add in the TemplateHostPage. 

 

TemplatePage.xaml 

<controls:ParallaxListView 

        x:Name="ListView" 

        HasUnevenRows="True" 

        ItemsSource="{Binding SelectedCategory.Pages}" 

        RowHeight="96" 

        SelectionChanged="ListView_OnSelectionChanged" 

        SeparatorVisibility="None"> 

 

TemplatePage.xaml.cs 

private void ListView_OnSelectionChanged(object sender, SelectedItemChangedEventArgs e) 

{ 

    if (e.SelectedItem == null || this.isNavigationInQueue) 

    { 

        return; 

    } 

 

    this.isNavigationInQueue = true; 

    Navigation.PushAsync(new TemplateHostPage(e.SelectedItem as Template)); 

} 

 

 

 

And the page template designed in the below view. 

 

https://github.com/syncfusion/essential-ui-kit-for-xamarin.forms/blob/master/EssentialUIKit/AppLayout/Views/TemplateHostPage.xaml  

 

TemplateHostPage.xaml 

<border:SfBorder Grid.Row="2" Grid.RowSpan="2"  

                 VerticalOptions="FillAndExpand" 

                 x:Name="HostViewContainer" 

                 BorderWidth="0" 

                 CornerRadius="10,10,0,0"> 

    <!--<ScrollView x:Name="MainScrollView" >--> 

        <controls:TemplateHostView x:Name="TemplateHostView"/> 

    <!--</ScrollView>--> 

</border:SfBorder> 

 

TemplateHostPage.xaml.cs 

public TemplateHostPage(Template selectedTemplate) 

{ 

    InitializeComponent(); 

    TemplateHostView.HeightRequest = HostViewContainer.HeightRequest = Application.Current.MainPage.Height - 55; 

    TemplateHostView.WidthRequest = HostViewContainer.WidthRequest = Application.Current.MainPage.Width; 

 

    if (selectedTemplate != null) 

    { 

        Title.Text = selectedTemplate.Name; 

        this.LoadPage(selectedTemplate.PageName); 

    } 

} 

 

private void LoadPage(string pageURL) 

{ 

    var assembly = typeof(App).GetTypeInfo().Assembly; 

 

    var page = (Page)Activator.CreateInstance(assembly.GetType($"EssentialUIKit.{pageURL}")); 

 

    TemplateHostView.Template = new NavigationPage(page); 

} 

 

Also, in our Xamarin.Forms Essential UI Kit project images are included in the below link with image name. 

 

https://cdn.syncfusion.com/essential-ui-kit-for-xamarin.forms/common/uikitimages/  

 

For example: 

https://cdn.syncfusion.com/essential-ui-kit-for-xamarin.forms/common/uikitimages/Image2.png  

 

Please let us know if you need any concern. 

 

Regards, 

Yuvaraj.