This commit is contained in:
PROGRESS\kerpecheva 2019-06-19 10:42:21 +03:00
Родитель 78391dcb30
Коммит 9da1b37ec5
16 изменённых файлов: 264 добавлений и 149 удалений

Просмотреть файл

@ -26,7 +26,7 @@ You have two options:
* Add the Telerik UI for Xamarin Nuget packages following the instructions in [Telerik NuGet package server]({%slug telerik-nuget-server%}) topic.
* Add the references to Telerik assemblies manually, check the list below with the required assemblies for **RadAccordion** component:
* Add the references to Telerik assemblies manually, check the list below with the required assemblies for **RadBarcode** component:
| Platform | Assemblies |
| -------- | ---------- |

Двоичные данные
controls/path/Images/custom_default_paths.png

Двоичный файл не отображается.

До

Ширина:  |  Высота:  |  Размер: 38 KiB

После

Ширина:  |  Высота:  |  Размер: 51 KiB

Двоичные данные
controls/path/Images/path_arcsegment_scheme.png Normal file

Двоичный файл не отображается.

После

Ширина:  |  Высота:  |  Размер: 9.5 KiB

Двоичные данные
controls/path/Images/path_geometry.png Normal file

Двоичный файл не отображается.

После

Ширина:  |  Высота:  |  Размер: 55 KiB

Двоичные данные
controls/path/Images/path_multipath.png Normal file

Двоичный файл не отображается.

После

Ширина:  |  Высота:  |  Размер: 55 KiB

Двоичные данные
controls/path/Images/path_styling.png Normal file

Двоичный файл не отображается.

После

Ширина:  |  Высота:  |  Размер: 68 KiB

Двоичные данные
controls/path/Images/paths.png

Двоичный файл не отображается.

До

Ширина:  |  Высота:  |  Размер: 79 KiB

После

Ширина:  |  Высота:  |  Размер: 21 KiB

Просмотреть файл

@ -0,0 +1,67 @@
---
title: PathGeometry
page_title: PathGeometry
position: 2
slug: path-structure
---
# PathGeometry
In order to create a specific RadPath, you need to set a **RadPathGeometry** object to its **Geometry** property. The **RadPathGeometry** object exposes a **Figures** property which is a collection of **RadPathFigures**.
## RadPathFigure
Each of the RadPathFigure objects is composed of one or several segments. These can be a **RadArcSegment** or a **RadLineSegment**. Adding several segments in combination with setting up the **StartPoint** of the RadPathFigure is enough for you to create the desired figure which should be added to the figures collection of the geometry.
Each line or arc segment you add to the path figure is drawn consequently - its starting point is the last point of the previous segment of the Segments collection of the PathFigure object. The first segment uses the **StartPoint** of the path figure as starting point.
### RadArcSegment
The **RadArcSegment** represents an elliptical arc between two points. It exposes the following properties:
* **Center**: Defines the center point of the arc.
* **Size:** Sets the x- and y-diameter of the arc as a Size structure.
* **StartAngle**: Determines the angle from which the arc segment will start.
* **SweepAngle**: Specifies the length in degrees from the first to the second arc point. Positive angles are counter clockwise and negative angles clockwise.
The scheme below shows how **StartAngle** and **SweepAngle** are applied to the ArcSegment:
![ArcSegment Angles](images/path_arcsegment_scheme.png)
Here is a sample implementation of an **RadArcSegment** object:
<snippet id='path-geometry-assigning-custom-geometry'/>
### RadLineSegment
Creates a line between two points in a **RadPathFigure**. The starting point of the line is defined either by the previous segment's end point or by the **StartPoint** of the PathFigure object. The end point is defined by the **Point** property of the LineSegment object.
The thickness and the color of the line are determined by the **StrokeThickness** and **Stroke** properties of the Path object this line figure is added to.
Check below a simple example of how to create a line PathFigure:
<snippet id='path-geometry-line-segment'/>
## Example
The following example shows how to create a more complex **RadPathGeometry** object and add a line with curved edges to its Figures collection.
First you should define the **RadPath** figure:
<snippet id='path-geometry-linepath-xaml'/>
And then you set its **Geometry** to have the following structure:
<snippet id='path-geometry-set-line-geometry'/>
Check the screenshot below which shows the result after creating the three Paths:
![Path Geometry](images/path_geometry.png)
## See Also

Просмотреть файл

