InfoBar

An 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 property is typically set to short text that categorizes the message being displayed while the Message property is set to text that provides additional detail.

The following demonstrates how to create an info bar with a title and message:

xmlns:actipro="http://schemas.actiprosoftware.com/avaloniaui"
...
<actipro:InfoBar Title="Title" Message="An essential application message for the user." />

Severity

InfoBar with Information, Success, Warning, and Error severities

By default, an InfoBar is displayed with Information severity, but the Severity property can be set to any one of the InfoBarSeverity values. Each severity automatically applies a defaultIcon and Background brush to visually distinguish one severity from another.

Action

InfoBar with action button

The 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:

xmlns:actipro="http://schemas.actiprosoftware.com/avaloniaui"
...
<actipro:InfoBar Title="Metered Connection" Message="Syncing paused." Severity="Warning">
	<actipro:InfoBar.Action>
		<Button Content="Resume Sync" />
	</actipro:InfoBar.Action>
</actipro:InfoBar>

Icon

By default, info bar will display an icon that corresponds to the value of the Severity property. To hide the icon, set the IsIconVisible property to false.

To customize the icon, assign the desired control to the Icon property.

The following sample demonstrates using an Image for the icon, but any content supported by Icon Presenter can be used (like IImage data, PathIcon control, or DynamicImage control):

xmlns:actipro="http://schemas.actiprosoftware.com/avaloniaui"
...
<actipro:InfoBar Title="Title" Message="An essential application message for the user.">
	<actipro:InfoBar.Icon>
		<Image Source="/Images/Icons/Help16.png" />
	</actipro:InfoBar.Icon>
</actipro:InfoBar>

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:

xmlns:actipro="http://schemas.actiprosoftware.com/avaloniaui"
...
<actipro:InfoBar Title="Sync In Progress" Message="Syncing app settings with the cloud.">
	<ProgressBar />
</actipro:InfoBar>

Opening and Closing

The 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 property to false to hide the Close Button.

By default, clicking the Close Button will set the IsOpen property to false when it is clicked. Alternatively, a CloseButtonClick event handler or custom CloseButtonCommand can replace the default behavior.

Cancel Close

When the IsOpen property is set to false, the Closing event is raised with InfoBarClosingEventArgs passed to the event handler. Set the Cancel property to true to cancel the close request.

If necessary, inspect the Reason property to determine if the reason for the close was due to the CloseButton being clicked or if it was a 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, Message, Action, and Content are stacked vertically in the middle. When wrapped, the read-only IsWrapped property will be set to true.

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 control:

Theme Resources

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

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

Customize String Resources

The following string resources are available to localize or customize built-in strings:

The following sample demonstrates how to set custom values for string resources:

ActiproSoftware.Properties.Shared.SR.SetCustomString(ActiproSoftware.Properties.Shared.SRName.UIButtonCloseDisplayName, "Hide");

See the Customizing String Resources topic for additional details.