diff --git a/.github/image-content/fundamentals-welcome.png b/.github/image-content/fundamentals-welcome.png
index 2683ab3..206fba6 100644
Binary files a/.github/image-content/fundamentals-welcome.png and b/.github/image-content/fundamentals-welcome.png differ
diff --git a/.github/image-content/themes-welcome.png b/.github/image-content/themes-welcome.png
index e073cd2..7ce2dc0 100644
Binary files a/.github/image-content/themes-welcome.png and b/.github/image-content/themes-welcome.png differ
diff --git a/Documentation/docfx.json b/Documentation/docfx.json
index c9fd1b3..314d605 100644
--- a/Documentation/docfx.json
+++ b/Documentation/docfx.json
@@ -58,7 +58,7 @@
"_docsCopyrightYears": "2021-2024",
"_docsProductHref": "https://www.actiprosoftware.com/products/controls/avalonia",
"_docsProductName": "Avalonia UI",
- "_docsProductVersion": "23.1",
+ "_docsProductVersion": "24.1",
"_disableContribution": true,
"_enableNewTab": true,
"_gitContribute": {
diff --git a/Documentation/topics/conversion/converting-to-v23-1.md b/Documentation/topics/conversion/converting-to-v23-1.md
index 76a424f..74a9c42 100644
--- a/Documentation/topics/conversion/converting-to-v23-1.md
+++ b/Documentation/topics/conversion/converting-to-v23-1.md
@@ -1,7 +1,7 @@
---
title: "Converting to v23.1"
page-title: "Converting to v23.1 - Conversion Notes"
-order: 10
+order: 100
---
# Converting to v23.1
diff --git a/Documentation/topics/conversion/converting-to-v24-1.md b/Documentation/topics/conversion/converting-to-v24-1.md
new file mode 100644
index 0000000..d451587
--- /dev/null
+++ b/Documentation/topics/conversion/converting-to-v24-1.md
@@ -0,0 +1,37 @@
+---
+title: "Converting to v24.1"
+page-title: "Converting to v24.1 - Conversion Notes"
+order: 99
+---
+# Converting to v24.1
+
+## Avalonia UI Dependency
+
+Updated the minimum Avalonia UI dependency from v11.0.5 to v11.0.7.
+
+## RingSlice
+
+The [Ring Slice](../shared/shapes/ring-slice.md) shape was added in v23.1 and is a very handy primitive for controls that need to render an arc shape. When integrating the shape into some other controls, we found that the design needed to be slightly refactored for ease of use and to better support animation.
+
+These API changes were made:
+- The [StartAngle](xref:@ActiproUIRoot.Controls.Shapes.RingSlice.StartAngle) property is now a `Double` instead of an [Angle](xref:ActiproSoftware.Angle).
+- The former `EndAngle` property is now a `Double` instead of an [Angle](xref:ActiproSoftware.Angle) and specified via the [SweepAngle](xref:@ActiproUIRoot.Controls.Shapes.RingSlice.SweepAngle) property instead. The resolved end angle is now calculated by adding the sweep angle to the start angle.
+
+The end result is that if a ring slice previously specified `StartAngle="90" EndAngle="270"`, the same slice after the updates would be specified `StartAngle="90" SweepAngle="180"`.
+
+## Some Image-Based Identifiers Renamed
+
+Some properties and types related to `IImage` were renamed from "Image" to "ImageSource" as part of a new naming convention. Some other image-related types were also impacted. The following breaking changes were made:
+
+- [UserPromptControl](xref:@ActiproUIRoot.Controls.UserPromptControl).`FooterImage` renamed as `FooterImageSource`.
+- [UserPromptControl](xref:@ActiproUIRoot.Controls.UserPromptControl).`StatusImage` renamed as `StatusImageSource`.
+- `ActiproSoftware.UI.Avalonia.Controls.Converters.ImageKeyToImageConverter` type renamed as [ImageKeyToImageSourceConverter](xref:@ActiproUIRoot.Controls.Converters.ImageKeyToImageSourceConverter)
+- `ActiproSoftware.UI.Avalonia.Media.SharedImageKeys` type renamed as [SharedImageSourceKeys](xref:@ActiproUIRoot.Media.SharedImageSourceKeys).
+
+## ButtonCard Theme Removed
+
+Previous builds contained a `ButtonCard` theme (`theme-card` style class name) for native `Button` control instances. With the introduction of the new [Card](../fundamentals/controls/card.md) control, the older `ButtonCard` theme has been removed. Those who used the old theme can use the [Card](../fundamentals/controls/card.md) control instead.
+
+## Theme Resource Renamed
+
+For naming consistency, the [ThemeResourceKind](xref:@ActiproUIRoot.Themes.ThemeResourceKind) enum value `NotificationBorderBrushInfo` was renamed to `NotificationBorderBrushInformation`.
\ No newline at end of file
diff --git a/Documentation/topics/conversion/index.md b/Documentation/topics/conversion/index.md
index f15b8a8..210e392 100644
--- a/Documentation/topics/conversion/index.md
+++ b/Documentation/topics/conversion/index.md
@@ -9,4 +9,5 @@ Occasionally during large updates to a product, some breaking changes are necess
Read the following topics that are appropriate for your scenario if you are converting from an older version to the latest version.
+- [Converting to v24.1](converting-to-v24-1.md)
- [Converting to v23.1](converting-to-v23-1.md)
diff --git a/Documentation/topics/customizing-string-resources.md b/Documentation/topics/customizing-string-resources.md
index ed6b7e3..df74e8a 100644
--- a/Documentation/topics/customizing-string-resources.md
+++ b/Documentation/topics/customizing-string-resources.md
@@ -81,7 +81,7 @@ xmlns:actiproPropertiesShared="using:ActiproSoftware.Properties.Shared"
Now lets use the `UITextBoxButtonShowPasswordText` resource's text as a `Button`'s tooltip content:
```xaml
-
+
```
That's all there is to it!
\ No newline at end of file
diff --git a/Documentation/topics/fundamentals/controls/badge.md b/Documentation/topics/fundamentals/controls/badge.md
index ccdf333..cfe86d0 100644
--- a/Documentation/topics/fundamentals/controls/badge.md
+++ b/Documentation/topics/fundamentals/controls/badge.md
@@ -91,7 +91,7 @@ xmlns:actipro="http://schemas.actiprosoftware.com/avaloniaui"
```xaml
xmlns:shared="http://schemas.actiprosoftware.com/winfx/xaml/shared"
...
-
+
```
}
@@ -110,6 +110,26 @@ Use the [OverflowStringFormat](xref:@ActiproUIRoot.Controls.NumericBadge.Overflo
Overflow behavior can be disabled by setting [OverflowCount](xref:@ActiproUIRoot.Controls.NumericBadge.OverflowCount) to `0`.
+> [!WARNING]
+> When specifying a custom [OverflowStringFormat](xref:@ActiproUIRoot.Controls.NumericBadge.OverflowStringFormat) value in XAML, prefix the actual value with `{}` to ensure the XAML parser doesn't interpret the open curly braces of the format string as a meaningful XAML delimiter.
+
+The following example demonstrates how to define a [NumericBadge](xref:@ActiproUIRoot.Controls.NumericBadge) that overlows at `9` and uses a custom string format of `"{0}*"`:
+
+@if (avalonia) {
+```xaml
+xmlns:actipro="http://schemas.actiprosoftware.com/avaloniaui"
+...
+
+```
+}
+@if (wpf) {
+```xaml
+xmlns:shared="http://schemas.actiprosoftware.com/winfx/xaml/shared"
+...
+
+```
+}
+
## Using as an adornment
A common scenario for a badge is to be used as an adornment to another element. Examples include showing availability status on a user's avatar or a count of unread messages.
@@ -213,11 +233,11 @@ xmlns:shared="http://schemas.actiprosoftware.com/winfx/xaml/shared"
### Notes on Avalonia Adorner Issues
> [!WARNING]
-> The Avalonia adorner system may not properly clip adornments.
+> The Avalonia adorner system may not properly clip adornments when the adornment is outside the bounds of the adorned element.
-The Avalonia adorner system (last tested on v11.0.7) doesn't properly clip adornments based on the clip regions of ancestors of the adorned element. This is an issue we are working with the Avalonia team to solve. A symptom of this issue can sometimes be seen when a badge adornment is used on an adorned element, that adorned element is scrolled out of view within a `ScrollViewer`, and the badge adornment remains visible.
+The Avalonia adorner system (last tested on v11.0.7) may not properly clip adornments based on the clip regions of ancestors of the adorned element. This is an issue we are working with the Avalonia team to solve. A symptom of this issue can sometimes be seen when a badge adornment is used on an adorned element, that adorned element is scrolled out of view within a `ScrollViewer`, and the badge adornment remains visible.
-If this scenario is encountered, a workaround is to not use [BadgeService](xref:@ActiproUIRoot.Controls.BadgeService), thereby avoiding use of the Avalonia adorner system. Place the adorned element and the badge element in a `Panel` instead and apply the `HorizontalAlignment`, `VerticalAlignment`, and `RenderTransform` properties on the badge to position it.
+We believe our badge implementation has worked around this issue in most scenarios. If this scenario is still encountered, one workaround is to position the adornment within the bounds of the adorned element so clipping can be enabled. Another option is to not use [BadgeService](xref:@ActiproUIRoot.Controls.BadgeService), thereby avoiding use of the Avalonia adorner system. Place the adorned element and the badge element in a `Panel` instead and apply the `HorizontalAlignment`, `VerticalAlignment`, and `RenderTransform` properties on the badge to position it.
```xaml
@@ -341,4 +361,6 @@ The following theme resources are available for customizing the appearance of th
| [BadgeDotLength](xref:@ActiproUIRoot.Themes.ThemeResourceKind.BadgeDotLength) | The default [DotLength](xref:@ActiproUIRoot.Controls.Badge.DotLength) for when the badge is displayed as a "dot". |
| [BadgeStringContentPadding](xref:@ActiproUIRoot.Themes.ThemeResourceKind.BadgeStringContentPadding) | The default `Padding` applied to `String`-based content. |
+See the [Theme Assets](../../themes/theme-assets.md) topic for more details on working with theme resources.
+
}
\ No newline at end of file
diff --git a/Documentation/topics/fundamentals/controls/card.md b/Documentation/topics/fundamentals/controls/card.md
new file mode 100644
index 0000000..7fe7fd8
--- /dev/null
+++ b/Documentation/topics/fundamentals/controls/card.md
@@ -0,0 +1,366 @@
+---
+title: "Card"
+page-title: "Card - Fundamentals Controls"
+order: 13
+---
+# Card
+
+The [Card](xref:@ActiproUIRoot.Controls.Card) control is typically used to present visually grouped information for a single subject.
+
+
+
+*Card control with optional cover, footer, thumbnail, and default header*
+
+## Content Areas
+
+The [Card](xref:@ActiproUIRoot.Controls.Card) control is defined by multiple content areas:
+- `Content` (Body) - The default content area of the card.
+- [Cover](xref:@ActiproUIRoot.Controls.Card.Cover) - Typically used for a high-quality image which can be docked to any side of the card.
+- [Header](xref:@ActiproUIRoot.Controls.Card.Header) - Displayed above the content, and typically contains a title and/or description.
+- [Thumbnail](xref:@ActiproUIRoot.Controls.Card.Thumbnail) - Typically a small image or icon displayed on the left side of the header.
+- [Footer](xref:@ActiproUIRoot.Controls.Card.Footer) - Displayed at the bottom of the card.
+
+Each content area can optionally be set to any value supported by `ContentPresenter` and the layout will adjust to only show the areas where content is defined.
+
+> [!TIP]
+> In some scenarios, content may not be automatically detected. For instance, if a `DataTemplate` is used to define content without setting the corresponding content property, the card will not know that content is available. Use the [IsCoverVisible](xref:@ActiproUIRoot.Controls.Card.IsCoverVisible), [IsHeaderVisible](xref:@ActiproUIRoot.Controls.Card.IsHeaderVisible), [IsThumbnailVisible](xref:@ActiproUIRoot.Controls.Card.IsThumbnailVisible), and [IsFooterVisible](xref:@ActiproUIRoot.Controls.Card.IsFooterVisible) properties to manually control the visibility of each content area.
+
+### Content (Body)
+
+[Card](xref:@ActiproUIRoot.Controls.Card) is a `ContentControl`, and the default content of the control will be displayed in the body area of the card. The content can be set to any value supported by `ContentPresenter`.
+
+The following example demonstrates defining the content of a [Card](xref:@ActiproUIRoot.Controls.Card):
+
+@if (avalonia) {
+```xaml
+xmlns:actipro="http://schemas.actiprosoftware.com/avaloniaui"
+...
+
+
+
+```
+}
+@if (wpf) {
+```xaml
+xmlns:shared="http://schemas.actiprosoftware.com/winfx/xaml/shared"
+...
+
+
+
+```
+}
+
+### Cover
+
+The [Cover](xref:@ActiproUIRoot.Controls.Card.Cover) can be docked to any side of the card using the [CoverDock](xref:@ActiproUIRoot.Controls.Card.CoverDock) property. While a high-quality image is typically used for the [Cover](xref:@ActiproUIRoot.Controls.Card.Cover), it can be set to any value supported by `ContentPresenter`.
+
+The following example demonstrates creating a [Card](xref:@ActiproUIRoot.Controls.Card) with a cover image docked to the left:
+
+@if (avalonia) {
+```xaml
+xmlns:actipro="http://schemas.actiprosoftware.com/avaloniaui"
+...
+
+
+
+
+
+
+
+
+
+```
+}
+@if (wpf) {
+```xaml
+xmlns:shared="http://schemas.actiprosoftware.com/winfx/xaml/shared"
+...
+
+
+
+
+
+
+
+
+
+```
+}
+
+### Header
+
+The [Title](xref:@ActiproUIRoot.Controls.Card.Title) and [Description](xref:@ActiproUIRoot.Controls.Card.Description) properties can be used to define a header with a default template where the [Title](xref:@ActiproUIRoot.Controls.Card.Title) is displayed with typography consistent with a heading, and the [Description](xref:@ActiproUIRoot.Controls.Card.Description), if defined, is displayed immediately below it.
+
+@if (avalonia) {
+Use the [TitleTheme](xref:@ActiproUIRoot.Controls.Card.TitleTheme) and [DescriptionTheme](xref:@ActiproUIRoot.Controls.Card.DescriptionTheme) properties to customize the appearance of each element.
+}
+@if (wpf) {
+Use the [TitleStyle](xref:@ActiproUIRoot.Controls.Card.TitleStyle) and [DescriptionStyle](xref:@ActiproUIRoot.Controls.Card.DescriptionStyle) properties to customize the appearance of each element.
+}
+
+The following example demonstrates creating a [Card](xref:@ActiproUIRoot.Controls.Card) with both [Title](xref:@ActiproUIRoot.Controls.Card.Title) and [Description](xref:@ActiproUIRoot.Controls.Card.Description) defined:
+
+@if (avalonia) {
+```xaml
+xmlns:actipro="http://schemas.actiprosoftware.com/avaloniaui"
+...
+
+
+
+```
+}
+@if (wpf) {
+```xaml
+xmlns:shared="http://schemas.actiprosoftware.com/winfx/xaml/shared"
+...
+
+
+
+```
+}
+
+Alternatively, the [Header](xref:@ActiproUIRoot.Controls.Card.Header) can be set to any value supported by `ContentPresenter`. In this case, the explicit content will be used instead of the default template based on the [Title](xref:@ActiproUIRoot.Controls.Card.Title) and [Description](xref:@ActiproUIRoot.Controls.Card.Description) properties.
+
+The following example demonstrates creating a [Card](xref:@ActiproUIRoot.Controls.Card) with an explicit [Header](xref:@ActiproUIRoot.Controls.Card.Header) defined:
+
+@if (avalonia) {
+```xaml
+xmlns:actipro="http://schemas.actiprosoftware.com/avaloniaui"
+...
+
+
+
+ Title Here
+
+
+
+
+
+```
+}
+@if (wpf) {
+```xaml
+xmlns:shared="http://schemas.actiprosoftware.com/winfx/xaml/shared"
+...
+
+
+
+ Title Here
+
+
+
+
+
+```
+}
+
+### Thumbnail
+
+The [Thumbnail](xref:@ActiproUIRoot.Controls.Card.Thumbnail) is displayed in the header area, but is separate from the [Header](xref:@ActiproUIRoot.Controls.Card.Header) content. [Thumbnail](xref:@ActiproUIRoot.Controls.Card.Thumbnail) can be set to any value supported by `ContentPresenter` but is typically used to display a small image.
+
+By default, the [Thumbnail](xref:@ActiproUIRoot.Controls.Card.Thumbnail) is vertically centered with a right margin to separate it from the [Header](xref:@ActiproUIRoot.Controls.Card.Header). Use the @if (avalonia) {[ThumbnailTheme](xref:@ActiproUIRoot.Controls.Card.ThumbnailTheme)}@if (wpf) {[ThumbnailStyle](xref:@ActiproUIRoot.Controls.Card.ThumbnailStyle)} property to customize the appearance.
+
+The following example demonstrates creating a [Card](xref:@ActiproUIRoot.Controls.Card) with top-aligned image and a custom margin:
+
+@if (avalonia) {
+```xaml
+xmlns:actipro="http://schemas.actiprosoftware.com/avaloniaui"
+...
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+}
+@if (wpf) {
+```xaml
+xmlns:shared="http://schemas.actiprosoftware.com/winfx/xaml/shared"
+...
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+}
+
+### Footer
+
+The [Footer](xref:@ActiproUIRoot.Controls.Card.Footer) can be set to any value supported by `ContentPresenter`.
+
+The following example demonstrates creating a [Card](xref:@ActiproUIRoot.Controls.Card) with italicized text in the footer:
+
+@if (avalonia) {
+```xaml
+xmlns:actipro="http://schemas.actiprosoftware.com/avaloniaui"
+...
+
+
+
+
+
+
+
+
+
+```
+}
+@if (wpf) {
+```xaml
+xmlns:shared="http://schemas.actiprosoftware.com/winfx/xaml/shared"
+...
+
+
+
+
+
+
+
+
+
+```
+}
+
+## Appearance
+
+The appearance of the control can be fully customized.
+
+### Brushes
+
+The following brush properties are available:
+
+| Property | Description |
+| ----- | ----- |
+| `Foreground` | The default foreground for all areas. |
+| `Background` | The default background for all areas. |
+| `BorderBrush` | The brush for the outer border. |
+| [HeaderForeground](xref:@ActiproUIRoot.Controls.Card.HeaderForeground) | The foreground for the header area, overriding the default foreground. |
+| [HeaderBackground](xref:@ActiproUIRoot.Controls.Card.HeaderBackground) | The background for the header area, overriding the default background. |
+| [HeaderBorderBrush](xref:@ActiproUIRoot.Controls.Card.HeaderBorderBrush) | The brush for the bottom border of the header.
+| [FooterForeground](xref:@ActiproUIRoot.Controls.Card.FooterForeground) | The foreground for the footer area, overriding the default foreground. |
+| [FooterBackground](xref:@ActiproUIRoot.Controls.Card.FooterBackground) | The background for the footer area, overriding the default background. |
+| [FooterBorderBrush](xref:@ActiproUIRoot.Controls.Card.FooterBorderBrush) | The brush for the top border of the footer. |
+
+### Header and Footer Borders
+
+Use the [HeaderBorderThickness](xref:@ActiproUIRoot.Controls.Card.HeaderBorderThickness) and [FooterBorderThickness](xref:@ActiproUIRoot.Controls.Card.FooterBorderThickness) properties to insert a border below the header or above the footer. In the event header and footer both define a border when no content is defined between them, only the header border will be displayed.
+
+> [!IMPORTANT]
+> When setting the border thickness, only `Thickness.Bottom` is used by the header and `Thickness.Top` is used by the footer.
+
+### Padding
+
+
+
+*Card controls with the same padding shown with and without separation between then content and the header/footer*
+
+By default, the `Padding` is consistently applied around the header, content, and footer areas instead of having separate values for each area. When there is visual separation between the content and the header/footer (either by a border or an explicit background color), the padding will be consistently applied to both sides of the separation.
+
+> [!NOTE]
+> The [Cover](xref:@ActiproUIRoot.Controls.Card.Cover) area does not have any default padding applied so the content can be displayed edge-to-edge.
+
+## Using Card as a Button
+
+[Card](xref:@ActiproUIRoot.Controls.Card) derives from `Button`, so it supports the same `Command` model and `Click` event as `Button`. Unlike a `Button`, though, not all instances of [Card](xref:@ActiproUIRoot.Controls.Card) will be interactive and the control has been configured to appear non-interactive by default.
+
+Set the [IsClickEnabled](xref:@ActiproUIRoot.Controls.Card.IsClickEnabled) property to `true` to enable clicking the card. The `Click` event will not be raised if this property is `false`.
+
+> [!TIP]
+> If the `Command` property is assigned a non-`null` value, the [IsClickEnabled](xref:@ActiproUIRoot.Controls.Card.IsClickEnabled) property is automatically coerced to `true`, so no additional configuration is necessary.
+
+> [!NOTE]
+> Setting the [IsClickEnabled](xref:@ActiproUIRoot.Controls.Card.IsClickEnabled) property to `true` will also trigger hover effects to emphasize the control is actionable.
+
+@if (wpf) {
+## Badge Adornment
+
+[Card](xref:@ActiproUIRoot.Controls.Card) includes built-in support for adding a [Badge](badge.md) adornment. Refer to the [Badge](badge.md) documentation for details on working with a badge.
+
+The following properties are available for configuring the badge, which correspond to attached properties on [BadgeService](xref:@ActiproUIRoot.Controls.BadgeService):
+
+| Property | Description |
+| ----- | ----- |
+| [Badge](xref:@ActiproUIRoot.Controls.Card.Badge) | Set to an instance of a [Badge](badge.md). |
+| [BadgeHorizontalAlignment](xref:@ActiproUIRoot.Controls.Card.BadgeHorizontalAlignment) | Set to one of the [AdornmentHorizontalAlignment](xref:@ActiproUIRoot.Controls.AdornmentHorizontalAlignment) values to alter the horizontal alignment. (Default = [CenterOnTargetRightEdge](xref:@ActiproUIRoot.Controls.AdornmentHorizontalAlignment.CenterOnTargetRightEdge) ) |
+| [BadgeHorizontalOffset](xref:@ActiproUIRoot.Controls.Card.BadgeHorizontalOffset) | An explicit offset to be applied after alignment. Positive values shift to the right while negative values shift to the left. |
+| [BadgeVerticalAlignment](xref:@ActiproUIRoot.Controls.Card.BadgeVerticalAlignment) | Set to one of the [AdornmentVerticalAlignment](xref:@ActiproUIRoot.Controls.AdornmentVerticalAlignment) values to alter the vertical alignment. (Default = [CenterOnTargetTopEdge](xref:@ActiproUIRoot.Controls.AdornmentVerticalAlignment.CenterOnTargetTopEdge) ) |
+| [BadgeVerticalOffset](xref:@ActiproUIRoot.Controls.Card.BadgeVerticalOffset) | An explicit offset to be applied after alignment. Positive values shift down while negative values shift up. |
+
+}
+
+
+@if (avalonia) {
+## Themes
+
+
+
+*Card control in the outline, solid, soft, and elevated themes*
+
+The following control themes are supported:
+- [CardBase](xref:@ActiproUIRoot.Themes.ControlThemeKind.CardBase) - Base control theme used by several others.
+- [CardElevated](xref:@ActiproUIRoot.Themes.ControlThemeKind.CardElevated) (`theme-elevated`) - Has an elevated appearance with a shadow.
+- [CardOutline](xref:@ActiproUIRoot.Themes.ControlThemeKind.CardOutline) (`theme-outline`) - Has an outline appearance.
+- [CardSoft](xref:@ActiproUIRoot.Themes.ControlThemeKind.CardSoft) (`theme-soft`) - Has a soft fill appearance.
+- [CardSolid](xref:@ActiproUIRoot.Themes.ControlThemeKind.CardSolid) (`theme-solid`) - Has a solid appearance.
+
+
+The following example demonstrates how to define a card using the elevated theme:
+
+```xaml
+xmlns:actipro="http://schemas.actiprosoftware.com/avaloniaui"
+...
+
+```
+
+### Elevated Button Animation
+
+When used as a `Button` and the elevated theme is applied (`theme-elevated` style class name), an animation is applied when the pointer is over the [Card](xref:@ActiproUIRoot.Controls.Card) that slides the control up while raising the elevation of the shadow.
+
+Animations are automatically enabled. To turn off animations, set the [IsAnimationEnabled](xref:@ActiproUIRoot.Controls.Card.IsAnimationEnabled) property to `false`.
+}
+@if (wpf) {
+## Elevated Appearance
+
+By default, the [IsShadowEnabled](xref:@ActiproUIRoot.Controls.Card.IsShadowEnabled) property is set to `true` and gives the [Card](xref:@ActiproUIRoot.Controls.Card) an elevated appearance.
+
+When also used as a `Button`, an animation is applied when the mouse is over the [Card](xref:@ActiproUIRoot.Controls.Card) that slides the control up while raising the elevation of the shadow.
+
+Animations are automatically disabled, as appropriate, based on system settings. To manually turn off animations, set the [IsAnimationEnabled](xref:@ActiproUIRoot.Controls.Card.IsAnimationEnabled) property to `false`.
+}
+
+@if (avalonia) {
+
+## Theme Resources
+
+The following theme resources are available for customizing the appearance of the control:
+
+| Theme Resource | Description |
+| ----- | ----- |
+| [CardBorderThickness](xref:@ActiproUIRoot.Themes.ThemeResourceKind.CardBorderThickness) | The default `BorderThickness`. |
+| [CardCornerRadius](xref:@ActiproUIRoot.Themes.ThemeResourceKind.CardCornerRadius) | The default `CornerRadius`. |
+| [CardPadding](xref:@ActiproUIRoot.Themes.ThemeResourceKind.CardPadding) | The default `Padding`. |
+
+}
\ No newline at end of file
diff --git a/Documentation/topics/fundamentals/controls/circular-progressbar.md b/Documentation/topics/fundamentals/controls/circular-progressbar.md
new file mode 100644
index 0000000..7117fa2
--- /dev/null
+++ b/Documentation/topics/fundamentals/controls/circular-progressbar.md
@@ -0,0 +1,191 @@
+---
+title: "Circular Progressbar"
+page-title: "Circular Progressbar - Fundamentals Controls"
+order: 15
+---
+# Circular Progressbar
+
+[CircularProgressBar](xref:@ActiproUIRoot.Controls.CircularProgressBar) displays a ranged progress value using fluent animations. It is similar to a native linear `ProgressBar`, except that it renders the progress in a ring shape.
+
+
+
+*Circular progressbars can be an integral part of a dashboard display*
+
+## Values
+
+The [CircularProgressBar](xref:@ActiproUIRoot.Controls.CircularProgressBar) control inherits `RangeBase`, which provides these essential properties:
+
+| Property | Description |
+| ----- | ----- |
+| `Value` | The progress value between `Minimum` and `Maximum`. |
+| `Minimum` | The minimum possible value. |
+| `Maximum` | The maximum possible value. |
+
+The resolved progress complete percentage is calculated with this formula:
+
+```
+Percentage = (Value - Minimum) / (Maximum - Minimum)
+```
+
+As the percentage changes, the progress indicator animates to the new value.
+
+The following example demonstrates creating a [CircularProgressBar](xref:@ActiproUIRoot.Controls.CircularProgressBar) with a range from `0` to `100` and a current value of `65`:
+
+@if (avalonia) {
+```xaml
+xmlns:actipro="http://schemas.actiprosoftware.com/avaloniaui"
+...
+
+```
+}
+@if (wpf) {
+```xaml
+xmlns:shared="http://schemas.actiprosoftware.com/winfx/xaml/shared"
+...
+
+```
+}
+
+## Indeterminate State
+
+The progressbar can be placed in an indeterminate state when no specific progress value can yet be determined. This can be the case when first determining the number of steps that will be executed as part of an overall operation.
+
+
+
+*Circular progressbar spinning in an indeterminate state*
+
+Set the [IsIndeterminate](xref:@ActiproUIRoot.Controls.CircularProgressBar.IsIndeterminate) property to `true` to enter indeterminate state, and later back to `false` to exit it.
+
+While in an indeterminate state, the progressbar will spin a small indicator around the ring, and no progress text will be displayed.
+
+The following example demonstrates creating a [CircularProgressBar](xref:@ActiproUIRoot.Controls.CircularProgressBar) in the indeterminate state:
+
+@if (avalonia) {
+```xaml
+xmlns:actipro="http://schemas.actiprosoftware.com/avaloniaui"
+...
+
+```
+}
+@if (wpf) {
+```xaml
+xmlns:shared="http://schemas.actiprosoftware.com/winfx/xaml/shared"
+...
+
+```
+}
+
+Subtle animations occur when the control transitions in and out of an indeterminate state.
+
+## Progress Text
+
+Progress text can be displayed in the center of the ring when not in an indeterminate state. This text will be the percentage complete by default.
+
+### Hiding Progress Text
+
+The progress text can be hidden by setting the [IsProgressTextAllowed](xref:@ActiproUIRoot.Controls.CircularProgressBar.IsProgressTextAllowed) property to `false`.
+
+### Formatting Progress Text
+
+A format string value in the [ProgressTextFormat](xref:@ActiproUIRoot.Controls.CircularProgressBar.ProgressTextFormat) property is used to determinate what is displayed as progress text. This property defaults to the current culture's display format for percentages, resulting in a value such as `"85%"`.
+
+The format string is passed these values, which can be accessed via their zero-based indices:
+
+| Index | Description |
+| ----- | ----- |
+| 0 | `Value` property value. |
+| 1 | Percentage value in the range `0`..`100`. |
+| 2 | `Minimum` property value. |
+| 3 | `Maximum` property value. |
+
+A [ProgressTextFormat](xref:@ActiproUIRoot.Controls.CircularProgressBar.ProgressTextFormat) value of `"{0:0} of {3:0}"` would result in the progress text `"[Value] of [Maximum]"`, with all decimals rounded.
+
+> [!WARNING]
+> When specifying a custom [ProgressTextFormat](xref:@ActiproUIRoot.Controls.CircularProgressBar.ProgressTextFormat) value in XAML, prefix the actual value with `{}` to ensure the XAML parser doesn't interpret the open curly braces of the format string as a meaningful XAML delimiter.
+
+The following example demonstrates creating a [CircularProgressBar](xref:@ActiproUIRoot.Controls.CircularProgressBar) with custom progress text:
+
+@if (avalonia) {
+```xaml
+xmlns:actipro="http://schemas.actiprosoftware.com/avaloniaui"
+...
+
+```
+}
+@if (wpf) {
+```xaml
+xmlns:shared="http://schemas.actiprosoftware.com/winfx/xaml/shared"
+...
+
+```
+}
+
+## Appearance
+
+The appearance of the control can be fully customized.
+
+@if (avalonia) {
+
+### Semantic Color Variants
+
+The control supports the `accent`, `success`, `warning`, and `danger` style class names for semantic variants. The semantic colors are applied to the progressbar's indicator.
+
+The following example demonstrates how to apply the `accent` semantic color variant:
+
+```xaml
+xmlns:actipro="http://schemas.actiprosoftware.com/avaloniaui"
+...
+
+```
+
+}
+
+### Brush Properties
+
+The following brush properties are available:
+
+| Property | Description |
+| ----- | ----- |
+| `Foreground` | The progress text foreground. |
+| `Background` | The background of the ring's interior, which defaults to `Transparent`. |
+| [IndicatorBrush](xref:@ActiproUIRoot.Controls.CircularProgressBar.IndicatorBrush) | The progressbar's indicator fill. |
+| [TrackBrush](xref:@ActiproUIRoot.Controls.CircularProgressBar.TrackBrush) | The progressbar's track fill. |
+
+### Line
+
+The following line-related properties are available to adjust the indicator and track appearance:
+
+| Property | Description |
+| ----- | ----- |
+| [LineCap](xref:@ActiproUIRoot.Controls.CircularProgressBar.LineCap) | The indicator line's end caps, which defaults to `Round`. |
+| [LineDashArray](xref:@ActiproUIRoot.Controls.CircularProgressBar.LineDashArray) | The optional indicator line's dash array when dotted or dashed lines are desired. |
+| [LineDashOffset](xref:@ActiproUIRoot.Controls.CircularProgressBar.LineDashOffset) | The optional indicator line's dash offset, when a dash array is used. |
+| [LineThickness](xref:@ActiproUIRoot.Controls.CircularProgressBar.LineThickness) | The thickness of the indicator and track lines, which defaults to `4`. |
+
+> [!NOTE]
+> Implementing dashed lines requires some fine tuning based on the control's size and line thickness. Ideally, the dash array is configured so that a desired number of segments all have the same length. Then the dash offset is used to rotate the start and end gap space, so it aligns to the top of the control.
+
+### Font
+
+All the standard font properties (e.g., `FontFamily`, `FontSize`, `FontWeight`) can be used to customize the appearance of the progress text.
+
+## Animation
+
+Fluent animation in the control is enabled by default but can be disabled by setting the [IsAnimationEnabled](xref:@ActiproUIRoot.Controls.CircularProgressBar.IsAnimationEnabled) property to `false`.
+
+@if (avalonia) {
+
+## Pseudo-classes
+
+The following pseudo-classes are available and can be used when styling the control:
+
+| Class | Description |
+| ----- | ----- |
+| `:determinate` | Added when the [IsIndeterminate](xref:@ActiproUIRoot.Controls.CircularProgressBar.IsIndeterminate) property is `false`. |
+| `:has-progress-text` | Added when progress text should be displayed. |
+| `:indeterminate` | Added when the [IsIndeterminate](xref:@ActiproUIRoot.Controls.CircularProgressBar.IsIndeterminate) property is `true`. |
+| `:no-progress-text` | Added when progress text should not be displayed, which occurs when the [IsIndeterminate](xref:@ActiproUIRoot.Controls.CircularProgressBar.IsIndeterminate) property is `true` or the [IsProgressTextAllowed](xref:@ActiproUIRoot.Controls.CircularProgressBar.IsProgressTextAllowed) property is `false`. |
+
+}
diff --git a/Documentation/topics/fundamentals/controls/index.md b/Documentation/topics/fundamentals/controls/index.md
index 0916227..6071ec5 100644
--- a/Documentation/topics/fundamentals/controls/index.md
+++ b/Documentation/topics/fundamentals/controls/index.md
@@ -25,6 +25,36 @@ The Fundamentals product contains various using interface controls that may be u
[Badge](badge.md) provides contextual information for other elements or can be used stand-alone.
+## Card
+
+
+
+[Card](card.md) controls are typically used to present visually grouped information for a single subject.
+
+## Circular Progressbar
+
+
+
+[CircularProgressBar](circular-progressbar.md) displays a ranged progress value using fluent animations. It is similar to a native linear `ProgressBar`, except that it renders the progress in a ring shape.
+
+## Info Bar
+
+
+
+[Info Bar](info-bar.md) can be used to display essential information to a user without disrupting the user flow.
+
+## Segmented Bar
+
+
+
+[Segmented Bar](segmented-bar.md) allows a user to select a single item with support for fluent animations when changing selection.
+
+## Settings Controls
+
+
+
+The [SettingsCard](settings-card.md), [SettingsExpander](settings-expander.md), and [SettingsGroup](settings-group.md) controls are used together to organize and present configurable settings.
+
## Progress Spinners
diff --git a/Documentation/topics/fundamentals/controls/info-bar.md b/Documentation/topics/fundamentals/controls/info-bar.md
new file mode 100644
index 0000000..4ba0625
--- /dev/null
+++ b/Documentation/topics/fundamentals/controls/info-bar.md
@@ -0,0 +1,262 @@
+---
+title: "Info Bar"
+page-title: "Info Bar - Fundamentals Controls"
+order: 17
+---
+# InfoBar
+
+An [InfoBar](xref:@ActiproUIRoot.Controls.InfoBar) can be used to display essential information to a user without disrupting the user flow.
+
+
+
+*InfoBar with default severity showing a title and message*
+
+## Title and Message
+
+The [Title](xref:@ActiproUIRoot.Controls.InfoBar.Title) property is typically set to short text that categorizes the message being displayed while the [Message](xref:@ActiproUIRoot.Controls.InfoBar.Message) property is set to text that provides additional detail.
+
+The following demonstrates how to create an info bar with a title and message:
+
+@if (avalonia) {
+```xaml
+xmlns:actipro="http://schemas.actiprosoftware.com/avaloniaui"
+...
+
+```
+}
+@if (wpf) {
+```xaml
+xmlns:shared="http://schemas.actiprosoftware.com/winfx/xaml/shared"
+...
+
+```
+}
+
+## Severity
+
+
+
+*InfoBar with Information, Success, Warning, and Error severities*
+
+By default, an [InfoBar](xref:@ActiproUIRoot.Controls.InfoBar) is displayed with [Information](xref:@ActiproUIRoot.Controls.InfoBarSeverity.Information) severity, but the [Severity](xref:@ActiproUIRoot.Controls.InfoBar.Severity) property can be set to any one of the [InfoBarSeverity](xref:@ActiproUIRoot.Controls.InfoBarSeverity) values. Each severity automatically applies a default[Icon](xref:@ActiproUIRoot.Controls.InfoBar.Icon) and `Background` brush to visually distinguish one severity from another.
+
+## Action
+
+
+
+*InfoBar with action button*
+
+The [Action](xref:@ActiproUIRoot.Controls.InfoBar.Action) can be set to any value supported by `ContentPresenter`, but is typically used to show a button or hyperlink the user can act upon to respond to the message.
+
+The following demonstrates how to create an info bar with a button for an action:
+
+@if (avalonia) {
+```xaml
+xmlns:actipro="http://schemas.actiprosoftware.com/avaloniaui"
+...
+
+
+
+
+
+```
+}
+@if (wpf) {
+```xaml
+xmlns:shared="http://schemas.actiprosoftware.com/winfx/xaml/shared"
+...
+
+
+
+
+
+```
+}
+
+## Icon
+
+By default, info bar will display an icon that corresponds to the value of the [Severity](xref:@ActiproUIRoot.Controls.InfoBar.Severity) property. To hide the icon, set the [IsIconVisible](xref:@ActiproUIRoot.Controls.InfoBar.IsIconVisible) property to `false`.
+
+To customize the icon, assign the desired control to the [Icon](xref:@ActiproUIRoot.Controls.InfoBar.Icon) property.
+
+@if (avalonia) {
+The following sample demonstrates using an `Image` for the icon, but any content supported by `ContentPresenter` can be used (like `PathIcon` or [DynamicImage](../../shared/controls/dynamic-image.md) controls):
+
+```xaml
+xmlns:actipro="http://schemas.actiprosoftware.com/avaloniaui"
+...
+
+
+
+
+
+```
+}
+@if (wpf) {
+The following sample demonstrates using an `Image` for the icon, but any content supported by `ContentPresenter` can be used (like [DynamicImage](xref:@ActiproUIRoot.Controls.DynamicImage)):
+
+```xaml
+xmlns:shared="http://schemas.actiprosoftware.com/winfx/xaml/shared"
+...
+
+
+
+
+ [!NOTE]
+> [InfoBar](xref:@ActiproUIRoot.Controls.InfoBar) is designed for use with 16x16 icons. See the @if (avalonia) { "Theme Resources" }@if (wpf) { "Theme Assets" } section below for more information on customizing the icon size.
+
+## Custom Content
+
+
+
+*InfoBar with a progressbar as content*
+
+While not typically necessary, any content supported by `ContentPresenter` can be defined as the `Content` of the info bar. When defined, the `Content` is always displayed below the other UI elements.
+
+The following sample demonstrates including a progressbar as content:
+
+@if (avalonia) {
+```xaml
+xmlns:actipro="http://schemas.actiprosoftware.com/avaloniaui"
+...
+
+
+
+```
+}
+@if (wpf) {
+```xaml
+xmlns:shared="http://schemas.actiprosoftware.com/winfx/xaml/shared"
+...
+
+
+
+```
+}
+
+## Opening and Closing
+
+The [IsOpen](xref:@ActiproUIRoot.Controls.InfoBar.IsOpen) property is used to open and close the info bar programmatically.
+
+By default, a **Close Button** is also displayed that the user can click to close the info bar. Set the [CanClose](xref:@ActiproUIRoot.Controls.InfoBar.CanClose) property to `false` to hide the **Close Button**.
+
+> [!WARNING]
+> Do not use the @if (avalonia) { `IsVisible` }@if (wpf) { `Visibility` } property to open and close the info bar.
+
+By default, clicking the **Close Button** will set the [IsOpen](xref:@ActiproUIRoot.Controls.InfoBar.IsOpen) property to `false` when it is clicked. Alternatively, a [CloseButtonClick](xref:@ActiproUIRoot.Controls.InfoBar.CloseButtonClick) event handler or custom [CloseButtonCommand](xref:@ActiproUIRoot.Controls.InfoBar.CloseButtonCommand) can replace the default behavior.
+
+> [!IMPORTANT]
+> If the [CloseButtonClick](xref:@ActiproUIRoot.Controls.InfoBar.CloseButtonClick) event handler sets `RoutedEventArgs.Handled` to `true` or the [CloseButtonCommand](xref:@ActiproUIRoot.Controls.InfoBar.CloseButtonCommand) property is assigned, the info bar *will not* close by default when it is clicked. The respective event handler or command is responsible for setting the [IsOpen](xref:@ActiproUIRoot.Controls.InfoBar.IsOpen) property to `false` to close the info bar.
+
+### Cancel Close
+
+When the [IsOpen](xref:@ActiproUIRoot.Controls.InfoBar.IsOpen) property is set to `false`, the [Closing](xref:@ActiproUIRoot.Controls.InfoBar.Closing) event is raised with [InfoBarClosingEventArgs](xref:@ActiproUIRoot.Controls.InfoBarClosingEventArgs) passed to the event handler. Set the `Cancel` property to `true` to cancel the close request.
+
+If necessary, inspect the [Reason](xref:@ActiproUIRoot.Controls.InfoBarClosingEventArgs.Reason) property to determine if the reason for the close was due to the [CloseButton](xref:@ActiproUIRoot.Controls.InfoBarCloseReason) being clicked or if it was a [Programmatic](xref:@ActiproUIRoot.Controls.InfoBarCloseReason.Programmatic) close.
+
+## Wrapping
+
+
+
+*InfoBar displayed in the unwrapped and wrapped states*
+
+If enough space is available, all UI elements (except `Content`) are displayed on a single line. Otherwise, the [Title](xref:@ActiproUIRoot.Controls.InfoBar.Title), [Message](xref:@ActiproUIRoot.Controls.InfoBar.Message), [Action](xref:@ActiproUIRoot.Controls.InfoBar.Action), and `Content` are stacked vertically in the middle. When wrapped, the read-only [IsWrapped](xref:@ActiproUIRoot.Controls.InfoBar.IsWrappedProperty) property will be set to `true`.
+
+## Animation
+
+Fluent animation in the control is enabled by default but can be disabled by setting the [IsAnimationEnabled](xref:@ActiproUIRoot.Controls.InfoBar.IsAnimationEnabled) property to `false`.
+
+@if (avalonia) {
+
+## Pseudo-classes
+
+The following pseudo-classes are available and can be used when styling the control:
+
+| Class | Description |
+| ----- | ----- |
+| `:error` | Added when the [Severity](xref:@ActiproUIRoot.Controls.InfoBar.Severity) is set to [Error](xref:@ActiproUIRoot.Controls.InfoBarSeverity.Error). |
+| `:information` | Added when the [Severity](xref:@ActiproUIRoot.Controls.InfoBar.Severity) is set to [Information](xref:@ActiproUIRoot.Controls.InfoBarSeverity.Information). |
+| `:success` | Added when the [Severity](xref:@ActiproUIRoot.Controls.InfoBar.Severity) is set to [Success](xref:@ActiproUIRoot.Controls.InfoBarSeverity.Success). |
+| `:warning` | Added when the [Severity](xref:@ActiproUIRoot.Controls.InfoBar.Severity) is set to [Warning](xref:@ActiproUIRoot.Controls.InfoBarSeverity.Warning). |
+| `:wrapped` | Added when there is not enough room to display the primary controls (excluding `Content`) on a single row. |
+
+}
+
+@if (avalonia) {
+## Theme Resources
+
+The following theme resources are available for customizing the appearance of the control:
+
+| Theme Resource | Description |
+| ----- | ----- |
+| [ButtonForegroundBrush](xref:@ActiproUIRoot.Themes.ThemeResourceKind.ButtonForegroundBrush) | The default `Foreground` of the **Close Button**. |
+| [ButtonForegroundBrushDisabled](xref:@ActiproUIRoot.Themes.ThemeResourceKind.ButtonForegroundBrushDisabled) | The default `Foreground` of the **Close Button** when it is disabled. |
+| [Container1BorderBrush](xref:@ActiproUIRoot.Themes.ThemeResourceKind.Container1BorderBrush) | The default `BorderBrush`. |
+| [InfoBarBackgroundBrushError](xref:@ActiproUIRoot.Themes.ThemeResourceKind.InfoBarBackgroundBrushError) | The default `Background` when the [Severity](xref:@ActiproUIRoot.Controls.InfoBar.Severity) is [Error](xref:@ActiproUIRoot.Controls.InfoBarSeverity.Error). |
+| [InfoBarBackgroundBrushInformation](xref:@ActiproUIRoot.Themes.ThemeResourceKind.InfoBarBackgroundBrushInformation) | The default `Background` when the [Severity](xref:@ActiproUIRoot.Controls.InfoBar.Severity) is [Information](xref:@ActiproUIRoot.Controls.InfoBarSeverity.Information). |
+| [InfoBarBackgroundBrushSuccess](xref:@ActiproUIRoot.Themes.ThemeResourceKind.InfoBarBackgroundBrushSuccess) | The default `Background` when the [Severity](xref:@ActiproUIRoot.Controls.InfoBar.Severity) is [Success](xref:@ActiproUIRoot.Controls.InfoBarSeverity.Success). |
+| [InfoBarBackgroundBrushWarning](xref:@ActiproUIRoot.Themes.ThemeResourceKind.InfoBarBackgroundBrushWarning) | The default `Background` when the [Severity](xref:@ActiproUIRoot.Controls.InfoBar.Severity) is [Warning](xref:@ActiproUIRoot.Controls.InfoBarSeverity.Warning). |
+| [InfoBarBorderThickness](xref:@ActiproUIRoot.Themes.ThemeResourceKind.InfoBarBorderThickness) | The default `BorderThickness`. |
+| [InfoBarCloseButtonLength](xref:@ActiproUIRoot.Themes.ThemeResourceKind.InfoBarCloseButtonLength) | The default `Width` and `Height` of the **Close Button**. |
+| [InfoBarCornerRadius](xref:@ActiproUIRoot.Themes.ThemeResourceKind.InfoBarCornerRadius) | The default `CornerRadius`. |
+| [InfoBarIconLength](xref:@ActiproUIRoot.Themes.ThemeResourceKind.InfoBarIconLength) | The default `Width` and `Height` of the [Icon](xref:@ActiproUIRoot.Controls.InfoBar.Icon). |
+| [InfoBarPadding](xref:@ActiproUIRoot.Themes.ThemeResourceKind.InfoBarPadding) | The default `Padding`. |
+
+See the [Theme Assets](../../themes/theme-assets.md) topic for more details on working with theme resources.
+}
+@if (wpf) {
+## Theme Assets
+
+See the [Theme Reusable Assets](../../themes/reusable-assets.md) topic for more details on using and customizing theme assets. The following reusable assets are used by [InfoBar](xref:@ActiproUIRoot.Controls.InfoBar):
+
+| Asset Resource Key | Description |
+|-----|-----|
+| [ButtonBorderNormalCornerRadiusKey](xref:@ActiproUIRoot.Themes.AssetResourceKeys.ButtonBorderNormalCornerRadiusKey) | The default `CornerRadius` of the **Close Button**. |
+| [ContainerBorderLowerBrushKey](xref:@ActiproUIRoot.Themes.AssetResourceKeys.ContainerBorderLowerBrushKey) | The default `BorderBrush`. |
+| [ContainerForegroundLowestNormalBrushKey](xref:@ActiproUIRoot.Themes.AssetResourceKeys.ContainerForegroundLowestNormalBrushKey) | The default `Foreground` of the info bar and **Close Button**. |
+| [ContainerForegroundLowestDisabledBrushKey](xref:@ActiproUIRoot.Themes.AssetResourceKeys.ContainerForegroundLowestDisabledBrushKey) | The default `Foreground` of the **Close Button** when it is disabled. |
+| [InfoBarBackgroundErrorBrushKey](xref:@ActiproUIRoot.Themes.AssetResourceKeys.InfoBarBackgroundErrorBrushKey) | The default `Background` when the [Severity](xref:@ActiproUIRoot.Controls.InfoBar.Severity) is [Error](xref:@ActiproUIRoot.Controls.InfoBarSeverity.Error). |
+| [InfoBarBackgroundInformationBrushKey](xref:@ActiproUIRoot.Themes.AssetResourceKeys.InfoBarBackgroundInformationBrushKey) | The default `Background` when the [Severity](xref:@ActiproUIRoot.Controls.InfoBar.Severity) is [Information](xref:@ActiproUIRoot.Controls.InfoBarSeverity.Information). |
+| [InfoBarBackgroundSuccessBrushKey](xref:@ActiproUIRoot.Themes.AssetResourceKeys.InfoBarBackgroundSuccessBrushKey) | The default `Background` when the [Severity](xref:@ActiproUIRoot.Controls.InfoBar.Severity) is [Success](xref:@ActiproUIRoot.Controls.InfoBarSeverity.Success). |
+| [InfoBarBackgroundWarningBrushKey](xref:@ActiproUIRoot.Themes.AssetResourceKeys.InfoBarBackgroundWarningBrushKey) | The default `Background` when the [Severity](xref:@ActiproUIRoot.Controls.InfoBar.Severity) is [Warning](xref:@ActiproUIRoot.Controls.InfoBarSeverity.Warning). |
+| [InfoBarBorderNormalCornerRadiusKey](xref:@ActiproUIRoot.Themes.AssetResourceKeys.InfoBarBorderNormalCornerRadiusKey) | The default [CornerRadius](xref:@ActiproUIRoot.Controls.InfoBar.CornerRadius). |
+| [InfoBarBorderNormalThicknessKey](xref:@ActiproUIRoot.Themes.AssetResourceKeys.InfoBarBorderNormalThicknessKey) | The default `BorderThickness`. |
+| [InfoBarCloseButtonLengthDoubleKey](xref:@ActiproUIRoot.Themes.AssetResourceKeys.InfoBarCloseButtonLengthDoubleKey) | The default `Width` and `Height` of the **Close Button**. |
+| [InfoBarIconLengthDoubleKey](xref:@ActiproUIRoot.Themes.AssetResourceKeys.InfoBarIconLengthDoubleKey) | The default `Width` and `Height` of the **Icon**. |
+| [InfoBarPaddingNormalThicknessKey](xref:@ActiproUIRoot.Themes.AssetResourceKeys.InfoBarPaddingNormalThicknessKey) | The default `Padding`. |
+}
+
+## Customize String Resources
+
+The following string resources are available to localize or customize built-in strings:
+
+@if (avalonia) {
+| Resource key | Description |
+|-----|-----|
+| [UIButtonCloseDisplayName](xref:ActiproSoftware.Properties.Shared.SRName.UIButtonCloseDisplayName) | The tooltip of the **Close Button**. The default value is `"Close"`. |
+
+The following sample demonstrates how to set custom values for string resources:
+
+```csharp
+ActiproSoftware.Properties.Shared.SR.SetCustomString(ActiproSoftware.Properties.Shared.SRName.UIButtonCloseDisplayName, "Hide");
+```
+
+See the [Customizing String Resources](../../customizing-string-resources.md) topic for additional details.
+}
+@if (wpf) {
+| Resource key | Description |
+|-----|-----|
+| `UICloseButtonToolTip` | The tooltip of the **Close Button**. The default value is `"Close"`. |
+
+The following sample demonstrates how to set custom values for string resources:
+
+```csharp
+ActiproSoftware.Products.Shared.SR.SetCustomString(ActiproSoftware.Products.Shared.SRName.UICloseButtonToolTip.ToString(), "Hide");
+```
+
+See the [Customizing String Resources](../../customizing-string-resources.md) topic for additional details.
+}
\ No newline at end of file
diff --git a/Documentation/topics/fundamentals/controls/progress-spinners.md b/Documentation/topics/fundamentals/controls/progress-spinners.md
index 7cde2cc..44d06f6 100644
--- a/Documentation/topics/fundamentals/controls/progress-spinners.md
+++ b/Documentation/topics/fundamentals/controls/progress-spinners.md
@@ -1,6 +1,6 @@
---
title: "Progress Spinners"
-page-title: "Progress Spinners - Shared Library Controls"
+page-title: "Progress Spinners - Fundamentals Controls"
order: 40
---
# Progress Spinners
diff --git a/Documentation/topics/fundamentals/controls/segmented-bar.md b/Documentation/topics/fundamentals/controls/segmented-bar.md
new file mode 100644
index 0000000..a0dc0fa
--- /dev/null
+++ b/Documentation/topics/fundamentals/controls/segmented-bar.md
@@ -0,0 +1,232 @@
+---
+title: "Segmented Bar"
+page-title: "Segmented Bar - Fundamentals Controls"
+order: 19
+---
+# SegmentedBar
+
+A [SegmentedBar](xref:@ActiproUIRoot.Controls.SegmentedBar) allows a user to select a single item with support for fluent animations when changing selection.
+
+
+
+*SegmentedBar with elevated theme and accent semantic color variant*
+
+## Important Members
+
+The [SegmentedBar](xref:@ActiproUIRoot.Controls.SegmentedBar) class has these important members:
+
+| Member | Description |
+|-----|-----|
+| [Orientation](xref:@ActiproUIRoot.Controls.SegmentedBar.Orientation) Property | An `Orientation` value that indicates the direction in which items are arranged. The default value is `Horizontal`. |
+| [Spacing](xref:@ActiproUIRoot.Controls.SegmentedBar.Spacing) Property | The amount of space that appears between items. |
+
+## Configuring Items
+
+The [SegmentedBar](xref:@ActiproUIRoot.Controls.SegmentedBar) is a `SelectingItemsControl` for [SegmentedBarItem](xref:@ActiproUIRoot.Controls.SegmentedBarItem) controls.
+
+Individual instances of [SegmentedBarItem](xref:@ActiproUIRoot.Controls.SegmentedBarItem) can be directly defined as the `ItemsSource` as shown below:
+
+@if (avalonia) {
+```xaml
+xmlns:actipro="http://schemas.actiprosoftware.com/avaloniaui"
+...
+
+
+ Daily
+ Weekly
+ Monthly
+ Quarterly
+ Annually
+ ...
+
+```
+}
+
+The `ItemsSource` can also be defined as non-[SegmentedBarItem](xref:@ActiproUIRoot.Controls.SegmentedBarItem) items. In this scenario, each item is automatically wrapped in a [SegmentedBarItem](xref:@ActiproUIRoot.Controls.SegmentedBarItem) container with the original item as the `DataContext`.
+
+## Themes and Semantic Color Variants
+
+
+
+*SegmentedBar in the elevated, outline, solid, soft, and subtle themes showing neutral and semantic color variants*
+
+The segmented bar control supports the `accent`, `success`, `warning`, and `danger` style class names for semantic variants.
+
+The following control themes are also supported:
+- [SegmentedBarBase](xref:@ActiproUIRoot.Themes.ControlThemeKind.SegmentedBarBase) - Base control theme used by several others.
+- [SegmentedBarElevated](xref:@ActiproUIRoot.Themes.ControlThemeKind.SegmentedBarElevated) (`theme-elevated`) - Has an elevated appearance.
+- [SegmentedBarOutline](xref:@ActiproUIRoot.Themes.ControlThemeKind.SegmentedBarOutline) (`theme-outline`) - Has an outline appearance.
+- [SegmentedBarSoft](xref:@ActiproUIRoot.Themes.ControlThemeKind.SegmentedBarSoft) (`theme-soft`) - Has a soft fill appearance.
+- [SegmentedBarSolid](xref:@ActiproUIRoot.Themes.ControlThemeKind.SegmentedBarSolid) (`theme-solid`) - Has a solid appearance.
+- [SegmentedBarSubtle](xref:@ActiproUIRoot.Themes.ControlThemeKind.SegmentedBarSubtle) (`theme-subtle`) - Has a subtle appearance.
+
+The following example demonstrates how to define a segmented bar using the outline theme and accent variant:
+
+```xaml
+xmlns:actipro="http://schemas.actiprosoftware.com/avaloniaui"
+...
+
+```
+
+## Overflow Scrolling
+
+
+
+*SegmentedBar with overflow scrolling active and scroll offsets at the beginning, middle, and end*
+
+If there is not enough room to fully display a segmented bar, scroll buttons will automatically appear on the control's left/right sides (horizontal orientation) or the top/bottom sides (vertical orientation).
+
+## Customize Appearance
+
+
+
+*SegmentedBar with custom appearance showing pointer over effect*
+
+Use standard properties like `CornerRadius`, `Padding`, `BorderThickness`, etc. to customize the basic appearance of the segmented bar. For more advanced customizations, it may be necessary to modify the [SelectionTemplate](xref:@ActiproUIRoot.Controls.SegmentedBar.SelectionTemplate),
+`ItemContainerTheme`, and/or [ScrollButtonTheme](xref:@ActiproUIRoot.Controls.SegmentedBar.ScrollButtonTheme).
+
+The [SegmentedBar](xref:@ActiproUIRoot.Controls.SegmentedBar) control is responsible for rendering the **Track**, **Selection**, and **Scroll Buttons**. The [SegmentedBarItem](xref:@ActiproUIRoot.Controls.SegmentedBarItem) controls are responsible for rendering the individual items on the track.
+
+### Selection Element Template
+
+When an item is selected, the **Selection** element is moved along the **Track** to the same size and location of the selected item, using fluent animations when enabled. The **Selection** element is primarily responsible for rendering the selection background.
+
+To customize the appearance of the **Selection** element, set the [SegmentedBar](xref:@ActiproUIRoot.Controls.SegmentedBar).[SelectionTemplate](xref:@ActiproUIRoot.Controls.SegmentedBar.SelectionTemplate) property to any `IDataTemplate`.
+
+Any element can be used within the `IDataTemplate`, but a `Border` is commonly used. The following example demonstrates how to render a colorful line below the selected item:
+
+```xaml
+xmlns:actipro="http://schemas.actiprosoftware.com/avaloniaui"
+...
+
+
+
+
+
+
+
+
+
+
+
+ ...
+
+
+```
+
+### SegmentedBarItem Theme
+
+The `ItemContainerTheme` can be set to any `ControlTheme` to customize the appearance of [SegmentedBarItem](xref:@ActiproUIRoot.Controls.SegmentedBarItem)
+items within the [SegmentedBar](xref:@ActiproUIRoot.Controls.SegmentedBar). Since the **Selection** element is primarily used to emphasize the selected item, a custom `ItemContainerTheme` is typically only used to provide pointer over effects or to alter the foreground of the selected item.
+
+> [!IMPORTANT]
+> The **Selection** element that highlights the current selection appears *behind* the selected [SegmentedBarItem](xref:@ActiproUIRoot.Controls.SegmentedBarItem), so it is important to use transparent backgrounds on selected items to allow the **Selection** element to be visible.
+
+The following sample demonstrates how to define a custom theme for [SegmentedBarItem](xref:@ActiproUIRoot.Controls.SegmentedBarItem) which renders a neutral color line below unselected items on pointer over:
+
+```xaml
+xmlns:actipro="http://schemas.actiprosoftware.com/avaloniaui"
+...
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ ...
+
+
+```
+
+### Scroll Button Theme
+
+When overflow scrolling is required, **Scroll Buttons** appear on the edges of the control to allow scrolling in that direction. The appearance of these buttons can be customized by setting the [SegmentedBar](xref:@ActiproUIRoot.Controls.SegmentedBar).[ScrollButtonTheme](xref:@ActiproUIRoot.Controls.SegmentedBar.ScrollButtonTheme) to a custom `ControlTheme`.
+
+See the [ScrollableOverflowPresenter](../../shared/controls/scrollable-overflow-presenter.md) topic for important details on customizing the theme of the scroll buttons.
+
+## Animation
+
+Fluent animation in the control is enabled by default but can be disabled by setting the [IsAnimationEnabled](xref:@ActiproUIRoot.Controls.SegmentedBar.IsAnimationEnabled) property to `false`.
+
+## Pseudo-classes
+
+The following pseudo-classes are available and can be used when styling the controls:
+
+### SegmentedBar
+
+| Class | Description |
+| ----- | ----- |
+| `:horizontal` | Added when [Orientation](xref:@ActiproUIRoot.Controls.SegmentedBar.Orientation) is set to `Horizontal`. |
+| `:vertical` | Added when [Orientation](xref:@ActiproUIRoot.Controls.SegmentedBar.Orientation) is set to `Vertical`. |
+
+### SegmentedBarItem
+
+| Class | Description |
+| ----- | ----- |
+| `:selected` | Added when [IsSelected](xref:@ActiproUIRoot.Controls.SegmentedBarItem.IsSelected) is set to `true`. |
+
+## Theme Resources
+
+The following theme resources are specifically available for customizing the appearance of the controls:
+
+| Theme Resource | Description |
+| ----- | ----- |
+| [SegmentedBarItemCornerRadius](xref:@ActiproUIRoot.Themes.ThemeResourceKind.SegmentedBarItemCornerRadius) | The default `CornerRadius` for [SegmentedBarItem](xref:@ActiproUIRoot.Controls.SegmentedBarItem) and the [SegmentedBar](xref:@ActiproUIRoot.Controls.SegmentedBar).[SelectionTemplate](xref:@ActiproUIRoot.Controls.SegmentedBar.SelectionTemplate).
+| [SegmentedBarItemPadding](xref:@ActiproUIRoot.Themes.ThemeResourceKind.SegmentedBarItemPadding) | The default [SegmentedBarItem](xref:@ActiproUIRoot.Controls.SegmentedBarItem).`Padding`. |
+| [SegmentedBarCornerRadius](xref:@ActiproUIRoot.Themes.ThemeResourceKind.SegmentedBarCornerRadius) | The default [SegmentedBar](xref:@ActiproUIRoot.Controls.SegmentedBar).`CornerRadius`. |
+| [SegmentedBarPadding](xref:@ActiproUIRoot.Themes.ThemeResourceKind.SegmentedBarPadding) | The default [SegmentedBar](xref:@ActiproUIRoot.Controls.SegmentedBar).`Padding`. |
+| [SegmentedBarSpacing](xref:@ActiproUIRoot.Themes.ThemeResourceKind.SegmentedBarSpacing) | The default [SegmentedBar](xref:@ActiproUIRoot.Controls.SegmentedBar).[Spacing](xref:@ActiproUIRoot.Controls.SegmentedBar.Spacing).
+
+[SegmentedBar](xref:@ActiproUIRoot.Controls.SegmentedBar) and [SegmentedBarItem](xref:@ActiproUIRoot.Controls.SegmentedBarItem) also use additional common theme resources consistent with the current control theme and semantic color variant (e.g., [Container1BackgroundBrush](xref:@ActiproUIRoot.Themes.ThemeResourceKind.Container1BackgroundBrush), [ButtonBackgroundBrushSoft](xref:@ActiproUIRoot.Themes.ThemeResourceKind.ButtonBackgroundBrushSoft), [ControlForegroundBrushOutlineAccent](xref:@ActiproUIRoot.Themes.ThemeResourceKind.ControlForegroundBrushOutlineAccent), and many more.)
+
+See the [Theme Assets](../../themes/theme-assets.md) topic for more details on working with theme resources.
\ No newline at end of file
diff --git a/Documentation/topics/fundamentals/controls/settings-card.md b/Documentation/topics/fundamentals/controls/settings-card.md
new file mode 100644
index 0000000..1c1b81e
--- /dev/null
+++ b/Documentation/topics/fundamentals/controls/settings-card.md
@@ -0,0 +1,403 @@
+---
+title: "Settings Card"
+page-title: "Settings Card - Fundamentals Controls"
+order: 20
+---
+# SettingsCard
+
+The [SettingsCard](xref:@ActiproUIRoot.Controls.SettingsCard), [SettingsExpander](settings-expander.md), and [SettingsGroup](settings-group.md) controls are used together to organize and present configurable settings.
+
+
+
+*SettingsCard and SettingsExpander displayed within a SettingsGroup*
+
+A [SettingsCard](xref:@ActiproUIRoot.Controls.SettingsCard) is typically used to display a single setting and is the primary control used when building a settings interface.
+
+
+
+*SettingsCard with header, description, header icon, and ToggleSwitch content*
+
+## Content Areas
+
+The [SettingsCard](xref:@ActiproUIRoot.Controls.SettingsCard) control is defined by multiple content areas:
+
+- [Header](xref:@ActiproUIRoot.Controls.SettingsCard.Header) - The primary label for the setting.
+- [Description](xref:@ActiproUIRoot.Controls.SettingsCard.Description) - An additional description for the setting.
+- [HeaderIcon](xref:@ActiproUIRoot.Controls.SettingsCard.HeaderIcon) - The primary icon for the setting.
+- [ActionIcon](xref:@ActiproUIRoot.Controls.SettingsCard.HeaderIcon) - An icon displayed on the right side of the setting which is typically used to provide context for the action performed when a card is clicked.
+- `Content` (Editor) - The control used to edit the setting (e.g., `ToggleSwitch`, `ComboBox`).
+
+Each content area, including icons, can optionally be set to any value supported by `ContentPresenter` and the layout will adjust to only show the areas where content is defined.
+
+> [!NOTE]
+> In some scenarios, content may not be automatically detected. For instance, if a `DataTemplate` is used to define content without setting the corresponding content property, the control will not know that content is available. Use the [IsHeaderVisible](xref:@ActiproUIRoot.Controls.SettingsCard.IsHeaderVisible), [IsDescriptionVisible](xref:@ActiproUIRoot.Controls.SettingsCard.IsDescriptionVisible), [IsHeaderIconVisible](xref:@ActiproUIRoot.Controls.SettingsCard.IsHeaderIconVisible), and [IsActionIconVisible](xref:@ActiproUIRoot.Controls.SettingsCard.IsActionIconVisible) properties to manually control the visibility of each content area.
+
+> [!TIP]
+> The [SettingsExpander](settings-expander.md) control has all the same content areas as [SettingsCard](xref:@ActiproUIRoot.Controls.SettingsCard) *except* [ActionIcon](xref:@ActiproUIRoot.Controls.SettingsCard.ActionIcon).
+
+### Header and Description
+
+The [Header](xref:@ActiproUIRoot.Controls.SettingsCard.Header) and [Description](xref:@ActiproUIRoot.Controls.SettingsCard.Description) are typically `string` values describing the setting, and both are optional. The following demonstrates how to create a [SettingsCard](xref:@ActiproUIRoot.Controls.SettingsCard) with a header and description:
+
+@if (avalonia) {
+```xaml
+xmlns:actipro="http://schemas.actiprosoftware.com/avaloniaui"
+...
+
+```
+}
+@if (wpf) {
+```xaml
+xmlns:views="http://schemas.actiprosoftware.com/winfx/xaml/views"
+...
+
+```
+}
+
+Since both properties can be set to any content supported by `ContentPresenter`, either property can be configured with more complex content. The following example demonstrates how a hyperlink could be used as the [Description](xref:@ActiproUIRoot.Controls.SettingsCard.Description) @if (avalonia) { (using the [HyperlinkTextBlock](../../shared/controls/hyperlink-textblock.md) control) }:
+
+@if (avalonia) {
+```xaml
+xmlns:actipro="http://schemas.actiprosoftware.com/avaloniaui"
+...
+
+
+
+
+
+
+ ...
+
+
+```
+}
+@if (wpf) {
+```xaml
+xmlns:views="http://schemas.actiprosoftware.com/winfx/xaml/views"
+xmlns:themes="http://schemas.actiprosoftware.com/winfx/xaml/themes"
+...
+
+
+
+
+
+ Click here for more
+
+
+
+
+ ...
+
+
+```
+}
+
+### Icons
+
+The [SettingsCard](xref:@ActiproUIRoot.Controls.SettingsCard) supports two icons:
+- [HeaderIcon](xref:@ActiproUIRoot.Controls.SettingsCard.HeaderIcon) - An icon displayed on the left side of the card with a default size of `24x24`. This icon is typically related to the value(s) defined by the setting. For example, a speaker icon might be used for a setting related to output sound volume.
+- [ActionIcon](xref:@ActiproUIRoot.Controls.SettingsCard.ActionIcon) - Typically used for cards with click enabled (see the "Enable Click" topic below), this icon is displayed on the right side of the card with a default size of `16x16`. It is most often related to the action that will be performed if a card is clicked. For example, if clicking a card opens a new window, an icon that represents opening an external window can help convey to the user what will happen if the card is clicked.
+
+The following sample demonstrates two different techniques for defining either icon, but any content supported by `ContentPresenter` can be used to define the icons (like `Image` or @if (avalonia) { [DynamicImage](../../shared/controls/dynamic-image.md) }@if (wpf) { [DynamicImage](../../shared/windows-controls/dynamicimage.md) } controls):
+
+@if (avalonia) {
+```xaml
+xmlns:actipro="http://schemas.actiprosoftware.com/avaloniaui"
+...
+
+
+
+
+
+
+
+
+
+
+
+
+ ...
+
+
+```
+}
+@if (wpf) {
+```xaml
+xmlns:views="http://schemas.actiprosoftware.com/winfx/xaml/views"
+xmlns:themes="http://schemas.actiprosoftware.com/winfx/xaml/themes"
+...
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ ...
+
+
+```
+}
+
+### Content (Editor)
+
+The `Content` property (which is the default property for [SettingsCard](xref:@ActiproUIRoot.Controls.SettingsCard)) is used to present core control for the setting. Any content supported by `ContentPresenter` can be used, but a setting is typically defined by common controls like `CheckBox`, `ComboBox`, `Slider`, and `ToggleSwitch`.
+
+The following sections discuss some of the common scenarios for defining a setting using popular control types, but the card is not limited to these control types.
+
+#### CheckBox Control
+
+A `CheckBox` is often used when the card does not define its own [Header](xref:@ActiproUIRoot.Controls.SettingsCard.Header) and the label of the `CheckBox` is all that is needed.
+
+The following demonstrates defining a [SettingsCard](xref:@ActiproUIRoot.Controls.SettingsCard) that uses a `CheckBox` without a header:
+
+@if (avalonia) {
+```xaml
+xmlns:actipro="http://schemas.actiprosoftware.com/avaloniaui"
+...
+
+
+
+
+
+```
+}
+@if (wpf) {
+```xaml
+xmlns:views="http://schemas.actiprosoftware.com/winfx/xaml/views"
+...
+
+
+
+
+
+```
+}
+
+#### Slider Control
+
+A `Slider` control is often used for selecting a value within a limited range. Since a `Slider` does not typically define a minimum width, it is recommended to set the width explicitly.
+
+The following demonstrates defining a [SettingsCard](xref:@ActiproUIRoot.Controls.SettingsCard) that uses a `Slider`:
+
+@if (avalonia) {
+```xaml
+xmlns:actipro="http://schemas.actiprosoftware.com/avaloniaui"
+...
+
+
+
+
+
+```
+}
+@if (wpf) {
+```xaml
+xmlns:views="http://schemas.actiprosoftware.com/winfx/xaml/views"
+...
+
+
+
+
+
+```
+}
+
+#### TextBox Control
+
+A `TextBox` control used for a setting is typically displayed full width. This can be achieved by forcing the setting to wrap and using stretch alignment. See the "Wrapping" section below for more details on wrapping.
+
+The following demonstrates defining a [SettingsCard](xref:@ActiproUIRoot.Controls.SettingsCard) that uses a full-width `TextBox` control:
+
+@if (avalonia) {
+```xaml
+xmlns:actipro="http://schemas.actiprosoftware.com/avaloniaui"
+...
+
+
+
+
+
+```
+}
+@if (wpf) {
+```xaml
+xmlns:shared="http://schemas.actiprosoftware.com/winfx/xaml/shared"
+xmlns:views="http://schemas.actiprosoftware.com/winfx/xaml/views"
+...
+
+
+
+
+
+```
+}
+
+#### ToggleSwitch Control
+
+A `ToggleSwitch` is a common control type for settings since the card's [Header](xref:@ActiproUIRoot.Controls.SettingsCard.Header) has already defined the setting and the `ToggleSwitch` can easily be used to turn the named setting on or off without any additional label being required for context.
+
+@if (avalonia) {
+When used for a setting, a `ToggleSwitch` tends to look best with the track on the right and the on/off content on the left. When using Actipro Themes, set the [ThemeProperties](xref:@ActiproUIRoot.Themes.ThemeProperties).[ToggleSwitchHasFarAffinity](xref:@ActiproUIRoot.Themes.ThemeProperties.ToggleSwitchHasFarAffinityProperty) attached property to `true` for this layout. See the [Theme Assets](../../themes/theme-assets.md) topic for more details on working with theme resources and how to globally change the default for all `ToggleSwitch` instances.
+}
+
+The following demonstrates defining a [SettingsCard](xref:@ActiproUIRoot.Controls.SettingsCard) that uses a `ToggleSwitch` control:
+
+@if (avalonia) {
+```xaml
+xmlns:actipro="http://schemas.actiprosoftware.com/avaloniaui"
+...
+
+
+
+
+
+```
+}
+@if (wpf) {
+```xaml
+xmlns:shared="http://schemas.actiprosoftware.com/winfx/xaml/shared"
+xmlns:views="http://schemas.actiprosoftware.com/winfx/xaml/views"
+...
+
+
+
+
+
+```
+}
+
+
+## Wrapping
+
+
+
+*SettingsCard displayed in the unwrapped and wrapped states*
+
+If enough space is available, the `Content` (Editor) of the setting is displayed to the right of the [Header](xref:@ActiproUIRoot.Controls.SettingsCard.Header) and/or [Description](xref:@ActiproUIRoot.Controls.SettingsCard.Description) with default right alignment. When the width of the card is less than or equal to the [WrapThreshold](xref:@ActiproUIRoot.Controls.SettingsCard.WrapThreshold), the `Content` will be wrapped to the bottom of the card with default left alignment.
+
+Use the [IsWrapped](xref:@ActiproUIRoot.Controls.SettingsCard.IsWrapped) property to manually control wrap behavior. When set to `null` (the default), wrapping is based on the [WrapThreshold](xref:@ActiproUIRoot.Controls.SettingsCard.WrapThreshold). Set the property to `true` to force wrapping at any width, and `false` to prevent wrapping at any width.
+
+> [!NOTE]
+> Wrapping is only applicable if [Header](xref:@ActiproUIRoot.Controls.SettingsCard.Header) and/or [Description](xref:@ActiproUIRoot.Controls.SettingsCard.Description) are defined. Otherwise, the `Content` (Editor) will always be aligned left, by default.
+
+## Enable Click
+
+[SettingsCard](xref:@ActiproUIRoot.Controls.SettingsCard) derives from `Button`, so it supports the same `Command` model and `Click` event as `Button`. Unlike a `Button`, though, not all instances of [SettingsCard](xref:@ActiproUIRoot.Controls.SettingsCard) will need to support being clicked and the control has been configured to not be clickable by default.
+
+Set the [IsClickEnabled](xref:@ActiproUIRoot.Controls.SettingsCard.IsClickEnabled) property to `true` to enable clicking the card. The `Click` event will not be raised if this property is `false`.
+
+> [!TIP]
+> If the `Command` property is assigned a non-`null` value, the [IsClickEnabled](xref:@ActiproUIRoot.Controls.SettingsCard.IsClickEnabled) property is automatically coerced to `true`, so no additional configuration is necessary.
+
+> [!WARNING]
+> The `Click` event can bubble up from other controls hosted on a [SettingsCard](xref:@ActiproUIRoot.Controls.SettingsCard), so always verify the source of the `Click` event before responding. For example, if a [SettingsCard](xref:@ActiproUIRoot.Controls.SettingsCard) is configured with a `CheckBox` as the content, clicking the `CheckBox` will toggle the value *and* raise the `Click` event.
+
+The following code sample demonstrates how a [SettingsCard](xref:@ActiproUIRoot.Controls.SettingsCard) can be configured to handle the `Click` event in XAML with the corresponding code-behind logic:
+
+@if (avalonia) {
+```xaml
+xmlns:actipro="http://schemas.actiprosoftware.com/avaloniaui"
+...
+
+```
+}
+@if (wpf) {
+```xaml
+xmlns:views="http://schemas.actiprosoftware.com/winfx/xaml/views"
+...
+
+```
+}
+```csharp
+// Code behind
+...
+private void OnSettingClick(object sender, RoutedEventArgs e) {
+ // Make sure the source of the Click is a SettingsCard since some Click
+ // events can bubble up from content hosted on the card (like a CheckBox)
+ if ((e.Source is SettingsCard) && (!e.Handled)) {
+ // Respond to click here
+ }
+}
+```
+
+## Indentation
+
+Not all settings will have a [HeaderIcon](xref:@ActiproUIRoot.Controls.SettingsCard.HeaderIcon) or [ActionIcon](xref:@ActiproUIRoot.Controls.SettingsCard.ActionIcon). When multiple settings are stacked vertically, it may be desirable to have consistent horizontal alignment of all the content areas within the individual settings. By setting [IsHeaderIconVisible](xref:@ActiproUIRoot.Controls.SettingsCard.IsHeaderIconVisible) and/or [IsActionIconVisible](xref:@ActiproUIRoot.Controls.SettingsCard.IsActionIconVisible) to `true`, the layout will reserve space for these elements even when a corresponding icon is not available. This results in all the settings having a consistent layout.
+
+@if (avalonia) {
+
+## Pseudo-classes
+
+The following pseudo-classes are available and can be used when styling the control:
+
+| Class | Description |
+| ----- | ----- |
+| `:wrapped` | Added when the `Content` (Editor) has wrapped due to the available width being less than or equal to the [WrapThreshold](xref:@ActiproUIRoot.Controls.SettingsCard.WrapThreshold) or when [IsWrapped](xref:@ActiproUIRoot.Controls.SettingsCard.IsWrapped) is set to `true`. |
+
+}
+
+@if (avalonia) {
+## Theme Resources
+
+The following theme resources are available for customizing the appearance of the control:
+
+| Theme Resource | Description |
+| ----- | ----- |
+| [Container1BackgroundBrush](xref:@ActiproUIRoot.Themes.ThemeResourceKind.Container1BackgroundBrush) | The default `Background`. |
+| [Container2BackgroundBrush](xref:@ActiproUIRoot.Themes.ThemeResourceKind.Container1BackgroundBrush) | The default `Background` of a clickable card when the mouse is over the control. |
+| [Container3BackgroundBrush](xref:@ActiproUIRoot.Themes.ThemeResourceKind.Container1BackgroundBrush) | The default `Background` of a clickable card when the control is pressed. |
+| [Container1BorderBrush](xref:@ActiproUIRoot.Themes.ThemeResourceKind.Container1BorderBrush) | The default `BorderBrush`. |
+| [Container2BorderBrush](xref:@ActiproUIRoot.Themes.ThemeResourceKind.Container1BorderBrush) | The default `BorderBrush` of a clickable card when the mouse is over the control. |
+| [Container3BorderBrush](xref:@ActiproUIRoot.Themes.ThemeResourceKind.Container1BorderBrush) | The default `BorderBrush` of a clickable card when the control is pressed. |
+| [SettingsCardBorderThickness](xref:@ActiproUIRoot.Themes.ThemeResourceKind.SettingsCardBorderThickness) | The default `BorderThickness`. |
+| [SettingsCardCornerRadius](xref:@ActiproUIRoot.Themes.ThemeResourceKind.SettingsCardCornerRadius) | The default `CornerRadius`. |
+| [DefaultFontSizeExtraSmall](xref:@ActiproUIRoot.Themes.ThemeResourceKind.DefaultFontSizeExtraSmall) | The default `FontSize` of the [Description](xref:@ActiproUIRoot.Controls.SettingsCard.Description) content.
+| [DefaultForegroundBrush](xref:@ActiproUIRoot.Themes.ThemeResourceKind.DefaultForegroundBrush) | The default `Foreground`. |
+| [DefaultForegroundBrushTertiary](xref:@ActiproUIRoot.Themes.ThemeResourceKind.DefaultForegroundBrushTertiary) | The default `Foreground` of the [Description](xref:@ActiproUIRoot.Controls.SettingsCard.Description) content. |
+| [DefaultForegroundBrushDisabled](xref:@ActiproUIRoot.Themes.ThemeResourceKind.DefaultForegroundBrushDisabled) | The default `Foreground` when the control is disabled. |
+| [SettingsCardPadding](xref:@ActiproUIRoot.Themes.ThemeResourceKind.SettingsCardPadding) | The default `Padding`. |
+| [SettingsCardActionIconLength](xref:@ActiproUIRoot.Themes.ThemeResourceKind.SettingsCardActionIconLength) | The default `Width` and `Height` of the [ActionIcon](xref:@ActiproUIRoot.Controls.SettingsCard.ActionIcon). |
+| [SettingsCardHeaderIconLength](xref:@ActiproUIRoot.Themes.ThemeResourceKind.SettingsCardHeaderIconLength) | The default `Width` and `Height` of the [HeaderIcon](xref:@ActiproUIRoot.Controls.SettingsCard.HeaderIcon). |
+| [SettingsCardWrapThreshold](xref:@ActiproUIRoot.Themes.ThemeResourceKind.SettingsCardWrapThreshold) | The default [WrapThreshold](xref:@ActiproUIRoot.Controls.SettingsCard.WrapThreshold). |
+
+See the [Theme Assets](../../themes/theme-assets.md) topic for more details on working with theme resources.
+}
+@if (wpf) {
+## Theme Assets
+
+See the [Theme Reusable Assets](../../themes/reusable-assets.md) topic for more details on using and customizing theme assets. The following reusable assets are used by [SettingsCard](xref:@ActiproUIRoot.Controls.Views.SettingsCard):
+
+| Asset Resource Key | Description |
+|-----|-----|
+| [ContainerBackgroundLowestBrushKey](xref:@ActiproUIRoot.Themes.AssetResourceKeys.ContainerBackgroundLowestBrushKey) | The default `Background`. |
+| [ContainerBackgroundLowerBrushKey](xref:@ActiproUIRoot.Themes.AssetResourceKeys.ContainerBackgroundLowerBrushKey) | The default `Background` of a clickable card when the mouse is over the control. |
+| [ContainerBackgroundLowBrushKey](xref:@ActiproUIRoot.Themes.AssetResourceKeys.ContainerBackgroundLowBrushKey) | The default `Background` of a clickable card when the control is pressed. |
+| [ContainerBorderLowerBrushKey](xref:@ActiproUIRoot.Themes.AssetResourceKeys.ContainerBorderLowerBrushKey) | The default `BorderBrush`. |
+| [ContainerBorderLowBrushKey](xref:@ActiproUIRoot.Themes.AssetResourceKeys.ContainerBorderLowBrushKey) | The default `BorderBrush` of a clickable card when the mouse is over the control. |
+| [ContainerBorderMidLowBrushKey](xref:@ActiproUIRoot.Themes.AssetResourceKeys.ContainerBorderMidLowBrushKey) | The default `BorderBrush` of a clickable card when the control is pressed. |
+| [SettingsCardBorderNormalThicknessKey](xref:@ActiproUIRoot.Themes.AssetResourceKeys.SettingsCardBorderNormalThicknessKey) | The default `BorderThickness`. |
+| [SettingsCardBorderNormalCornerRadiusKey](xref:@ActiproUIRoot.Themes.AssetResourceKeys.SettingsCardBorderNormalCornerRadiusKey) | The default [CornerRadius](xref:@ActiproUIRoot.Controls.Views.SettingsCard.CornerRadius).
+| [SmallFontSizeDoubleKey](xref:@ActiproUIRoot.Themes.AssetResourceKeys.SmallFontSizeDoubleKey) | The default `FontSize` of the [Description](xref:@ActiproUIRoot.Controls.Views.SettingsCard.Description) content.
+| [ContainerForegroundLowestNormalBrushKey](xref:@ActiproUIRoot.Themes.AssetResourceKeys.ContainerForegroundLowestNormalBrushKey) | The default `Foreground`. |
+| [ContainerForegroundLowestSubtleBrushKey](xref:@ActiproUIRoot.Themes.AssetResourceKeys.ContainerForegroundLowestSubtleBrushKey) | The default `Foreground` of the [Description](xref:@ActiproUIRoot.Controls.Views.SettingsCard.Description) content. |
+| [ContainerForegroundLowestDisabledBrushKey](xref:@ActiproUIRoot.Themes.AssetResourceKeys.ContainerForegroundLowestDisabledBrushKey) | The default `Foreground` when the control is disabled. |
+| [SettingsCardPaddingNormalThicknessKey](xref:@ActiproUIRoot.Themes.AssetResourceKeys.SettingsCardPaddingNormalThicknessKey) | The default `Padding`.
+| [SettingsCardActionIconLengthDoubleKey](xref:@ActiproUIRoot.Themes.AssetResourceKeys.SettingsCardActionIconLengthDoubleKey) | The default `Width` and `Height` of the [ActionIcon](xref:@ActiproUIRoot.Controls.Views.SettingsCard.ActionIcon).
+| [SettingsCardHeaderIconLengthDoubleKey](xref:@ActiproUIRoot.Themes.AssetResourceKeys.SettingsCardHeaderIconLengthDoubleKey) | The default `Width` and `Height` of the [HeaderIcon](xref:@ActiproUIRoot.Controls.Views.SettingsCard.HeaderIcon).
+| [SettingsCardWrapThresholdDoubleKey](xref:@ActiproUIRoot.Themes.AssetResourceKeys.SettingsCardWrapThresholdDoubleKey) | The default [WrapThreshold](xref:@ActiproUIRoot.Controls.Views.SettingsCard.WrapThreshold).
+}
\ No newline at end of file
diff --git a/Documentation/topics/fundamentals/controls/settings-expander.md b/Documentation/topics/fundamentals/controls/settings-expander.md
new file mode 100644
index 0000000..6a83d0d
--- /dev/null
+++ b/Documentation/topics/fundamentals/controls/settings-expander.md
@@ -0,0 +1,394 @@
+---
+title: "Settings Expander"
+page-title: "Settings Expander - Fundamentals Controls"
+order: 21
+---
+# SettingsExpander
+
+The [SettingsCard](settings-card.md), [SettingsExpander](xref:@ActiproUIRoot.Controls.SettingsExpander), and [SettingsGroup](settings-group.md) controls are used together to organize and present configurable settings.
+
+
+
+*SettingsCard and SettingsExpander displayed within a SettingsGroup*
+
+A [SettingsExpander](xref:@ActiproUIRoot.Controls.SettingsExpander) has functionality similar to a [SettingsCard](settings-card.md) but can also be expanded to show additional child settings.
+
+
+
+*SettingsExpander with header, description, header icon, and ToggleSwitch content in the expanded state with two SettingsCard children*
+
+## Primary Content Areas
+
+The [SettingsExpander](xref:@ActiproUIRoot.Controls.SettingsExpander) control is defined by multiple content areas:
+
+- [Header](xref:@ActiproUIRoot.Controls.SettingsExpander.Header) - The primary label for the setting.
+- [Description](xref:@ActiproUIRoot.Controls.SettingsExpander.Description) - An additional description for the setting.
+- [HeaderIcon](xref:@ActiproUIRoot.Controls.SettingsExpander.HeaderIcon) - The primary icon for the setting.
+- `Content` (Editor) - The control used to edit the setting (e.g., `ToggleSwitch`, `ComboBox`).
+
+Each content area, including the icon, can optionally be set to any value supported by `ContentPresenter` and the layout will adjust to only show the areas where content is defined.
+
+> [!NOTE]
+> In some scenarios, content may not be automatically detected. For instance, if a `DataTemplate` is used to define content without setting the corresponding content property, the control will not know that content is available. Use the [IsHeaderVisible](xref:@ActiproUIRoot.Controls.SettingsExpander.IsHeaderVisible), [IsDescriptionVisible](xref:@ActiproUIRoot.Controls.SettingsExpander.IsDescriptionVisible), and [IsHeaderIconVisible](xref:@ActiproUIRoot.Controls.SettingsExpander.IsHeaderIconVisible) properties to manually control the visibility of each content area.
+
+> [!TIP]
+> The [SettingsExpander](xref:@ActiproUIRoot.Controls.SettingsExpander) control has all the same content areas as [SettingsCard](settings-card.md) *except* [ActionIcon](xref:@ActiproUIRoot.Controls.SettingsCard.ActionIcon) since the expansion indicator is displayed in this area.
+
+### Header and Description
+
+The [Header](xref:@ActiproUIRoot.Controls.SettingsExpander.Header) and [Description](xref:@ActiproUIRoot.Controls.SettingsExpander.Description) are typically `string` values describing the setting, and both are optional. The following demonstrates how to create a [SettingsExpander](xref:@ActiproUIRoot.Controls.SettingsExpander) with a header and description:
+
+@if (avalonia) {
+```xaml
+xmlns:actipro="http://schemas.actiprosoftware.com/avaloniaui"
+...
+
+```
+}
+@if (wpf) {
+```xaml
+xmlns:views="http://schemas.actiprosoftware.com/winfx/xaml/views"
+...
+
+```
+}
+
+Since both properties can be set to any content supported by `ContentPresenter`, either property can be configured with more complex content. The following example demonstrates how a hyperlink could be used as the [Description](xref:@ActiproUIRoot.Controls.SettingsExpander.Description) @if (avalonia) { (using the [HyperlinkTextBlock](../../shared/controls/hyperlink-textblock.md) control) }:
+
+@if (avalonia) {
+```xaml
+xmlns:actipro="http://schemas.actiprosoftware.com/avaloniaui"
+...
+
+
+
+
+
+
+ ...
+
+
+```
+}
+@if (wpf) {
+```xaml
+xmlns:views="http://schemas.actiprosoftware.com/winfx/xaml/views"
+xmlns:themes="http://schemas.actiprosoftware.com/winfx/xaml/themes"
+...
+
+
+
+
+
+ Click here for more
+
+
+
+
+ ...
+
+
+```
+}
+
+### Header Icon
+
+The [SettingsExpander](xref:@ActiproUIRoot.Controls.SettingsExpander) supports a [HeaderIcon](xref:@ActiproUIRoot.Controls.SettingsExpander.HeaderIcon). This icon is displayed on the left side of the card with a default size of `24x24`. This icon is typically related to the value(s) defined by the setting. For example, a speaker icon might be used for a setting related to output sound volume.
+
+The following sample demonstrates using a @if (avalonia) { `PathIcon` }@if (wpf) { `Path`} for defining the icon, but any content supported by `ContentPresenter` can be used to define the icon (like `Image` or @if (avalonia) { [DynamicImage](../../shared/controls/dynamic-image.md) }@if (wpf) { [DynamicImage](../../shared/windows-controls/dynamicimage.md) } controls):
+
+@if (avalonia) {
+```xaml
+xmlns:actipro="http://schemas.actiprosoftware.com/avaloniaui"
+...
+
+
+
+
+
+
+
+ ...
+
+
+```
+}
+@if (wpf) {
+```xaml
+xmlns:views="http://schemas.actiprosoftware.com/winfx/xaml/views"
+...
+
+
+
+
+
+
+
+
+
+ ...
+
+
+```
+}
+
+### Content (Editor)
+
+In additional to organizing child settings, a [SettingsExpander](xref:@ActiproUIRoot.Controls.SettingsExpander) may also use the `Content` property to present a control for an individual setting. Any content supported by `ContentPresenter` can be used, but a setting is typically defined by common controls like `CheckBox`, `ComboBox`, `Slider`, and `ToggleSwitch`.
+
+> [!IMPORTANT]
+> Unlike [SettingsCard](settings-card.md), the default property for [SettingsExpander](xref:@ActiproUIRoot.Controls.SettingsExpander) is the `Items` collection and *not* the `Content`. Make sure the `Content` property is explicitly used when defining the control.
+
+The following demonstrates defining a [SettingsExpander](xref:@ActiproUIRoot.Controls.SettingsExpander) that uses a `ToggleSwitch` control as the `Content`:
+
+@if (avalonia) {
+```xaml
+xmlns:actipro="http://schemas.actiprosoftware.com/avaloniaui"
+...
+
+
+
+
+
+
+
+
+
+```
+}
+@if (wpf) {
+```xaml
+xmlns:shared="http://schemas.actiprosoftware.com/winfx/xaml/shared"
+xmlns:views="http://schemas.actiprosoftware.com/winfx/xaml/views"
+...
+
+
+
+
+
+
+
+
+
+```
+}
+
+See the [SettingsCard](settings-card.md) topic for more examples on using different controls for settings.
+
+## Items (Child Settings)
+
+The [SettingsExpander](xref:@ActiproUIRoot.Controls.SettingsExpander) is an `ItemsControl` that supports defining one or more [SettingsCard](settings-card.md) instances as child settings that are only displayed when the control is expanded.
+
+The following sample demonstrates defining a [SettingsExpander](xref:@ActiproUIRoot.Controls.SettingsExpander) with multiple child settings and sets the [IsExpanded](xref:@ActiproUIRoot.Controls.SettingsExpander.IsExpanded) property to `true` so the child settings are visible by default:
+
+@if (avalonia) {
+```xaml
+xmlns:actipro="http://schemas.actiprosoftware.com/avaloniaui"
+...
+
+
+
+ ...
+
+
+
+
+
+
+
+```
+}
+@if (wpf) {
+```xaml
+xmlns:shared="http://schemas.actiprosoftware.com/winfx/xaml/shared"
+xmlns:views="http://schemas.actiprosoftware.com/winfx/xaml/views"
+...
+
+
+
+ ...
+
+
+
+
+
+
+
+```
+}
+
+See the [SettingsCard](settings-card.md) topic for more details.
+
+### Indentation
+
+By default, child settings of a [SettingsExpander](xref:@ActiproUIRoot.Controls.SettingsExpander) are indented by setting both [IsHeaderIconVisible](xref:@ActiproUIRoot.Controls.SettingsCard.IsHeaderIconVisible) and [IsActionIconVisible](xref:@ActiproUIRoot.Controls.SettingsCard.IsActionIconVisible) to `true`. This reserves space in the layout for the [HeaderIcon](xref:@ActiproUIRoot.Controls.SettingsCard.HeaderIcon) and [ActionIcon](xref:@ActiproUIRoot.Controls.SettingsCard.ActionIcon) even if those icons are not defined.
+
+To change this behavior, modify the @if (avalonia) { `ItemContainerTheme` }@if (wpf) { `ItemContainerStyle` } property as desired, like demonstrated in the following sample:
+
+@if (avalonia) {
+```xaml
+xmlns:actipro="http://schemas.actiprosoftware.com/avaloniaui"
+...
+
+
+
+
+
+
+
+
+
+
+
+
+```
+}
+@if (wpf) {
+```xaml
+xmlns:shared="http://schemas.actiprosoftware.com/winfx/xaml/shared"
+xmlns:themes="http://schemas.actiprosoftware.com/winfx/xaml/themes"
+xmlns:views="http://schemas.actiprosoftware.com/winfx/xaml/views"
+...
+
+
+
+
+
+
+
+
+
+```
+}
+
+## Items Header and Footer
+
+
+
+*SettingsExpander showing ItemsHeader and ItemsFooter*
+
+[SettingsExpander](xref:@ActiproUIRoot.Controls.SettingsExpander) allows for additional content to be displayed above and below the child settings. Any content supported by `ContentPresenter` can be defined in the [ItemsHeader](xref:@ActiproUIRoot.Controls.SettingsExpander.ItemsHeader) or [ItemsFooter](xref:@ActiproUIRoot.Controls.SettingsExpander.ItemsFooter).
+
+The following sample demonstrates adding an informational message in the [ItemsHeader](xref:@ActiproUIRoot.Controls.SettingsExpander.ItemsHeader):
+
+@if (avalonia) {
+```xaml
+xmlns:actipro="http://schemas.actiprosoftware.com/avaloniaui"
+...
+
+
+
+ Any content can be displayed above the child settings
+
+
+
+
+
+```
+}
+@if (wpf) {
+```xaml
+xmlns:views="http://schemas.actiprosoftware.com/winfx/xaml/views"
+...
+
+
+
+ Any content can be displayed above the child settings
+
+
+
+
+
+```
+}
+
+> [!NOTE]
+> In some scenarios, content may not be automatically detected. For instance, if a `DataTemplate` is used to define content without setting the corresponding content property, the control will not know that content is available. Use the [IsItemsHeaderVisible](xref:@ActiproUIRoot.Controls.SettingsExpander.IsItemsHeaderVisible) and [IsItemsFooterVisible](xref:@ActiproUIRoot.Controls.SettingsExpander.IsItemsHeaderVisible) properties to manually control the visibility of each content area.
+
+## Wrapping
+
+
+
+*SettingsExpander displayed in the unwrapped and wrapped states*
+
+If enough space is available, the `Content` (Editor) of the setting is displayed to the right of the [Header](xref:@ActiproUIRoot.Controls.SettingsExpander.Header) and/or [Description](xref:@ActiproUIRoot.Controls.SettingsExpander.Description) with default right alignment. When the width of the expander is less than or equal to the [WrapThreshold](xref:@ActiproUIRoot.Controls.SettingsExpander.WrapThreshold), the `Content` will be wrapped to the bottom of the expander with default left alignment.
+
+Use the [IsWrapped](xref:@ActiproUIRoot.Controls.SettingsExpander.IsWrapped) property to manually control wrap behavior. When set to `null` (the default), wrapping is based on the [WrapThreshold](xref:@ActiproUIRoot.Controls.SettingsExpander.WrapThreshold). Set the property to `true` to force wrapping at any width, and `false` to prevent wrapping at any width.
+
+> [!NOTE]
+> Wrapping is only applicable if [Header](xref:@ActiproUIRoot.Controls.SettingsExpander.Header) and/or [Description](xref:@ActiproUIRoot.Controls.SettingsExpander.Description) are defined. Otherwise, the `Content` (Editor) will always be aligned left, by default.
+
+## Animation
+
+Fluent animation in the control is enabled by default but can be disabled by setting the [IsAnimationEnabled](xref:@ActiproUIRoot.Controls.SettingsExpander.IsAnimationEnabled) property to `false`.
+
+@if (avalonia) {
+
+## Pseudo-classes
+
+The following pseudo-classes are available and can be used when styling the control:
+
+| Class | Description |
+| ----- | ----- |
+| `:expanded` | Added when the control is expanded. |
+| `:wrapped` | Added when the `Content` (Editor) has wrapped due to the available width being less than or equal to the [WrapThreshold](xref:@ActiproUIRoot.Controls.SettingsExpander.WrapThreshold) or when [IsWrapped](xref:@ActiproUIRoot.Controls.SettingsExpander.IsWrapped) is set to `true`. |
+}
+
+@if (avalonia) {
+## Theme Resources
+
+The following theme resources are available for customizing the appearance of the control:
+
+| Theme Resource | Description |
+| ----- | ----- |
+| [Container1BackgroundBrush](xref:@ActiproUIRoot.Themes.ThemeResourceKind.Container1BackgroundBrush) | The default `Background`. |
+| [Container2BackgroundBrush](xref:@ActiproUIRoot.Themes.ThemeResourceKind.Container1BackgroundBrush) | The default `Background` of a clickable card when the mouse is over the control. |
+| [Container3BackgroundBrush](xref:@ActiproUIRoot.Themes.ThemeResourceKind.Container1BackgroundBrush) | The default `Background` of a clickable card when the control is pressed. |
+| [Container1BorderBrush](xref:@ActiproUIRoot.Themes.ThemeResourceKind.Container1BorderBrush) | The default `BorderBrush`. |
+| [Container2BorderBrush](xref:@ActiproUIRoot.Themes.ThemeResourceKind.Container1BorderBrush) | The default `BorderBrush` of a clickable card when the mouse is over the control. |
+| [Container3BorderBrush](xref:@ActiproUIRoot.Themes.ThemeResourceKind.Container1BorderBrush) | The default `BorderBrush` of a clickable card when the control is pressed. |
+| [SettingsCardBorderThickness](xref:@ActiproUIRoot.Themes.ThemeResourceKind.SettingsCardBorderThickness) | The default `BorderThickness`. |
+| [SettingsCardCornerRadius](xref:@ActiproUIRoot.Themes.ThemeResourceKind.SettingsCardCornerRadius) | The default `CornerRadius`. |
+| [DefaultFontSizeExtraSmall](xref:@ActiproUIRoot.Themes.ThemeResourceKind.DefaultFontSizeExtraSmall) | The default `FontSize` of the [Description](xref:@ActiproUIRoot.Controls.SettingsExpander.Description) content.
+| [DefaultForegroundBrush](xref:@ActiproUIRoot.Themes.ThemeResourceKind.DefaultForegroundBrush) | The default `Foreground`. |
+| [DefaultForegroundBrushTertiary](xref:@ActiproUIRoot.Themes.ThemeResourceKind.DefaultForegroundBrushTertiary) | The default `Foreground` of the [Description](xref:@ActiproUIRoot.Controls.SettingsExpander.Description) content. |
+| [DefaultForegroundBrushDisabled](xref:@ActiproUIRoot.Themes.ThemeResourceKind.DefaultForegroundBrushDisabled) | The default `Foreground` when the control is disabled. |
+| [SettingsCardPadding](xref:@ActiproUIRoot.Themes.ThemeResourceKind.SettingsCardPadding) | The default `Padding`. |
+| [SettingsCardHeaderIconLength](xref:@ActiproUIRoot.Themes.ThemeResourceKind.SettingsCardHeaderIconLength) | The default `Width` and `Height` of the [HeaderIcon](xref:@ActiproUIRoot.Controls.SettingsExpander.HeaderIcon). |
+| [SettingsCardWrapThreshold](xref:@ActiproUIRoot.Themes.ThemeResourceKind.SettingsCardWrapThreshold) | The default [WrapThreshold](xref:@ActiproUIRoot.Controls.SettingsExpander.WrapThreshold). |
+
+See the [Theme Assets](../../themes/theme-assets.md) topic for more details on working with theme resources.
+}
+@if (wpf) {
+## Theme Assets
+
+See the [Theme Reusable Assets](../../themes/reusable-assets.md) topic for more details on using and customizing theme assets. The following reusable assets are used by [SettingsExpander](xref:@ActiproUIRoot.Controls.Views.SettingsExpander):
+
+| Asset Resource Key | Description |
+|-----|-----|
+| [ContainerBackgroundLowestBrushKey](xref:@ActiproUIRoot.Themes.AssetResourceKeys.ContainerBackgroundLowestBrushKey) | The default `Background`. |
+| [ContainerBackgroundLowerBrushKey](xref:@ActiproUIRoot.Themes.AssetResourceKeys.ContainerBackgroundLowerBrushKey) | The default `Background` when the mouse is over the control. |
+| [ContainerBackgroundLowBrushKey](xref:@ActiproUIRoot.Themes.AssetResourceKeys.ContainerBackgroundLowBrushKey) | The default `Background` when the control is pressed. |
+| [ContainerBorderLowerBrushKey](xref:@ActiproUIRoot.Themes.AssetResourceKeys.ContainerBorderLowerBrushKey) | The default `BorderBrush`. |
+| [ContainerBorderLowBrushKey](xref:@ActiproUIRoot.Themes.AssetResourceKeys.ContainerBorderLowBrushKey) | The default `BorderBrush` of a clickable card when the mouse is over the control. |
+| [ContainerBorderMidLowBrushKey](xref:@ActiproUIRoot.Themes.AssetResourceKeys.ContainerBorderMidLowBrushKey) | The default `BorderBrush` of a clickable card when the control is pressed. |
+| [SettingsCardBorderNormalThicknessKey](xref:@ActiproUIRoot.Themes.AssetResourceKeys.SettingsCardBorderNormalThicknessKey) | The default `BorderThickness`. |
+| [SettingsCardBorderNormalCornerRadiusKey](xref:@ActiproUIRoot.Themes.AssetResourceKeys.SettingsCardBorderNormalCornerRadiusKey) | The default [CornerRadius](xref:@ActiproUIRoot.Controls.Views.SettingsExpander.CornerRadius).
+| [SmallFontSizeDoubleKey](xref:@ActiproUIRoot.Themes.AssetResourceKeys.SmallFontSizeDoubleKey) | The default `FontSize` of the [Description](xref:@ActiproUIRoot.Controls.Views.SettingsExpander.Description) content.
+| [ContainerForegroundLowestNormalBrushKey](xref:@ActiproUIRoot.Themes.AssetResourceKeys.ContainerForegroundLowestNormalBrushKey) | The default `Foreground`. |
+| [ContainerForegroundLowestSubtleBrushKey](xref:@ActiproUIRoot.Themes.AssetResourceKeys.ContainerForegroundLowestSubtleBrushKey) | The default `Foreground` of the [Description](xref:@ActiproUIRoot.Controls.Views.SettingsExpander.Description) content. |
+| [ContainerForegroundLowestDisabledBrushKey](xref:@ActiproUIRoot.Themes.AssetResourceKeys.ContainerForegroundLowestDisabledBrushKey) | The default `Foreground` when the control is disabled. |
+| [SettingsCardPaddingNormalThicknessKey](xref:@ActiproUIRoot.Themes.AssetResourceKeys.SettingsCardPaddingNormalThicknessKey) | The default `Padding`.
+| [SettingsCardHeaderIconLengthDoubleKey](xref:@ActiproUIRoot.Themes.AssetResourceKeys.SettingsCardHeaderIconLengthDoubleKey) | The default `Width` and `Height` of the [HeaderIcon](xref:@ActiproUIRoot.Controls.Views.SettingsExpander.HeaderIcon).
+| [SettingsCardWrapThresholdDoubleKey](xref:@ActiproUIRoot.Themes.AssetResourceKeys.SettingsCardWrapThresholdDoubleKey) | The default [WrapThreshold](xref:@ActiproUIRoot.Controls.Views.SettingsExpander.WrapThreshold).
+}
\ No newline at end of file
diff --git a/Documentation/topics/fundamentals/controls/settings-group.md b/Documentation/topics/fundamentals/controls/settings-group.md
new file mode 100644
index 0000000..d5fb089
--- /dev/null
+++ b/Documentation/topics/fundamentals/controls/settings-group.md
@@ -0,0 +1,248 @@
+---
+title: "Settings Group"
+page-title: "Settings Group - Fundamentals Controls"
+order: 22
+---
+# SettingsGroup
+
+The [SettingsCard](settings-card.md), [SettingsExpander](settings-expander.md), and [SettingsGroup](xref:@ActiproUIRoot.Controls.SettingsGroup) controls are used together to organize and present configurable settings.
+
+
+
+*SettingsCard and SettingsExpander displayed within a SettingsGroup*
+
+A [SettingsGroup](xref:@ActiproUIRoot.Controls.SettingsGroup) is used to organize one or more [SettingsCard](settings-card.md) or [SettingsExpander](settings-expander.md) instances under an optional header.
+
+
+
+*SettingsGroup with optional header and description displaying a SettingsCard and SettingsExpander as child settings*
+
+## Primary Content Areas
+
+The [SettingsGroup](xref:@ActiproUIRoot.Controls.SettingsGroup) control is defined by multiple content areas:
+
+- [Header](xref:@ActiproUIRoot.Controls.SettingsGroup.Header) - The primary label for the group.
+- [Description](xref:@ActiproUIRoot.Controls.SettingsGroup.Description) - An additional description for the group.
+
+Each content area can optionally be set to any value supported by `ContentPresenter` and the layout will adjust to only show the areas where content is defined.
+
+> [!NOTE]
+> In some scenarios, content may not be automatically detected. For instance, if a `DataTemplate` is used to define content without setting the corresponding content property, the control will not know that content is available. Use the [IsHeaderVisible](xref:@ActiproUIRoot.Controls.SettingsGroup.IsHeaderVisible) and [IsDescriptionVisible](xref:@ActiproUIRoot.Controls.SettingsGroup.IsDescriptionVisible) properties to manually control the visibility of each content area.
+
+### Header and Description
+
+The [Header](xref:@ActiproUIRoot.Controls.SettingsGroup.Header) and [Description](xref:@ActiproUIRoot.Controls.SettingsGroup.Description) are typically `string` values describing the group, and both are optional. The following demonstrates how to create a [SettingsGroup](xref:@ActiproUIRoot.Controls.SettingsGroup) with a header and description:
+
+@if (avalonia) {
+```xaml
+xmlns:actipro="http://schemas.actiprosoftware.com/avaloniaui"
+...
+
+
+
+
+
+```
+}
+@if (wpf) {
+```xaml
+xmlns:views="http://schemas.actiprosoftware.com/winfx/xaml/views"
+...
+
+
+
+
+
+```
+}
+
+## Items (Child Settings)
+
+The [SettingsGroup](xref:@ActiproUIRoot.Controls.SettingsGroup) is an `ItemsControl` that supports defining one or more [SettingsCard](settings-card.md) or [SettingsExpander](settings-expander.md) instances as child settings that displayed within the group.
+
+The following sample demonstrates defining a [SettingsGroup](xref:@ActiproUIRoot.Controls.SettingsGroup) with multiple child settings:
+
+@if (avalonia) {
+```xaml
+xmlns:actipro="http://schemas.actiprosoftware.com/avaloniaui"
+...
+
+
+
+ ...
+
+
+
+
+
+
+
+
+
+
+
+```
+}
+@if (wpf) {
+```xaml
+xmlns:shared="http://schemas.actiprosoftware.com/winfx/xaml/shared"
+xmlns:views="http://schemas.actiprosoftware.com/winfx/xaml/views"
+...
+
+
+
+ ...
+
+
+
+
+
+
+
+```
+}
+
+See the [SettingsCard](settings-card.md) and [SettingsExpander](settings-expander.md) topics for more details.
+
+### Spacing
+
+Each [SettingsCard](settings-card.md) or [SettingsExpander](settings-expander.md) within a group is automatically spaced out to improve visibility. Use the [Spacing](xref:@ActiproUIRoot.Controls.SettingsGroup.Spacing) property to change the amount of spacing between each item.
+
+## Items Header and Footer
+
+
+
+*SettingsGroup showing ItemsHeader and ItemsFooter*
+
+[SettingsGroup](xref:@ActiproUIRoot.Controls.SettingsGroup) allows for additional content to be displayed above and below the child settings. Any content supported by `ContentPresenter` can be defined in the [ItemsHeader](xref:@ActiproUIRoot.Controls.SettingsGroup.ItemsHeader) or [ItemsFooter](xref:@ActiproUIRoot.Controls.SettingsGroup.ItemsFooter).
+
+The following sample demonstrates adding an informational message in the [ItemsHeader](xref:@ActiproUIRoot.Controls.SettingsGroup.ItemsHeader):
+
+@if (avalonia) {
+```xaml
+xmlns:actipro="http://schemas.actiprosoftware.com/avaloniaui"
+...
+
+
+
+
+ Any content can be displayed in the header
+
+
+
+
+
+
+```
+}
+@if (wpf) {
+```xaml
+xmlns:views="http://schemas.actiprosoftware.com/winfx/xaml/views"
+...
+
+
+
+
+
+ Any content can be displayed above the child settings
+
+
+
+
+
+
+```
+}
+
+> [!NOTE]
+> In some scenarios, content may not be automatically detected. For instance, if a `DataTemplate` is used to define content without setting the corresponding content property, the control will not know that content is available. Use the [IsItemsHeaderVisible](xref:@ActiproUIRoot.Controls.SettingsGroup.IsItemsHeaderVisible) and [IsItemsFooterVisible](xref:@ActiproUIRoot.Controls.SettingsGroup.IsItemsHeaderVisible) properties to manually control the visibility of each content area.
+
+## StackPanel and Margin
+
+The [SettingsGroup](xref:@ActiproUIRoot.Controls.SettingsGroup) is designed to be stacked vertically within a `StackPanel` with minimal effort. As part of this design, each [SettingsGroup](xref:@ActiproUIRoot.Controls.SettingsGroup) has a default `Margin` applied which includes spacing on the bottom. This will consistently separate one group from the group below it but does introduce extra spacing below the last item in a `StackPanel`. For many common layouts, this extra spacing may be inconsequential. If necessary, explicitly set the `Margin` of the last group to `0` to avoid the spacing.
+
+The following sample demonstrates a common layout for defining multiple groups:
+
+@if (avalonia) {
+```xaml
+xmlns:actipro="http://schemas.actiprosoftware.com/avaloniaui"
+...
+
+
+
+ ...
+
+
+
+ ...
+
+
+
+ ...
+
+
+
+```
+}
+@if (wpf) {
+```xaml
+xmlns:views="http://schemas.actiprosoftware.com/winfx/xaml/views"
+...
+
+
+
+ ...
+
+
+
+ ...
+
+
+
+ ...
+
+
+
+```
+}
+
+
+@if (avalonia) {
+## Theme Resources
+
+The following theme resources are available for customizing the appearance of the control:
+
+| Theme Resource | Description |
+| ----- | ----- |
+| [HeadingFontFamily](xref:@ActiproUIRoot.Themes.ThemeResourceKind.HeadingFontFamily) | The default `FontFamily` for the [Header](xref:@ActiproUIRoot.Controls.SettingsGroup.Header) content.
+| [HeadingFontSizeExtraSmall](xref:@ActiproUIRoot.Themes.ThemeResourceKind.HeadingFontSizeExtraSmall) | The default `FontSize` for the [Header](xref:@ActiproUIRoot.Controls.SettingsGroup.Header) content.
+| [DefaultFontSizeSmall](xref:@ActiproUIRoot.Themes.ThemeResourceKind.DefaultFontSizeSmall) | The default `FontSize` for the [Description](xref:@ActiproUIRoot.Controls.SettingsGroup.Description) content.
+| [HeadingFontWeightExtraSmall](xref:@ActiproUIRoot.Themes.ThemeResourceKind.HeadingFontWeightExtraSmall) | The default `FontWeight` for the [Header](xref:@ActiproUIRoot.Controls.SettingsGroup.Header) content.
+| [DefaultForegroundBrush](xref:@ActiproUIRoot.Themes.ThemeResourceKind.DefaultForegroundBrush) | The default `Foreground`. |
+| [DefaultForegroundBrushTertiary](xref:@ActiproUIRoot.Themes.ThemeResourceKind.DefaultForegroundBrushTertiary) | The default `Foreground` of the [Description](xref:@ActiproUIRoot.Controls.SettingsGroup.Description) content. |
+| [DefaultForegroundBrushDisabled](xref:@ActiproUIRoot.Themes.ThemeResourceKind.DefaultForegroundBrushDisabled) | The default `Foreground` when the control is disabled. |
+| [SettingsGroupMargin](xref:@ActiproUIRoot.Themes.ThemeResourceKind.SettingsGroupMargin) | The default `Margin`. |
+| [SettingsGroupPadding](xref:@ActiproUIRoot.Themes.ThemeResourceKind.SettingsGroupPadding) | The default `Padding`. |
+| [SettingsGroupSpacing](xref:@ActiproUIRoot.Themes.ThemeResourceKind.SettingsGroupSpacing) | The default [Spacing](xref:@ActiproUIRoot.Controls.SettingsGroup.Spacing). |
+
+See the [Theme Assets](../../themes/theme-assets.md) topic for more details on working with theme resources.
+}
+@if (wpf) {
+## Theme Assets
+
+See the [Theme Reusable Assets](../../themes/reusable-assets.md) topic for more details on using and customizing theme assets. The following reusable assets are used by [SettingsGroup](xref:@ActiproUIRoot.Controls.Views.SettingsGroup):
+
+| Asset Resource Key | Description |
+|-----|-----|
+| [ContainerForegroundLowestNormalBrushKey](xref:@ActiproUIRoot.Themes.AssetResourceKeys.ContainerForegroundLowestNormalBrushKey) | The default `Foreground`. |
+| [ContainerForegroundLowestSubtleBrushKey](xref:@ActiproUIRoot.Themes.AssetResourceKeys.ContainerForegroundLowestSubtleBrushKey) | The default `Foreground` of the [Description](xref:@ActiproUIRoot.Controls.Views.SettingsGroup.Description) content. |
+| [ContainerForegroundLowestDisabledBrushKey](xref:@ActiproUIRoot.Themes.AssetResourceKeys.ContainerForegroundLowestDisabledBrushKey) | The default `Foreground` when the control is disabled. |
+| [SettingsGroupMarginNormalThicknessKey](xref:@ActiproUIRoot.Themes.AssetResourceKeys.SettingsGroupMarginNormalThicknessKey) | The default `Margin`. |
+| [SettingsGroupPaddingNormalThicknessKey](xref:@ActiproUIRoot.Themes.AssetResourceKeys.SettingsGroupPaddingNormalThicknessKey) | The default `Padding`. |
+| [SettingsGroupSpacingDoubleKey](xref:@ActiproUIRoot.Themes.AssetResourceKeys.SettingsGroupSpacingDoubleKey) | The default [Spacing](xref:@ActiproUIRoot.Controls.Views.SettingsGroup.Spacing). |
+}
\ No newline at end of file
diff --git a/Documentation/topics/fundamentals/images/card-padding.png b/Documentation/topics/fundamentals/images/card-padding.png
new file mode 100644
index 0000000..f0131f9
Binary files /dev/null and b/Documentation/topics/fundamentals/images/card-padding.png differ
diff --git a/Documentation/topics/fundamentals/images/card-themes.png b/Documentation/topics/fundamentals/images/card-themes.png
new file mode 100644
index 0000000..693553c
Binary files /dev/null and b/Documentation/topics/fundamentals/images/card-themes.png differ
diff --git a/Documentation/topics/fundamentals/images/card.png b/Documentation/topics/fundamentals/images/card.png
new file mode 100644
index 0000000..8727b3e
Binary files /dev/null and b/Documentation/topics/fundamentals/images/card.png differ
diff --git a/Documentation/topics/fundamentals/images/circular-progressbar-indeterminate.png b/Documentation/topics/fundamentals/images/circular-progressbar-indeterminate.png
new file mode 100644
index 0000000..3babf4c
Binary files /dev/null and b/Documentation/topics/fundamentals/images/circular-progressbar-indeterminate.png differ
diff --git a/Documentation/topics/fundamentals/images/circular-progressbar.png b/Documentation/topics/fundamentals/images/circular-progressbar.png
new file mode 100644
index 0000000..d2cc25d
Binary files /dev/null and b/Documentation/topics/fundamentals/images/circular-progressbar.png differ
diff --git a/Documentation/topics/fundamentals/images/info-bar-action.png b/Documentation/topics/fundamentals/images/info-bar-action.png
new file mode 100644
index 0000000..8d248ce
Binary files /dev/null and b/Documentation/topics/fundamentals/images/info-bar-action.png differ
diff --git a/Documentation/topics/fundamentals/images/info-bar-content.png b/Documentation/topics/fundamentals/images/info-bar-content.png
new file mode 100644
index 0000000..428cf85
Binary files /dev/null and b/Documentation/topics/fundamentals/images/info-bar-content.png differ
diff --git a/Documentation/topics/fundamentals/images/info-bar-severity.png b/Documentation/topics/fundamentals/images/info-bar-severity.png
new file mode 100644
index 0000000..77066ce
Binary files /dev/null and b/Documentation/topics/fundamentals/images/info-bar-severity.png differ
diff --git a/Documentation/topics/fundamentals/images/info-bar-wrapping.png b/Documentation/topics/fundamentals/images/info-bar-wrapping.png
new file mode 100644
index 0000000..c2fbfde
Binary files /dev/null and b/Documentation/topics/fundamentals/images/info-bar-wrapping.png differ
diff --git a/Documentation/topics/fundamentals/images/info-bar.png b/Documentation/topics/fundamentals/images/info-bar.png
new file mode 100644
index 0000000..1a9036c
Binary files /dev/null and b/Documentation/topics/fundamentals/images/info-bar.png differ
diff --git a/Documentation/topics/fundamentals/images/overview.png b/Documentation/topics/fundamentals/images/overview.png
index 03a40a6..d5305cc 100644
Binary files a/Documentation/topics/fundamentals/images/overview.png and b/Documentation/topics/fundamentals/images/overview.png differ
diff --git a/Documentation/topics/fundamentals/images/segmented-bar-custom.png b/Documentation/topics/fundamentals/images/segmented-bar-custom.png
new file mode 100644
index 0000000..c38dda8
Binary files /dev/null and b/Documentation/topics/fundamentals/images/segmented-bar-custom.png differ
diff --git a/Documentation/topics/fundamentals/images/segmented-bar-overflow.png b/Documentation/topics/fundamentals/images/segmented-bar-overflow.png
new file mode 100644
index 0000000..8a75588
Binary files /dev/null and b/Documentation/topics/fundamentals/images/segmented-bar-overflow.png differ
diff --git a/Documentation/topics/fundamentals/images/segmented-bar-themes.png b/Documentation/topics/fundamentals/images/segmented-bar-themes.png
new file mode 100644
index 0000000..f44fdea
Binary files /dev/null and b/Documentation/topics/fundamentals/images/segmented-bar-themes.png differ
diff --git a/Documentation/topics/fundamentals/images/segmented-bar.png b/Documentation/topics/fundamentals/images/segmented-bar.png
new file mode 100644
index 0000000..e09965b
Binary files /dev/null and b/Documentation/topics/fundamentals/images/segmented-bar.png differ
diff --git a/Documentation/topics/fundamentals/images/settings-card-wrapping.png b/Documentation/topics/fundamentals/images/settings-card-wrapping.png
new file mode 100644
index 0000000..0a4c115
Binary files /dev/null and b/Documentation/topics/fundamentals/images/settings-card-wrapping.png differ
diff --git a/Documentation/topics/fundamentals/images/settings-card.png b/Documentation/topics/fundamentals/images/settings-card.png
new file mode 100644
index 0000000..0363788
Binary files /dev/null and b/Documentation/topics/fundamentals/images/settings-card.png differ
diff --git a/Documentation/topics/fundamentals/images/settings-examples.png b/Documentation/topics/fundamentals/images/settings-examples.png
new file mode 100644
index 0000000..be1438e
Binary files /dev/null and b/Documentation/topics/fundamentals/images/settings-examples.png differ
diff --git a/Documentation/topics/fundamentals/images/settings-expander-header-footer.png b/Documentation/topics/fundamentals/images/settings-expander-header-footer.png
new file mode 100644
index 0000000..d84a185
Binary files /dev/null and b/Documentation/topics/fundamentals/images/settings-expander-header-footer.png differ
diff --git a/Documentation/topics/fundamentals/images/settings-expander-wrapping.png b/Documentation/topics/fundamentals/images/settings-expander-wrapping.png
new file mode 100644
index 0000000..ad06b20
Binary files /dev/null and b/Documentation/topics/fundamentals/images/settings-expander-wrapping.png differ
diff --git a/Documentation/topics/fundamentals/images/settings-expander.png b/Documentation/topics/fundamentals/images/settings-expander.png
new file mode 100644
index 0000000..3ffaa68
Binary files /dev/null and b/Documentation/topics/fundamentals/images/settings-expander.png differ
diff --git a/Documentation/topics/fundamentals/images/settings-group-header-footer.png b/Documentation/topics/fundamentals/images/settings-group-header-footer.png
new file mode 100644
index 0000000..ed34414
Binary files /dev/null and b/Documentation/topics/fundamentals/images/settings-group-header-footer.png differ
diff --git a/Documentation/topics/fundamentals/images/settings-group.png b/Documentation/topics/fundamentals/images/settings-group.png
new file mode 100644
index 0000000..e5a037e
Binary files /dev/null and b/Documentation/topics/fundamentals/images/settings-group.png differ
diff --git a/Documentation/topics/fundamentals/images/welcome.png b/Documentation/topics/fundamentals/images/welcome.png
index 74d2e73..2f959c8 100644
Binary files a/Documentation/topics/fundamentals/images/welcome.png and b/Documentation/topics/fundamentals/images/welcome.png differ
diff --git a/Documentation/topics/fundamentals/index.md b/Documentation/topics/fundamentals/index.md
index cb2a3cd..4bb0583 100644
--- a/Documentation/topics/fundamentals/index.md
+++ b/Documentation/topics/fundamentals/index.md
@@ -18,12 +18,17 @@ Actipro Fundamentals is a library that contains professionally-developed control
### General Controls
-- An [Avatar](controls/avatar.md) to represent people or objects.
-- An [Avatar Group](controls/avatar-group.md) renders multiple [Avatar](controls/avatar.md) controls.
-- A [Badge](controls/badge.md) for displaying contextual information for other elements or can be used stand-alone.
-- A [RingSpinner](controls/progress-spinners.md) control that is a circular busy indicator.
-- A [User Prompt](user-prompt/index.md) for displaying **MessageBox** and **Task Dialog** style prompts.
+- [Avatar](controls/avatar.md) represents people or objects.
+- [AvatarGroup](controls/avatar-group.md) renders multiple [Avatar](controls/avatar.md) controls.
+- [Badge](controls/badge.md) displays contextual information for other elements or can be used stand-alone.
+- [Card](controls/card.md) displays visually grouped information for a single subject.
+- [CircularProgressBar](controls/circular-progressbar.md) displays a ranged progress value using fluent animations. It is similar to a native linear `ProgressBar`, except that it renders the progress in a ring shape.
+- [InfoBar](controls/info-bar.md) displays essential information to a user without disrupting the user flow.
+- [RingSpinner](controls/progress-spinners.md) renders a circular busy indicator.
+- [SegmentedBar](controls/segmented-bar.md) allows a user to select a single item with support for fluent animations when changing selection.
+- [SettingsCard](controls/settings-card.md), [SettingsExpander](controls/settings-expander.md), and [Settings Group](controls/settings-group.md) controls are used together to organize and present configurable settings.
+- [User Prompt](user-prompt/index.md) displays **MessageBox** and **Task Dialog** style prompts.
### Panels
-- A [MultiColumnPanel](xref:@ActiproUIRoot.Controls.MultiColumnPanel) that can arrange child elements in multiple columns, collapsing columns down as available space decreases.
\ No newline at end of file
+- [MultiColumnPanel](xref:@ActiproUIRoot.Controls.MultiColumnPanel) arranges child elements in multiple columns, collapsing columns down as available space decreases.
\ No newline at end of file
diff --git a/Documentation/topics/fundamentals/user-prompt/appearance.md b/Documentation/topics/fundamentals/user-prompt/appearance.md
index 08c38d3..d73bd2e 100644
--- a/Documentation/topics/fundamentals/user-prompt/appearance.md
+++ b/Documentation/topics/fundamentals/user-prompt/appearance.md
@@ -18,14 +18,14 @@ When either the [HeaderBackground](xref:@ActiproUIRoot.Controls.UserPromptContro
## Images
@if (avalonia) {
-Any `IImage` can be set to the [StatusImage](xref:@ActiproUIRoot.Controls.UserPromptControl.StatusImage) or [FooterImage](xref:@ActiproUIRoot.Controls.UserPromptControl.FooterImage) properties for a custom look. When using the [builder pattern](builder-pattern.md), set the `IImage` using [WithStatusImage](xref:@ActiproUIRoot.Controls.UserPromptBuilder.WithStatusImage*) or [WithFooterImage](xref:@ActiproUIRoot.Controls.UserPromptBuilder.WithFooterImage*).
+Any `IImage` can be set to the [StatusImageSource](xref:@ActiproUIRoot.Controls.UserPromptControl.StatusImageSource) or [FooterImageSource](xref:@ActiproUIRoot.Controls.UserPromptControl.FooterImageSource) properties for a custom look. When using the [builder pattern](builder-pattern.md), set the `IImage` using [WithStatusImage](xref:@ActiproUIRoot.Controls.UserPromptBuilder.WithStatusImage*) or [WithFooterImage](xref:@ActiproUIRoot.Controls.UserPromptBuilder.WithFooterImage*).
-The images used by [MessageBoxImage](xref:@ActiproUIRoot.Controls.MessageBoxImage) can also be customized by assigning a custom [ImageProvider](xref:@ActiproUIRoot.Media.ImageProvider) to the [ImageProvider](xref:@ActiproUIRoot.Media.ImageProvider).[Default](xref:@ActiproUIRoot.Media.ImageProvider.Default) property. Each value for [MessageBoxImage](xref:@ActiproUIRoot.Controls.MessageBoxImage) corresponds to a key of the same name defined by [SharedImageKeys](xref:@ActiproUIRoot.Media.SharedImageKeys). For example, the image [MessageBoxImage](xref:@ActiproUIRoot.Controls.MessageBoxImage).[Warning](xref:@ActiproUIRoot.Controls.MessageBoxImage.Warning) corresponds to the key [SharedImageKeys](xref:@ActiproUIRoot.Media.SharedImageKeys).[Warning](xref:@ActiproUIRoot.Media.SharedImageKeys.Warning). A custom class which derives from [ImageProvider](xref:@ActiproUIRoot.Media.ImageProvider) can override the [ImageProvider](xref:@ActiproUIRoot.Media.ImageProvider).[GetImageSource](xref:@ActiproUIRoot.Media.ImageProvider.GetImageSource*) method to return a custom `IImage` for one or more of those keys.
+The images used by [MessageBoxImage](xref:@ActiproUIRoot.Controls.MessageBoxImage) can also be customized by assigning a custom [ImageProvider](xref:@ActiproUIRoot.Media.ImageProvider) to the [ImageProvider](xref:@ActiproUIRoot.Media.ImageProvider).[Default](xref:@ActiproUIRoot.Media.ImageProvider.Default) property. Each value for [MessageBoxImage](xref:@ActiproUIRoot.Controls.MessageBoxImage) corresponds to a key of the same name defined by [SharedImageSourceKeys](xref:@ActiproUIRoot.Media.SharedImageSourceKeys). For example, the image [MessageBoxImage](xref:@ActiproUIRoot.Controls.MessageBoxImage).[Warning](xref:@ActiproUIRoot.Controls.MessageBoxImage.Warning) corresponds to the key [SharedImageSourceKeys](xref:@ActiproUIRoot.Media.SharedImageSourceKeys).[Warning](xref:@ActiproUIRoot.Media.SharedImageSourceKeys.Warning). A custom class which derives from [ImageProvider](xref:@ActiproUIRoot.Media.ImageProvider) can override the [ImageProvider](xref:@ActiproUIRoot.Media.ImageProvider).[GetImageSource](xref:@ActiproUIRoot.Media.ImageProvider.GetImageSource*) method to return a custom `IImage` for one or more of those keys.
}
@if (wpf) {
Any `ImageSource` can be set to the [StatusImageSource](xref:@ActiproUIRoot.Controls.UserPromptControl.StatusImageSource) or [FooterImageSource](xref:@ActiproUIRoot.Controls.UserPromptControl.FooterImageSource) properties for a custom look. When using the [builder pattern](builder-pattern.md), set the `ImageSource` using [WithStatusImage](xref:@ActiproUIRoot.Controls.UserPromptBuilder.WithStatusImage*) or [WithFooterImage](xref:@ActiproUIRoot.Controls.UserPromptBuilder.WithFooterImage*).
-The images used by [UserPromptStandardImage](xref:@ActiproUIRoot.Controls.UserPromptStandardImage) can also be customized by assigning a custom [ImageProvider](xref:@ActiproUIRoot.Media.ImageProvider) to the [ImageProvider](xref:@ActiproUIRoot.Media.ImageProvider).[Default](xref:@ActiproUIRoot.Media.ImageProvider.Default) property. Each value for [UserPromptStandardImage](xref:@ActiproUIRoot.Controls.UserPromptStandardImage) corresponds to a key of the same name defined by [SharedImageKeys](xref:@ActiproUIRoot.Media.SharedImageSourceKeys). For example, the image [UserPromptStandardImage](xref:@ActiproUIRoot.Controls.UserPromptStandardImage).[Warning](xref:@ActiproUIRoot.Controls.UserPromptStandardImage.Warning) corresponds to the key [SharedImageSourceKeys](xref:@ActiproUIRoot.Media.SharedImageSourceKeys).[Warning](xref:@ActiproUIRoot.Media.SharedImageSourceKeys.Warning). A custom class which derives from [ImageProvider](xref:@ActiproUIRoot.Media.ImageProvider) can override the [ImageProvider](xref:@ActiproUIRoot.Media.ImageProvider).[GetImageSource](xref:@ActiproUIRoot.Media.ImageProvider.GetImageSource*) method to return a custom `ImageSource` for one or more of those keys.
+The images used by [UserPromptStandardImage](xref:@ActiproUIRoot.Controls.UserPromptStandardImage) can also be customized by assigning a custom [ImageProvider](xref:@ActiproUIRoot.Media.ImageProvider) to the [ImageProvider](xref:@ActiproUIRoot.Media.ImageProvider).[Default](xref:@ActiproUIRoot.Media.ImageProvider.Default) property. Each value for [UserPromptStandardImage](xref:@ActiproUIRoot.Controls.UserPromptStandardImage) corresponds to a key of the same name defined by [SharedImageSourceKeys](xref:@ActiproUIRoot.Media.SharedImageSourceKeys). For example, the image [UserPromptStandardImage](xref:@ActiproUIRoot.Controls.UserPromptStandardImage).[Warning](xref:@ActiproUIRoot.Controls.UserPromptStandardImage.Warning) corresponds to the key [SharedImageSourceKeys](xref:@ActiproUIRoot.Media.SharedImageSourceKeys).[Warning](xref:@ActiproUIRoot.Media.SharedImageSourceKeys.Warning). A custom class which derives from [ImageProvider](xref:@ActiproUIRoot.Media.ImageProvider) can override the [ImageProvider](xref:@ActiproUIRoot.Media.ImageProvider).[GetImageSource](xref:@ActiproUIRoot.Media.ImageProvider.GetImageSource*) method to return a custom `ImageSource` for one or more of those keys.
}
## Customize UserPromptWindow
diff --git a/Documentation/topics/fundamentals/user-prompt/builder-pattern.md b/Documentation/topics/fundamentals/user-prompt/builder-pattern.md
index 776e834..4170001 100644
--- a/Documentation/topics/fundamentals/user-prompt/builder-pattern.md
+++ b/Documentation/topics/fundamentals/user-prompt/builder-pattern.md
@@ -40,6 +40,7 @@ There are two methods available to register callbacks that are always invoked to
The [UserPromptBuilder](xref:@ActiproUIRoot.Controls.UserPromptBuilder).[RegisterGlobalConfigureCallback](xref:@ActiproUIRoot.Controls.UserPromptBuilder.RegisterGlobalConfigureCallback*) method is used to register a callback that is invoked immediately after creating a new instance of [UserPromptBuilder](xref:@ActiproUIRoot.Controls.UserPromptBuilder). Use this method to define an application-wide configuration that will be applied to all user prompts without having to configure each builder instance individually.
+@if (avalonia) {
The following example demonstrates how a global callback can be registered to use the `theme-solid accent` style classes on the default button (if any) for every prompt:
```csharp
@@ -47,6 +48,17 @@ UserPromptBuilder.RegisterGlobalConfigureCallback(_ => _
.WithDefaultButtonClasses("theme-solid accent")
);
```
+}
+@if (wpf) {
+The following example demonstrates how a global callback can be registered to customize the header for every prompt:
+
+```csharp
+UserPromptBuilder.RegisterGlobalConfigureCallback(_ => _
+ .WithHeaderFontSize(16)
+ .WithHeaderForeground(new SolidColorBrush(Colors.Blue))
+);
+```
+}
@if (avalonia) {
##### MessageBox Only
@@ -167,6 +179,10 @@ The [UserPromptBuilder](xref:@ActiproUIRoot.Controls.UserPromptBuilder).[Instanc
> [!TIP]
> To interact with the [UserPromptBuilder](xref:@ActiproUIRoot.Controls.UserPromptBuilder).[Instance](xref:@ActiproUIRoot.Controls.UserPromptBuilder.Instance) from one of the global configuration callbacks, use the global configuration to add a callback for one of the other callbacks (like [AfterInitialize](xref:@ActiproUIRoot.Controls.UserPromptBuilder.AfterInitialize*)) that will be invoked after the instance is defined.
+### Tag Property
+
+The [UserPromptBuilder](xref:@ActiproUIRoot.Controls.UserPromptBuilder).[Tag](xref:@ActiproUIRoot.Controls.UserPromptBuilder.Tag) property can be used to store an arbitrary object value on the builder, and this can be used to store data that is accessibile from multiple callback methods. Use the [UserPromptBuilder](xref:@ActiproUIRoot.Controls.UserPromptBuilder).[WithTag](xref:@ActiproUIRoot.Controls.UserPromptBuilder.WithTag*) method to assign values to this property.
+
### AfterInitialize Callback
This callback is invoked immediately after an instance of [UserPromptControl](xref:@ActiproUIRoot.Controls.UserPromptControl) is created and can be used to initialize the control or further customize the builder before the builder configuration settings are applied.
diff --git a/Documentation/topics/fundamentals/user-prompt/extension-methods.md b/Documentation/topics/fundamentals/user-prompt/extension-methods.md
index 4c01dbe..f524a05 100644
--- a/Documentation/topics/fundamentals/user-prompt/extension-methods.md
+++ b/Documentation/topics/fundamentals/user-prompt/extension-methods.md
@@ -59,4 +59,8 @@ catch (Exception ex) {
}
> [!TIP]
-> See the [Localization](localization.md) topic for details on how to customize the string resources used for exception prompt.
\ No newline at end of file
+> See the [Localization](localization.md) topic for details on how to customize the string resources used for exception prompt.
+
+## Tag Property
+
+The [UserPromptBuilder](xref:@ActiproUIRoot.Controls.UserPromptBuilder).[Tag](xref:@ActiproUIRoot.Controls.UserPromptBuilder.Tag) property can be used to store an arbitrary object value on the builder, and this can be useful for extension methods that need to store custom values while building the prompt. Use the [UserPromptBuilder](xref:@ActiproUIRoot.Controls.UserPromptBuilder).[WithTag](xref:@ActiproUIRoot.Controls.UserPromptBuilder.WithTag*) method to assign values to this property.
\ No newline at end of file
diff --git a/Documentation/topics/fundamentals/user-prompt/localization.md b/Documentation/topics/fundamentals/user-prompt/localization.md
index 8f17d08..a657341 100644
--- a/Documentation/topics/fundamentals/user-prompt/localization.md
+++ b/Documentation/topics/fundamentals/user-prompt/localization.md
@@ -34,7 +34,7 @@ The following string resources are defined in the Shared Library assembly and ar
| [UICopyButtonFailureText](xref:ActiproSoftware.Properties.Shared.SRName.UICopyButtonFailureText) | The text displayed on the [exception prompt](extension-methods.md) if the [CopyButton](xref:@ActiproUIRoot.Controls.CopyButton) fails to copy the stack trace. The default value is `"Error copying text!"`. |
| [UICopyButtonSuccessText](xref:ActiproSoftware.Properties.Shared.SRName.UICopyButtonSuccessText) | The text displayed on the [exception prompt](extension-methods.md) if the [CopyButton](xref:@ActiproUIRoot.Controls.CopyButton) successfully copies the stack trace. The default value is `"Copied!"`. |
| [UIDialogTitleErrorText](xref:ActiproSoftware.Properties.Shared.SRName.UIDialogTitleErrorText) | The default title used by [UserPromptWindow](xref:@ActiproUIRoot.Controls.UserPromptWindow) when an explicit title is not defined and [UserPromptControl](xref:@ActiproUIRoot.Controls.UserPromptControl).[StandardStatusImage](xref:@ActiproUIRoot.Controls.UserPromptControl.StandardStatusImage) is set to [Error](xref:@ActiproUIRoot.Controls.MessageBoxImage.Error). The default value is `"Error"`. |
-| [UIDialogTitleIndeterminateText](xref:ActiproSoftware.Properties.Shared.SRName.UIDialogTitleIndeterminateText) | The default title used by [UserPromptWindow](xref:@ActiproUIRoot.Controls.UserPromptWindow) when an explicit title is not defined and [UserPromptControl](xref:@ActiproUIRoot.Controls.UserPromptControl).[StandardStatusImage](xref:@ActiproUIRoot.Controls.UserPromptControl.StandardStatusImage) is set to [None](xref:@ActiproUIRoot.Controls.MessageBoxImage.None) or [UserPromptControl](xref:@ActiproUIRoot.Controls.UserPromptControl).[StatusImage](xref:@ActiproUIRoot.Controls.UserPromptControl.StatusImage) is populated. The default value is `String.Empty`. |
+| [UIDialogTitleIndeterminateText](xref:ActiproSoftware.Properties.Shared.SRName.UIDialogTitleIndeterminateText) | The default title used by [UserPromptWindow](xref:@ActiproUIRoot.Controls.UserPromptWindow) when an explicit title is not defined and [UserPromptControl](xref:@ActiproUIRoot.Controls.UserPromptControl).[StandardStatusImage](xref:@ActiproUIRoot.Controls.UserPromptControl.StandardStatusImage) is set to [None](xref:@ActiproUIRoot.Controls.MessageBoxImage.None) or [UserPromptControl](xref:@ActiproUIRoot.Controls.UserPromptControl).[StatusImageSource](xref:@ActiproUIRoot.Controls.UserPromptControl.StatusImageSource) is populated. The default value is `String.Empty`. |
| [UIDialogTitleInformationText](xref:ActiproSoftware.Properties.Shared.SRName.UIDialogTitleInformationText) | The default title used by [UserPromptWindow](xref:@ActiproUIRoot.Controls.UserPromptWindow) when an explicit title is not defined and [UserPromptControl](xref:@ActiproUIRoot.Controls.UserPromptControl).[StandardStatusImage](xref:@ActiproUIRoot.Controls.UserPromptControl.StandardStatusImage) is set to [Information](xref:@ActiproUIRoot.Controls.MessageBoxImage.Information). The default value is `"Information"`. |
| [UIDialogTitleQuestionText](xref:ActiproSoftware.Properties.Shared.SRName.UIDialogTitleQuestionText) | The default title used by [UserPromptWindow](xref:@ActiproUIRoot.Controls.UserPromptWindow) when an explicit title is not defined and [UserPromptControl](xref:@ActiproUIRoot.Controls.UserPromptControl).[StandardStatusImage](xref:@ActiproUIRoot.Controls.UserPromptControl.StandardStatusImage) is set to [Question](xref:@ActiproUIRoot.Controls.MessageBoxImage.Question). The default value is `"Question"`. |
| [UIDialogTitleWarningText](xref:ActiproSoftware.Properties.Shared.SRName.UIDialogTitleWarningText) | The default title used by [UserPromptWindow](xref:@ActiproUIRoot.Controls.UserPromptWindow) when an explicit title is not defined and [UserPromptControl](xref:@ActiproUIRoot.Controls.UserPromptControl).[StandardStatusImage](xref:@ActiproUIRoot.Controls.UserPromptControl.StandardStatusImage) is set to [Warning](xref:@ActiproUIRoot.Controls.MessageBoxImage.Warning). The default value is `"Warning"`. |
diff --git a/Documentation/topics/fundamentals/user-prompt/user-prompt-content.md b/Documentation/topics/fundamentals/user-prompt/user-prompt-content.md
index afa2723..b8dee08 100644
--- a/Documentation/topics/fundamentals/user-prompt/user-prompt-content.md
+++ b/Documentation/topics/fundamentals/user-prompt/user-prompt-content.md
@@ -135,9 +135,9 @@ The `Footer` property can be defined to display content at the bottom of the pro
Any `TextBlock` controls used within `Footer` will wrap text by default.
@if (avalonia) {
-Use the [FooterImage](xref:@ActiproUIRoot.Controls.UserPromptControl.FooterImage) property to optionally display a 16x16 image next to the `Footer` content. Any `IImage` is supported.
+Use the [FooterImageSource](xref:@ActiproUIRoot.Controls.UserPromptControl.FooterImageSource) property to optionally display a 16x16 image next to the `Footer` content. Any `IImage` is supported.
-When using the [builder pattern](builder-pattern.md), the [WithFooterContent](xref:@ActiproUIRoot.Controls.UserPromptBuilder.WithFooterContent*) method is used to configure the [UserPromptBuilder](xref:@ActiproUIRoot.Controls.UserPromptControl.Footer) property and the [WithFooterImage](xref:@ActiproUIRoot.Controls.UserPromptBuilder.WithFooterImage*) method configures the [FooterImage](xref:@ActiproUIRoot.Controls.UserPromptControl.FooterImage) property.
+When using the [builder pattern](builder-pattern.md), the [WithFooterContent](xref:@ActiproUIRoot.Controls.UserPromptBuilder.WithFooterContent*) method is used to configure the [UserPromptBuilder](xref:@ActiproUIRoot.Controls.UserPromptControl.Footer) property and the [WithFooterImage](xref:@ActiproUIRoot.Controls.UserPromptBuilder.WithFooterImage*) method configures the [FooterImageSource](xref:@ActiproUIRoot.Controls.UserPromptControl.FooterImageSource) property.
```csharp
await UserPromptBuilder.Configure()
@@ -260,12 +260,12 @@ UserPromptBuilder.Configure()
An image can be used to visually communicate the status or classification of the prompt displayed. Users can quickly differentiate an error from a warning based on the image displayed with the prompt.
@if (avalonia) {
-The [StatusImage](xref:@ActiproUIRoot.Controls.UserPromptControl.StatusImage) property can be set to any 32x32 `IImage`.
+The [StatusImageSource](xref:@ActiproUIRoot.Controls.UserPromptControl.StatusImageSource) property can be set to any 32x32 `IImage`.
-Several common images, like those for an error or warning, are defined by the [MessageBoxImage](xref:@ActiproUIRoot.Controls.MessageBoxImage) enumeration. Instead of populating the [StatusImage](xref:@ActiproUIRoot.Controls.UserPromptControl.StatusImage) property, set the [StandardStatusImage](xref:@ActiproUIRoot.Controls.UserPromptControl.StandardStatusImage) property to one of the [MessageBoxImage](xref:@ActiproUIRoot.Controls.MessageBoxImage) values.
+Several common images, like those for an error or warning, are defined by the [MessageBoxImage](xref:@ActiproUIRoot.Controls.MessageBoxImage) enumeration. Instead of populating the [StatusImageSource](xref:@ActiproUIRoot.Controls.UserPromptControl.StatusImageSource) property, set the [StandardStatusImage](xref:@ActiproUIRoot.Controls.UserPromptControl.StandardStatusImage) property to one of the [MessageBoxImage](xref:@ActiproUIRoot.Controls.MessageBoxImage) values.
> [!WARNING]
-> The [StandardStatusImage](xref:@ActiproUIRoot.Controls.UserPromptControl.StandardStatusImage) property is ignored if the [StatusImage](xref:@ActiproUIRoot.Controls.UserPromptControl.StatusImage) property is explicitly populated.
+> The [StandardStatusImage](xref:@ActiproUIRoot.Controls.UserPromptControl.StandardStatusImage) property is ignored if the [StatusImageSource](xref:@ActiproUIRoot.Controls.UserPromptControl.StatusImageSource) property is explicitly populated.
When using the [builder pattern](builder-pattern.md), the [WithStatusImage](xref:@ActiproUIRoot.Controls.UserPromptBuilder.WithStatusImage*) has one overload that accepts a custom `IImage` and another for a standard [MessageBoxImage](xref:@ActiproUIRoot.Controls.MessageBoxImage):
diff --git a/Documentation/topics/shared/controls/animated-expander-decorator.md b/Documentation/topics/shared/controls/animated-expander-decorator.md
index 852af80..bc29a89 100644
--- a/Documentation/topics/shared/controls/animated-expander-decorator.md
+++ b/Documentation/topics/shared/controls/animated-expander-decorator.md
@@ -1,7 +1,7 @@
---
title: "AnimatedExpanderDecorator"
page-title: "AnimatedExpanderDecorator - Shared Library Controls"
-order: 2
+order: 4
---
# AnimatedExpander
diff --git a/Documentation/topics/shared/controls/chromed-title-bar.md b/Documentation/topics/shared/controls/chromed-title-bar.md
index 7e20220..1177bca 100644
--- a/Documentation/topics/shared/controls/chromed-title-bar.md
+++ b/Documentation/topics/shared/controls/chromed-title-bar.md
@@ -1,7 +1,7 @@
---
title: "ChromedTitleBar"
page-title: "ChromedTitleBar - Shared Library Controls"
-order: 3
+order: 7
---
# ChromedTitleBar
diff --git a/Documentation/topics/shared/controls/copy-button.md b/Documentation/topics/shared/controls/copy-button.md
index f472b30..a49df75 100644
--- a/Documentation/topics/shared/controls/copy-button.md
+++ b/Documentation/topics/shared/controls/copy-button.md
@@ -1,7 +1,7 @@
---
title: "CopyButton"
page-title: "CopyButton - Shared Library Controls"
-order: 4
+order: 10
---
# CopyButton
@@ -60,7 +60,7 @@ The following string resources are available to localize or customize built-in s
| Resource key | Description |
|-----|-----|
-| `UICopyButtonSuccessText` | The text displayed as popup feedback on a successful copy operation. The default value is `"Copied!"`. |
-| `UICopyButtonFailureText` | The text displayed as popup feedback on a failed copy operation. The default value is `"Error copying text!"`. |
+| [UICopyButtonSuccessText](xref:ActiproSoftware.Properties.Shared.SRName.UICopyButtonSuccessText) | The text displayed as popup feedback on a successful copy operation. The default value is `"Copied!"`. |
+| [UICopyButtonFailureText](xref:ActiproSoftware.Properties.Shared.SRName.UICopyButtonFailureText) | The text displayed as popup feedback on a failed copy operation. The default value is `"Error copying text!"`. |
See the [Customizing String Resources](../../customizing-string-resources.md) topic for additional details.
\ No newline at end of file
diff --git a/Documentation/topics/shared/controls/dynamic-image.md b/Documentation/topics/shared/controls/dynamic-image.md
index dff8b62..a0fd4fe 100644
--- a/Documentation/topics/shared/controls/dynamic-image.md
+++ b/Documentation/topics/shared/controls/dynamic-image.md
@@ -1,7 +1,7 @@
---
title: "DynamicImage"
page-title: "DynamicImage - Shared Library Controls"
-order: 5
+order: 15
---
# DynamicImage
@@ -33,6 +33,9 @@ Set the `IsEnabled` property to `false` and the image content will be rendered i
To further emphasize the disabled state, use the [DisabledOpacity](xref:@ActiproUIRoot.Controls.DynamicImage.DisabledOpacity) property to blend the image content into the background. The default value is `1.0`, meaning the opacity is not changed when disabled.
+> [!NOTE]
+> The [DisabledOpacity](xref:@ActiproUIRoot.Controls.DynamicImage.DisabledOpacity) is relative to the control's `Opacity`. So if the [DisabledOpacity](xref:@ActiproUIRoot.Controls.DynamicImage.DisabledOpacity) is set to `0.5` and the control's `Opacity` is `0.8` then the effective opacity when disabled will be `0.4`.
+
## Monochrome Adaptation
Image content can be rendered in monochrome by setting the [UseMonochrome](xref:@ActiproUIRoot.Controls.DynamicImage.UseMonochrome) property to `true`.
diff --git a/Documentation/topics/shared/controls/hyperlink-textblock.md b/Documentation/topics/shared/controls/hyperlink-textblock.md
index 8bb60f8..0ad3012 100644
--- a/Documentation/topics/shared/controls/hyperlink-textblock.md
+++ b/Documentation/topics/shared/controls/hyperlink-textblock.md
@@ -1,7 +1,7 @@
---
title: "HyperlinkTextBlock"
page-title: "HyperlinkTextBlock - Shared Library Controls"
-order: 6
+order: 20
---
# HyperlinkTextBlock
@@ -44,6 +44,16 @@ xmlns:actipro="http://schemas.actiprosoftware.com/avaloniaui"
```
+## Font Sizing
+
+An explicit size can be set using one of following style class names:
+
+- `size-xs` - An extra-small font size.
+- `size-sm` - A small font size.
+- `size-md` - A normal font size (default).
+- `size-lg` - A large font size.
+- `size-xl` - An extra-large font size.
+
## Pseudo-classes
The following pseudo-classes are added, as appropriate, based on the current state and can be used when styling the control:
diff --git a/Documentation/topics/shared/controls/index.md b/Documentation/topics/shared/controls/index.md
index 88034f7..da8ad85 100644
--- a/Documentation/topics/shared/controls/index.md
+++ b/Documentation/topics/shared/controls/index.md
@@ -50,6 +50,12 @@ The [MeasureAdjuster](measure-adjuster.md) decorator can measure as zero size or
The [MeshGradientPresenter](mesh-gradient-presenter.md) control renders a gradient background that consists of multiple stacked radial gradients positioned at various locations.
+## ScrollableOverflowPresenter
+
+
+
+The [ScrollableOverflowPresenter](scrollable-overflow-presenter.md) control displays scroll buttons when its content overflows the available space. Tap the buttons to scroll through the content or hold down a button to scroll quickly.
+
## ShadowChrome
diff --git a/Documentation/topics/shared/controls/measure-adjuster.md b/Documentation/topics/shared/controls/measure-adjuster.md
index b7e39d8..88be7b9 100644
--- a/Documentation/topics/shared/controls/measure-adjuster.md
+++ b/Documentation/topics/shared/controls/measure-adjuster.md
@@ -1,7 +1,7 @@
---
title: "MeasureAdjuster"
page-title: "MeasureAdjuster - Shared Library Controls"
-order: 7
+order: 25
---
# MeasureAdjuster
diff --git a/Documentation/topics/shared/controls/mesh-gradient-presenter.md b/Documentation/topics/shared/controls/mesh-gradient-presenter.md
index ca3ac22..21ba001 100644
--- a/Documentation/topics/shared/controls/mesh-gradient-presenter.md
+++ b/Documentation/topics/shared/controls/mesh-gradient-presenter.md
@@ -1,7 +1,7 @@
---
title: "MeshGradientPresenter"
page-title: "MeshGradientPresenter - Shared Library Controls"
-order: 8
+order: 30
---
# MeshGradientPresenter
diff --git a/Documentation/topics/shared/controls/scrollable-overflow-presenter.md b/Documentation/topics/shared/controls/scrollable-overflow-presenter.md
new file mode 100644
index 0000000..26e0fde
--- /dev/null
+++ b/Documentation/topics/shared/controls/scrollable-overflow-presenter.md
@@ -0,0 +1,129 @@
+---
+title: "ScrollableOverflowPresenter"
+page-title: "ScrollableOverflowPresenter - Shared Library Controls"
+order: 35
+---
+# ScrollableOverflowPresenter
+
+The [ScrollableOverflowPresenter](xref:@ActiproUIRoot.Controls.ScrollableOverflowPresenter) control displays scroll buttons when its content overflows the available space. Tap the buttons to scroll through the content or hold down a button to scroll quickly.
+
+
+
+No scroll buttons will be visible when the child control fits completely within the viewport bounds of the presenter along its primary axis, as set by the [Orientation](xref:@ActiproUIRoot.Controls.ScrollableOverflowPresenter.Orientation) property.
+
+## Important Members
+
+The [ScrollableOverflowPresenter](xref:@ActiproUIRoot.Controls.ScrollableOverflowPresenter) class has these important members:
+
+| Member | Description |
+|-----|-----|
+| [Child](xref:@ActiproUIRoot.Controls.ScrollableOverflowPresenter.Child) Property | The child control to render within the presenter. Scroll buttons display when the child's extent (size along the primary axis) extends beyond the available space. |
+| [Orientation](xref:@ActiproUIRoot.Controls.ScrollableOverflowPresenter.Orientation) Property | An `Orientation` value that governs the primary axis along which scrolling may occur. The default value is `Horizontal`. |
+| [ScrollButtonTheme](xref:@ActiproUIRoot.Controls.ScrollableOverflowPresenter.ScrollButtonTheme) Property | The `ControlTheme` to apply to scroll buttons. See the "Scroll Button Theme" topic below for more details. |
+
+## Example
+
+The following example demonstrates how to define a [ScrollableOverflowPresenter](xref:@ActiproUIRoot.Controls.ScrollableOverflowPresenter) that contains an `ItemsControl` containing color swatches:
+
+```xaml
+xmlns:actipro="http://schemas.actiprosoftware.com/avaloniaui"
+...
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+## Scroll Button Theme
+
+When overflowed, **Scroll Buttons** appear on the edges of the control to allow scrolling in that direction. The appearance of these buttons can be customized by setting the [ScrollButtonTheme](xref:@ActiproUIRoot.Controls.ScrollableOverflowPresenter.ScrollButtonTheme) property to a custom `ControlTheme`.
+
+Horizonal orientations set the `.horizontal` style class on both buttons, and the `.left` and `.right` style class appropriately on the two scroll buttons. Vertical orientations set the `.vertical` style class on both buttons, and the `.up` and `.down` style class appropriately on the two scroll buttons.
+
+The following sample demonstrates how to define a custom theme for **Scroll Buttons**:
+
+```xaml
+xmlns:actipro="http://schemas.actiprosoftware.com/avaloniaui"
+...
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ ...
+
+
+```
+
+> [!IMPORTANT]
+> Due to style priority and the fact that the sample above is based on an existing `ScrollBarLineButton` theme, changes to `Background` and `Foreground` must be applied within a selector for `.horizontal` or `.vertical` just like the base style. Similarly, changes to `ContentTemplate` must be applied within a selector for `.right`, `.left`, `.up`, or `.down`, which correspond to the scroll direction of the button.
+
+
+## Advanced Usage
+
+Out of the box, the presenter is configured to work like a `ScrollViewer` where it measures its [Child](xref:@ActiproUIRoot.Controls.ScrollableOverflowPresenter.Child) with infinite size and displays scroll buttons when necessary to support scrolling.
+
+There are more advanced usage scenarios where the [Child](xref:@ActiproUIRoot.Controls.ScrollableOverflowPresenter.Child) may have scaling features of its own and may need to be measured with actual available size instead of infinite size.
+
+As an example, consider a specialized tab control where the tabs can shrink in width from their ideal desired width to ensure they fit within the available width. However, they may also have a minimum width constraint. The available width could reach a point where it can't hold all the tabs, even at their minimum widths.
+
+The [ScrollableOverflowPresenter](xref:@ActiproUIRoot.Controls.ScrollableOverflowPresenter) control can handle this scenario by setting its [UseInfiniteConstraint](xref:@ActiproUIRoot.Controls.ScrollableOverflowPresenter.UseInfiniteConstraint) property to `false`. This will cause the presenter to measure the [Child](xref:@ActiproUIRoot.Controls.ScrollableOverflowPresenter.Child) with actual available size. For scroll support to function properly in this mode, the presenter needs to be told by the [Child](xref:@ActiproUIRoot.Controls.ScrollableOverflowPresenter.Child) control or one of its descendants what its extent (size along the primary axis) is, since that value is not obtainable via the UI framework. The presenter needs to compare that extent with the viewport extent, so it knows when overflow occurs. This child extent value can be set to the [ChildExtent](xref:@ActiproUIRoot.Controls.ScrollableOverflowPresenter.ChildExtent) property.
+
+Revisiting the specialized tab control example above, the tab control's `ItemsPresenter` in its template should be wrapped by a [ScrollableOverflowPresenter](xref:@ActiproUIRoot.Controls.ScrollableOverflowPresenter) control with [UseInfiniteConstraint](xref:@ActiproUIRoot.Controls.ScrollableOverflowPresenter.UseInfiniteConstraint) set to `false`. Then the tab control's custom panel's `ArrangeOverride` method should determine the total extent of the tabs, use a visual tree search upward to get the [ScrollableOverflowPresenter](xref:@ActiproUIRoot.Controls.ScrollableOverflowPresenter) control, and assign its [ChildExtent](xref:@ActiproUIRoot.Controls.ScrollableOverflowPresenter.ChildExtent) property to that extent.
+
+This allows the tab control to:
+- Display the tabs at ideal width when there is plenty of space.
+- Start shrinking the tabs to fit in available space as the available space decreases.
+- Display overflow scroll buttons when the tabs at minimum width can no longer fit in available space.
\ No newline at end of file
diff --git a/Documentation/topics/shared/controls/shadow-chrome.md b/Documentation/topics/shared/controls/shadow-chrome.md
index fd6c950..7f30d58 100644
--- a/Documentation/topics/shared/controls/shadow-chrome.md
+++ b/Documentation/topics/shared/controls/shadow-chrome.md
@@ -1,7 +1,7 @@
---
title: "ShadowChrome"
page-title: "ShadowChrome - Shared Library Controls"
-order: 9
+order: 40
---
# ShadowChrome
diff --git a/Documentation/topics/shared/controls/toggle-theme-button.md b/Documentation/topics/shared/controls/toggle-theme-button.md
index 30f2f8e..d9c4884 100644
--- a/Documentation/topics/shared/controls/toggle-theme-button.md
+++ b/Documentation/topics/shared/controls/toggle-theme-button.md
@@ -1,7 +1,7 @@
---
title: "ToggleThemeButton"
page-title: "ToggleThemeButton - Shared Library Controls"
-order: 10
+order: 45
---
# ToggleThemeButton
diff --git a/Documentation/topics/shared/controls/window-resize-grip.md b/Documentation/topics/shared/controls/window-resize-grip.md
index 0269e84..89d5c47 100644
--- a/Documentation/topics/shared/controls/window-resize-grip.md
+++ b/Documentation/topics/shared/controls/window-resize-grip.md
@@ -1,7 +1,7 @@
---
title: "WindowResizeGrip"
page-title: "WindowResizeGrip - Shared Library Controls"
-order: 11
+order: 50
---
# WindowResizeGrip
diff --git a/Documentation/topics/shared/images/scrollableoverflowpresenter.png b/Documentation/topics/shared/images/scrollableoverflowpresenter.png
new file mode 100644
index 0000000..d690e8c
Binary files /dev/null and b/Documentation/topics/shared/images/scrollableoverflowpresenter.png differ
diff --git a/Documentation/topics/shared/index.md b/Documentation/topics/shared/index.md
index 3540673..4a67759 100644
--- a/Documentation/topics/shared/index.md
+++ b/Documentation/topics/shared/index.md
@@ -25,6 +25,7 @@ The Actipro Shared Library is a common control library referenced by all of our
- A [HyperlinkTextBlock](controls/hyperlink-textblock.md) that is a `TextBlock` implementation which renders like a hyperlink and behaves like a `Button`.
- A [MeasureAdjuster](controls/measure-adjuster.md) decorator that can measure as zero size or round the measurement of its child content to integer values, thereby helping to ensure elements are arranged as desired and without sitting on a pixel boundary.
- A [MeshGradientPresenter](controls/mesh-gradient-presenter.md) that renders a mesh gradient background.
+- A [ScrollableOverflowPresenter](controls/scrollable-overflow-presenter.md) control displays scroll buttons when its content overflows the available space.
- A [ShadowChrome](controls/shadow-chrome.md) decorator that renders a drop shadow around its child control.
- A [ToggleThemeButton](controls/toggle-theme-button.md) that, when invoked, toggles a `RequestedThemeVariant` property value between `ThemeVariant.Light` and `ThemeVariant.Dark`.
- A [WindowResizeGrip](controls/window-resize-grip.md) that can be placed in the lower-right corner of a `Window` or its status bar, providing a larger area to drag-resize the `Window` both horizontally and vertically.
diff --git a/Documentation/topics/shared/shapes/index.md b/Documentation/topics/shared/shapes/index.md
index d5b5788..2d151e0 100644
--- a/Documentation/topics/shared/shapes/index.md
+++ b/Documentation/topics/shared/shapes/index.md
@@ -9,4 +9,4 @@ The [ActiproSoftware.UI.Avalonia.Controls.Shapes](xref:@ActiproUIRoot.Controls.S
## RingSlice
-The [RingSlice](ring-slice.md) shape renders a portion (or the entire circle) of a ring shape. Its start/end angles, radius, thickness, and other stroke properties can be set.
+The [RingSlice](ring-slice.md) shape renders a portion (or the entire circle) of a ring shape. Its start and sweep angles, radius, thickness, and other stroke properties can be set.
diff --git a/Documentation/topics/shared/shapes/ring-slice.md b/Documentation/topics/shared/shapes/ring-slice.md
index e97d810..8523f7b 100644
--- a/Documentation/topics/shared/shapes/ring-slice.md
+++ b/Documentation/topics/shared/shapes/ring-slice.md
@@ -3,9 +3,9 @@ title: "Ring Slice"
page-title: "Ring Slice - Shared Library Shapes"
order: 10
---
-# RingSlice
+# Ring Slice
-The [RingSlice](xref:@ActiproUIRoot.Controls.Shapes.RingSlice) shape renders a portion (or the entire circle) of a ring shape. Its start/end angles, radius, thickness, and other stroke properties can be set.
+The [RingSlice](xref:@ActiproUIRoot.Controls.Shapes.RingSlice) shape renders a portion (or the entire circle) of a ring shape. Its start and sweep angles, radius, thickness, and other stroke properties can be set.
@@ -15,7 +15,9 @@ Ring slice shapes can be combined in many interesting ways within UI, primarily
## Angles, Radius, and Thickness
-The shape renders a ring slice between two angles, specified in degrees, where `0` is upward and the degree values increase as they go clockwise, meaning `90` degrees is to the right. To render a quarter circle ring from the top to the right, use a [StartAngle](xref:@ActiproUIRoot.Controls.Shapes.RingSlice.StartAngle) of `0` and an [EndAngle](xref:@ActiproUIRoot.Controls.Shapes.RingSlice.EndAngle) of `90`.
+The shape renders a ring slice between two angles, specified in degrees, where `0` is upward and the degree values increase as they go clockwise, meaning `90` degrees is to the right.
+
+To render a quarter circle ring from the top to the right, use a [StartAngle](xref:@ActiproUIRoot.Controls.Shapes.RingSlice.StartAngle) of `0` and an [SweepAngle](xref:@ActiproUIRoot.Controls.Shapes.RingSlice.SweepAngle) of `90`. The sweep angle is relative to the start angle, and can be negative.
@@ -40,7 +42,7 @@ xmlns:actipro="http://schemas.actiprosoftware.com/avaloniaui"
## Entire Circle
-When the [StartAngle](xref:@ActiproUIRoot.Controls.Shapes.RingSlice.StartAngle) and [EndAngle](xref:@ActiproUIRoot.Controls.Shapes.RingSlice.EndAngle) are the same value, the ring slice will by default render a full circular ring. The [IsRenderedWhenFullCircle](xref:@ActiproUIRoot.Controls.Shapes.RingSlice.IsRenderedWhenFullCircle) property can be set to `false` to disable this behavior. When set to `false` and the angles are the same, nothing will be rendered.
+When the [SweepAngle](xref:@ActiproUIRoot.Controls.Shapes.RingSlice.SweepAngle) is non-zero but normalizes to zero (e.g., a sweep angle of `360`), the ring slice will by default render a full circular ring. The [IsRenderedWhenFullCircle](xref:@ActiproUIRoot.Controls.Shapes.RingSlice.IsRenderedWhenFullCircle) property can be set to `false` to disable this behavior. When set to `false` and the sweep angle normalizes to zero, nothing will be rendered.
> [!NOTE]
> Degree angles are normalized when comparing equality. Therefore, the angles `0` and `360` are considered to be the same angle.
diff --git a/Documentation/topics/shared/value-converters.md b/Documentation/topics/shared/value-converters.md
index 4996b38..24a185b 100644
--- a/Documentation/topics/shared/value-converters.md
+++ b/Documentation/topics/shared/value-converters.md
@@ -70,30 +70,46 @@ by using a binding which reads as "ComboBox.SelectedItem EqualTo 'Allow Clear'".
/>
```
+## ImageControlConverter
-## ImageKeyToImageConverter
+The [ImageControlConverter](xref:@ActiproUIRoot.Controls.Converters.ImageControlConverter) value converter can create an `Image` control for a bound `IImage` source. This is useful when data-binding a `MenuItem` control's `Icon` property to an `IImage` such as a bitmap, and the `MenuItem.Icon` must be a control.
-The [ImageKeyToImageConverter](xref:@ActiproUIRoot.Controls.Converters.ImageKeyToImageConverter) represents a value converter that uses an [ImageProvider](xref:@ActiproUIRoot.Media.ImageProvider) to lookup an `IImage` associated with a specified key.
+The following example demonstrates how to use the converter when binding to a view model's `ImageSource` property:
+
+```xaml
+xmlns:actipro="http://schemas.actiprosoftware.com/avaloniaui"
+...
+
+
+
+...
+
+
+```
+
+## ImageKeyToImageSourceConverter
+
+The [ImageKeyToImageSourceConverter](xref:@ActiproUIRoot.Controls.Converters.ImageKeyToImageSourceConverter) represents a value converter that uses an [ImageProvider](xref:@ActiproUIRoot.Media.ImageProvider) to lookup an `IImage` associated with a specified key.
| Specification | Details |
|-----|-----|
-| Original value | A `String` key that identifies the image. Non-`String` values are automatically converted using `Object.ToString()`. The key value must be recognized by [ImageProvider](xref:@ActiproUIRoot.Media.ImageProvider).[GetImageSource](xref:@ActiproUIRoot.Media.ImageProvider.GetImageSource*). Built-in keys are defined by [SharedImageKeys](xref:@ActiproUIRoot.Media.SharedImageKeys). |
+| Original value | A `String` key that identifies the image. Non-`String` values are automatically converted using `Object.ToString()`. The key value must be recognized by [ImageProvider](xref:@ActiproUIRoot.Media.ImageProvider).[GetImageSource](xref:@ActiproUIRoot.Media.ImageProvider.GetImageSource*). Built-in keys are defined by [SharedImageSourceKeys](xref:@ActiproUIRoot.Media.SharedImageSourceKeys). |
| Converted result | An `IImage` or `null` if the key is not found. |
| Parameter | An [ImageProvider](xref:@ActiproUIRoot.Media.ImageProvider) instance or `null` to use [ImageProvider](xref:@ActiproUIRoot.Media.ImageProvider).[Default](xref:@ActiproUIRoot.Media.ImageProvider.Default). |
| Target type | Not used. |
| Culture | Not used. |
| Can convert back | No. |
-The following example demonstrates how to use the converter with the key constants defined by the [SharedImageKeys](xref:@ActiproUIRoot.Media.SharedImageKeys) class:
+The following example demonstrates how to use the converter with the key constants defined by the [SharedImageSourceKeys](xref:@ActiproUIRoot.Media.SharedImageSourceKeys) class:
```xaml
xmlns:actipro="http://schemas.actiprosoftware.com/avaloniaui"
...
-
+
...
-
+
```
## MathConverter
diff --git a/Documentation/topics/supported-technologies.md b/Documentation/topics/supported-technologies.md
index 9ec28a6..023a691 100644
--- a/Documentation/topics/supported-technologies.md
+++ b/Documentation/topics/supported-technologies.md
@@ -9,10 +9,18 @@ Actipro @@PlatformName controls are compatible with a number of different techno
## Frameworks
-The products have assemblies available for multiple frameworks, including:
+The products have assemblies available for multiple runtime frameworks, including:
- .NET 6 or later
+The assemblies have the following dependencies on UI frameworks:
+
+- Avalonia UI v11.0.7 or later
+- Native themes compatible up to Avalonia UI v11.0.10
+
+> [!NOTE]
+> While they do not change frequently, native themes must be kept in sync with Avalonia control updates and may not work with untested releases. If you encounter any issues with native themes, please contact [Support](support.md).
+
## Architectures
The products have been tested and are supported under the following architectures:
diff --git a/Documentation/topics/themes/native-control-themes.md b/Documentation/topics/themes/native-control-themes.md
index 84a620d..7aecc0b 100644
--- a/Documentation/topics/themes/native-control-themes.md
+++ b/Documentation/topics/themes/native-control-themes.md
@@ -86,7 +86,6 @@ All button control themes support the `accent`, `success`, `warning`, and `dange
*Button controls in the outline, solid, soft, subtle, and link control themes with neutral colors*
- [ButtonBase](xref:@ActiproUIRoot.Themes.ControlThemeKind.ButtonBase) - Base control theme used by several others.
-- [ButtonCard](xref:@ActiproUIRoot.Themes.ControlThemeKind.ButtonCard) (`theme-card`) - Has a card-like appearance.
- [ButtonInvisible](xref:@ActiproUIRoot.Themes.ControlThemeKind.ButtonInvisible) (`theme-invisible`) - Completely transparent but can be clicked.
- [ButtonLink](xref:@ActiproUIRoot.Themes.ControlThemeKind.ButtonLink) (`theme-link`) - Has a link-like appearance.
- [ButtonOutline](xref:@ActiproUIRoot.Themes.ControlThemeKind.ButtonOutline) (`theme-outline`) - Has an outline appearance.
@@ -462,6 +461,8 @@ The following additional control themes are used by the `Slider` control themes:
- [ToggleSwitchOutline](xref:@ActiproUIRoot.Themes.ControlThemeKind.ToggleSwitchOutline) (`theme-outline`) - Has an outline appearance.
- [ToggleSwitchSolid](xref:@ActiproUIRoot.Themes.ControlThemeKind.ToggleSwitchSolid) (`theme-solid`) - Has a solid appearance.
+Set the [ThemeProperties](xref:@ActiproUIRoot.Themes.ThemeProperties).[ToggleSwitchHasFarAffinityProperty](xref:@ActiproUIRoot.Themes.ThemeProperties.ToggleSwitchHasFarAffinityProperty) attached property on a `ToggleSwitch` to `true` to arrange the knob/track on the right side of the control instead of the left side (assuming left-to-right culture). See the [Theme Definitions](theme-definitions.md) topic for details on how to change the global default.
+
### Tab Controls
diff --git a/Documentation/topics/themes/theme-definitions.md b/Documentation/topics/themes/theme-definitions.md
index bc2c8eb..3a99785 100644
--- a/Documentation/topics/themes/theme-definitions.md
+++ b/Documentation/topics/themes/theme-definitions.md
@@ -66,6 +66,7 @@ Color ramp name properties should be set to [Hue](xref:@ActiproUIRoot.Themes.Gen
| [SwitchBorderWidth](xref:@ActiproUIRoot.Themes.Generation.ThemeDefinition.SwitchBorderWidth) | The border width for checkbox and radio button controls. |
| [SwitchScale](xref:@ActiproUIRoot.Themes.Generation.ThemeDefinition.SwitchScale) | The scale factor for checkbox and radio button controls. |
| [ToggleSwitchAppearanceKind](xref:@ActiproUIRoot.Themes.Generation.ThemeDefinition.ToggleSwitchAppearanceKind) | The [SwitchAppearanceKind](xref:@ActiproUIRoot.Themes.Generation.SwitchAppearanceKind) that indicates the default appearance for `ToggleSwitch` controls. |
+| [ToggleSwitchHasFarAffinity](xref:@ActiproUIRoot.Themes.Generation.ThemeDefinition.ToggleSwitchHasFarAffinity) | Whether to use far affinity for `ToggleSwitch` controls, which will align the track/knob to the far side of the control (e.g., track/knob on right side in left-to-right cultures). |
### ScrollBar Options
@@ -83,8 +84,11 @@ Color ramp name properties should be set to [Hue](xref:@ActiproUIRoot.Themes.Gen
| Property | Description |
|-----|-----|
+| [BadgeAppearanceKind](xref:@ActiproUIRoot.Themes.Generation.ThemeDefinition.BadgeAppearanceKind) | The [BadgeAppearanceKind](xref:@ActiproUIRoot.Themes.Generation.BadgeAppearanceKind) that indicates the default appearance for [Badge](../fundamentals/controls/badge.md) controls. |
| [ButtonAppearanceKind](xref:@ActiproUIRoot.Themes.Generation.ThemeDefinition.ButtonAppearanceKind) | The [ButtonAppearanceKind](xref:@ActiproUIRoot.Themes.Generation.ButtonAppearanceKind) that indicates the default appearance for various button controls (e.g., `Button`, `SplitButton`). |
+| [CardAppearanceKind](xref:@ActiproUIRoot.Themes.Generation.ThemeDefinition.CardAppearanceKind) | The [CardAppearanceKind](xref:@ActiproUIRoot.Themes.Generation.CardAppearanceKind) that indicates the default appearance for [Card](../fundamentals/controls/card.md) controls. |
| [EditAppearanceKind](xref:@ActiproUIRoot.Themes.Generation.ThemeDefinition.EditAppearanceKind) | The [EditAppearanceKind](xref:@ActiproUIRoot.Themes.Generation.EditAppearanceKind) that indicates the default appearance for various edit controls (e.g., `ComboBox`, `TextBox`). |
+| [SegmentedBarAppearanceKind](xref:@ActiproUIRoot.Themes.Generation.ThemeDefinition.SegmentedBarAppearanceKind) | The [SegmentedBarAppearanceKind](xref:@ActiproUIRoot.Themes.Generation.SegmentedBarAppearanceKind) that indicates the default appearance for [Segmented Bar](../fundamentals/controls/segmented-bar.md) controls. |
| [SpinnerHasHorizontalOrientation](xref:@ActiproUIRoot.Themes.Generation.ThemeDefinition.SpinnerHasHorizontalOrientation) | Whether to arrange `ButtonSpinner` buttons horizontally.
| [TabAppearanceKind](xref:@ActiproUIRoot.Themes.Generation.ThemeDefinition.TabAppearanceKind) | The [TabAppearanceKind](xref:@ActiproUIRoot.Themes.Generation.TabAppearanceKind) that indicates the default appearance for various tab controls (e.g., `TabControl`). |
diff --git a/Documentation/topics/toc.yml b/Documentation/topics/toc.yml
index 058c262..a11b174 100644
--- a/Documentation/topics/toc.yml
+++ b/Documentation/topics/toc.yml
@@ -42,6 +42,20 @@ items:
href: fundamentals/controls/avatar-group.md
- name: "Badge"
href: fundamentals/controls/badge.md
+ - name: "Card"
+ href: fundamentals/controls/card.md
+ - name: "Circular Progressbar"
+ href: fundamentals/controls/circular-progressbar.md
+ - name: "Info Bar"
+ href: fundamentals/controls/info-bar.md
+ - name: "Segmented Bar"
+ href: fundamentals/controls/segmented-bar.md
+ - name: "Settings Card"
+ href: fundamentals/controls/settings-card.md
+ - name: "Settings Expander"
+ href: fundamentals/controls/settings-expander.md
+ - name: "Settings Group"
+ href: fundamentals/controls/settings-group.md
- name: "Progress Spinners"
href: fundamentals/controls/progress-spinners.md
- name: "Panels"
@@ -102,6 +116,8 @@ items:
href: shared/controls/measure-adjuster.md
- name: "MeshGradientPresenter"
href: shared/controls/mesh-gradient-presenter.md
+ - name: "ScrollableOverflowPresenter"
+ href: shared/controls/scrollable-overflow-presenter.md
- name: "ShadowChrome"
href: shared/controls/shadow-chrome.md
- name: "ToggleThemeButton"
@@ -156,6 +172,8 @@ items:
items:
- name: "Overview"
href: conversion/index.md
+ - name: "Converting to v24.1"
+ href: conversion/converting-to-v24-1.md
- name: "Converting to v23.1"
href: conversion/converting-to-v23-1.md
- name: "Troubleshooting"
diff --git a/Documentation/topics/troubleshooting.md b/Documentation/topics/troubleshooting.md
index b1dd5c1..11b32d8 100644
--- a/Documentation/topics/troubleshooting.md
+++ b/Documentation/topics/troubleshooting.md
@@ -88,4 +88,4 @@ Avalonia UI supports running in the browser with WebAssembly. As of v11.0, the A
## Badge Adornments Aren't Clipped Properly
-The Avalonia adorner system (last tested on v11.0.7) doesn't properly clip adornments based on the clip regions of ancestors of the adorned element. This can lead to possible scenarios where an adorned element might be scrolled out of view, but the badge adornment is still visible. The [Badge](fundamentals/controls/badge.md) topic has additional detail on this issue and offers a workaround if the problem is encountered.
+The Avalonia adorner system (last tested on v11.0.7) may not properly clip adornments based on the clip regions of ancestors of the adorned element. This can lead to possible scenarios where an adorned element might be scrolled out of view, but the badge adornment is still visible. The [Badge](fundamentals/controls/badge.md) topic has additional detail on this issue and offers a workaround if the problem is encountered.
diff --git a/Readme.md b/Readme.md
index 226ba69..fe9b980 100644
--- a/Readme.md
+++ b/Readme.md
@@ -46,7 +46,7 @@ Elevate your application by licensing additional professionally designed commerc
-[Actipro Fundamentals](https://www.actiprosoftware.com/docs/controls/avalonia/fundamentals/index) provides a collection of advanced controls that are useful for many different types of applications.
+[Actipro Fundamentals](https://www.actiprosoftware.com/docs/controls/avalonia/fundamentals/index) provides a collection of advanced controls that are useful for many different types of applications, including user prompts, message boxes, avatars, badges, progress spinners, and more.
## Getting Started
diff --git a/Samples/SampleBrowser/Directory.Build.props b/Samples/SampleBrowser/Directory.Build.props
index 949a5cf..c47bd83 100644
--- a/Samples/SampleBrowser/Directory.Build.props
+++ b/Samples/SampleBrowser/Directory.Build.props
@@ -7,8 +7,8 @@
enabletrue
- 23.1.3.0
- 24.1.0.0 - 20240205
+ 24.1.0.0
+ 24.1.0.0 - 20240506Actipro Avalonia UI Controls Sample Browser$(Product)
diff --git a/Samples/SampleBrowser/References/ActiproSoftware.References.props b/Samples/SampleBrowser/References/ActiproSoftware.References.props
index 9149791..aa950fa 100644
--- a/Samples/SampleBrowser/References/ActiproSoftware.References.props
+++ b/Samples/SampleBrowser/References/ActiproSoftware.References.props
@@ -2,7 +2,7 @@
- 23.1.3
+ 24.1.0
diff --git a/Samples/SampleBrowser/SampleBrowser.Common/ProductSamples/FundamentalsSamples/Controls/BadgeIntro/MainControl.axaml b/Samples/SampleBrowser/SampleBrowser.Common/ProductSamples/FundamentalsSamples/Controls/BadgeIntro/MainControl.axaml
index 526d807..5421fdb 100644
--- a/Samples/SampleBrowser/SampleBrowser.Common/ProductSamples/FundamentalsSamples/Controls/BadgeIntro/MainControl.axaml
+++ b/Samples/SampleBrowser/SampleBrowser.Common/ProductSamples/FundamentalsSamples/Controls/BadgeIntro/MainControl.axaml
@@ -178,7 +178,7 @@
+ Value="{Binding OverflowStringFormat, StringFormat=' OverflowStringFormat="{{}}{0}"'}" />
@@ -404,7 +404,7 @@
-
+
diff --git a/Samples/SampleBrowser/SampleBrowser.Common/ProductSamples/FundamentalsSamples/Controls/CardIntro/MainControl.axaml b/Samples/SampleBrowser/SampleBrowser.Common/ProductSamples/FundamentalsSamples/Controls/CardIntro/MainControl.axaml
new file mode 100644
index 0000000..5c5c5f3
--- /dev/null
+++ b/Samples/SampleBrowser/SampleBrowser.Common/ProductSamples/FundamentalsSamples/Controls/CardIntro/MainControl.axaml
@@ -0,0 +1,662 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ ]]>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ ]]>
+
+
+
+
+
+
+
+
+
+
+
+ ]]>
+
+
+
+
+
+
+
+
+
+
+
+ ]]>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ ]]>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ ]]>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ ]]>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ ]]>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ ]]>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ ]]>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Vitae auctor eu augue ut. Molestie nunc non blandit massa enim nec. Blandit turpis cursus in hac.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ ]]>
+
+
+
+
+
+
+
diff --git a/Samples/SampleBrowser/SampleBrowser.Common/ProductSamples/FundamentalsSamples/Controls/CardIntro/MainControl.axaml.cs b/Samples/SampleBrowser/SampleBrowser.Common/ProductSamples/FundamentalsSamples/Controls/CardIntro/MainControl.axaml.cs
new file mode 100644
index 0000000..2ab096a
--- /dev/null
+++ b/Samples/SampleBrowser/SampleBrowser.Common/ProductSamples/FundamentalsSamples/Controls/CardIntro/MainControl.axaml.cs
@@ -0,0 +1,26 @@
+using ActiproSoftware.UI.Avalonia.Controls;
+using Avalonia.Controls;
+using Avalonia.Interactivity;
+
+namespace ActiproSoftware.ProductSamples.FundamentalsSamples.Controls.CardIntro {
+
+ public partial class MainControl : UserControl {
+
+ /////////////////////////////////////////////////////////////////////////////////////////////////////
+ // OBJECT
+ /////////////////////////////////////////////////////////////////////////////////////////////////////
+
+ public MainControl() {
+ InitializeComponent();
+ }
+
+ /////////////////////////////////////////////////////////////////////////////////////////////////////
+ // NON-PUBLIC PROCEDURES
+ /////////////////////////////////////////////////////////////////////////////////////////////////////
+
+ private void OnActionableCardClick(object? sender, RoutedEventArgs e) {
+ MessageBox.Show("Respond to click events or assign a Command.");
+ }
+ }
+
+}
diff --git a/Samples/SampleBrowser/SampleBrowser.Common/ProductSamples/FundamentalsSamples/Controls/CircularProgressBarIntro/MainControl.axaml b/Samples/SampleBrowser/SampleBrowser.Common/ProductSamples/FundamentalsSamples/Controls/CircularProgressBarIntro/MainControl.axaml
new file mode 100644
index 0000000..10322f6
--- /dev/null
+++ b/Samples/SampleBrowser/SampleBrowser.Common/ProductSamples/FundamentalsSamples/Controls/CircularProgressBarIntro/MainControl.axaml
@@ -0,0 +1,337 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Indeterminate
+ Progress text allowed
+
+
+
+
+
+
+
+ ]]>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ ]]>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ ]]>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Indeterminate
+ Animation enabled
+
+
+
+
+
+ ]]>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ ]]>
+
+
+
+
+
+
+
+
+
+
+
diff --git a/Samples/SampleBrowser/SampleBrowser.Common/ProductSamples/FundamentalsSamples/Controls/InfoBarIntro/MainControl.axaml b/Samples/SampleBrowser/SampleBrowser.Common/ProductSamples/FundamentalsSamples/Controls/InfoBarIntro/MainControl.axaml
new file mode 100644
index 0000000..49f727c
--- /dev/null
+++ b/Samples/SampleBrowser/SampleBrowser.Common/ProductSamples/FundamentalsSamples/Controls/InfoBarIntro/MainControl.axaml
@@ -0,0 +1,491 @@
+
+
+
+
+
+
+ An essential application message for the user.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Is open
+ Is icon visible
+ Can close
+
+
+
+
+
+ ]]>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Resume Sync
+
+
+
+
+
+
+
+ Is open
+
+
+
+ Button
+ Hyperlink
+
+
+
+
+
+ Short
+ Long
+
+
+
+
+
+
+
+
+
+
+ $(ButtonDefinition)$(HyperlinkDefinition)
+
+
+
+ ]]>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 6
+
+
+
+
+
+
+
+
+
+ Short
+ Long
+
+
+
+
+
+
+
+
+ 6
+
+
+
+
+
+ ]]>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Is open
+ Cancel close button click
+ Cancel programmatic close
+
+
+
+
+
+ ]]>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Is open
+ Handle click event
+
+
+
+
+
+ ]]>
+
+
+ (
+ async (param) => {
+ if (param is InfoBar infoBar) {
+ var result = await MessageBox.Show($"Are you sure you want to close the '{infoBar.Title}' info bar?",
+ button: MessageBoxButtons.YesNo,
+ image: MessageBoxImage.Question);
+
+ if (result == MessageBoxResult.Yes) {
+ // Close the info bar
+ infoBar.IsOpen = false;
+ }
+ }
+ });
+ ]]>
+
+
+
+
+
+
+
+
+
+
+
+
+ The InfoBar is displayed above this area and will animate into position while opening and closing.
+
+
+
+
+
+
+
+
+
+
+
+
+
+ ]]>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ ]]>
+
+
+
+
+
+
+
diff --git a/Samples/SampleBrowser/SampleBrowser.Common/ProductSamples/FundamentalsSamples/Controls/InfoBarIntro/MainControl.axaml.cs b/Samples/SampleBrowser/SampleBrowser.Common/ProductSamples/FundamentalsSamples/Controls/InfoBarIntro/MainControl.axaml.cs
new file mode 100644
index 0000000..2913115
--- /dev/null
+++ b/Samples/SampleBrowser/SampleBrowser.Common/ProductSamples/FundamentalsSamples/Controls/InfoBarIntro/MainControl.axaml.cs
@@ -0,0 +1,78 @@
+using ActiproSoftware.SampleBrowser;
+using ActiproSoftware.UI.Avalonia.Controls;
+using ActiproSoftware.UI.Avalonia.Input;
+using Avalonia.Controls;
+using System.Windows.Input;
+
+namespace ActiproSoftware.ProductSamples.FundamentalsSamples.Controls.InfoBarIntro {
+
+ public partial class MainControl : UserControl {
+
+ /////////////////////////////////////////////////////////////////////////////////////////////////////
+ // OBJECT
+ /////////////////////////////////////////////////////////////////////////////////////////////////////
+
+ public MainControl() {
+ InitializeComponent();
+ }
+
+ /////////////////////////////////////////////////////////////////////////////////////////////////////
+ // NON-PUBLIC PROCEDURES
+ /////////////////////////////////////////////////////////////////////////////////////////////////////
+
+ private void OnInfoBarCloseButtonClick(object? sender, Avalonia.Interactivity.RoutedEventArgs e) {
+ // If the click event is handled, the CloseButtonCommand will not be invoked and the defautl behavior
+ // will be ignored (i.e. the InfoBar will remain open).
+ e.Handled = (closeCommandHandleClickCheckBox.IsChecked == true);
+
+ if (e.Handled)
+ ApplicationViewModel.Instance.MessageService?.ShowMessage("Setting 'RoutedEventArgs.Handled = true' from 'CloseButtonClick' event so the 'CloseButtonCommand' is not executed.", "Click Handled", Avalonia.Controls.Notifications.NotificationType.Warning);
+ }
+
+ private void OnInfoBarClosing(object? sender, InfoBarClosingEventArgs e) {
+ if ((e.Reason == InfoBarCloseReason.CloseButton) && (cancelCloseButtonCheckBox.IsChecked == true)
+ || (e.Reason == InfoBarCloseReason.Programmatic) && (cancelProgrammaticCloseCheckBox.IsChecked == true)) {
+
+ ApplicationViewModel.Instance.MessageService?.ShowMessage($"Closing of the info bar for reason '{e.Reason}' canceled within the 'Closing' event.", "InfoBar Close Canceled", Avalonia.Controls.Notifications.NotificationType.Warning);
+
+ // Prevent the info bar from closing
+ e.Cancel = true;
+ }
+ else {
+ ApplicationViewModel.Instance.MessageService?.ShowMessage($"Info bar allowed to close for reason '{e.Reason}'.", "InfoBar Close Allowed", Avalonia.Controls.Notifications.NotificationType.Success);
+ }
+ }
+
+ /////////////////////////////////////////////////////////////////////////////////////////////////////
+ // PUBLIC PROCEDURES
+ /////////////////////////////////////////////////////////////////////////////////////////////////////
+
+ public ICommand ActionCommand { get; } = new DelegateCommand