date picker images and fix blazor overview article
|
@ -29,18 +29,17 @@ The available controls which can be used in Mobile Blazor Bindings projects are
|
|||
|
||||
Let’s review the steps needed to get started with the Telerik UI for Xamarin controls in a Mobile Blazor Bindings project.
|
||||
|
||||
1. Setting up the project.
|
||||
### 1. Setting up the project.
|
||||
|
||||
* Create a project using the approach described at the following link: https://docs.microsoft.com/en-us/mobile-blazor-bindings/get-started.
|
||||
|
||||
Then we can start adding our Telerik Controls.
|
||||
|
||||
Let’s add the **RadBusyIndicator** to the project.
|
||||
|
||||
|
||||
2. Adding the required Telerik references
|
||||
### 2. Adding the required Telerik references
|
||||
|
||||
You have two options:
|
||||
You have two options:
|
||||
|
||||
* Add the Telerik UI for Xamarin Blazor Nuget package following the instructions from the [Telerik Nuget package server]({%slug telerik-nuget-server%}) topic.
|
||||
|
||||
|
@ -60,9 +59,9 @@ After that we need to add the Telerik.XamarinForms.Blazor.Primitives in our `_Im
|
|||
|
||||
>important RadBusyIndicator is rendered via the SkiaSharp graphics library so you need to install also **SkiaSharp.Views.Forms** in all projects of the xamarin solution (Portable, Android, iOS, etc).
|
||||
|
||||
3. Adding RadBusyIndicator control
|
||||
### 3. Adding RadBusyIndicator control
|
||||
|
||||
3.1 Add new Razor component (lets call it RadBusyIndicatorPage.razor) and create the control inside:
|
||||
3.1 Add new Razor component (lets call it RadBusyIndicatorPage.razor) and create the control inside:
|
||||
|
||||
```XML
|
||||
<ContentView VerticalOptions="LayoutOptions.Center" >
|
||||
|
@ -70,8 +69,8 @@ After that we need to add the Telerik.XamarinForms.Blazor.Primitives in our `_Im
|
|||
</ContentView>
|
||||
```
|
||||
|
||||
3.2 Then use the RadBusyIndicatorPage component as MainPage for the application by modifying the App.cs:
|
||||
|
||||
3.2 Then use the RadBusyIndicatorPage component as MainPage for the application by modifying the App.cs:
|
||||
|
||||
```C#
|
||||
public class App : Application
|
||||
{
|
||||
|
@ -92,9 +91,9 @@ public class App : Application
|
|||
}
|
||||
```
|
||||
|
||||
4. Customizations
|
||||
### 4. Customizations
|
||||
|
||||
4.1. Lets add a button that changes the IsBusy property of the RadBusyIndicator:
|
||||
4.1. Lets add a button that changes the IsBusy property of the RadBusyIndicator:
|
||||
|
||||
```XML
|
||||
<ContentView>
|
||||
|
@ -123,7 +122,7 @@ public class App : Application
|
|||
}
|
||||
```
|
||||
|
||||
4.2 Customize RadBusyIndicator. Lets change its **AnimationContentColor** and **AnimationType**. Also let's add **Content** and **BusyContent**:
|
||||
4.2 Customize RadBusyIndicator. Lets change its **AnimationContentColor** and **AnimationType**. Also let's add **Content** and **BusyContent**:
|
||||
|
||||
```XML
|
||||
<RadBusyIndicator IsBusy="@IsBusyIndicatorBusy"
|
||||
|
@ -144,12 +143,12 @@ public class App : Application
|
|||
</RadBusyIndicator>
|
||||
```
|
||||
|
||||
5. Run the application and see the result:
|
||||
### 5. Run the application and see the result:
|
||||
|
||||
On Android:
|
||||
|
||||
![Xamarin Blazor Binding BusyIndicator Android](images/busyindicator-blazor-xamarin-android.png "Xamarin Blazor Binding BusyIndicator"):
|
||||
![Xamarin Blazor Binding BusyIndicator Android](images/busyindicator-blazor-xamarin-android.png "Xamarin Blazor Binding BusyIndicator")
|
||||
|
||||
on iOS:
|
||||
|
||||
![Xamarin Blazor Binding BusyIndicator iOS](images/busyindicator-blazor-xamarin-iOS.png "Xamarin Blazor Binding BusyIndicator"):
|
||||
![Xamarin Blazor Binding BusyIndicator iOS](images/busyindicator-blazor-xamarin-iOS.png "Xamarin Blazor Binding BusyIndicator")
|
||||
|
|
До Ширина: | Высота: | Размер: 13 KiB После Ширина: | Высота: | Размер: 14 KiB |
Двоичные данные
blazormobilecontrols/images/busyindicator-blazor-xamarin-iOS.png
До Ширина: | Высота: | Размер: 9.2 KiB После Ширина: | Высота: | Размер: 12 KiB |
|
@ -87,7 +87,7 @@ And the result:
|
|||
|
||||
And the result:
|
||||
|
||||
![](images/datetimepicker-string-format-mmm-yyyy.png)
|
||||
![](images/datepicker-string-format-mmm-yyyy.png)
|
||||
|
||||
### SpinnerFormat="yyyy/dd/MMM"
|
||||
|
||||
|
@ -97,7 +97,7 @@ And the result:
|
|||
|
||||
And the result:
|
||||
|
||||
![](images/datetimepicker-string-format-yyyy-dd-MMM.png)
|
||||
![](images/datepicker-string-format-yyyy-dd-MMM.png)
|
||||
|
||||
## See Also
|
||||
|
||||
|
|
Двоичные данные
controls/datepicker/images/date_picker_placeholder_display.png
До Ширина: | Высота: | Размер: 8.5 KiB После Ширина: | Высота: | Размер: 11 KiB |
После Ширина: | Высота: | Размер: 15 KiB |
Двоичные данные
controls/datepicker/images/datepicker-spinner-localization.png
До Ширина: | Высота: | Размер: 13 KiB |
Двоичные данные
controls/datepicker/images/datepicker-string-format-dd.png
До Ширина: | Высота: | Размер: 26 KiB После Ширина: | Высота: | Размер: 34 KiB |
После Ширина: | Высота: | Размер: 41 KiB |
Двоичные данные
controls/datepicker/images/datepicker-string-format-mmmm-dd.png
До Ширина: | Высота: | Размер: 34 KiB После Ширина: | Высота: | Размер: 41 KiB |
После Ширина: | Высота: | Размер: 46 KiB |
Двоичные данные
controls/datepicker/images/datepicker_getting_started.png
До Ширина: | Высота: | Размер: 53 KiB После Ширина: | Высота: | Размер: 54 KiB |
Двоичные данные
controls/datepicker/images/datepicker_style.png
До Ширина: | Высота: | Размер: 56 KiB После Ширина: | Высота: | Размер: 55 KiB |
Двоичные данные
controls/datepicker/images/datetimepicker_time_picker.png
До Ширина: | Высота: | Размер: 64 KiB |
|
@ -21,10 +21,6 @@ The sections below list all the localization keys used in Date and Time Picker S
|
|||
| DateTimePicker_Popup_HeaderLabelText | Select Date and Time |
|
||||
| DateTimePicker_PlaceholderLabelText | Select Date and Time |
|
||||
|
||||
Check in the image below how the localization strings are presented in Date and Time Picker Spinners:
|
||||
|
||||
![](images/datetimepicker-localization.png)
|
||||
|
||||
## Common Picker Localizations strings
|
||||
|
||||
| Localization Key | Default Value |
|
||||
|
@ -39,9 +35,9 @@ Check in the image below how the localization strings are presented in Date and
|
|||
| Picker_Popup_AcceptButtonText | OK |
|
||||
| Picker_Popup_CancelButtonText | Cancel |
|
||||
|
||||
Check in the image below how the common localization strings are presented in Date and Time Picker:
|
||||
Check in the image below how the localization strings are presented in Date and Time Picker:
|
||||
|
||||
![](images/dtpicker-localization.png)
|
||||
![DateTime Picker Localization](images/datetimepicker-localization.png)
|
||||
|
||||
## See Also
|
||||
|
||||
|
|
До Ширина: | Высота: | Размер: 8.9 KiB После Ширина: | Высота: | Размер: 13 KiB |
Двоичные данные
controls/datetimepicker/images/datetimepicker-localization.png
До Ширина: | Высота: | Размер: 18 KiB После Ширина: | Высота: | Размер: 23 KiB |
Двоичные данные
controls/datetimepicker/images/dtpicker-localization.png
До Ширина: | Высота: | Размер: 12 KiB |