Merge pull request #1204 from telerik/didi/fix-snippets

update code snippets code definition and nav view getting started gif.

Author: didiyordanova

_contentTemplates/get-started.md

@@ -17,21 +17,21 @@ To use the controls in the Telerik UI for .NET MAUI library, add the Telerik nam
 1. In the `MainPage.xaml` file, locate the root element at the top.
 1. Paste the Telerik namespace below the last already available namespace:
 
-	```
+	```XAML
 	xmlns:telerik="http://schemas.telerik.com/2022/xaml/maui"
 	```
 
 To visualize the Telerik controls, register them in the `MauiProgram.cs` file of your project:
 
 1. In the `MauiProgram.cs` file, add the following using statement:
 
-	```
+	```C#
 	using Telerik.Maui.Controls.Compatibility;
 	```
 
 1. In the `CreateMauiApp` method, call the `UseTelerik` extension method:
 
-	```
+	```C#
 	<!-- Code omitted for brevity -->
 	.UseMauiApp<App>()
 	.UseTelerik()
@@ -51,9 +51,9 @@ To add the TemplatedButton control to the application:
 
 1. In the `MainPage.xaml` file, add the Telerik UI for .NET MAUI TemplatedButton and set its content to a string:
 
-	```
+	```XAML
 	<telerik:RadTemplatedButton x:Name="templatedButton"
-		Content="My TemplatedButton Content" />
+		                        Content="My TemplatedButton Content" />
 	```
 
 After adding the basic TemplatedButton and setting the initial content, you can hit `F5` to confirm that the app is running. In the next steps, you will configure the control by adding some interactivity.
@@ -68,7 +68,7 @@ In this step, you will edit the code-behind file by adding logic that makes the
 	* In the `Grid`, add a [BusyIndicator](https://docs.telerik.com/devtools/maui/controls/busyindicator/overview) control and adjust its [styling options](https://docs.telerik.com/devtools/maui/controls/busyindicator/animations).
 	* In the `Grid`, add a label control for the loading indicator.
 
-		```
+		```XAML
 		<telerik:RadTemplatedButton x:Name="templatedButton">
 			<telerik:RadTemplatedButton.Content>
 				<Grid ColumnDefinitions="Auto, *" HorizontalOptions="Center">
@@ -90,7 +90,7 @@ In this step, you will edit the code-behind file by adding logic that makes the
 
 1. In the `MainPage.xaml.cs` file, add a new member method within the `MainPage` class. This new method adds the logic that controls the content of the button:
 
-	```
+	```C#
 	private async void OnTemplatedButtonClicked(object sender, EventArgs e)
 	{
 		this.busy.IsBusy = true;
@@ -103,7 +103,7 @@ In this step, you will edit the code-behind file by adding logic that makes the
 
 1. Finally, set the `Clicked` event and add some styles to the TemplatedButton. Use the various [appearance options](https://docs.telerik.com/devtools/maui/controls/templatedbutton/styling) provided by the component, for example, `TextColor`, `Background`, `BorderBrush`, and so on:  
 
-	```
+	```XAML
 	<telerik:RadTemplatedButton x:Name="templatedButton"
 								TextColor="Black"
 								Background="#FAFAFA"

controls/autocomplete/filtering.md

@@ -62,7 +62,7 @@ By default, the .NET `string.Contains` method will take all punctuation into con
 
 For example, if the source string is `Main Street, 101` and the user searches `Main Street 101`, string.Contains will return false and the result will not appear in the FilteredItems view. The custom filter below removes the commas before the string is used with the Contains method.
 
-```
+```C#
 public class CustomAutoCompleteFilter : IAutoCompleteFilter
 {
     public bool Filter(object item, string searchText, AutoCompleteCompletionMode completionMode)

controls/chart/nullvalues.md

@@ -18,12 +18,11 @@ The following example demonstrates a data-bound scenario where a nullable `doubl
 
 **1.** Create a `ViewModel` with a collection of `CategoryItems` objects, where a few of the items have null values:
 
-<snippet id='chart-nullvalues-viewmodel'/>
-
+<snippet id='chart-nullvalues-viewmodel' />
 
 **2.** Add a `RadCartesianChart` with a Spline Area Series, for example:
 
-<snippet id='chart-nullvalues-xaml'/>
+<snippet id='chart-nullvalues-xaml' />
 
 **3.** Add the `telerik` namespace:
 

controls/checkbox/getting-started.md