@ -0,0 +1,84 @@
---
title: Getting Started
page_title: Getting Started
position: 1
slug: path-getting-started
---
# Getting Started
This article will guide you through the steps needed to add a basic **RadPath** control in your application.
* [Setting up the app](#1-setting-up-the-app)
* [Adding the required Telerik references](#2-adding-the-required-telerik-references)
* [Adding RadPath control](#3-adding-radpath-control)
## 1. Setting up the app
Take a look at these articles and follow the instructions to setup your app:
- [Setup app with Telerik UI for Xamarin on Windows]({%slug getting-started-windows%})
- [Setup app with Telerik UI for Xamarin on Mac]({%slug getting-started-mac%})
## 2. Adding the required Telerik references
You have two options:
* Add the Telerik UI for Xamarin Nuget packages following the instructions in [Telerik NuGet package server]({%slug telerik-nuget-server%}) topic.
* Add the references to Telerik assemblies manually, check the list below with the required assemblies for **RadPath** component:
| Platform | Assemblies |
| -------- | ---------- |
| Portable | Telerik.XamarinForms.Common.dll<br/>Telerik.XamarinForms.Input.dll<br/>Telerik.XamarinForms.Primitives.dll <br /> Telerik.XamarinForms.SkiaSharp.dll
| Android | Telerik.Xamarin.Android.Common.dll<br/>Telerik.Xamarin.Android.Data.dll <br /> Telerik.Xamarin.Android.Input.dll<br/>Telerik.Xamarin.Android.List.dll<br/>Telerik.Xamarin.Android.Primitives.dll<br/>Telerik.XamarinForms.Common.dll<br/> Telerik.XamarinForms.Input.dll<br/> Telerik.XamarinForms.Primitives.dll <br /> Telerik.XamarinForms.SkiaSharp.dll
| iOS | Telerik.Xamarin.iOS.dll <br/>Telerik.XamarinForms.Common.dll<br/>Telerik.XamarinForms.Input.dll<br/>Telerik.XamarinForms.Primitives.dll<br /> Telerik.XamarinForms.SkiaSharp.dll
| UWP | Telerik.Core.dll<br/> Telerik.Data.dll <br />Telerik.UI.Xaml.Controls.Data.UWP.dll <br />Telerik.UI.Xaml.Input.UWP.dll<br/>Telerik.UI.Xaml.Primitives.UWP.dll<br/>Telerik.XamarinForms.Common.dll<br/>Telerik.XamarinForms.Input.dll<br/>Telerik.XamarinForms.Primitives.dll<br /> Telerik.XamarinForms.SkiaSharp.dll
>important RadPath is rendered via the **SkiaSharp** graphics library so you need to install also [SkiaSharp.Views.Forms](https://www.nuget.org/packages/SkiaSharp.Views.Forms) in all projects of the Xamarin solution (.Net Standard/Shared, Android, iOS, etc).
## 3. Adding RadPath control
If your app is correctly set, you are ready to add a **RadPath** control within your page.
RadPath control exposes **Geometry** property which should be assigned to a RadPathGeometry object. [RadPathGeometry]({% slug path-structure %}) consists of different RadPathFigures such as line and arc. RadPath also provides a few predefined geometries such as star, circle and other. Below you can find two examples of creating a path with built-in as well as custom geometry.
### Creating RadPath with built-in geometry
RadPath provides several built-in geometries that can be found in the *Telerik.XamarinForms.Input.Geometries* static class. Below you could find a list of the available geometries:
* Star;
* Circle;
* Heart;
* Diamond.
You can choose any of those and set it directly to the Geometry property of the Path component:
<snippet id='path-gettingstarted-starpath-xaml'/>
<snippet id='path-gettingstarted-starpath-code' />
In addition to this you need to add the following namespaces:
```XAML
xmlns:telerikPrimitives="clr-namespace:Telerik.XamarinForms.Primitives;assembly=Telerik.XamarinForms.Primitives"
xmlns:telerikInput="clr-namespace:Telerik.XamarinForms.Input;assembly=Telerik.XamarinForms.Input"
```
### Creating RadPath with custom geometry
You are free to create a custom geometry which will be visualized by the **RadPath** control. For that purpose, you need to create object of type **RadPathGeometry** and add a **RadPathFigure** with the needed segments.
The next example shows a RadPath with an Arc definition:
<snippet id='path-gettingstarted-custompath-xaml'/>
<snippet id='path-gettingstarted-custompath-code' />
Both RadPath objects appearance can be reviewed in the image below:
![RadPath Figures](images/custom_default_paths.png)
>important **SDK Browser** and **QSF** applications contain different examples that show RadPath's main features. You can find the applications in the **Examples** and **QSF** folders of your local **Telerik UI for Xamarin** installation.
## See Also
- [PathGeometry]({% slug path-structure %})

Просмотреть файл

@ -1,53 +0,0 @@
---
title: RadPathGeometry
page_title: RadPathGeometry
position: 1
slug: path-structure
---
# RadPathGeometry
In order to create a specific **RadPath**, you need to set a **RadPathGeometry** object to its **Geometry** property. The **RadPathGeometry** object exposes a **Figures** property which is a collection of **RadPathFigures**.
## RadPathFigure
Each of the RadPathFigure objects is composed of one or several segments. These can be a **RadArcSegment** or a **RadLineSegment**. Adding several segments in combination with setting up the **StartPoint** of the **RadPathFigure** is enough for you to create the desired figure which should be added to the figures collection of the geometry.
### RadArcSegment
The **RadArcSegment** represents an elliptical arc between two points. It exposes the following properties:
* **Center**: The center point of the arc.
* **Size:** Gets or sets the x- and y-radius of the arc as a Size structure.
* **StartAngle**: The Angle from which the arc segment will start.
* **SweepAngle**: The Value
Here is a sample implementation of an **RadArcSegment** object:
<snippet id='path-geometry-assigning-custom-geometry'/>
### RadLineSegment
Creates a line between two points in a **RadPathFigure**. It exposes a single **Point** property which is used to get/set the end point of the segment.
<snippet id='path-geometry-line-segment'/>
## Example
The following example shows how to create a **RadPathGeometry** object and add a line with curved edges to its Figures collection.
First you should define the **RadPath** figure:
<snippet id='path-geometry-linepath-xaml'/>
And then you set its **Geometry** to have the following structure:
<snippet id='path-geometry-set-line-geometry'/>
## See Also

Просмотреть файл

@ -1,64 +0,0 @@
---
title: Getting Started
page_title: Getting Started
position: 0
slug: path-getting-started
---
# Getting Started
This example will guide you through the steps needed to add a basic **RadPath** control in your application.
>Before you proceed, please, take a look at these articles and follow the instructions to setup your app:
>- [Setup on Windows]({%slug getting-started-windows%})
>- [Setup on Mac]({%slug getting-started-mac%})
## Important properties
The RadPath element exposes the following properties:
* **Fill:** Used for setting up the color within the figures. You should set an object of type **RadBrush**. This can be a **RadSolidColorBrush** or a **RadSweepGradientBrush**
* **Geometry:** You should set an object of type **RadPathGeometry** which will provide the geometry that needs to be visualized. The RadPathGeometry consists of different RadPathFigures.
* **Stroke:** You can use this property to set the stroke color.
* **StrokeThickness:** You can use this property to set the thickness of the stroke.
* **BackgroundColor:** You can use this property to modify the color of the rectangle which contains the specific figure.
## Creating RadPath with built-in geometry
If your app is correctly set, you are ready to add a **RadPath** control within your page:
<snippet id='path-gettingstarted-starpath-xaml'/>
In addition to this you need to add the following namespace:
<snippet id='xmlns-telerikprimitives'/>
You need to set the **Geometry** property of the **RadPath** instance for it to visualize properly. There are several built-in geometries which can be found in the **Telerik.XamarinForms.Input.Geometries** static class.
<snippet id='path-gettingstarted-built-in-geometry'/>
## Creating RadPath with custom geometry
You are free to create a custom geometry which will be visualized by the **RadPath** control. For that purpose, you need to create object of type **RadPathGeometry**.
The definition of the RadPath is similar:
<snippet id='path-gettingstarted-custompath-xaml'/>
Assigning the custom geometry:
<snippet id='path-gettingstarted-assigning-custom-geometry'/>
The Custom geometry definition:
<snippet id='path-gettingstarted-custom-geometry'/>
Both RadPath objects appearance can be reviewed in **Figure 1**.
**Figure 1:**
![RadPath Figures](../images/custom_default_paths.png)
>important **SDK Browser** and **QSF** applications contain different examples that show RadPath's main features. You can find the applications in the **Examples** and **QSF** folders of your local **Telerik UI for Xamarin** installation.
## See Also

Просмотреть файл

@ -1,30 +0,0 @@
---
title: Required Telerik Assemblies
page_title: Required Telerik Assemblies
position: 1
slug: path-getting-started-required-assemblies
---
# Required Telerik Assemblies
This article contains information about which assemblies are required by the **RadPath** control.
>important The control relies on the **SkiaSharp** rendering library for the visualization of certain elements within its structure. Reference to the relevant version of the library should be added in order to use the control. For more information - [Lite vs Standard Assemblies]({%slug telerik-light-assemblies%})
> The path of the assemblies is relative to the `Binaries` folder that is located in the installation folder of the controls. The default location is:
> `C:\Program Files (x86)\Progress\Telerik UI for Xamarin RX XXX\Binaries`.
> Please keep in mind that all binaries built for a specific platform are placed in a folder named after that platform.
Here are listed all assemblies required by the **RadPath** control.
| Platform | Assemblies |
| -------- | ---------- |
| Portable | Telerik.XamarinForms.Common.dll<br/>Telerik.XamarinForms.Input.dll<br/>Telerik.XamarinForms.Primitives.dll |
| Android | Telerik.Xamarin.Android.Common.dll<br/>Telerik.Xamarin.Android.Data.dll <br /> Telerik.Xamarin.Android.Input.dll<br/>Telerik.Xamarin.Android.List.dll<br/>Telerik.Xamarin.Android.Primitives.dll<br/>Telerik.XamarinForms.Common.dll<br/> Telerik.XamarinForms.Input.dll<br/> Telerik.XamarinForms.Primitives.dll |
| iOS | Telerik.Xamarin.iOS.dll <br/>Telerik.XamarinForms.Common.dll<br/>Telerik.XamarinForms.Input.dll<br/>Telerik.XamarinForms.Primitives.dll |
| UWP | Telerik.Core.dll<br/> Telerik.Data.dll <br />Telerik.UI.Xaml.Controls.Data.UWP.dll <br />Telerik.UI.Xaml.Input.UWP.dll<br/>Telerik.UI.Xaml.Primitives.UWP.dll<br/>Telerik.XamarinForms.Common.dll<br/>Telerik.XamarinForms.Input.dll<br/>Telerik.XamarinForms.Primitives.dll
## See Also
- [Path Getting Started]({%slug path-getting-started %})

Просмотреть файл

@ -0,0 +1,26 @@
---
title: MultiPath
page_title: MultiPath
position: 3
slug: path-multipath
---
# MultiPath
RadMultiPath allows you to combine several PathGeometry objects into a single element. The MultiPath contains a collection of **RadPathDefinition** objects and each of them provides a **Geometry** property as well as the same styling properties as the RadPath.
Here is a an example of RadMultiPath definition:
<snippet id='path-multipath-xaml' />
The image below shows the result:
![RadMultiPath](images/path_multipath.png)
## See Also

Просмотреть файл

@ -0,0 +1,36 @@
---
title: Styling
page_title: Styling
position: 8
slug: path-styling
---
# Styling
The RadPath element exposes the following properties you can use to customize the look of the path figures:
* **Fill:** Used for setting up the color within the figures. You should set an object of type **RadBrush**. This can be a **RadSolidColorBrush** or a **RadSweepGradientBrush**
* **Stroke:** You can use this property to set the stroke color.
* **StrokeThickness:** You can use this property to set the thickness of the stroke.
* **BackgroundColor:** You can use this property to modify the color of the rectangle which contains the specific figure.
Here is an example with **RadSweepGradientBrush**:
<snippet id='path-styling-gradientbrush-xaml'/>
Below you can check an example with **RadSolidColorBrush**:
<snippet id='path-styling-solidbrush-xaml'/>
And the result is shown below:
![RadPath Styling](images/path_styling.png)
## See Also

Просмотреть файл

@ -17,7 +17,6 @@ TreeViewItemStyle exposes the following styling options:
* **BorderColor** (*Color*): sets the color of the border.
* **BorderWidth** (*double*): defines the width of the borer.
* **BorderLocation** (*Location*): describes an enumeration describing where the border should be visible.
* **TextCellTextColor** (*Color*): defines the text color of the ListView TextCell.
### Location

Просмотреть файл

@ -0,0 +1,50 @@
---
title: How to configure Nuget.config file to use Теlerik Nuget Server within Xamarin app
description: Explain how to set credentials to Telerik Nuget Server in Nuget.config file to build in AppCenter
type: how-to
page_title: How to build Xamarin.Forms project with Telerik Xamarin nuget package in AppCenter
slug: common-nuget-config
position:
tags:
ticketid: 1096817
res_type: kb
---
## Environment
<table>
<tbody>
<tr>
<td>Product Version</td>
<td>2019.2.603.1</td>
</tr>
<tr>
<td>Product</td>
<td>Telerik UI for Xamarin</td>
</tr>
</tbody>
</table>
## Description
Telerik UI for Xamarin Nuget package is hosted on a private server, it is not published in the official NuGet storage. So, when you're building a Xamarin.Forms application with our Xamarin nuget package in AppCenter, you would need to provide the credentials to the Telerik Nuget Server (they are the same as in your Telerik account) inside a Nuget.config file.
## Solution
You could check how to setup the Nuget.config file in the MSDN topic below:
https://docs.microsoft.com/en-us/nuget/reference/nuget-config-file#package-source-sections
The tricky part is that you'd need to use **ClearTextPassword** field for the credentials.
Here is an example with setting up Telerik Nuget Server in Nuget.config:
```XML
<packageSources>
<add key="NuGet" value="https://api.nuget.org/v3/index.json" />
<add key="Telerik" value="https://nuget.telerik.com/nuget" />
</packageSources>
<packageSourceCredentials>
<Telerik>
<add key="Username" value="%TELERIK_USERNAME%" />
<add key="ClearTextPassword" value="%TELERIK_PASSWORD%" />
</Telerik>
</packageSourceCredentials>
```