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.
Conclusion
I hope you enjoyed learning about how to use template 10 templates with Syncfusion controls.
You can refer to our UWP feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our UWP example to understand how to create and manipulate data.
For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.
If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!