@@ -59,7 +59,7 @@ public static class MauiProgram
 
 		return builder.Build();
 	}
-}           
+}
 ```
 
 > For a runnable example with the CheckBox Getting Started scenario, see the [SDKBrowser Demo Application]({%slug sdkbrowser-app%}) and go to **CheckBox > Getting Started** category.

controls/dataform/headers.md

@@ -27,11 +27,7 @@ You can specify absolute values in pixels or weighted values followed by the ast
 	* `Text`—Visualizes the header text. For this option `HeaderText` has to be defined.
 	* `Image`—Visualizes the image in the header. For this option `HeaderImageSource` has to be defined.
 
-You can combine the `Text` and the `Image` in the `HeaderDisplayOptions`:
-
-```XAML
-HeaderDisplayOptions="Image, Text"
-```
+You can combine the `Text` and the `Image` in the `HeaderDisplayOptions`. Here is a sample definition: `HeaderDisplayOptions="Image, Text"`.
 
 * `HeaderTemplate`(`Microsoft.Maui.Controls.ControlTemplate`)—Specifies the template of the header view.
 
@@ -54,11 +50,7 @@ Each group has a header. Here are the properties you can use to configure the gr
 	* `Text`—Visualizes the header text. For this option `HeaderText` has to be defined.
 	* `Image`—Visualizes the image in the header. For this option `HeaderImageSource` has to be defined.
 
-You can combine the `Text` and the `Image` in the `HeaderDisplayOption`:
-
-```XAML
-HeaderDisplayOptions="Image, Text"
-```
+You can combine the `Text` and the `Image` in the `HeaderDisplayOptions`. Here is a sample definition: `HeaderDisplayOptions="Image, Text"`.
 
 * `HeaderTemplate`(`Microsoft.Maui.Controls.ControlTemplate`)—Specifies the template of the header view.
 

controls/datagrid/columns/overview.md

@@ -21,7 +21,7 @@ By default, the DataGrid will generate typed columns automatically based on the
 
 For example, let's have a sample `Club` object:
 
-```XAML
+```C#
 public class Club
 { 
     public string Name { get; set; }

controls/datapager/styling/pagesizes.md

@@ -22,7 +22,7 @@ Here is an example demonstrating how to use `PageSizesViewStyle`.
 **1.** Define the DataPager in XAML:
 
 ```XAML
-    <telerik:RadDataPager PageSizesViewStyle="{StaticResource PageSizesViewStyle}"
+<telerik:RadDataPager PageSizesViewStyle="{StaticResource PageSizesViewStyle}"
 ```
 
 **2.** Set the styles to the page's resources:

controls/gridsplitter/getting-started.md

@@ -33,7 +33,7 @@ Before adding the GridSplitter, you need to:
 **2.** Add the `telerik` namespace:
 
 ```XAML
- xmlns:telerik="http://schemas.telerik.com/2022/xaml/maui"
+xmlns:telerik="http://schemas.telerik.com/2022/xaml/maui"
 ```
 
 **3.** Register the Telerik controls through the `Telerik.Maui.Controls.Compatibility.UseTelerik` extension method called inside the `CreateMauiApp` method of the `MauiProgram.cs` file of your project:

controls/imageeditor/migrate-from-xamarin.md

@@ -78,7 +78,9 @@ When migrating the ImageEditorToolbar from Xamarin to .NET MAUI, consider the fo
 
 The code snippets below represent the Xamarin and .NET MAUI definitions of the ImageEditor and ImageEditorToolbar with all predefined toolbar items.
 
-```Xamarin
+Definition in Xamarin:
+
+```C#
 <Grid>
     <Grid.RowDefinitions>
         <RowDefinition />
@@ -114,9 +116,11 @@ The code snippets below represent the Xamarin and .NET MAUI definitions of the I
     </telerikImageEditor:RadImageEditorToolbar>
 </Grid>
 ```
-```MAUI
+
+Definition in MAUI:
+
 <snippet id='imageeditor-commands-xaml'/>
-```
+
 
 ## See Also
 

controls/listpicker/styling/dropdown-styling.md

@@ -46,9 +46,9 @@ The following examples demonstrate how to define use the styling properties of t
 
 In addition, add the following namespace:
 
- ```XAML
+```XAML
 xmlns:telerik="http://schemas.telerik.com/2022/xaml/maui"                      
- ```
+```
 
 The following image shows what the ListPicker control looks like when the styles described above are applied: