NoesisGUI

Controls

Introduction

Blend has a huge control palette available to the user. At this time not all controls are supported in the Noesis GUI system, but a big set of the most important controls are ready to be used. The following chart shows a quick view of the main controls supported in the current version.

Controls1.png

The Controls in detail

Border

Is a decorator that draws a visual border and/or a background around any other UI element.

In the following example, a Border with a red BorderBrush and green Background has been added to a Ellipse

Controls2.png

See Border.

BulletDecorator

Is a decorator that can have two elements, a bullet (usually a graphic) and a content (usually a text).

In the following example a Ellipse has been added as the bullet, and a simple TextBlock is the content of the BulletDecorator.

Controls3.png

See BulletDecorator.

Button

Represents a interface Button that can be clicked from Mouse or Keyboard (when it is focused).

Controls4.png

See Button and BaseButton.

CheckBox

Is a button paired with a text that can have tree states: Checked, Unchecked and Indeterminate.

Controls5.png

See CheckBox.

ComboBox (and ComboBoxItem)

Is an selection control that shows all the items in a drop-down box. Every item is owned by a unique ComboBoxItem that provides functionality to its ComboBox owner.

Controls6.png

See ComboBox and ComboBoxItem.

ContentPresenter

Is used inside the template of a ContentControl to indicate where in the visual tree the content is going to be displayed.

See ContentPresenter.

Expander

Is a control with a header and a collapsible section.

Controls8.png

See Expander.

GroupBox

Has a header and a section that acts as a container for other controls, specially for RadioButtons

See GroupBox.

Label

Provides text for a control

See Label.

ListBox (and ListBoxItem)

Is a selection control showing selectable items

See ListBox and ListBoxItem.

ListView (and ListViewItem)

Similar to a ListBox, but supports a more advanced display of items

See ListView and ListViewItem.

Menu (and MenuItem)

Represents a hierarchical list of items (MenuItems) that can be clicked.

See Menu and MenuItem.

Popup

Shows an overlay window that has content inside.

See Popup.

ProgressBar

Is a control that represents the current progress related to a total value.

See ProgressBar.

RadioButton

Is a button that can have two states (Checked, Unchecked or Undeterminate) and when several RadioButtons are grouped together, only one can have the Checked state.

See RadioButton.

ScrollBar

Is a control with a Thumb that can move freely between a given distante, generally used to represent the scroll offset of a partially visible content.

See ScrollBar.

ScrollViewer

Is a control that can contain a bigger element that is scrolled using two ScrollBars

See ScrollViewer.

Slider

Allows to move a Thumb between a range of values

See Slider.

TabControl (and TabItem)

Is a control that holds several tabs (TabItems) to group its content.

See TabControl.

TextBlock

Displays a fixed text

See TextBlock.

TextBox

Displays and editable text

See TextBox.

ToolBar (and ToolBarItem)

Is a bar that contains several options in the form of ToolBarItems

See ToolBar and ToolBarItem.

TreeView (and TreeViewItem)

Displays a hierarchical collection of values (TreeViewItem) that can be collapsed and expanded.

See TreeView and TreeViewItem.

User Controls and Custom Controls

Although the control palette is quite wide, and the styling and templating system allows very powerful solutions, sometimes we need to create our own controls that adapt to our program requirements. In this case we have two options: User Controls and Custom Controls

User Controls

A user control is a control that uses a XAML file to combine some other controls inside. Let's see with a sample.

Imagine that we need a user control that has two buttons and a textblock where some results are going to be written depending on which button is pressed. This is a very simple example, but il will illustrate the process quite well.

For creating our user control, just select "New Item" from the file menu in Blend, and create a new UserControl named "MyControl.xaml"

UserControl1.png

Now MyControl is like a new Window where you can resize and put elements inside. Just put a TextBox and two Buttons inside, and add some events for the Click on the buttons to write inside the textbox. Also I'm putting a rectangle to decorate my user control a little.

UserControl2.png

Now, our user control is available from the controls palette in blend, and can be dragged into the MainWindow like any other control

UserControl3.png

More information about User Controls in NoesisGUI can be found in the UserControl tutorial

Custom Controls

A custom control is more oriented to the functionality, letting the designer to later customize the appareance using styles and templates. We are going to show hoy to create a simple custom control which have a enum property that is used to control the template appareance.

In blend there is no dialog to create a new custom control. We need to create the class purely in C# deriving from the desired base class, and adding the properties and behavior using code.

So we start creating our class giving the name "MyEnumControl"

CustomControl1.png

And we add through code a dependency property of type ValueType

namespace MyCustomControl
{
    public enum ValueType
    {
        TypeRed,
        TypeGreen
    }

    public class MyEnumControl: Control
    {
        public MyEnumControl()
        {
        }

        public static readonly DependencyProperty ValueTypeProperty = DependencyProperty.Register("ValueType",
            typeof(ValueType), typeof(MyEnumControl), new FrameworkPropertyMetadata(ValueType.TypeRed));

        public ValueType ValueType
        {
            get { return (ValueType)GetValue(ValueTypeProperty); }
            set { SetValue(ValueTypeProperty, value); }
        }
    }
}

We won't add any behavior to the class because next we are going to modify the appareance of our Custom Control with the help of the template and its property triggers. So we throw two MyEnumControls to the main window, both of them with different ValueTypeProperty values, and next we create a template for the controls

CustomControl2.png

For the template, we are going to add a simple ellipse with a gradient, and using the property triggers, we are going to assign a Red gradient when the ValeType is TypeRed, and a Green gradient when the value is TypeGreen.

CustomControl3.png

In Xaml, the code generated is this:

<ControlTemplate x:Key="MyEnumControlTemplate" TargetType="{x:Type local:MyEnumControl}">
    <Grid>
        <Ellipse x:Name="ellipse" Stroke="Black">
            <Ellipse.Fill>
                <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                    <GradientStop Color="Black" Offset="0"/>
                    <GradientStop Color="Red" Offset="1"/>
                </LinearGradientBrush>
            </Ellipse.Fill>
        </Ellipse>
    </Grid>
    <ControlTemplate.Triggers>
        <Trigger Property="ValueType" Value="TypeRed"/>
        <Trigger Property="ValueType" Value="TypeGreen">
            <Setter Property="Fill" TargetName="ellipse">
                <Setter.Value>
                    <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                        <GradientStop Color="Black" Offset="0"/>
                        <GradientStop Color="#FF5AFF00" Offset="1"/>
                    </LinearGradientBrush>
                </Setter.Value>
            </Setter>
        </Trigger>
    </ControlTemplate.Triggers>
</ControlTemplate>

And the final result

CustomControl4.png

More information about Custom Controls in NoesisGUI can be found in the CustomControl tutorial

© 2017 Noesis Technologies