Merge pull request #925 from telerik/didi/update-combobox

update combo images

Author: didiyordanova

controls/combobox/configuration.md

@@ -21,7 +21,7 @@ Here is an example of setting the `Placeholder` property:
 
 The next image shows the result:
 
-![ComboBox Placeholder](images/combobox-visual-structure.png)
+![ComboBox Placeholder](images/combobox-placeholder.png)
 
 Here is an example of setting the `PlaceholderColor` property:
 
@@ -57,6 +57,8 @@ and the result:
 
 ![ComboBox Clear Button Visibility](images/combobox-clearbuttonvisibility.png)
 
+> For the ComboBox Configuration example, refer to the [SDKBrowser Demo Application]({%slug sdkbrowser-app%}) and navigate to the **ComboBox > Features** category.
+
 ## Drop-Down Behavior
 
 To manage the drop-down of the ComboBox, use the following properties:
@@ -100,7 +102,7 @@ Here is an example with `OpenOnFocus` property set:
 
 The `Keyboard` property of type `Microsoft.Maui.Keyboard` allows you to define the type of the keyboard that will be visualized by the device. The default value is Text.
 
->important The Configuration example can be found in our [SDK Browser Application]({%slug sdkbrowser-app%}). You can find the application in the **Examples** folder of your local **Telerik UI for .NET MAUI** installation or in the following [GitHub repo](https://github.com/telerik/maui-samples/tree/main/Samples/SdkBrowser).
+> For the ComboBox Drop-Down Configuration example, refer to the [SDKBrowser Demo Application]({%slug sdkbrowser-app%}) and navigate to the **ComboBox > Features** category.
 
 ## See Also
 

controls/combobox/editmode-and-search.md

@@ -28,29 +28,29 @@ ComboBox provides both case-sensitive and case-insensitive searching modes. The
 * `HighlightTextColor`(*Microsoft.Maui.Graphics.Color*)—Defines the color of the text that will be highlighted when searching is performed.
 
 > Searching can be performed when `IsEditable` is `true`.
+> The ComboBox `DisplayMemberPath` property must be set when binding to complex objects. Also, when `IsEditable` is `true`, the `SearchTextPath` property must be set.
 
-If you want the text to be highlighted when using custom ItemTemplate, you have to add a `RadHighlightLabel` inside the ItemTemplate.
+If you want the text to be highlighted when using a custom `ItemTemplate`, you have to add a `RadHighlightLabel` inside the `ItemTemplate`.
 
-Here is an example:
+Here is the XAML definition of the ComboBox with `RadHighlightLabel` inside the `ItemTemplate`:
 
 ```XAML
 <telerik:RadComboBox x:Name="comboBox"
-        ItemsSource="{Binding Items}" 
-        DisplayMemberPath="Name"
-        Placeholder="Select City"
-        AutomationId="comboBox"
-        HighlightTextColor="Red"
-        IsEditable="True">
+                     ItemsSource="{Binding Items}" 
+                     DisplayMemberPath="Name"
+                     Placeholder="Select City"
+                     AutomationId="comboBox"
+                     HighlightTextColor="Red"
+                     IsEditable="True">
     <telerik:RadComboBox.ItemTemplate>
         <DataTemplate>
             <telerik:RadBorder BackgroundColor="LightYellow"
                 MinimumWidthRequest="300">
 
                 <telerik:RadHighlightLabel TextColor="Black" Padding="10"
-            HighlightTextColor="BlueViolet"
-            UnformattedText="{Binding Name}"
-            HighlightText="{Binding Source={x:Reference comboBox}, Path=Text}" />
-
+                                           HighlightTextColor="BlueViolet"
+                                           UnformattedText="{Binding Name}"
+                                           HighlightText="{Binding Source={x:Reference comboBox}, Path=Text}" />
             </telerik:RadBorder>
         </DataTemplate>
     </telerik:RadComboBox.ItemTemplate>
@@ -60,43 +60,21 @@ Here is an example:
                 MinimumWidthRequest="300">
                 <VerticalStackLayout>
                     <Label Text="{Binding Name}"
-            Padding="8, 7, 0, 7"
-            TextColor="Black"/>
+                           Padding="8, 7, 0, 7"
+                           TextColor="Black"/>
                     <Label Text="{Binding Population}" 
-            FontSize="12"
-            Padding="8, 7, 0, 7"/>
+                           FontSize="12"
+                           Padding="8, 7, 0, 7"/>
                 </VerticalStackLayout>
             </telerik:RadBorder>
         </DataTemplate>
     </telerik:RadComboBox.SelectedItemTemplate>
 </telerik:RadComboBox>
- ```
-
-## Example
-
-Here is the ComboBox definition in XAML:
-
-<snippet id='combobox-editing'/>
-
->note When binding to a complex objects, ComboBox `DisplayMemberPath` property needs to be set. Also when `IsEditable` is `true` `SearchTextPath` property needs be set.
-
-In addition to this, you need to add the following namespace:
-
-```XAML
-xmlns:telerik="http://schemas.telerik.com/2022/xaml/maui"
- ```
-
-the sample business model
-
-<snippet id='combobox-city-businessmodel'/>
-
-and the ViewModel used:
-
-<snippet id='combobox-cities-viewmodel'/>
+```
 
-Here is how the control looks in edit mode:
+> For a runnable demo with the ComboBox Search eamples with different scenarios, see the [SDKBrowser Demo Application]({%slug sdkbrowser-app%}) and go to the **ComboBox > Features** category.
 
-![ComboBox Edit Mode](images/combobox-edit.png)
+![.NET MAUI ComboBox Edit Mode](images/combobox-edit.gif)
 
 ## See Also
 

controls/combobox/getting-started.md

@@ -10,10 +10,6 @@ slug: combobox-getting-started
 
 This guide provides the information you need to start using the [Telerik UI for .NET MAUI ComboBox]({%slug combobox-overview%}) by adding the control to your project.
 
-At the end, you will achieve the following result.
-
-![ComboBox Getting Started](images/combobox-getting-started.png)
-
 ## Prerequisites
 
 Before adding the ComboBox, you need to:
@@ -36,7 +32,7 @@ When your .NET MAUI application is setup, you are ready to add a ComboBox contro
 
 Here is the result:
 
-![ComboBox Getting Started](images/combobox-getting-started.png)
+![.NET MAUI ComboBox Getting Started](images/combobox-getting-started.png)
 
 ### Binding to a Complex Object
 
@@ -70,7 +66,7 @@ Here is the result:
 
 ![ComboBox Binding](images/combobox-getting-started-complex-data.png)
 
->important For the ComboBox Getting Started example, refer to the [SDKBrowser Demo Application]({%slug sdkbrowser-app%}) and navigate to the **ComboBox > Getting Started** category.
+> For the ComboBox Getting Started example, refer to the [SDKBrowser Demo Application]({%slug sdkbrowser-app%}) and navigate to the **ComboBox > Getting Started** category.
 
 ## Additional Resources
 

controls/combobox/header-footer.md

@@ -17,23 +17,23 @@ You can add Header and Footer to the drop-down list of the [.NET MAUI ComboBox](
 
 ## Example 
 
-Here is the ComboBox definition in XAML:
+**1.** Define the ComboBox in XAML:
 
 <snippet id='combobox-header-footer-template'/>
 
-the sample business model
+**2.** Add a sample business model:
 
 <snippet id='combobox-city-businessmodel'/>
 
-and the ViewModel used:
+**3.** Add the `ViewModel` used:
 
 <snippet id='combobox-cities-viewmodel'/>
 
-This is how the Header and Footer Templates look: 
+This is how the Header and Footer Templates look on WinUI: 
 
-![ComboBox Header Footer Templates](images/combobox-header-footer.png)
+![.NET MAUI ComboBox Header Footer Templates](images/combobox-header-footer.png)
 
-> For the ComboBox Header and Footer example, go to the [SDKBrowser Demo Application]({%slug sdkbrowser-app%}) and navigate to ComboBox -> Templates category.
+> For the ComboBox Header and Footer example, go to the [SDKBrowser Demo Application]({%slug sdkbrowser-app%}) and navigate to **ComboBox > Templates** category.
 
 ## See Also
 

controls/combobox/images/combobox-clearbuttonvisibility.png

@@ -14,8 +14,8 @@ The [Telerik UI for .NET MAUI ComboBox]({%slug combobox-overview%}) provides key
 
 The following table lists the actions and keyboard combinations that are available in the ComboBox:
 
-| Hotkey Combinations  | Action 		   |
-|----------------------|-------------------|
+| Hotkey Combinations  | Action |
+| -------------------- | ------ |
 | `F4` | Shows the drop-down if it is closed. If the drop-down is opened pressing the F4 key will submit the selection and close the drop-down. |
 | `Up Arrow` / `Down Arrow` | If the drop-down is opened, pressing Up/Down Arrows will change the highlighted item in the drop-down list. If it is closed pressing Up/Down Arrows will change the SelectedItem.|
 | `Left Arrow` / `Right Arrow` | If the drop-down is opened, pressing Left/Right Arrows will change the highlighted item in the drop-down list. If it is closed pressing Left/Right Arrows will change the SelectedItem. They work only when `IsEditable` is `False`. |

controls/combobox/images/combobox-drop-down-style.png

@@ -25,48 +25,53 @@ ComboBox control has a support for single and multiple selection. You can specif
 
 The default `SelectinMode`(enumeration of type `Telerik.Maui.Controls.ComboBoxSelectionMode`) of the ComboBox control is `Single`.
 
-### Example with Single Selection and SelectedIndex set
+### Example with Single Selection and SelectedIndex Set
 
-Here is the `RadComboBox` definition in XAML:
+**1.** Define the `RadComboBox` in XAML:
 
 <snippet id='combobox-single-selection'/>
 
-you need to add the following namespace:
+**2.** Add the `telerik` namespace:
 
  ```XAML
 xmlns:telerik="http://schemas.telerik.com/2022/xaml/maui"
  ```
 
-the sample business model
+**3.** Add a sample business model:
 
 <snippet id='combobox-city-businessmodel'/>
 
-and the ViewModel used:
+**4.** Add the `ViewModel`:
 
 <snippet id='combobox-singleselection-viewmodel'/>
 
-This is how single selection looks:
+This is how single selection looks on Android:
 
-![ComboBox Single Selection](images/dropdown-single-selection.png)
+![. NET MAUI ComboBox Single Selection](images/dropdown-single-selection.png)
 
 ### Example with Multiple Selection and SelectedItems set
 
-Here is the ComboBox definition in XAML:
+**1.** Define the ComboBox in XAML:
 
 <snippet id='combobox-multiple-selection'/>
 
+**2.** Add the `telerik` namespace:
 
-the sample business model
+ ```XAML
+xmlns:telerik="http://schemas.telerik.com/2022/xaml/maui"
+ ```
+
+**3.** Add a sample business model
 
 <snippet id='combobox-city-businessmodel'/>
 
-and the ViewModel used:
+**4.** Add the `ViewModel`:
 
 <snippet id='combobox-multipleselection-viewmodel'/>
 
-This is how multiple selection looks: 
+This is how multiple selection looks on WinUI: 
 
-![ComboBox Multiple Selection](images/combobox-multiple-selection-selecteditems.png)
+![.NET MAUI ComboBox Multiple Selection](images/combobox-multiple-selection-selecteditems.png)
 
 >important The Selection example can be found in our [SDK Browser Application]({%slug sdkbrowser-app%}). You can find the applications in the **Examples** folder of your local **Telerik UI for .NET MAUI** installation or in the following [GitHub repo](https://github.com/telerik/maui-samples/tree/main/Samples/SdkBrowser).
 

controls/combobox/images/combobox-edit.gif

@@ -10,41 +10,42 @@ slug: combobox-styling
 
 The [Telerik UI for .NET MAUI ComboBox]({%slug combobox-overview%}) provides the following Style properties for customizing its look:
 
-* `PlaceholderColor`(`Microsoft.Maui.Graphics.Color`)—Defines the color for the placeholder text.
-* `TextColor`(`Microsoft.Maui.Graphics.Color`)—Defines the color of the text when the control is editable and the color of the selected item when the control is not editable and the selection mode is single.
-* `BackgroundColor`(`Microsoft.Maui.Graphics.Color`)—Defines the background color of the control.
-* `BorderColor`(`Microsoft.Maui.Graphics.Color`)—Defines the color of the border.
-* `BorderThickness`(`Microsoft.Maui.Thickness`)—Defines the thickness of the border.
-* `ClearButtonStyle`(of type `Style` with target type `Telerik.Maui.Controls.RadButton`)—Defines the style for the clear button.
-* `Font Options`(`FontAttributes`, `FontFamily`, `FontSize`)—Define the font options to the text of the RadComboBox. It's applied to the Placeholder, Selected Text(for single selection) and when the control is in Editable Mode.
+* `PlaceholderColor` (`Microsoft.Maui.Graphics.Color`)—Defines the color for the placeholder text.
+* `TextColor` (`Microsoft.Maui.Graphics.Color`)—Defines the color of the text when the control is editable and the color of the selected item when the control is not editable and the selection mode is single.
+* `BackgroundColor` (`Microsoft.Maui.Graphics.Color`)—Defines the background color of the control.
+* `BorderColor` (`Microsoft.Maui.Graphics.Color`)—Defines the color of the border.
+* `BorderThickness` (`Microsoft.Maui.Thickness`)—Defines the thickness of the border.
+* `ClearButtonStyle` (of type `Style` with target type `Telerik.Maui.Controls.RadButton`)—Defines the style for the clear button.
+* `Font Options` (`FontAttributes`, `FontFamily`, `FontSize`)—Define the font options to the text of the RadComboBox. It's applied to the Placeholder, Selected Text (for single selection), and when the control is in Editable Mode.
+* `HighlightTextColor` (`Color`)—Specifies the color of the text that will be highlighted when searching (`IsEditable` must be `True`).
 
 ### Example for ComboBox Styling
 
-Here is the ComboBox definition in XAML:
+**1.** Define the ComboBox in XAML:
 
 <snippet id='combobox-styling'/>
 
-in addition you will need to add the `telerik` namespace:
+**2.** Add the `telerik` namespace:
 
 ```XAML
 xmlns:telerik="http://schemas.telerik.com/2022/xaml/maui"
 ```
 
-the sample business model
+**3.** Add sample business model:
 
 <snippet id='combobox-city-businessmodel'/>
 
-and the ViewModel used:
+**4.** Add the `ViewModel`:
 
 <snippet id='comobobox-editing-viewmodel'/> 
 
 Here is how the ComboBox looks when styling is applied:
 
-![ComboBox Styling](images/combobox-styling.png)
+![.NET MAUI ComboBox Styling](images/combobox-styling.png)
 
 Here is how the styling is applied when the control is focused and item is selected:
 
-![ComboBox Styling on Selected Item](images/combobox-styling-focused.png)
+![.NET MAUI ComboBox Styling on Selected Item](images/combobox-styling-focused.png)
 
 > For the ComboBox Styling example, go to the [SDKBrowser Demo Application]({%slug sdkbrowser-app%}) and navigate to the **ComboBox > Styling** category.
 
@@ -60,27 +61,27 @@ The following properties styles the ComboBox Drop Down:
 
 ### Example for DropDown Styling
 
-Here is the ComboBox definition in XAML:
+**1.** Define the ComboBox in XAML:
 
 <snippet id='combobox-dropdown-styling'/>
 
-add the following namespace:
+**2.** Add the `telerik` namespace:
 
 <snippet id='xmlns-telerikinput'/>
 
-The DropDown Button Style is defined in the Page's ResourceDictionary:
+**3.** Define the DropDown Button Style in the Page's ResourceDictionary:
 
 <snippet id='combobox-dropdownbutton-style'/>
 
-the sample business model
+**4.** Add sample business model:
 
 <snippet id='combobox-city-businessmodel'/>
 
-and the ViewModel used:
+**5.** Add the `ViewModel` used:
 
 <snippet id='comobobox-editing-viewmodel'/> 
 
-Here is how the Drop Down Styling looks:
+Here is how the Drop Down Styling looks on Android:
 
 ![ComboBox Drop Down Style](images/combobox-drop-down-style.png)