diff --git a/controls/segmentedcontrol/disable-segment.md b/controls/segmentedcontrol/disable-segment.md index 2a10fe763..53c2c8b28 100644 --- a/controls/segmentedcontrol/disable-segment.md +++ b/controls/segmentedcontrol/disable-segment.md @@ -36,7 +36,7 @@ You can disable any segment with `SetSegmentEnabled` method: The following image shows the end result. -![.NET MAUI SegmentedControl disable segment](images/segmentcontrol-features-disablesegment-0.png) +![.NET MAUI SegmentedControl disable segment](images/segmentcontrol-disablesegment.png) ## See Also diff --git a/controls/segmentedcontrol/getting-started.md b/controls/segmentedcontrol/getting-started.md index 3d813c246..f4e68bc61 100644 --- a/controls/segmentedcontrol/getting-started.md +++ b/controls/segmentedcontrol/getting-started.md @@ -13,7 +13,7 @@ This guide provides the information you need to start using the Telerik UI for . At the end, you will achieve the following result. -![.NET MAUI SegmentedControl Getting Started](images/segmentcontrol-gettingstarted.png) +![.NET MAUI SegmentedControl Getting Started](images/segmentcontrol-getting-started.png) ## Prerequisites Before adding the SegmentedControl, you need to: diff --git a/controls/segmentedcontrol/images/segmentcontrol-disablesegment.png b/controls/segmentedcontrol/images/segmentcontrol-disablesegment.png new file mode 100644 index 000000000..5a887e36b Binary files /dev/null and b/controls/segmentedcontrol/images/segmentcontrol-disablesegment.png differ diff --git a/controls/segmentedcontrol/images/segmentcontrol-features-customizecolors-0.png b/controls/segmentedcontrol/images/segmentcontrol-features-customizecolors-0.png deleted file mode 100644 index 9eb2247ff..000000000 Binary files a/controls/segmentedcontrol/images/segmentcontrol-features-customizecolors-0.png and /dev/null differ diff --git a/controls/segmentedcontrol/images/segmentcontrol-features-disablesegment-0.png b/controls/segmentedcontrol/images/segmentcontrol-features-disablesegment-0.png deleted file mode 100644 index 57e2ce38f..000000000 Binary files a/controls/segmentedcontrol/images/segmentcontrol-features-disablesegment-0.png and /dev/null differ diff --git a/controls/segmentedcontrol/images/segmentcontrol-features-selection-0.png b/controls/segmentedcontrol/images/segmentcontrol-features-selection-0.png deleted file mode 100644 index 9a6010dfb..000000000 Binary files a/controls/segmentedcontrol/images/segmentcontrol-features-selection-0.png and /dev/null differ diff --git a/controls/segmentedcontrol/images/segmentcontrol-getting-started.png b/controls/segmentedcontrol/images/segmentcontrol-getting-started.png new file mode 100644 index 000000000..0c20a3ae2 Binary files /dev/null and b/controls/segmentedcontrol/images/segmentcontrol-getting-started.png differ diff --git a/controls/segmentedcontrol/images/segmentcontrol-gettingstarted-0.png b/controls/segmentedcontrol/images/segmentcontrol-gettingstarted-0.png deleted file mode 100644 index fc06f0636..000000000 Binary files a/controls/segmentedcontrol/images/segmentcontrol-gettingstarted-0.png and /dev/null differ diff --git a/controls/segmentedcontrol/images/segmentcontrol-gettingstarted.png b/controls/segmentedcontrol/images/segmentcontrol-gettingstarted.png deleted file mode 100644 index bc87952ff..000000000 Binary files a/controls/segmentedcontrol/images/segmentcontrol-gettingstarted.png and /dev/null differ diff --git a/controls/segmentedcontrol/images/segmentcontrol-overview-0.png b/controls/segmentedcontrol/images/segmentcontrol-overview-0.png deleted file mode 100644 index ac75751a7..000000000 Binary files a/controls/segmentedcontrol/images/segmentcontrol-overview-0.png and /dev/null differ diff --git a/controls/segmentedcontrol/images/segmentcontrol-overview.png b/controls/segmentedcontrol/images/segmentcontrol-overview.png new file mode 100644 index 000000000..b5ff8a846 Binary files /dev/null and b/controls/segmentedcontrol/images/segmentcontrol-overview.png differ diff --git a/controls/segmentedcontrol/images/segmentcontrol-selection.png b/controls/segmentedcontrol/images/segmentcontrol-selection.png new file mode 100644 index 000000000..d5b8f2884 Binary files /dev/null and b/controls/segmentedcontrol/images/segmentcontrol-selection.png differ diff --git a/controls/segmentedcontrol/images/segmentcontrol-styling.png b/controls/segmentedcontrol/images/segmentcontrol-styling.png new file mode 100644 index 000000000..18d2c52de Binary files /dev/null and b/controls/segmentedcontrol/images/segmentcontrol-styling.png differ diff --git a/controls/segmentedcontrol/images/segmentedcontrol-visual-structure.png b/controls/segmentedcontrol/images/segmentedcontrol-visual-structure.png new file mode 100644 index 000000000..0dee783db Binary files /dev/null and b/controls/segmentedcontrol/images/segmentedcontrol-visual-structure.png differ diff --git a/controls/segmentedcontrol/overview.md b/controls/segmentedcontrol/overview.md index 71244c40f..3f90004e7 100644 --- a/controls/segmentedcontrol/overview.md +++ b/controls/segmentedcontrol/overview.md @@ -12,7 +12,7 @@ slug: segmentedcontrol-overview The Telerik UI for .NET MAUI SegmentedControl allows you to display a list of horizontally aligned, mutually exclusive options, which can be selected by the user. Each option is a button that can display text or an image. -![.NET MAUI SegmentedControl Overview](images/segmentcontrol-overview-0.png) +![.NET MAUI SegmentedControl Overview](images/segmentcontrol-overview.png) ## Key Features of the .NET MAUI SegmentedControl diff --git a/controls/segmentedcontrol/selection.md b/controls/segmentedcontrol/selection.md index f309db7e5..3cd773d64 100644 --- a/controls/segmentedcontrol/selection.md +++ b/controls/segmentedcontrol/selection.md @@ -50,7 +50,7 @@ The following example demonstrates how to use the selection feature of Segmented The image below shows the end result on different platforms: -![.NET MAUI SegmentedControl selection](images/segmentcontrol-features-selection-0.png) +![.NET MAUI SegmentedControl selection](images/segmentcontrol-selection.png) ## See Also diff --git a/controls/segmentedcontrol/styling.md b/controls/segmentedcontrol/styling.md index 8d78fc9cb..4191a36f7 100644 --- a/controls/segmentedcontrol/styling.md +++ b/controls/segmentedcontrol/styling.md @@ -29,7 +29,7 @@ The following example shows how to set the different segment colors. The following image shows the end result. -![.NET MAUI SegmentedControl colors customization](images/segmentcontrol-features-customizecolors-0.png) +![.NET MAUI SegmentedControl colors customization](images/segmentcontrol-styling.png) ## See Also diff --git a/controls/segmentedcontrol/visual-structure.md b/controls/segmentedcontrol/visual-structure.md new file mode 100644 index 000000000..f771f0b4f --- /dev/null +++ b/controls/segmentedcontrol/visual-structure.md @@ -0,0 +1,28 @@ +--- +title: Visual Structure +page_title: .NET MAUI SegmentedControl Documentation - Visual Structure +description: Learn what visual elements are displayed by the Telerik UI for .NET MAUI SegmentedControl, and see how these elements build the visual structure of the control. +slug: segment-visual-structure +tags: segment, header, content, items, visualization +position: 1 +--- + +# .NET MAUI SegmentedControl Visual Structure + +The visual structure of the .NET MAUI SegmentedControl represents the anatomy of the UI control. Being familiar with the visual elements of the SegmentedControl allows you to quickly find the information required to configure them. + +The following image shows the anatomy of the SegmentedControl. + +![.NET MAUI SegmentedControl Visual Structure](images/segmentedcontrol-visual-structure.png "Visual elements of SegmentedControl control") + +## Displayed Elements + +- **Segment**—Represents a segment in the SegmentedControl. +- **Selected Segment**—Represents the selection in the SegmentedControl when selecting a segment. +- **Disabled Segment**—Represents a disabled segment in the SegmentedControl. + +## See Also + +- [Getting Started with .NET MAUI SegmentedControl]({%slug segmentedcontrol-getting-started%}) +- [Selection]({%slug segmentedcontrol-selection%}) +- [Disabled Segments]({%slug segmentedcontrol-disable-segment%}) \ No newline at end of file