added templated picker docs
This commit is contained in:
AGerchevProgress
Родитель
1707c52291
Коммит
69a4d0476f
|
|
@ -18,7 +18,7 @@ In addition the List Picker for Xamarin provides the following properties:
|
|||
* **ItemLength**(*double*): Defines the length of the items inside the list.
|
||||
* **ItemSpacing**(*double*): Defines the spacing between the items inside the list.
|
||||
* **SelectedItem**(*object*): Specifies the selected item of the list picker
|
||||
* **DisplayMemberPath**(*string*): Defines the path pf the property which is to be displayed as DisplayString.
|
||||
* **DisplayMemberPath**(*string*): Defines the path of the property which is to be displayed as DisplayString.
|
||||
|
||||
## Example
|
||||
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@ position: 1
|
|||
slug: templated-picker-getting-started
|
||||
---
|
||||
|
||||
# Getting Started
|
||||
# Getting Started with Custom Picker for Xamarin
|
||||
|
||||
This article will guide you through the steps needed to add a basic **RadTemplatedPicker** control in your application.
|
||||
|
||||
|
|
@ -35,7 +35,7 @@ You have two options:
|
|||
| iOS | Telerik.Xamarin.iOS.dll <br/>Telerik.XamarinForms.Input<br/>Telerik.XamarinForms.Common.dll<br/>Telerik.XamarinForms.Primitives.dll |
|
||||
| UWP | Telerik.Core.dll<br/>Telerik.UI.Xaml.Primitives.UWP.dll<br/>Telerik.XamarinForms.Input<br/>Telerik.XamarinForms.Common.dll<br/>Telerik.XamarinForms.Primitives.dll |
|
||||
|
||||
## 3. Adding RadListPicker control
|
||||
## 3. Adding RadTemplatedPicker control
|
||||
|
||||
You could use one of the following approaches:
|
||||
|
||||
|
|
@ -48,18 +48,22 @@ Take a look at the following topics on how to use the toolbox:
|
|||
|
||||
#### Create the control definition in XAML or C#.
|
||||
|
||||
The snippet below shows a simple RadListPicker definition:
|
||||
The snippet below shows a simple RadTemplatedPicker definition:
|
||||
|
||||
<snippet id='listpicker-getting-started-xaml' />
|
||||
<snippet id='listpicker-getting-started-csharp' />
|
||||
<snippet id='templatedpicker-getting-started-xaml' />
|
||||
<snippet id='templatedpicker-getting-started-csharp' />
|
||||
|
||||
add the following Business model for the first spinner:
|
||||
|
||||
<snippet id='templatedpicker-country-businessmodel' />
|
||||
|
||||
add the following Business model for the second spinner:
|
||||
|
||||
<snippet id='templatedpicker-city-businessmodel' />
|
||||
|
||||
here is a sample definition of the ViewModel:
|
||||
|
||||
<snippet id='listpicker-getting-started-viewmodel' />
|
||||
|
||||
and the Business model:
|
||||
|
||||
<snippet id='listpicker-getting-started-business-model' />
|
||||
<snippet id='templatedpicker-viewmodel' />
|
||||
|
||||
In addition to this, you need to add the following namespace:
|
||||
|
||||
|
|
@ -72,9 +76,9 @@ using Telerik.XamarinForms.Input;
|
|||
|
||||
This is the result:
|
||||
|
||||
|
||||
|
||||
|
||||
>important **SDK Browser** and **QSF** applications contain different examples that show RadDateTimePicker's main features. You can find the applications in the **Examples** and **QSF** folders of your local **Telerik UI for Xamarin** installation.
|
||||
>important **SDK Browser** and **QSF** applications contain different examples that show RadTemplatedPicker's main features. You can find the applications in the **Examples** and **QSF** folders of your local **Telerik UI for Xamarin** installation.
|
||||
|
||||
## See Also
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,62 @@
|
|||
---
|
||||
title: Key Features
|
||||
page_title: Key Features
|
||||
position: 2
|
||||
slug: templated-picker-key-features
|
||||
---
|
||||
|
||||
# Key Features
|
||||
|
||||
The purpose of this help article is to show you the key features of the Templated(Custom) Picker control for Xamarin.
|
||||
|
||||
## DisplayMemberPath
|
||||
|
||||
Its purpose is to specify a property of the source object to serve as the visual representation of the spinner item.
|
||||
|
||||
## DisplayStringFormat
|
||||
|
||||
You can choose what text to display when an item from the spinner was picked through the Picker DisplayStringFormat property. For more info on this check the Key Features - Display String section.
|
||||
|
||||
## SelectedValue
|
||||
|
||||
The SelectedValue property is used when you have linked your RadTemplatedPicker to a data source, and you want to return a value of type object other than the one which is displayed.
|
||||
|
||||
## Example
|
||||
|
||||
Here is a sample example which shows how the *SelectedValue* and *DisplayMemberPath* can be used:
|
||||
|
||||
<snippet id='templatedpicker-keyfeatures' />
|
||||
|
||||
Here is a sample definition of the SelectorTemplate:
|
||||
|
||||
<snippet id='templatedpicker-keyfeatures-selectortemplate' />
|
||||
|
||||
and for the HeaderTemplate:
|
||||
|
||||
<snippet id='templatedpicker-keyfeatures-headertemplate' />
|
||||
|
||||
add the following Business model for the first spinner:
|
||||
|
||||
<snippet id='templatedpicker-country-businessmodel' />
|
||||
|
||||
add the following Business model for the second spinner:
|
||||
|
||||
<snippet id='templatedpicker-city-businessmodel' />
|
||||
|
||||
here is a sample definition of the ViewModel:
|
||||
|
||||
<snippet id='templatedpicker-viewmodel' />
|
||||
|
||||
In addition to this, you need to add the following namespace:
|
||||
|
||||
```XAML
|
||||
xmlns:telerikInput="clr-namespace:Telerik.XamarinForms.Input;assembly=Telerik.XamarinForms.Input"
|
||||
```
|
||||
```C#
|
||||
using Telerik.XamarinForms.Input;
|
||||
|
||||
|
||||
## See Also
|
||||
|
||||
- [Templates]({%slug templated-picker-templates%})
|
||||
- [Styling]({%slug templated-picker-styling%})
|
||||
|
|
@ -26,3 +26,5 @@ slug: templated-picker-overview
|
|||
## See Also
|
||||
|
||||
- [Getting Started]({%slug templated-picker-getting-started%})
|
||||
- [Templates]({%slug templated-picker-templates%})
|
||||
- [Styling]({%slug templated-picker-styling%})
|
||||
|
|
@ -0,0 +1,31 @@
|
|||
---
|
||||
title: Styling
|
||||
page_title: Styling
|
||||
position: 4
|
||||
slug: templated-picker-styling
|
||||
---
|
||||
|
||||
# Styling
|
||||
|
||||
Using the SelectorSettings property of the RadPickerBase class, you could style the dialog(popup) through the following properties:
|
||||
|
||||
* **PopupViewStyle**(of type *Style* with target type is **telerikInput:PickerPopupContentView**):
|
||||
* **HeaderStyle**(of type *Style* with target type is **telerikInput:PickerPopupHeaderView**):
|
||||
* **HeaderLabelStyle**(of type *Style* with target type is **Label**):
|
||||
* **FooterStyle**(of type *Style* with target type is **telerikInput:PickerPopupFooterView**):
|
||||
* **AcceptButtonStyle**(of type *Style* with target type is **Button**):
|
||||
* **CancelButtonStyle**(of type *Style* with target type is **Button**):
|
||||
|
||||
The SelectorSetting also provides the following properties for popup customization:
|
||||
|
||||
* **PopupOutsideBackgroundColor**(*Xamarin.Forms.Color*): Defines the color outside of the popup.
|
||||
* **HeaderLabelText**(*string*): Specifies the text visualized in the popup header.
|
||||
* **AcceptButtonText**(*string*): Defines the text visualized for the accept button. By default the text is *OK*.
|
||||
* **CancelButtonText**(*string*): Defines the text visualized for the cancel button. By default the text is *Cancel*.
|
||||
|
||||
>important A sample Styling example can be found in the TemplatedPicker/Features folder of the [SDK Samples Browser application]({%slug developer-focused-examples%}).
|
||||
|
||||
## See Also
|
||||
|
||||
- [Getting Started]({%slug templated-picker-getting-started%})
|
||||
- [Templates]({%slug templated-picker-templates%})
|
||||
|
|
@ -0,0 +1,64 @@
|
|||
---
|
||||
title: Templates
|
||||
page_title: Templates
|
||||
position: 3
|
||||
slug: templated-picker-templates
|
||||
---
|
||||
|
||||
# Templates
|
||||
|
||||
Templated Picker for Xamarin provides the following template:
|
||||
|
||||
* **SelectorTemplate**(*ControlTemplate*): Defines the template used for displaying the selector of the picker.
|
||||
|
||||
In addition to this you can define the following templates provided from the RadPickerBase class:
|
||||
|
||||
* **PlaceholderTemplate**(*ControlTemplate*): Defines the template visualized for the placeholder.
|
||||
* **DisplayTemplate**(*ControlTemplate*): Defines the template visualized when the picked date/time is displayed.
|
||||
|
||||
And using RadPickerBase.SelectorSettings property(of type *Telerik.XamarinForms.Input.PickerPopupSelectorSettings*) you can define the following templates:
|
||||
|
||||
* **HeaderTemplate**(*ControlTemplate*): Defines what will be displayed inside the dialog(popup) header.
|
||||
* **FooterTemplate**(*ControlTemplate*): Defines what will be displayed inside the dialog(popup) footer.
|
||||
|
||||
## Example
|
||||
|
||||
Here is a sample Templated Picker definition:
|
||||
|
||||
<snippet id='templatedpicker-keyfeatures' />
|
||||
|
||||
### SelectorTemplate
|
||||
|
||||
Here is a sample definition of the SelectorTemplate:
|
||||
|
||||
<snippet id='templatedpicker-keyfeatures-selectortemplate' />
|
||||
|
||||
### HeaderTemplate:
|
||||
|
||||
<snippet id='templatedpicker-keyfeatures-headertemplate' />
|
||||
|
||||
add the following Business model for the first spinner:
|
||||
|
||||
<snippet id='templatedpicker-country-businessmodel' />
|
||||
|
||||
add the following Business model for the second spinner:
|
||||
|
||||
<snippet id='templatedpicker-city-businessmodel' />
|
||||
|
||||
here is a sample definition of the ViewModel:
|
||||
|
||||
<snippet id='templatedpicker-viewmodel' />
|
||||
|
||||
In addition to this, you need to add the following namespace:
|
||||
|
||||
```XAML
|
||||
xmlns:telerikInput="clr-namespace:Telerik.XamarinForms.Input;assembly=Telerik.XamarinForms.Input"
|
||||
```
|
||||
```C#
|
||||
using Telerik.XamarinForms.Input;
|
||||
|
||||
>important A sample Key Features example can be found in the TemplatedPicker/Features folder of the [SDK Samples Browser application]({%slug developer-focused-examples%}).
|
||||
|
||||
## See Also
|
||||
|
||||
- [Styling]({%slug templated-picker-styling%})
|
||||
|
|
@ -0,0 +1,140 @@
|
|||
---
|
||||
title: Load calendar appoinments data from JSON
|
||||
description: deserialize appointment objects from JSON file
|
||||
type: how-to
|
||||
page_title: RadCalendar appointment from JSON
|
||||
slug: appointment-from-json
|
||||
position:
|
||||
tags: calendar, appointment, JSON, deserialize, xamarin, telerik ui for xamarin, events, newtonsoft
|
||||
ticketid: 1417911
|
||||
res_type: kb
|
||||
---
|
||||
|
||||
## Environment
|
||||
<table>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Product Version</td>
|
||||
<td>2019.3.1004.1</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Product</td>
|
||||
<td>Calendar for Xamarin</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
|
||||
## Description
|
||||
|
||||
This article shows how to deserialize appointment objects from JSON.
|
||||
|
||||
## Solution
|
||||
|
||||
First, download NuGet packages for NewtonSoft library. More information about NewtonSoft can be found [here](https://www.newtonsoft.com/json).
|
||||
|
||||
Create new JSON file with name "Source.json" to our project and change its Build Action to "Embedded resource".
|
||||
|
||||
Here is a sample how our JSON file is stuctured.
|
||||
|
||||
```JSON
|
||||
[
|
||||
{
|
||||
"Title": "Meeting with Tom",
|
||||
"Detail": "Sea Garden",
|
||||
"StartDate": "2019-10-07T00:00:00Z",
|
||||
"EndDate": "2019-10-07T01:00:00Z",
|
||||
"Color": "Red",
|
||||
"IsAllDay": true
|
||||
},
|
||||
{
|
||||
"Title": "Lunch with Sara",
|
||||
"Detail": "Restaurant",
|
||||
"StartDate": "2019-10-08T00:00:00Z",
|
||||
"EndDate": "2019-10-08T01:00:00Z",
|
||||
"Color": "Blue",
|
||||
"IsAllDay": true
|
||||
},
|
||||
{
|
||||
"Title": "Elle Birthday",
|
||||
"StartDate": "2019-10-09T00:00:00Z",
|
||||
"EndDate": "2019-10-09T01:00:00Z",
|
||||
"Color": "Green",
|
||||
"IsAllDay": false
|
||||
}
|
||||
]
|
||||
```
|
||||
|
||||
Add the RadCalendar in the Main.xaml file.
|
||||
|
||||
```XAML
|
||||
<telerikInput:RadCalendar x:Name="calendar"/>
|
||||
```
|
||||
|
||||
After that lets create a class that will convert inconsistent JSON data like Colors.
|
||||
|
||||
```C#
|
||||
public class AppointmentJsonConverter : JsonConverter<Appointment>
|
||||
{
|
||||
public override Appointment ReadJson(JsonReader reader, Type objectType, Appointment existingValue, bool hasExistingValue, JsonSerializer serializer)
|
||||
{
|
||||
JObject jObject = JObject.Load(reader);
|
||||
var title = jObject["Title"].Value<string>();
|
||||
String detail = null;
|
||||
if (jObject["Detail"] != null)
|
||||
{
|
||||
detail = jObject["Detail"].Value<string>();
|
||||
}
|
||||
|
||||
var startDate = jObject["StartDate"].Value<DateTime>();
|
||||
var endDate = jObject["EndDate"].Value<DateTime>();
|
||||
|
||||
var colorTypeConverter = new ColorTypeConverter();
|
||||
var color = (Color)colorTypeConverter.ConvertFromInvariantString(jObject["Color"].Value<string>());
|
||||
|
||||
return new Appointment()
|
||||
{
|
||||
Title = title,
|
||||
Detail = detail,
|
||||
StartDate = startDate,
|
||||
EndDate = endDate,
|
||||
Color = color
|
||||
};
|
||||
}
|
||||
|
||||
public override void WriteJson(JsonWriter writer, Appointment value, JsonSerializer serializer)
|
||||
{
|
||||
throw new NotImplementedException();
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
Finally, create a method named "GetJsonData()" which uses NewtonSoft library and deserializes the appointment objects in it.
|
||||
|
||||
```C#
|
||||
public partial class MainPage : ContentPage
|
||||
{
|
||||
public MainPage()
|
||||
{
|
||||
InitializeComponent();
|
||||
this.GetJsonData();
|
||||
}
|
||||
|
||||
private void GetJsonData()
|
||||
{
|
||||
string jsonFileName = "Source.json";
|
||||
ObservableCollection<Appointment> objAppointmentList = new ObservableCollection<Appointment>();
|
||||
var assembly = typeof(MainPage).GetTypeInfo().Assembly;
|
||||
Stream stream = assembly.GetManifestResourceStream($"{assembly.GetName().Name}.{jsonFileName}");
|
||||
using (var reader = new System.IO.StreamReader(stream))
|
||||
{
|
||||
var jsonString = reader.ReadToEnd();
|
||||
objAppointmentList = JsonConvert.DeserializeObject<ObservableCollection<Appointment>>(jsonString, new AppointmentJsonConverter());
|
||||
}
|
||||
this.calendar.AppointmentsSource = objAppointmentList;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
|
||||
Загрузка…
Ссылка в новой задаче