Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
20 changes: 10 additions & 10 deletions uwp/DatePicker/Getting-Started.md
Original file line number Diff line number Diff line change
Expand Up @@ -9,33 +9,33 @@ documentation: ug

# Getting Started with UWP DatePicker (SfDatePicker)

This section provides a quick overview for working with [SfDatePicker](https://help.syncfusion.com/cr/uwp/Syncfusion.SfInput.UWP~Syncfusion.UI.Xaml.Controls.Input.SfDatePicker.html) control.
This section provides a quick overview for working with [SfDatePicker](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Controls.Input.SfDatePicker.html) control.



## Assembly deployment
Refer to the [control dependencies](https://help.syncfusion.com/uwp/control-dependencies#sfdatepicker) section to get the list of assemblies or NuGet package that needs to be added as a reference to use the[SfDatePicker](https://help.syncfusion.com/cr/uwp/Syncfusion.SfInput.UWP~Syncfusion.UI.Xaml.Controls.Input.SfDatePicker.html) control in any application.
Refer to the [control dependencies](https://help.syncfusion.com/uwp/control-dependencies#sfdatepicker) section to get the list of assemblies or NuGet package that needs to be added as a reference to use the[SfDatePicker](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Controls.Input.SfDatePicker.html) control in any application.

You can refer this [documentation](https://help.syncfusion.com/uwp/visual-studio-integration/nuget-packages) to find more details about installing the NuGet package in a UWP application.

## Creating Application with SfDatePicker control
In this walk through, user will create a UWP application that contains [SfDatePicker](https://help.syncfusion.com/cr/uwp/Syncfusion.SfInput.UWP~Syncfusion.UI.Xaml.Controls.Input.SfDatePicker.html) control.
In this walk through, user will create a UWP application that contains [SfDatePicker](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Controls.Input.SfDatePicker.html) control.
1. [Creating project](#Creating-the-project)
2. [Adding control via designer](#Adding-control-via-designer)
3. [Adding control manually in XAML](#Adding-control-manually-in-XAML)
4. [Adding control manually in C#](#Adding-control-manually-in-C#)

## Creating project
Below section provides detailed information to create new project in Visual Studio to display [SfDatePicker](https://help.syncfusion.com/cr/uwp/Syncfusion.SfInput.UWP~Syncfusion.UI.Xaml.Controls.Input.SfDatePicker.html) control.
Below section provides detailed information to create new project in Visual Studio to display [SfDatePicker](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Controls.Input.SfDatePicker.html) control.

## Adding control via designer
The[SfDatePicker](https://help.syncfusion.com/cr/uwp/Syncfusion.SfInput.UWP~Syncfusion.UI.Xaml.Controls.Input.SfDatePicker.html) control can be added to the application by dragging it from Toolbox and dropping it in designer. The required assembles will be added automatically.
The[SfDatePicker](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Controls.Input.SfDatePicker.html) control can be added to the application by dragging it from Toolbox and dropping it in designer. The required assembles will be added automatically.

![Adding control via designer](Getting-Started_images/Getting-Started-img1.png)

## Adding control manually in XAML

In order to add [SfDatePicker](https://help.syncfusion.com/cr/uwp/Syncfusion.SfInput.UWP~Syncfusion.UI.Xaml.Controls.Input.SfDatePicker.html) control manually in XAML, do the below steps,
In order to add [SfDatePicker](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Controls.Input.SfDatePicker.html) control manually in XAML, do the below steps,

1. Add the below required assembly references to the project,

Expand All @@ -58,7 +58,7 @@ xmlns:syncfusion="using:Syncfusion.UI.Xaml.Controls.Input">

{% endtabs %}

3. Now add the[SfDatePicker](https://help.syncfusion.com/cr/uwp/Syncfusion.SfInput.UWP~Syncfusion.UI.Xaml.Controls.Input.SfDatePicker.html) control in MainPage.XAML.
3. Now add the[SfDatePicker](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Controls.Input.SfDatePicker.html) control in MainPage.XAML.

{% tabs %}

Expand All @@ -72,7 +72,7 @@ xmlns:syncfusion="using:Syncfusion.UI.Xaml.Controls.Input">

## Adding control manually in C#

In order to add [SfDatePicker](https://help.syncfusion.com/cr/uwp/Syncfusion.SfInput.UWP~Syncfusion.UI.Xaml.Controls.Input.SfDatePicker.html) control manually in C#, do the below steps,
In order to add [SfDatePicker](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Controls.Input.SfDatePicker.html) control manually in C#, do the below steps,

1. Add the below required assembly references to the project,

Expand Down Expand Up @@ -112,7 +112,7 @@ Dim datePicker1 As SfDatePicker = New SfDatePicker() With {

## Customizing the date format

The format of date in [SfDatePicker](https://help.syncfusion.com/cr/uwp/Syncfusion.SfInput.UWP~Syncfusion.UI.Xaml.Controls.Input.SfDatePicker.html) can be be customized by using [FormatString](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Controls.Input.SfTimePicker.html#Syncfusion_UI_Xaml_Controls_Input_SfTimePicker_FormatString) property. For example, format of date can be changed to *yyyy-dd-MM* format.
The format of date in [SfDatePicker](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Controls.Input.SfDatePicker.html) can be be customized by using [FormatString](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Controls.Input.SfTimePicker.html#Syncfusion_UI_Xaml_Controls_Input_SfTimePicker_FormatString) property. For example, format of date can be changed to *yyyy-dd-MM* format.

{% tabs %}

Expand All @@ -139,7 +139,7 @@ datePicker1.FormatString = "yyyy-dd-MM"

## Customize SfDateSelector Header

You can customize the [SfDateSelector](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Controls.Input.SfDateSelector.html) in [SfDatePicker](https://help.syncfusion.com/cr/uwp/Syncfusion.SfInput.UWP~Syncfusion.UI.Xaml.Controls.Input.SfDatePicker.html) control using [SelectorStyle](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Controls.Input.SfTimePicker.html#Syncfusion_UI_Xaml_Controls_Input_SfTimePicker_SelectorStyle) property.
You can customize the [SfDateSelector](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Controls.Input.SfDateSelector.html) in [SfDatePicker](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Controls.Input.SfDatePicker.html) control using [SelectorStyle](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Controls.Input.SfTimePicker.html#Syncfusion_UI_Xaml_Controls_Input_SfTimePicker_SelectorStyle) property.

{% tabs %}

Expand Down
20 changes: 10 additions & 10 deletions uwp/Tab-Control/Getting-Started.md
Original file line number Diff line number Diff line change
Expand Up @@ -9,32 +9,32 @@ documentation: ug

# Getting Started with UWP Tab Control (SfTabControl)

This section explains how to create a high level tab navigation using [SfTabControl](https://help.syncfusion.com/cr/uwp/Syncfusion.SfTabControl.UWP~Syncfusion.UI.Xaml.Controls.Navigation.SfTabControl.html) control.
This section explains how to create a high level tab navigation using [SfTabControl](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Controls.Navigation.SfTabControl.html) control.

## Assembly deployment
Refer to the [control dependencies](https://help.syncfusion.com/uwp/control-dependencies#sftabcontrol) section to get the list of assemblies or NuGet package that needs to be added as a reference to use the [SfTabControl](https://help.syncfusion.com/cr/uwp/Syncfusion.SfTabControl.UWP~Syncfusion.UI.Xaml.Controls.Navigation.SfTabControl.html) in any application.
Refer to the [control dependencies](https://help.syncfusion.com/uwp/control-dependencies#sftabcontrol) section to get the list of assemblies or NuGet package that needs to be added as a reference to use the [SfTabControl](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Controls.Navigation.SfTabControl.html) in any application.

You can refer this [documentation](https://help.syncfusion.com/uwp/visual-studio-integration/nuget-packages) to find more details about installing the NuGet package in a UWP application.

## Creating Application with SfTabControl
In this walk through, user will create a UWP application that contains [SfTabControl](https://help.syncfusion.com/cr/uwp/Syncfusion.SfTabControl.UWP~Syncfusion.UI.Xaml.Controls.Navigation.SfTabControl.html).
In this walk through, user will create a UWP application that contains [SfTabControl](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Controls.Navigation.SfTabControl.html).
1. [Creating project](#Creating-the-project)
2. [Adding control via designer](#Adding-control-via-designer)
3. [Adding control manually in XAML](#Adding-control-manually-in-XAML)
4. [Adding control manually in C#](#Adding-control-manually-in-C#)

## Creating project
Below section provides detailed information to create new project in Visual Studio to display [SfTabControl](https://help.syncfusion.com/cr/uwp/Syncfusion.SfTabControl.UWP~Syncfusion.UI.Xaml.Controls.Navigation.SfTabControl.html).
Below section provides detailed information to create new project in Visual Studio to display [SfTabControl](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Controls.Navigation.SfTabControl.html).


## Adding control via designer
The [SfTabControl](https://help.syncfusion.com/cr/uwp/Syncfusion.SfTabControl.UWP~Syncfusion.UI.Xaml.Controls.Navigation.SfTabControl.html) can be added to the application by dragging it from Toolbox and dropping it in designer. The required assembles will be added automatically.
The [SfTabControl](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Controls.Navigation.SfTabControl.html) can be added to the application by dragging it from Toolbox and dropping it in designer. The required assembles will be added automatically.

![Adding control via designer](GettingStarted-images/GettingStarted-img1.png)

## Adding control manually in XAML

In order to add [SfTabControl](https://help.syncfusion.com/cr/uwp/Syncfusion.SfTabControl.UWP~Syncfusion.UI.Xaml.Controls.Navigation.SfTabControl.html) manually in XAML, do the below steps,
In order to add [SfTabControl](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Controls.Navigation.SfTabControl.html) manually in XAML, do the below steps,

1. Add the below required assembly references to the project,

Expand All @@ -55,7 +55,7 @@ xmlns:syncfusion="using:Syncfusion.UI.Xaml.Controls.Navigation">
{% endhighlight %}
{% endtabs %}

3. Now add the [SfTabControl](https://help.syncfusion.com/cr/uwp/Syncfusion.SfTabControl.UWP~Syncfusion.UI.Xaml.Controls.Navigation.SfTabControl.html) in MainPage.XAML.
3. Now add the [SfTabControl](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Controls.Navigation.SfTabControl.html) in MainPage.XAML.

{% tabs %}
{% highlight XAML %}
Expand All @@ -71,7 +71,7 @@ xmlns:syncfusion="using:Syncfusion.UI.Xaml.Controls.Navigation">

## Adding control manually in C#

In order to add [SfTabControl](https://help.syncfusion.com/cr/uwp/Syncfusion.SfTabControl.UWP~Syncfusion.UI.Xaml.Controls.Navigation.SfTabControl.html) manually in C#, do the below steps,
In order to add [SfTabControl](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Controls.Navigation.SfTabControl.html) manually in C#, do the below steps,

1. Add the below required assembly references to the project,

Expand Down Expand Up @@ -121,7 +121,7 @@ sfTabControl1.Items.Add(tabitem3)

### Adding items by DataBinding

In [SfTabControl](https://help.syncfusion.com/cr/uwp/Syncfusion.SfTabControl.UWP~Syncfusion.UI.Xaml.Controls.Navigation.SfTabControl.html) you can add tab items by [ItemsSource](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Controls.Navigation.SfTabControl.html#) in which each tab item must have property for `Header` and `Content`.
In [SfTabControl](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Controls.Navigation.SfTabControl.html) you can add tab items by [ItemsSource](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Controls.Navigation.SfTabControl.html#) in which each tab item must have property for `Header` and `Content`.

1.Define the properties required in Model class.

Expand Down Expand Up @@ -255,7 +255,7 @@ End Class

## Design view for content

You can show scroll button for [SfTabControl](https://help.syncfusion.com/cr/uwp/Syncfusion.SfTabControl.UWP~Syncfusion.UI.Xaml.Controls.Navigation.SfTabControl.html) tab items by setting [TabScrollButtonVisibility](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Controls.Navigation.SfTabControl.html#Syncfusion_UI_Xaml_Controls_Navigation_SfTabControl_TabScrollButtonVisibility) property value to `Visible`.You can bind the view model collection to [ItemsSource](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Controls.Navigation.SfTabControl.html#) property and design the template for content.
You can show scroll button for [SfTabControl](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Controls.Navigation.SfTabControl.html) tab items by setting [TabScrollButtonVisibility](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Controls.Navigation.SfTabControl.html#Syncfusion_UI_Xaml_Controls_Navigation_SfTabControl_TabScrollButtonVisibility) property value to `Visible`.You can bind the view model collection to [ItemsSource](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Controls.Navigation.SfTabControl.html#) property and design the template for content.

{% tabs %}
{% highlight XAML %}
Expand Down