SegmentedBar

A 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 class has these important members:

Configuring Items

The SegmentedBar is a SelectingItemsControl for SegmentedBarItem controls.

Individual instances of SegmentedBarItem can be directly defined as the ItemsSource as shown below:

xmlns:actipro="http://schemas.actiprosoftware.com/avaloniaui"
...

<actipro:SegmentedBar ... >
	<actipro:SegmentedBarItem>Daily</actipro:SegmentedBarItem>
	<actipro:SegmentedBarItem>Weekly</actipro:SegmentedBarItem>
	<actipro:SegmentedBarItem>Monthly</actipro:SegmentedBarItem>
	<actipro:SegmentedBarItem IsEnabled="False">Quarterly</actipro:SegmentedBarItem>
	<actipro:SegmentedBarItem>Annually</actipro:SegmentedBarItem>
	...
</actipro:SegmentedBar>

The ItemsSource can also be defined as non-SegmentedBarItem items. In this scenario, each item is automatically wrapped in a 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 - Base control theme used by several others.
• SegmentedBarElevated (theme-elevated) - Has an elevated appearance.
• SegmentedBarOutline (theme-outline) - Has an outline appearance.
• SegmentedBarSoft (theme-soft) - Has a soft fill appearance.
• SegmentedBarSolid (theme-solid) - Has a solid appearance.
• SegmentedBarSubtle (theme-subtle) - Has a subtle appearance.

The following example demonstrates how to define a segmented bar using the outline theme and accent variant:

xmlns:actipro="http://schemas.actiprosoftware.com/avaloniaui"
...
<actipro:SegmentedBar Classes="theme-outline accent" />

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, ItemContainerTheme, and/or ScrollButtonTheme.

The SegmentedBar control is responsible for rendering the Track, Selection, and Scroll Buttons. The 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.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:

xmlns:actipro="http://schemas.actiprosoftware.com/avaloniaui"
...
<actipro:SegmentedBar>

	<actipro.SegmentedBar.SelectionTemplate>
		<DataTemplate>

			<!-- This element will appear behind the selected item -->
			<Border
				Background="{actipro:ThemeResource ActiproBrandBrush}"
				CornerRadius="1"
				Height="{actipro:ScaledDouble 0.5}"
				Width="{actipro:ScaledDouble 3}"
				HorizontalAlignment="Center"
				VerticalAlignment="Bottom"
				/>

		</DataTemplate>
	</actipro.SegmentedBar.SelectionTemplate>

	...

</actipro:SegmentedBar>

SegmentedBarItem Theme

The ItemContainerTheme can be set to any ControlTheme to customize the appearance of SegmentedBarItem items within the 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.

The following sample demonstrates how to define a custom theme for SegmentedBarItem which renders a neutral color line below unselected items on pointer over:

xmlns:actipro="http://schemas.actiprosoftware.com/avaloniaui"
...
<actipro:SegmentedBar>

	<actipro:SegmentedBar.ItemContainerTheme>
		<ControlTheme TargetType="actipro:SegmentedBarItem" BasedOn="{actipro:ControlTheme SegmentedBarItemBase}">
			<Setter Property="Template">
				<ControlTemplate>
					<Panel>

						<!-- Primary control presentation (replicates default presentation) -->
						<Border
							Background="{TemplateBinding Background}"
							BorderBrush="{TemplateBinding BorderBrush}"
							BorderThickness="{TemplateBinding BorderThickness}"
							CornerRadius="{TemplateBinding CornerRadius}"
							Padding="{TemplateBinding Padding}"
							>
							<Panel actipro:BorderChildClipConverter.ClipToContainingBorder="True">
								<ContentPresenter x:Name="PART_ContentPresenter"
									Content="{TemplateBinding Content}"
									ContentTemplate="{TemplateBinding ContentTemplate}"
									HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
									VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
									/>
							</Panel>
						</Border>

						<!-- Custom indicator for pointer over (initially hidden) -->
						<Border x:Name="hoverBorder"
							Background="{actipro:ThemeResource Container5BorderBrush}"
							CornerRadius="1"
							Height="3"
							Width="16"
							HorizontalAlignment="Center"
							VerticalAlignment="Bottom"
							IsVisible="False"
							/>

					</Panel>
				</ControlTemplate>
			</Setter>

			<!-- Show indicator on pointer over for unselected items only -->
			<Style Selector="^:pointerover:not(:selected) /template/ Border#hoverBorder">
				<Setter Property="IsVisible" Value="True" />
			</Style>

		</ControlTheme>
	</actipro:SegmentedBar.ItemContainerTheme>

	...

</actipro:SegmentedBar>

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.ScrollButtonTheme to a custom ControlTheme.

See the ScrollableOverflowPresenter 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 property to false.

Pseudo-classes

The following pseudo-classes are available and can be used when styling the controls:

SegmentedBar

SegmentedBarItem

Theme Resources

The following theme resources are specifically available for customizing the appearance of the controls:

SegmentedBar and SegmentedBarItem also use additional common theme resources consistent with the current control theme and semantic color variant (e.g., Container1BackgroundBrush, ButtonBackgroundBrushSoft, ControlForegroundBrushOutlineAccent, and many more.)

See the Theme Assets topic for more details on working with theme resources.