How to use Template 10 templates with Syncfusion controls.
This article describes about how to use Syncfusion controls in Template 10 Templates.
Template 10 Templates.
Templates | Default | Hamburger | Minimal |
Files created by default | App.xaml MainPage.xaml/cs MainPageViewModel.cs Custom.xaml | Shell.xaml App.xaml MainPage.xaml/cs MainPageViewModel.cs Custom.xaml | App.xaml MainPage.xaml/cs MainPageViewModel.cs Custom.xaml
|
These templates can be used for traditional MVVM binding support by the help of MainPageViewModel. Also, default style of our control can be overridden by adding our style in Custom.xaml resource dictionary.
System Requirement:
Need to Install Template 10 Template package. Please find the Package from link.
Link: https://marketplace.visualstudio.com/search?term=tag%3Auwp&target=VS&category=All%20categories&vsVersion=&sortBy=Downloads
Below steps explained, how to add Syncfusion controls in Template 10 Templates.
- Run the VisualStudio Application and create new project.
- Select Template 10 Template and choose any one template then create simple Application.
- Add corresponding Syncfusion Assemblies in created application.
- Add required view in MainPage.xaml file. Here below code example explains how to add Syncfusion controls inside the MainPage.xaml file.
XAML
<Page x:Class="Template10_Sample.Views.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:syncfusion="using:Syncfusion.UI.Xaml.Controls.Navigation"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:vm="using:Template10_Sample.ViewModels" mc:Ignorable="d">
<Page.DataContext>
<vm:MainPageViewModel x:Name="ViewModel" />
</Page.DataContext>
<RelativePanel Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<syncfusion:SfTabControl HorizontalAlignment="Stretch" VerticalAlignment="Stretch" ItemsSource="{Binding TabCollection}" DisplayMemberPath="Header">
</syncfusion:SfTabControl>
</RelativePanel>
</Page>
- Default style our control can be overridden by adding our style in Custom.xaml resource dictionar. Below code example explains how to override the SfTabItem style.
XAML
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:syncfusion="using:Syncfusion.UI.Xaml.Controls.Navigation"> <!-- custom styles here --> <Style TargetType="syncfusion:SfTabItem"> <Setter Property="FontSize" Value="16"/> <Setter Property="BorderBrush" Value="Orange"/> <Setter Property="BorderThickness" Value="0 0 0 2"/> <Setter Property="Margin" Value="2"/> </Style> </ResourceDictionary>
- Below code example explains how to populate items for control to DataBinding.
C#
public class MainPageViewModel : ViewModelBase
{
public MainPageViewModel()
{
TabCollection = new List<Model>();
TabCollection.Add(new Model() { Header = "Tab1" });
TabCollection.Add(new Model() { Header = "Tab2" });
}
private List<Model> _tabCollection;
public List<Model> TabCollection
{
get { return _tabCollection; }
set { _tabCollection = value; }
}
}
public class Model
{
private string _header;
public string Header
{
get { return _header; }
set { _header = value; }
}
}
- Refer the output image from below.
