Getting Started

Getting up and running with Bars is very easy, especially with the included samples. The Ribbon control, in particular, provides all the Office-like ribbon user interface features right out of the box, saving you hundreds of hours of work over implementing it yourself.

Add NuGet Package

Bars is included with the ActiproSoftware.Controls.Avalonia.Pro package (view on nuget.org), so add a reference to that package. This should automatically include its transient dependencies as well.

For additional information on NuGet packages, please refer to the NuGet Packages and Feeds topic.

Configure Themes

Controls available in the Bars product rely on Actipro's themes.

Actipro's themes can be integrated by adding a special ModernTheme class, which inherits Avalonia's Styles class, to an application's Application.Styles collection.

The ModernTheme class has several settings that tell it which theme assets to dynamically load into the Application, making them available for use. By default, the "Pro" control themes are not loaded and must be explicitly included when defining the theme.

The following example demonstrates defining an instance of ModernTheme directly in Application.Styles in XAML with support for Pro controls:

<Application
	x:Class="MyCompany.App"
	xmlns="https://github.com/avaloniaui"
	xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
	xmlns:actipro="http://schemas.actiprosoftware.com/avaloniaui"
	>
	<Application.Styles>

		<!-- NOTE: Any Styles included above the ModernTheme can be overwritten by the Actipro themes -->

		<actipro:ModernTheme Includes="Pro" />

		<!-- NOTE: Any Styles included below the ModernTheme cannot be overwritten by the Actipro themes -->

	</Application.Styles>
</Application>

See the Themes Getting Started topic for additional details on working with themes.

Evaluate or Register a License

Bars is a paid product that is included with a Pro license. During the evaluation phase, a popup will be shown the first time most Pro controls are used. Follow the "Hide This Prompt" steps on the prompt for details on how to temporarily suppress the prompt during evaluation.

Once a license is purchased (or a short-term evaluation license is obtained), the license must be registered during application startup to prevent the licensing prompt from being displayed.

See the section Licensing topic for more details on licensing, including how to apply a license.

Getting Started with Ribbon

See the Controls Overview for topics related to individual controls that can be used in multiple contexts (e.g., ribbon, toolbar, or menu). See the Ribbon Overview for additional topics on ribbon-specific controls and features.

Ribbon is a complex control, so we encourage ribbon users to start with the sample project's "Getting Started" QuickStart Series. The sample project includes a series of "Getting Started" QuickStart windows that walk you through the creation of a ribbon for an application window, step by step.

The first step starts with the simple creation of a RibbonWindow with an empty Ribbon control on it. The steps proceed to build out view models and other classes to support the ribbon. Each step builds on the previous step to introduce core concepts with minimal code changes until, by the last step, there is a fully functional ribbon. Since the code for a ribbon implementation can get quite large, we chose to put most of our sample code in the "Getting Started" series of QuickStarts instead of in this documentation.

The "Getting Started" series is probably the best place to go for quickly getting up and running. All the "Getting Started" windows can be run from the Sample Browser application and their source code (the most important thing) is located in the sample project.

This code shows the base XAML that you can use to define an empty Ribbon along with the recommended RibbonWindow and RibbonContainerPanel controls:

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

		<!-- Define the ribbon here -->
		<actipro:Ribbon ... >

			<!-- Additional ribbon configuration here -->

		</actipro:Ribbon>

		<!-- Define other window content here, such as a document display area -->

	</actipro:RibbonContainerPanel>
</actipro:RibbonWindow>

Getting Started with Toolbar

See the Controls Overview for topics related to individual controls that can be used in multiple contexts (e.g., ribbon, toolbar, or menu). See the Toolbar Overview for additional topics on toolbar-specific controls and features.

This code shows sample XAML that you can use to define a standalone toolbar with buttons:

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

	<actipro:StandaloneToolBar DockPanel.Dock="Top" BorderThickness="0" ... >

		<!-- Define toolbar controls here -->
		<actipro:BarButton Key="Save" SmallIcon="{StaticResource SaveIcon}" Command="{Binding SaveCommand}" />
		...

	</actipro:StandaloneToolBar>

	...
</DockPanel>

Getting Started with Menu

See the Controls Overview for topics related to individual controls that can be used in multiple contexts (e.g., ribbon, toolbar, or menu). See the Menu Overview for additional topics on menu-specific controls and features.

This code sample shows how to define a main menu:

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

	<actipro:BarMainMenu DockPanel.Dock="Top">

		<!-- Define top-level menu controls here -->
		<actipro:BarMenuItem Label="File">
			...
		</actipro:BarMenuItem>

		...
	</actipro:BarMainMenu>

	...
</DockPanel>

This code sample shows how to define a context menu for a TextBox:

xmlns:actipro="http://schemas.actiprosoftware.com/avaloniaui"
...
<TextBox>
	<TextBox.ContextFlyout>
		<actipro:BarMenuFlyout>

			<!-- Define menu controls here -->
			<actipro:BarMenuItem Key="Save" SmallIcon="{StaticResource SaveIcon}" Command="{Binding SaveCommand}" />
			...

		</actipro:ContextFlyout>
	</TextBox.ContextMenu>
</TextBox>

Explore the Sample Browser Examples

We've spent a lot of time adding numerous QuickStarts for Bars that are in the sample project. Each QuickStart focuses on a specific feature area and provides some great code that you can look at to use in your own applications.

We encourage you to copy any code from our sample project. It will really help you build a framework in a matter of minutes instead of hours.

See the Samples topic for more information on accessing the sample project.