Iciclecreek.Avalonia.Controls

Iciclecreek.Avalonia.Controls

This is a package of UI controls for Avalonia UI.

• ColumnsPanel - A panel which lays out arranges children into dynamic columns
• TextHighlighter - A TextBlock control that highlights text based on regex patterns
• TextBlockSpinner - A text-based loading/busy spinner control
• BigTextBlockSpinner - A large text-based loading/busy spinner control
• AnimatedText - Attached properties for animating text in a TextBlock

Installation

Add the Iciclecreek.Avalonia.Controls package to your project

Update your xmlns

	xmlns:ice="using:Iciclecreek.Avalonia.Controls"

ColumnsPanel Control

The ColumnsPanel control is a panel which dynamically lays out its children in left-to right order into columns.

There are 2 modes of usage:

• Dynamic Columns - The ColumnWidth property defines the width of every column, and the number of columns is dynamically set to the number of columns which fit the width of the control. The MinColumns and MaxColumns properties can be used to control the number of columns.
• Static Columns - The ColumnDefinitions property defines column definitions (ex: '*, 2*, 500') The number of columns is determined by the number of column definitions. MinColumns, MaxColumns are ignored.

Usage

<ice:ColumnsPanel ColumnWidth="100">
	<TextBlock Text="Column 1" />
	<TextBlock Text="Column 2" />
	<TextBlock Text="Column 3" />
    ...
</ice:ColumnsPanel>

Example of a columns panel in a items control

<ItemsControl Items="{Binding Items}">
	<ItemsControl.ItemsPanel>
		<ItemsPanelTemplate>
			<ice:ColumnsPanel ColumnWidth="300" />
		</ItemsPanelTemplate>
	</ItemsControl.ItemsPanel>
	<ItemsControl.ItemTemplate>
		<DataTemplate>
			<Image Source="{Binding Source}" />
		</DataTemplate>
	</ItemsControl.ItemTemplate>
</ItemsControl>

Properties

AnimatedText attached proeprties

AnimatedText defines attached properties which can be used to animate text in a TextBlock.

Usage

<TextBlock 
	Text="My content" 
	ice:AnimatedText.IsActive="{Binding ...}" 
	ice:AnimatedText.AnimationType="Dots" />

Properties

TextBlockSpinner Control

The TextBlockSpinner control is a loading/busy spinner which uses Text characters to create the spinner. It is effectively the same as a TextBlock with the AnimatedText attached properties set.

Usage

<ice:TextBlockSpinner AnimationType="Arcs" IsActive="{Binding ...}" />

Properties

BigTextBlockSpinner Control

The BigTextBlockSpinner control is a loading/busy spinner which uses Text characters to create the spinner but it can be arbitrary large.

Usage

<ice:BigTextBlockSpinner AnimationType="Dots" Rows="5" Columns="5" IsActive="{Binding ...}" />

TextHighlighter Control

The TextHighlighter control is a TextBlock control that highlights text based on regex patterns.

Properties

Highlighter Properties

Note: When multiple highlighters match overlapping text, the first highlighter in the collection takes precedence.

Usage

<Window.Resources>
	<ice:HighlighterCollection x:Key="MyHighlighters" >
		<!-- Highlight from "numbers" to "emails" with dark blue background -->
		<ice:Highlighter Pattern="numbers.*?emails"
							Background="DarkBlue" />

		<!-- Highlight email addresses -->
		<ice:Highlighter Pattern="\b[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\.[A-Z|a-z]{2,}\b"
							Foreground="Black"
							Background="LightYellow"
							TextDecorations="Underline" />

		<!-- Highlight numbers -->
		<ice:Highlighter Pattern="\d+"
							Foreground="Red"
							FontWeight="Bold" />

		<!-- Highlight specific words -->
		<ice:Highlighter Pattern="\btest\b"
							TextDecorations="Underline" />
	</ice:HighlighterCollection>
</Window.Resources>

<ice:TextHighlighter Text="This is some sample text to highlight keywords like Avalonia and C#" 
	Highlighters={StaticResource MyHighlighters}"/>