IvaanUI.Controls 1.0.2

This is a Free to Use WPF controls library. New controls will be added to this frequently.

• Requires .Net v4.6.2 (min) to work.

v1.0.2 requires Microsoft.Ink.dll

Go to: Project Site for Details.

Newer version will always be backward compatible.

Contents: v1.0.2

• FileBrowser Control (Same as v1.0.0 - No Changes)
• OnOffSwitch Control (Same as v1.0.1 - No Changes)
• StatusLED Control (Same as v1.0.1 - No Changes)
• ScribblePanel Control (*New)

Usage in xaml:

FileBrowser Control

Add the following 2 Namespaces:

        xmlns:ctrl="clr-namespace:IvaanUI.Controls.FileSystem;assembly=IvaanUI.Controls"
        xmlns:ctrlMdl="clr-namespace:IvaanUI.Models.UI;assembly=IvaanUI.Models"

Then add the control:

<ctrl:FileBrowser Name="FileDialog"
FileTypeFilter="All Files (*.*)|Excel 97-2003 (*.xls)| Excel (*.xlsx) |Text File (*.txt)|Xml File (*.xml)|Zip Archive (*.zip)">
<ctrl:FileBrowser.CustomQuickLinkItems>
<ctrlMdl:QuickLink Name="Junk" Path="C:\Junk" IconUri="C:\JUNK\Junk.png"/>
<ctrlMdl:QuickLink Name="Source Code" Path="C:\Folder123\MyCode\" IconUri="C:\JUNK\Code.png"/>
</ctrl:FileBrowser.CustomQuickLinkItems>
</ctrl:FileBrowser>

• FileTypeFilter property is a pipe (|) separated file extension filtering string. As shown in example above. You can add as many formats as you want.
• CustomQuickLinkItems is a List<QuickLink>which allows you to add Custom Quick Links (or one click shortcuts) on File Browser Dialog.
• See Documentation/Screenshots at: https://sourceforge.net/projects/ivaanui/

In code behind:

Within main constructor (after InitializeComponent())

        FileDialog.OpenCommand = FileOpened;
        FileDialog.CancelCommand = BrowserClosed;

Below are example handler methods for File Opened or Cancel clicked scenario:

        private void FileOpened(string path)
        {
            MessageBox.Show($"Opening File: {path}");
        }

        private void BrowserClosed()
        {
            MessageBox.Show("File Browser Closed");
        }   

OnOffSwitch Control

Add the following Namespace:

xmlns:ctrl="clr-namespace:IvaanUI.Controls.Buttons;assembly=IvaanUI.Controls"

Then add the control:

<ctrl:OnOffSwitch OnStateText="On" OffStateText="Off" Height="30" Width="80"/>
<ctrl:OnOffSwitch OnStateText="Allow" OffStateText="Block" Height="30" Width="100" Margin="0 100 0 0"/>
<ctrl:OnOffSwitch OnStateText="" OffStateText="" Height="30" Width="80" Margin="0 200 0 0"/>

• OnStateText appears on left side of slider
• OffStateText appears on right side of slider
• Set suitable Height & Width for the control (Margin in above example is demo purpose only)
• Can also leave the On/Off texts blank
• Bind StateChanged ICommand on the control to get notified about state changes (handler will get a boolean parameter specifying the current state) -- true means Switch is ON -- false means Switch is OFF

StatusLED Control

Add the following 2 Namespaces:

xmlns:ctrl="clr-namespace:IvaanUI.Controls.Buttons;assembly=IvaanUI.Controls"
xmlns:ctrlMdl="clr-namespace:IvaanUI.Models.UI;assembly=IvaanUI.Models"

Then add the control:

<ctrl:StatusLED Height="40" Width="40" ToolTip="Gray" Clicked="{Binding Something}"
    Status="None"/>
<ctrl:StatusLED Height="40" Width="40" Margin="120 0 0 0" ToolTip="Blue"
    Status="Info"/>
<ctrl:StatusLED Height="40" Width="40" Margin="240 0 0 0" ToolTip="Green"
    Status="Success"/>
<ctrl:StatusLED Height="40" Width="40" Margin="360 0 0 0" ToolTip="Yellow"
    Status="Warning"/>
<ctrl:StatusLED Height="40" Width="40" Margin="480 0 0 0" ToolTip="Red"
    Status="Danger"/>

• Status property can have 5 possible values (all shown in example above)
• Clicked ICommand can be used to get notified if you click on the StatusLED control (if you want to change states etc)

ScribblePanel Control

Add the following Namespace:

xmlns:ctrl="clr-namespace:IvaanUI.Controls.Panels;assembly=IvaanUI.Controls"

Then add the control:

<ctrl:ScribblePanel Name="Pen" Height="180" Width="400" />

To use the Predicted text bind to the Text property of ScribblePanel like:

<TextBlock FontSize="32" Text="{Binding Text, ElementName=Pen}" Foreground="DarkOrange"
 HorizontalAlignment="Center" TextAlignment="Center" Margin="0 30"/>