For example to set width of the property name column to 100 pixels you can use following code:

advPropertyGrid1.SetPropertyColumnWidth(0, 100)

Related posts:

1. How to add custom panels to AdvPropertyGrid
2. How to create virtual properties with AdvPropertyGrid for WinForms
3. How to change global text rendering properties

The minimum requirement for adding an AdvGrid to your application is a data source for the rows which implements IEnumerable. Simply bind your data source to the grid’s ItemsSource property. Each object in the enumeration becomes the DataContext for a row in the grid. The object’s properties are the source for the content of the row’s cells. The mapping between the object’s properties and the grid’s columns can be made automatically or you can define the mapping yourself if you require more control that what is provided by default.

Beyond setting up a data source, some of the more common settings to explore are:

• Set property VirtualizationMode = Recycling to enable both row and cell virtualization.
• Set IsByRowEditingEnabled = true to put the grid into by-row editing mode.
• Set CanUserAddRow = true to cause a “placeholder” row to be added to the bottom of the grid which the user can use to add a new row.
• Provide a DataTemplate as value for RowDetailsTemplate to create a details section for your rows.
• Use property RowDetailsShowMode to specify  when row details are made visible.
• Set AutoGenerateColumns = true to have columns automatically generated. Handle the routed event AutoGeneratingColumns to customize a column when it is being automatically generated.
• Set ScrollMode = ByItem to enable scroll-by-item.
• Use SelectionMode to specify whether Single, Multiple or Extented selection mode is active.
• Use SelectionUnit to specify whether cells, rows or cells and rows via the row headers are selectable by user.
• ColumnHeaderClickBehavior specifies what happens when the user cicks on a column header.
• Set AllowColumnReorder = true to allow the user to re-order the columns using drag and drop.
• Set IsContextMenuEnabled = true to enable a built-in context menu that allows the user to (optionally) sort, group, pin and hide/show individual columns.
• RowHeaderWidth specifies the width of the row headers.
• Filter the items that are displayed with a Predicate<object> set as value for the grid’s Filter property.
• Display your items in groups based on column values by setting the GroupByLevel of the appropriate column definition.
• Set ShowColumnGroupingPanel = true to display a panel into which the user can drag column headers to cause the grid to group the items by that column’s data.
• Set CanUserDeleteItem to allow the user to delete rows using the delete key.
• And many more…

A good place to start exploring AdvGrid, other than this document, is the AdvGridSample application which is included in the DotNetBar installation. Here is a screen shot:

AdvGrid, AdvGridRow and AdvGridCell

AdvGridRow is the native container type for items placed into the grid. New containers are obtained from the grid’s GetContainerFromItemOverride method. It is possible to override this method and supply your own row control type, but it must derive from AdvGridRow. Similiarly, AdvGridCell is the native container for cell data. When a new cell is required, it is obtained via the parent row’s CreateCell method. This too can be overridden to provide your own cell control.

Both AdvGridRow and AdvGridCell have Connect and Disconnect methods. The first is called by the system to prepare the row or cell for the data item that it is being used to display. The latter is called when the row is being virtualized and is used to release the control from the data object and make it available to connect to another. Inheritors of either AdvGridRow or AdvGridCell may need to override these methods if they define new dependency properties of their own, for example, or require some other custom connection logic.

AdvGrid is designed to look and act as much like ItemsControl as possible, but it does not have an ItemContainerGenerator. Instead, it has an ItemContainerManager (specifically, AdvGridItemContainerManager) the purpose of which is to manage row creation and the placement of the rows into the visual tree, and virtualization.

Following are lists of the common events, properties and methods available on AdvGrid, AdvGridRow and AdvGridCell controls.

AdvGrid Interface

AdvGrid Events:

AutoGeneratingColumn – A routed event raised when a new column is being auto generated. The new column can be customized in a handler for this event.

DeletingSelectedItems – A routed event raised before selected items are deleted as a result of user action. Handle this event to prevent the deletion.

SortByColumnRequested – A routed event raised when the user clicks a column header to sort (ColumnHeaderClickBehavior is SortByColumn.) Handle this event to stop default sorting and provide custom sorting.

SelectionChanged – A routed event raised when the selection changes.

ItemsChanged – A routed event raised when the content of the Items collection changes.

AdvGrid Methods

BeginEdit – Puts the currently active cell in the currently active row into edit mode.

BringIntoView – There are four overrides of BringIntoView which can be used to bring into view a specific row, a specific item, a specific index, and finally one for bringing into view a specific column.

ClearSelection – Clears current selection.

CancelEdit – Clears all pending changes and takes the current row and/or cell out of edit mode. See section on editing for more information.

ClearGroupByColumn – Clears grouping by the specified column.

CommitEdit – Pending changes are committed to underlying data source. See section on editing for more information.

ContainerFromIndex – Get the row at the specified index, with option to create the row if it doesn’t exist (applies when virtualization is enabled.)

ContainerFromItem – Returns the row given an item with optional parameter to specify whether or not to create the row if it does not exist.

DeleteSelected – Deletes the current selection. Before deleting items, the event DeletingSelectedItems is raised and if handled the delete does not happen.

IndexFromContainer – Get the index of the node within the flattened hierarchy of the tree.

IndexFromItem – Get the index of the item within the flattened hierarchy of the tree.

IsItemSelected – Use to determine if a particular item is part of the current selection.

GetActiveRow – Gets the row control which is container for the current ActiveItem.

GroupByColumn – Groups items based on values in the specified column.

MoveDown – Selects and makes active the row below the currently active row.

MoveLeft – Moves one cell to the left of the current cell.

MoveRight – Moves one cell to the right of the current cell.

MoveUp – Selects and makes active the row immeditely above the currently active row.

PinItem – Pins the row containing the specified item to either the top or bottom of the viewport.

Remove – Removes (deletes) the specified item from the Items collection. This is the same as calling Items.Remove().

SelectAll – If columns are being displayed, then all columns are selected.

SortByColumn – Causes child nodes to be sorted by the values of a specific column, in a specified direction.

AdvTree properties:

CLR Properties

AllSelected – Will return true if all columns are selected.

Items – Gets a reference to the underlying ItemsCollection. This is a read-only property.

ItemContainerManager – Gets a reference to the object responsible for container (row) creation and virtualization. This is the counterpart to ItemsControl’s ItemContainerGenerator.

LogicalExtent – This is the number of rows in the grid.

FirstVisibleNodeIndex – Gets the index of the first visible node (index is flattened, i.e. inclusive of all nodes regardless of hierarchy level.)

LastVisibleNodeIndex – Gets the index of the last visible node in the tree.

ScrollViewer – Gets a reference to the grid’s ScrollViewer, if there is one.

SelectedColumns – An enumeration of the ColumnDefinitions which are currently selected. Column selection is enabled by setting ColumnHeaderClickBehavior to SelectColumn.

SupressCellVirtualization – When VirtualizationMode is Recycling both nodes and cells are subject to virtualization. Set this property to prevent the virtualization of cells.

Dependency Properties

ActiveItem – This is the data item of the row which currently has keyboard focus. Read-only.

AllowColumnReorder – Specifies whether the user can reorder the columns using drag and drop.

AlternationCount – Performs same function as ItemsControl.AlternationCount. Setting to a value greater than 1 will result in the grid’s rows’ AlternationIndex values alternate between 0 and AlternationCount – 1. This value can be used in a Style trigger to modify properties of the nodes based on their alternation index. An example of this is provided in the sample AdvGridSample.

AutoGenerateColumns – Specifies whether column definitions should be automatically generated from available data when they are not provided.

CanUserAddRow – When true, a placeholder row is added to bottom of the grid. If the user edits a cell in the placeholder row, a new row is created.

CanUserDeleteItem – When true, the user can delete rows by hitting the delete key. Default is false.

ColumnAlternationCount – Alternation count for columns. Works the same as alternation count for rows.

ColumnDefinitions – Defines columns for the Grid. More on columns is provided below.

ColumnHeaderClickBehavior – Determines what happens when a column header is clicked. Possible values are SortByColumn: The rows are sorted by the column’s value. SelectColumn: The column is selected. Custom: No action is taken by the grid. Handle ColumnHeader.Clicked routed event to perform custom action. The column header is highlighted on mouse over and press.) And Nothing: Nothing is done and ColumnHeader.Clicked is not raised.

ColumnHeaderClickMode – Determines whether the click event of a column header is raised on mouse down or mouse up.

ErrorNotification – Applies only when IsByRowEditingEnabled = true. Specifies whether the user is notified of row level errors by a message box, by an Adorner (defined by Validation.ErrorTemplate) or not at all.

ErrorNotificationDialogBoxStyle – This Style is applied to the DialogWindow (DevComponents.WPF.Controls) which is opened to display row level error message.

Filter – A Predicate<object> which is applied to the grid’s Items collection.

FirstRowNumber – Specifies the starting index for the rows, and which are displayed by the row headers.

HighlightSelectedCellColumnHeader – Determines whether the column headers of selected cells are highlighted.

HighlightSelectedCellRowHeader – Determines whether row headers are highlighted cells are selected.

HorizontalGridLineBrush – Brush for horizontal grid lines when ShowHorizontalGridLines is set.

HorizontalGridLineHeight- Height of the horizontal grid line when ShowHorizontalGridLines is set.

HotTrack – When true, the cell with mouse over is highlighted.

IsByRowEditingEnabled – When true, by-row editing is enabled. See section on editing for more. The default value is false.

IsContextMenuEnabled – Determines whether the column header’s built-in context menu should be enabled.

IsDragDropEnabled – When set, the grid is set up to be both source and target of drag/drop. Is the same as setting both DragDrop.IsDropTarget and DragDrop.IsDragSource to true.

IsGrouping – A read-only property which is set to indicate that the items are being grouped.

IsSelectionFocusAware – When true, the selection box which highlights a selected item is grayed when the Grid does not contain the input focus.

ItemsSource – An IEnumerable which serves as source for the items which populate the Items collection. This property is equivalent to ItemsControl.ItemsSource.

ItemContainerStyle – Style for the item containers. Note that containers for AdvGrid are always instances of AdvGridRow.

ItemContainerStyleSelector – StyleSelector for selecting the Style for the container for a particular item.

LockRowHeaderWidth – Specifies whether the user is enabled to resize the width of the row headers. Default is true.

LockRowHeigths – Specifies whether the user is enabled to change row heights. By default will be false unless either virtualization or scroll by item are enabled, in which case LockRowHeight is set to true. The default behavior is overriden when LockRowHeight is explicitly set.

RowKeepsKeyboardFocusOnError – Applies when IsByRowEditingEnabled = true. If there is an error when attempting to commit changes, the user is prevented from navigating away from the row.

RowDetailsShowMode – Determines whether row details are displayed when a toggle button is checked, when the row is selected, always or none (manual.)

RowDetailsTemplate – A DataTemplate which if set both shows how to render the details section and causes the rows to have a details section.

RowHeaderWidth – Specifies the width of the row headers. Default value is NaN, which results in auto-sizing.

ScrollMode – Determines whether scroll-by-item is enabled and, if so, how the last item is positioned. Possible values are Normal, ByItem and ByItemBottomFlush. Default is Normal.

SelectedCell – When SelectionMode is Single and CellSelect is True, this property will identify the currently selected cell. When multiple selection is enabled, SelectedCell will be set to the first cell selected of the collection of selected cells.

SelectedCells – When SelectionMode is Multiple or Extended and CellSelect is True, this property will return an ObservableCollection containing the currently selected cells.

SelectedItem – Will identify the currently selected item when SelectionMode is Single. When multiple selection is enabled, SelectedItem will be set to the first item selected of the collection of selected items.

SelectedItems – When SelectionMode is Extended or Muliple, will return an ObservableCollection containing references to the currently selected items.

SelectionMode – Possible values are Single, Multiple and Extended. More on selection modes is provided below.

SelectionUnit – Determines whether cells, rows or both are selectable by user. This is an enumeration of type AdvGridSelectionUnit with possible values None, Cell, Row and CellOrRowHeader.

ShowColumnGroupingPanel – If true, a panel is shown into which the user can drag column headers for columns to group by.

ShowColumnHeader – Determines whether the column headers are shown.

ShowHorizontalGridLines – Determines whether horizontal grid lines are shown.

ShowRowDetailsRootLine – Applies when RowDetailsTemplate is set.

ShowRowHeaders – Determines whether the row headers are shown.

ShowVerticalGridLines – Determines whether the vertical grid lines are shown.

VerticalGridLineBrush – The Brush used for vertical grid lines.

VirtualizingMode – Sets the virtualization mode for the tree. Possible values are None and Recycling. Default value is None. More about virtualization is provided below.

VisualStyle – 5 built-in visual styles are included with AdvGrid the default, an emulation of Windows Explorer, and the three color schemes of Office 2010: Blue, Silver and Black. Setting this property is the same as setting a value for the VisualStyleManager.VisualStyle attached property on the grid. Note: to ensure consistent visual style through the entire application, set VisualStyleManager.VisualStyle on an element at the top of the visual tree.)

AdvGridRow Interface

AdvGridRow Events

BeforeSelected – A bubbling routed event raised before the value of IsSelected changes from false to true. Setting the event argument’s Handled property to true will cancel the selection.

Connecting – Routed event raised when the row is being connected to its data item and fitted into the visual tree. This event occurs as part of the virtualization/realization process.

Disconnecting – Routed event raised when a row is in the process of formally disconnecting itself from its data item. Will not be raised if virtualization is not enabled.

InitializingNewItemPlaceholder – Routed event raised when the item for the new item placeholder is being created. Will not be raised unless the grid’s CanUserAddItem property is true. Handle this event to set default values for the placeholder item, or to create a new item to serve as placeholder.

IsCellSelectedWithinChanged – Bubbling routed event raised when th value of IsCellSelectedWithin changes.

IsDetailsSectionOpenChanged – Routed event raised when the value of IsDetailsSectionOpen changes.

IsDirtyChanged – Routed event raised when the value of  IsDirty changes.

PinChanged – Routed event raised when the value of Pin changes.

Selected – A bubbling routed event raised when the value of IsSelected changes from false to true.

Unselected – Routed event raised when the value of IsSelected changes to false.

AdvGridRow Methods

BeginEdit – Puts the current cell into edit mode. If IsByRowEditingEnabled = true, then the row is also placed into edit mode.

CancelEdit – Rolls back any pending changes and takes the row and current cell out of edit mode.

CommitEdit – Commits pending changes to underlying data source and optionally takes the row and/or active cell out of edit mode. See section on Editing for more.

GetCell – Use to get an AdvTreeCell contained by the node that corresponds to a specific ColumnDefinition.

GetChildNodes – Use to obtain an enumeration of all of the node’s child nodes. Optionally include all the descendants of the child nodes as well. Option to include nodes which are unrealized.

NavigateLeft – Moves focus to and selects the cell immediately to the left of the currently active cell.

NavigateRight – Moves focus to and selects the cell immediately to right of currently active cell.

NavigateDown – Moves focus to and selects the row below.

NavigateUp – Moves focus to row above.

SortByColumn – Causes the node to sort children by a specified column, in a specified direction.

AdvGridRow Properties

CLR Properties

CellDefinitions – This is the ColumnDefinitionCollection which defines the columns which present the node’s data (not the node’s children.) By default, a node inherites this value from its parent node. If the parent node has a value for ColumnDefinitions, this becomes the child’s CellDefinitions.

Cells – Gets an enumeration of the AdvTreeCells which are children of the node. If HasCells is false, this property will return an empty enumerable.

HasCells – Gets whether this node has cells defined.

HeaderControl – Provides access to the control which renders the row’s Header.

IsEditing – Returns true if the node is currently in edit mode.

IsCellEditingWithin – Returns true if a Cell contained by the node is currently in edit mode.

IsConnected – Returns true if the node is currently connected – that is, it is in a valid state for rendering.

Items – An ItemsCollection which contains and manages the child items of the node.

ParentGrid – Gets the parent AdvGrid.

ValidationErrors – If ByRowEditingIsEnabled = true, this ReadOnlyObservableCollection will contain any validation errors that currently exist for the row.

Dependency Properties

AlternationIndex – This is a readonly property which is set by the framework when a parent’s AlternationCount is greater than 1. This property can be used in Style trigger to modify appearance of the node.

DetailsTemplate – A data template which defines how to display the details. If set, the row will have a details section, otherwise the row will not have a details section. By default, this value is inherited from the parent grid’s RowDetailsTemplate property.

DetailsToggleButtonStyle – Style for the toggle button which is

ErrorNotification – Applies only when IsByRowEditingEnabled = true. Specifies whether the user is notified of row level errors by a message box, by an Adorner (defined by Validation.ErrorTemplate) or not at all. By default this value is inherited from the parent grid’s property of the same name.

HasError – A readonly property which is set when there are validation errors associated with the row.

HeaderBackground – The Brush used to paint the background of the row’s header.

Header – The content displayed by the row’s header.

HeaderPadding – Padding for the header.

HeaderTemplate – A DataTemplate which shows how to render Header.

HorizontalGridLineBrush – Get or set the Brush used for the horizontal grid line. By default, this property is inherited from the parent grid.

HorizontalGridLineHeight – Determines the height of the horizontal grid line. By default, this property is inherited from the parent grid.

IsByRowEditingEnabled – Determines whether the the row is in by-row editing mode. By default, this value is inherited from the parent grid’s property of the same name.

IsCellSelectedWithin – Will be true if one of more cells within the row are selected. Readonly.

IsDetailsSectionOpen – Determines whether the details section is open. Ignored if there is no value for DetailsTemplate.

IsDirty – If by-row editing is enabled, this property is set when the user edits a cell and remains set until either the changes have been committed or the edit is cancelled (for example, the user hits the escape key.) See section on editing for more information.

IsEditing – This read-only property is set when the row goes into edit mode. Will never be set unless IsByRowEditingEnabled = true.

IsSelected – Gets or sets whether or not the row is selected. If IsSelectable is false, this property is ignored.

IsSelectable – Determines whether the row can be selected. The default value is true.

KeepKeyboardFocusWhenHasError – If by-row editing is enabled, setting this property make it so the user is prevented from leaving the current row if HasErrors = true. By default, this value is inherited from the parent grid’s RowKeepsKeyboardFocusWhenHasError property.

LockHeight – Determines whether the user can change the row’s height. By default, this value is inherited from the parent grid’s LockRowHeight property.

Pin – Determines whether the row is pinned to the top or bottom of the viewport, or not pinned at all (the default is not pinned.)

ShowHorizontalGridLines – Determines whether the horizontal grid lines are visible.

ValidationRules – Gets or sets a collection of ValidationRule objects used for row-level validation. Ignored if IsByRowEditingEnabled does not equal true. For more information, see section on editing below.

AdvGridCell Interface

AdvGridCell Events

BeforeSelected – A bubbling routed event raised before the value of IsSelected changes from false to true. Setting the event argument’s Handled property to true will cancel the selection.

EditBeginning – A bubbling routed event raised before the cell enters edit mode. Setting the event argument’s Handled property to true will cancel the edit.

EditCommitted – A bubbling routed event raised when changes are committed to the underlying data source.

IsDirtyChanged – A routed event raised when the value of IsDirty changes.

IsEditingChanged – A routed event raised when the value of IsEditing changes.

Selected – A bubbling routed event raised when the value of IsSelected changes from false to true.

Unselected – A bubbling routed event raised when the value of IsSelected changes from true to false.

AdvGridCell Methods

BeginEdit – Manually puts the cell into edit mode.

CancelEdit – Clears pending changes to the cell’s content and takes the cell out of edit mode.

CommitEdit – Commits pending changes with option to exit edit mode. If by-row editing mode is enabled, then the changes are only committed to row level. It is up to the parent row to perform the final commitment of changes to the underlying data source.

AdvGridCell Properties

CLR Properties

IndexInRow – Gets the zero based index of this cell within the row or node.

IsConnected – Gets whether this cell is fully connected to its data source and column definition, and is ready to be displayed in the UI.

IsEditing – Returns true if the cell is currently in edit mode.

Dependency Properties

BeginEditTriggerMode – provides a means for defining what conditions are required for the cell to enter Edit mode. (Only applies when IsEditable is true.) More on node and cell editing is provided below.

CellDefinition – Provides access to the ColumnDefinition instance which defines the cell. This is a read only dependency property.

EditorStyle – Specifies a style which is applied to the embedded EditingContentControl which both displays and edits the cell’s content. Note that the editing control’s style can also be specified in the column definition via property CellEditorStyle. In either case, a value is not required. More on editing below.

EditTemplate – Optionally specifies a ControlTemplate to be applied to the ContentEditingControl which both displays and edits the cells content. More below.

IsDirty – When true, it means the user has made changes to the cell content which have not been committed to the underlying data source.

IsEditable – When true, the cell’s content can be edited in place. See more about editing below.

IsEditing – Set when the cell enters edit mode.

IsHighlighted – Get or set whether the cell should be highlighted. Normally, this value is set when the mouse is over the cell.

IsSelectable – Determines whether the cell can be selected. The default value is true.

IsSelected – Gets or Sets whether the cell is currently selected. If IsSelectable is false, this property is ignored.

Columns

The grid’s columns are defined by a collection of ColumnDefinition objects. The collection is set and/or accessed through the grid’s ColumnDefinitions property. ColumnDefinitions is a dependency property so it can participate in data binding. Also, both ColumnDefinitions and ColumnDefinition are derived from System.Windows.FrameworkContentElement which allows them to inherit the drid’s data context and use bindings which refer to named elements in the visual tree.

The column definitions can be automatically generated from the data object set as the value of ItemsSource. If the object is an instance of System.Data.DataView then the columns are generated from the Columns in its Table. If the object is an enumeration of objects, then the columns are generated using the first object in the list. The public properties of this object are discovered using reflection. By default, a column is created for each public property. The column header will be the property’s Name, unless the propert definition is decorated with a DisplayName attribute (System.ComponentModel.DisplayNameAttribute.) To prevent a column from being created for a public property, decorate it with a DisplayName attribute and set the value to null.

By default columns will be auto generated if the column definitions are not otherwise provided for at the time the grid loads. To disable auto generation of columns, set property AutoGenerateColumns = false.

While auto column generation can be convienent if you are satisfied with the defaults, far more control is available if you define the columns explicitly. Columns can be defined in Xaml or code. Here is an example in Xaml (taken from the AdvGridSample application):

<dc:ColumnDefinitionCollection x:Key="CustomersGridColumnDefinitions" Padding="10" HorizontalContentAlignment="Center">
    <dc:ColumnDefinition Header="Name" BindingMemberPath="Name" CellIsEditable="True" AutoSizeToFitContent="True" CellHorizontalContentAlignment="Left" />
    <dc:ColumnDefinition Header="Age" BindingMemberPath="Age" CellIsEditable="True" AutoSizePadding="25">
        <dc:ColumnDefinition.EditorSettings>
            <dc:NumericEditorSettings IsButtonHighlightedOnMouseOver="True" MinValue="0" MaxValue="120" IsInCellEditingEnabled="False" EnforceMinMax="True" />
        </dc:ColumnDefinition.EditorSettings>
    </dc:ColumnDefinition>
    <dc:ColumnDefinition Header="Gender" BindingMemberPath="Gender" CellIsEditable="True" AutoSizePadding="20">
        <dc:ColumnDefinition.EditorSettings>
            <dc:EnumEditorSettings IsButtonHighlightedOnMouseOver="True" IsInCellEditingEnabled="True" />
        </dc:ColumnDefinition.EditorSettings>
    </dc:ColumnDefinition>
    <dc:ColumnDefinition Header="Income" BindingMemberPath="Income" CellIsEditable="True" AutoSizePadding="20">
        <dc:ColumnDefinition.EditorSettings>
            <dc:NumericEditorSettings IsButtonHighlightedOnMouseOver="True" MinValue="0" StringFormat="C" />
        </dc:ColumnDefinition.EditorSettings>
    </dc:ColumnDefinition>
    <dc:ColumnDefinition Header="Is Married" BindingMemberPath="IsMarried" CellIsEditable="True" />
    <dc:ColumnDefinition Header="Can Contact" BindingMemberPath="CanContact" CellIsEditable="True">
        <dc:ColumnDefinition.EditorSettings>
            <dc:BooleanEditorSettings Type="DropDown" DisplayNameFalse="Never" DisplayNameTrue="Any Time" IsButtonHighlightedOnMouseOver="False" IsInCellEditingEnabled="False" />
        </dc:ColumnDefinition.EditorSettings>
    </dc:ColumnDefinition>
    <dc:ColumnDefinition Header="Best Time" BindingMemberPath="BestTime" CellIsEditable="True" StringFormat="T" AutoSizePadding="20">
        <dc:ColumnDefinition.EditorSettings>
            <dc:TimeOfDayEditorSettings />
        </dc:ColumnDefinition.EditorSettings>
    </dc:ColumnDefinition>
    <dc:ColumnDefinition Header="Credit Card" BindingMemberPath="CreditCard" CellIsEditable="True" BeginEditTriggerMode="ClickSelected">
        <dc:ColumnDefinition.EditorSettings>
            <dc:DataFormEditorSettings PropertyType="{x:Type local:CreditCard}" DialogWindowTitle="Credit Card Properties" DisplayMemberPath="Issuer">
                <dc:DataFormEditorSettings.FieldDescriptors>
                    <dc:DataFormFieldDescriptor DisplayName="Name:" PropertyName="NameOnCard" />
                    <dc:DataFormFieldDescriptor DisplayName="Card Issuer:" PropertyName="Issuer">
                        <dc:DataFormFieldDescriptor.EditorSettings>
                            <dc:EnumEditorSettings />
                        </dc:DataFormFieldDescriptor.EditorSettings>
                    </dc:DataFormFieldDescriptor>
                    <dc:DataFormFieldDescriptor DisplayName="Expiration Date:" PropertyName="ExpirationDate">
                        <dc:DataFormFieldDescriptor.EditorSettings>
                            <dc:EditorSettings StringFormat="MMM, yyyy" Mask="LLL, 0000" />
                        </dc:DataFormFieldDescriptor.EditorSettings>
                    </dc:DataFormFieldDescriptor>
                    <dc:DataFormFieldDescriptor DisplayName="Number:" PropertyName="CardNumber">
                        <dc:DataFormFieldDescriptor.EditorSettings>
                            <dc:EditorSettings Mask="0000-0000-0000-0000"/>
                        </dc:DataFormFieldDescriptor.EditorSettings>
                    </dc:DataFormFieldDescriptor>
                </dc:DataFormEditorSettings.FieldDescriptors>
            </dc:DataFormEditorSettings>
        </dc:ColumnDefinition.EditorSettings>
    </dc:ColumnDefinition>
</dc:ColumnDefinitionCollection>

ColumnDefinitionCollection

Following is a list of the properties of ColumnDefinitionCollection. Note that several properties of ColumnDefinitionCollection have been mapped to AdvGrid for convienence. All of these properties are dependency properties and hence can be data bound.

• AllowColumnReorder –
• AllowColumnResize –
• AlternationCount –
• BorderBrush –
• BorderThickness –
• CellPadding –
• CellStyle –
• ColumnStyle –
• ColumnsPresenterStyle –
• GridLineBrush –
• GridLineWidth –
• HeaderBackground –
• HeaderClickBehavior –
• HeaderClickMode –
• HorizontalAlignment –
• HorizontalContentAlignment –
• IsContextMenuEnabled –
• Padding – This sets the padding aplied to all the column headers.
• ShowGridLines -
• ShowHeader –
• VerticalContentAlignment –

ColumnDefinition

ColumnDefinition exports a single event: PropertyChanged. The handler type for PropertyChanged is DependencyPropertyChangedEventHandler.

The following CLR properties are exposed on ColumnDefinition:

• AutoSizePadding – A double which is added to a cell’s desired size when performing auto size for the column.
• AutoSizeToFitContent – When true, the column’s width will automatically be increased as needed so that cells’ content is fully visible. Ignored if the column’s Width is not Auto.
• Binding – Defines the binding used for a cell’s content property. By default this value is set at runtime based on the value of BindingMemberPath.
• Id – A string. Not used. Provided for client use only.
• IndexInParent – Gets the index of the column within the parent ColumnDefinitionCollection.
• ParentCollection – Access a reference to the ColumnDefinitionCollection which contains the column definition.

Here is the list of dependency properties available on ColumnDefinition:

• AllowColumnResize –
• Background –
• BeginEditTriggerMode –
• BindingMemberPath –
• CellContentTemplate -
• CellEditorStyle –
• CellEditTemplate –
• CellForeground –
• CellHorizontalContentAlignment –
• CellIsEditable –
• CellIsSelectable –
• CellPadding –
• CellStyle –
• CellVerticalContentAlignment –
• ColumnSort –
• EditorSettings –
• GridLineBrush –
• GridLineWidth –
• Header –
• HeaderTemplate –
• HeaderBackground –
• HeaderBorderThickness –
• HeaderClickBehavior –
• HeaderClickMode –
• HorizontalContentAlignment –
• IsCellSelectedWithin –
• IsLocked –
• IsSelectable –
• IsSelected –
• Pin –
• Padding –
• PresenterStyle –
• ShowHeader –
• SortPriorityLevel –
• StringFormat –
• Width –
• VerticalContentAlignment –
• Visibility –

Editing

To enable in cell editing, set CellIsEditable = true on the coresponding column definition. Alternately, property IsEditable on AdvGridCell can be set, through a style setter or directly. Nothing else is required to enable editing with the default editor, which is basically a text box. (Except for booleans and enumerations. The default editor for bool values is a check box. For enums it is a combo box.)

Actual editing is performed by a ContentEditingControl which is embedded in the default Template for AdvGridCell. The content editing control is also responsible for displaying the cell’s content when not being edited.

There are several built-in editors, in addition to the default editor, each of which targets a specific data types. Assigning one of these editors to a column or cell is simply a matter of setting property EditorSettings to an instance of the class, derived from DevComponents.WPF.Controls.EditorSettings, which maps to the desired editor.

All built-in editors, including the default editor, have a set of options which are exposed as properties of the coresponding EditorSettings class.

For examples in Xaml, see the Xaml example for ColumnDefinitionCollection above.

If none of the built-in editors satisfies your requirements, a custom editor can be created by defining a new Style for the EditingContentControl. The style can be applied by setting it as the value of the property CellEditorStyle of the column definition, or as the value of property EditorStyle of the AdvCellControl. The EditorSettings class also has a property EditorStyle. More information about EditingContentControl is provided below.

EditorSettings

EditorSettings is based on System.Attribute, making it possible to define and customize a property’s editor directly on the property definition itself.

Following are the properties defined on the base class EditorSettings. Each of these properties represents an option common to all or most of the built-in editors. An important thing to note is that the control which does the editing (an instance of EditingContentControl) is also responsible for presenting the cell’s content when it is not in edit mode. For this reason, some of these properties affect the cell’s content when not in edit mode.

• AlwaysShowTextBox – Primarily used when the editor has a button, determies whether the button is sized to occupy the entire cell or only a portion of it, leaving room for a text box containing the value text.
• AutoComplete – An enumeration of type AutoCompleteOptions which defines auto complete options for text based editing. AutoCompleteOptions has the Flags attribute set. Possible values are:
  • Off – Auto complete is not enabled. This is the default.
  • ReadOnly – Auto complete is enabled. Only values in the auto complete list are allowed.
  • FreeText – Auto complete is enabled. The user is allowed to enter any text.
  • DontConvertCase – When auto complete is enabled, suggestions are case sensitive.
• AutoCompleteList – Provides a list of possible values for auto complete. Required if auto complete is enabled.
• DisplayMemberPath – If a cell’s data object is a complex object (i.e. it has properties of its own) then this property can be used to identify the path to the property which defines the text to display for the cell.
• EditorStyle – A Style which, if set, is applied to the EditingContentControl.
• EditorStyleResourceKey – A string which is the key of a discoverable resource defining a Style which is applied to the EditingContentControl. This property is specifically intended for when the EditorSettings are being applied as an Attribute to the property which serves as the data source for the cell/column.
• IsInCellEditingEnabled – Determies whether the user can edit the cell’s value directly in the text box.
• IsButtonHighlightedOnMouseOver – When true, buttons are highlighted when the mouse is over them.
• Mask – A string which defines a mask to use on the cell’s string value. For more information see MaskedTextProvider documentation on MSDN.
• NullValueDisplayValue – Specifies string to display for the null value.
• PropertyType – The Type of the property being edited. By default, this value is obtained at run-time using reflection.
• StringFormat – A format string applied to the cell’s string value.
• TypeConverter – A System.ComponentModel.TypeConverter which if set is used to convert between the object being edited and the string representation of the object.
• ValidationRules – A list of System.Windows.Controls.ValidationRule objects. Rules added to this list are added to the Binding which binds the cell’s content property.

Following are the editor settings classes for the built-in editors that are available at this time. They are all derived from EditorSettings.

BooleanEditorSettings

Used with the built-in boolean editor. Defines the following properties:

<ControlTemplate TargetType="{x:Type dc:AdvGrid}">
    <Border Padding="{TemplateBinding Padding}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}">
        <Grid Name="MainGrid">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto" />
                <ColumnDefinition />
            </Grid.ColumnDefinitions>
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto"/>
                <RowDefinition />
            </Grid.RowDefinitions>
            <Grid Height="{Binding ElementName=ColumnsPresenter, Path=HeaderHeight}">
                <dc:AdvGridHeaderCorner x:Name="HeaderCorner" Width="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=RowHeaderWidth, Mode=TwoWay}" />
            </Grid>
            <dc:ColumnsPresenter x:Name="ColumnsPresenter" Grid.Column="1" Grid.RowSpan="2"
                                ItemsSource="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=ColumnDefinitions}"
                                dc:DragDrop.DragAdornerTemplate="{DynamicResource {x:Static dc:AdvGrid.ColumnHeaderDragAdornerTemplateKey}}"
                                dc:DragDrop.DropAdornerTemplate="{DynamicResource {x:Static dc:AdvGrid.ColumnHeaderDropAdornerTemplateKey}}" />
            <ScrollViewer Name="ScrollViewer" Grid.ColumnSpan="2" Grid.Row="1" Padding="0,-1,0,0" Focusable="False" CanContentScroll="True" ClipToBounds="False"
                            IsDeferredScrollingEnabled="{TemplateBinding ScrollViewer.IsDeferredScrollingEnabled}">
                <dc:AdvGridPanel x:Name="ItemsHost" Margin="0,1,0,0" />
            </ScrollViewer>
            <TextBlock Name="InitializingMessage" Grid.Row="1" Grid.Column="1" Opacity="0" HorizontalAlignment="Center" VerticalAlignment="Center"
                        Text="{DynamicResource {x:Static dc:AdvGrid.DataInitializingMessageStringKey}}"/>
            <dc:PinnedColumnsSeparator Pin="Left" Grid.Column="1" Grid.RowSpan="2" Visibility="Collapsed" HorizontalAlignment="Left" />
            <dc:PinnedColumnsSeparator Pin="Right" Grid.Column="1" Grid.RowSpan="2" Visibility="Collapsed" HorizontalAlignment="Left" />
        </Grid>
        <VisualStateManager.VisualStateGroups>
            <VisualStateGroup Name="VirtualizingDataStates">
                <VisualState Name="DataInitialized" />
                <VisualState Name="DataInitializing">
                    <Storyboard>
                        <DoubleAnimation Storyboard.TargetName="InitializingMessage" Storyboard.TargetProperty="Opacity" Duration="0" To="1" />
                    </Storyboard>
                </VisualState>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>
    </Border>
    <ControlTemplate.Triggers>
        <Trigger Property="ShowRowHeaders" Value="False">
            <Setter TargetName="HeaderCorner" Property="Visibility" Value="Collapsed" />
        </Trigger>
    </ControlTemplate.Triggers>
</ControlTemplate>

<ControlTemplate TargetType="dc:AdvGridHeaderCorner">
    <Grid Background="{TemplateBinding Background}">
        <Border BorderThickness="{TemplateBinding BorderThickness}" BorderBrush="{TemplateBinding BorderBrush}" />
        <Polygon Name="Glyph" Points="10,0 10,10 0,10" Margin="5" HorizontalAlignment="Right" VerticalAlignment="Bottom" Stretch="Uniform" RenderTransformOrigin="0.5,0.5"
                    Fill="{DynamicResource {x:Static dc:AdvGrid.HeaderCornerGlyphBrushKey}}">
            <Polygon.RenderTransform>
                <RotateTransform x:Name="GlyphTransform" Angle="0" />
            </Polygon.RenderTransform>
        </Polygon>
        <Thumb Background="Transparent" Width="4" HorizontalAlignment="Right" VerticalAlignment="Stretch" Cursor="SizeWE" BorderBrush="Transparent"
                Visibility="{Binding RelativeSource={RelativeSource AncestorType=dc:AdvGrid}, Path=LockRowHeaderWidth, Converter={StaticResource boolToVisibilityConverter}, ConverterParameter=Inverse}">
            <Thumb.Template>
                <ControlTemplate>
                    <Grid Background="Transparent" />
                </ControlTemplate>
            </Thumb.Template>
        </Thumb>
        <VisualStateManager.VisualStateGroups>
            <VisualStateGroup Name="CheckedStates">
                <VisualState Name="Unchecked" />
                <VisualState Name="Checked">
                    <Storyboard>
                        <DoubleAnimation Storyboard.TargetName="GlyphTransform" Storyboard.TargetProperty="Angle" Duration="0" To="180" />
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Glyph" Storyboard.TargetProperty="HorizontalAlignment">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="{x:Static HorizontalAlignment.Left}" />
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Glyph" Storyboard.TargetProperty="VerticalAlignment">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="{x:Static VerticalAlignment.Top}" />
                        </ObjectAnimationUsingKeyFrames>
                    </Storyboard>
                </VisualState>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>
    </Grid>
</ControlTemplate>

<ControlTemplate TargetType="dc:AdvGridRow">
    <Grid Background="Transparent">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto" />
            <ColumnDefinition />
        </Grid.ColumnDefinitions>
 
        <dc:AdvGridRowHeader x:Name="RowHeader" Content="{TemplateBinding Header}" ContentTemplate="{TemplateBinding HeaderTemplate}"
                                Width="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=ParentTable.RowHeaderWidth}" 
                                Visibility="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=ParentTable.ShowRowHeaders, Converter={StaticResource boolToVisibilityConverter}}" />
 
        <Border Grid.Column="1" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" />
        <Border Name="HighlightBorder" Grid.Column="1" Opacity="0" Background="{DynamicResource {x:Static dc:AdvGridRow.HighlightBackgroundKey}}" />
        <Border Name="SelectionBorder" Grid.Column="1" Opacity="0" Background="{DynamicResource {x:Static dc:AdvGridRow.SelectedBackgroundKey}}" />
        <Border Name="SelectedInactiveBorder" Grid.Column="1" Opacity="0" Background="{DynamicResource {x:Static dc:AdvGridRow.SelectedInactiveBackgroundKey}}" />
 
        <Border Name="CellsBorder" Grid.Column="1" BorderBrush="{TemplateBinding HorizontalGridLineBrush}" 
                BorderThickness="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=HorizontalGridLineHeight, Converter={StaticResource doubleToThicknessConverter}, ConverterParameter=Bottom}">
            <dc:AdvCellPanel x:Name="CellPanel" />
        </Border>
        <Rectangle Name="FocusRect" Grid.Column="1" Opacity="0" Stroke="Black" StrokeDashArray="1,2" SnapsToDevicePixels="True" />
 
        <!-- Use a Cell here to ensure height of row when loading matches height of row when loaded. -->
        <dc:AdvGridCell x:Name="LoadingMessage" Visibility="Collapsed" Grid.Column="1" VerticalContentAlignment="Center" HorizontalAlignment="Left" 
                        Margin="20,0,0,0" Content="{DynamicResource {x:Static dc:AdvGridRow.DataLoadingMessageStringKey}}" />
 
        <VisualStateManager.VisualStateGroups>
            <VisualStateGroup Name="SelectionStates">
                <VisualState Name="Unselected" />
                <VisualState Name="Selected">
                    <Storyboard>
                        <DoubleAnimation Storyboard.TargetName="SelectionBorder" Storyboard.TargetProperty="Opacity" To="1" Duration="0" />
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="FocusRect" Storyboard.TargetProperty="Visibility">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="{x:Static Visibility.Collapsed}" />
                        </ObjectAnimationUsingKeyFrames>
                    </Storyboard>
                </VisualState>
                <VisualState Name="CellSelectedWithin" />
                <VisualState Name="CellSelectedWithinInactive" />
                <VisualState Name="AllColumnsSelected" />
                <VisualState Name="AllColumnsSelectedInactive" />
                <VisualState Name="SelectedInactive">
                    <Storyboard>
                        <DoubleAnimation Storyboard.TargetName="SelectedInactiveBorder" Storyboard.TargetProperty="Opacity" To="1" Duration="0" />
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="FocusRect" Storyboard.TargetProperty="Visibility">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="{x:Static Visibility.Collapsed}" />
                        </ObjectAnimationUsingKeyFrames>
                    </Storyboard>
                </VisualState>
            </VisualStateGroup>
            <VisualStateGroup Name="HighlightedStates">
                <VisualState Name="NotHighlighted" />
                <VisualState Name="IsHighlighted">
                    <Storyboard>
                        <DoubleAnimation Storyboard.TargetName="HighlightBorder" Storyboard.TargetProperty="Opacity" To="1" Duration="0" />
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="FocusRect" Storyboard.TargetProperty="Visibility">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="{x:Static Visibility.Collapsed}" />
                        </ObjectAnimationUsingKeyFrames>
                    </Storyboard>
                </VisualState>
            </VisualStateGroup>
            <VisualStateGroup Name="FocusStates">
                <VisualState Name="Unfocused" />
                <VisualState Name="Focused">
                    <Storyboard>
                        <DoubleAnimation Storyboard.TargetName="FocusRect" Storyboard.TargetProperty="Opacity" Duration="0" To="1" />
                    </Storyboard>
                </VisualState>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>
    </Grid>
    <ControlTemplate.Triggers>
        <Trigger Property="ShowHorizontalGridLines" Value="False">
            <Setter TargetName="CellsBorder" Property="BorderThickness" Value="0" />
        </Trigger>
        <Trigger Property="IsDataLoading" Value="True">
            <Setter TargetName="CellPanel" Property="Opacity" Value="0" />
            <Setter TargetName="LoadingMessage" Property="Visibility" Value="Visible" />
        </Trigger>
    </ControlTemplate.Triggers>
</ControlTemplate>

<ControlTemplate TargetType="dc:AdvGridRowHeader">
    <Grid Background="{TemplateBinding Background}">
        <Border BorderThickness="{TemplateBinding BorderThickness}" BorderBrush="{TemplateBinding BorderBrush}">
            <Grid>
                <Border Name="CellSelectedBorder" Opacity="0" Margin="0,-1,-1,-1" BorderThickness="0,1,1,1" 
                        BorderBrush="{DynamicResource {x:Static dc:AdvGridRow.CellSelectedHeaderBorderBrushKey}}" Background="{DynamicResource {x:Static dc:AdvGridRow.CellSelectedHeaderBackgroundKey}}" />
                <Border Name="RowSelectedBorder" Opacity="0" Margin="0,-1,-1,-1" BorderThickness="0,1,1,1" 
                        BorderBrush="{DynamicResource {x:Static dc:AdvGridRow.RowSelectedHeaderBorderBrushKey}}" Background="{DynamicResource {x:Static dc:AdvGridRow.RowSelectedHeaderBackgroundKey}}" />
                <Border Name="SelectedInactiveBorder" Opacity="0" Margin="0,-1,-1,-1" BorderThickness="0,1,1,1" 
                        BorderBrush="{DynamicResource {x:Static dc:AdvGridRow.SelectedInactiveHeaderBorderBrushKey}}" Background="{DynamicResource {x:Static dc:AdvGridRow.SelectedInactiveHeaderBackgroundKey}}" />
                <Border Name="HighlightBorder"  Opacity="0" Margin="0,-1,-1,-1" BorderThickness="0,1,1,1" 
                        BorderBrush="{DynamicResource {x:Static dc:AdvGridRow.HighlightHeaderBorderBrushKey}}" Background="{DynamicResource {x:Static dc:AdvGridRow.HighlightHeaderBackgroundKey}}" />
                <ContentPresenter Name="Presenter" Margin="{TemplateBinding Padding}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" />
                <Path Name="FocusGlyph" Opacity="0" Style="{DynamicResource {x:Static dc:AdvGridRow.HeaderSelectedGlyphStyleKey}}" />
            </Grid>
        </Border>
        <Thumb HorizontalAlignment="Stretch" VerticalAlignment="Bottom" Height="3" Cursor="SizeNS" Template="{StaticResource RowHeaderThumbTemplate}"
                Visibility="{Binding RelativeSource={RelativeSource AncestorType=dc:AdvGridRow}, Path=LockHeight, Converter={StaticResource boolToVisibilityConverter}, ConverterParameter=Inverse}" />
        <Thumb VerticalAlignment="Stretch" HorizontalAlignment="Right" Width="3" Cursor="SizeWE" Template="{StaticResource RowHeaderThumbTemplate}"
                Visibility="{Binding RelativeSource={RelativeSource AncestorType=dc:AdvGrid}, Path=LockRowHeaderWidth, Converter={StaticResource boolToVisibilityConverter}, ConverterParameter=Inverse}" />
        <VisualStateManager.VisualStateGroups>
            <VisualStateGroup Name="CommonStates">
                <VisualState Name="Normal" />
                <VisualState Name="Disabled" />
                <VisualState Name="Highlighted">
                    <Storyboard>
                        <DoubleAnimation Storyboard.TargetName="HighlightBorder" Storyboard.TargetProperty="Opacity" Duration="0" To="1" />
                    </Storyboard>
                </VisualState>
            </VisualStateGroup>
            <VisualStateGroup Name="FocusStates">
                <VisualState Name="RowUnfocused" />
                <VisualState Name="RowFocused">
                    <Storyboard>
                        <DoubleAnimation Storyboard.TargetName="FocusGlyph" Storyboard.TargetProperty="Opacity" Duration="0" To="1" />
                    </Storyboard>
                </VisualState>
            </VisualStateGroup>
            <VisualStateGroup Name="SelectionStates">
                <VisualState Name="Unselected" />
                <VisualState Name="Selected">
                    <Storyboard>
                        <DoubleAnimation Storyboard.TargetName="RowSelectedBorder" Storyboard.TargetProperty="Opacity" Duration="0" To="1" />
                    </Storyboard>
                </VisualState>
                <VisualState Name="CellSelectedWithin">
                    <Storyboard>
                        <DoubleAnimation Storyboard.TargetName="CellSelectedBorder" Storyboard.TargetProperty="Opacity" Duration="0" To="1" />
                    </Storyboard>
                </VisualState>
                <VisualState Name="AllColumnsSelected">
                    <Storyboard>
                        <DoubleAnimation Storyboard.TargetName="RowSelectedBorder" Storyboard.TargetProperty="Opacity" Duration="0" To="1" />
                    </Storyboard>
                </VisualState>
                <VisualState Name="SelectedInactive">
                    <Storyboard>
                        <DoubleAnimation Storyboard.TargetName="SelectedInactiveBorder" Storyboard.TargetProperty="Opacity" Duration="0" To="1" />
                    </Storyboard>
                </VisualState>
                <VisualState Name="CellSelectedWithinInactive">
                    <Storyboard>
                        <DoubleAnimation Storyboard.TargetName="SelectedInactiveBorder" Storyboard.TargetProperty="Opacity" Duration="0" To="1" />
                    </Storyboard>
                </VisualState>
                <VisualState Name="AllColumnsSelectedInactive">
                    <Storyboard>
                        <DoubleAnimation Storyboard.TargetName="SelectedInactiveBorder" Storyboard.TargetProperty="Opacity" Duration="0" To="1" />
                    </Storyboard>
                </VisualState>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>
    </Grid>
</ControlTemplate>

<ControlTemplate TargetType="dc:AdvGridCell">
    <Grid Name="MainGrid" Background="Transparent">
        <Grid.ColumnDefinitions>
            <ColumnDefinition />
            <ColumnDefinition Width="Auto" />
        </Grid.ColumnDefinitions>
        <Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" />
        <Border Name="SelectedBorder" Opacity="0" BorderThickness="{TemplateBinding BorderThickness}" 
                BorderBrush="{DynamicResource {x:Static dc:AdvGridCell.IsSelectedBorderBrushKey}}" Background="{DynamicResource {x:Static dc:AdvGridCell.IsSelectedBackgroundKey}}" />
        <Border Name="InactiveSelectedBorder" Opacity="0" BorderThickness="{TemplateBinding BorderThickness}" 
                BorderBrush="{DynamicResource {x:Static dc:AdvGridCell.SelectedInactiveBorderBrushKey}}" Background="{DynamicResource {x:Static dc:AdvGridCell.SelectedInactiveBackgroundKey}}" />
        <Border Name="HighlightBorder" Opacity="0" BorderThickness="{TemplateBinding BorderThickness}" 
                BorderBrush="{DynamicResource {x:Static dc:AdvGridCell.IsHighlightedBorderBrushKey}}" Background="{DynamicResource {x:Static dc:AdvGridCell.IsHighlightedBackgroundKey}}" />
        <Rectangle Name="GridLine" Grid.Column="1" VerticalAlignment="Stretch"
                    Visibility="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=CellDefinition.ParentCollection.ShowGridLines, Converter={StaticResource boolToVisibilityConverter}}"
                    Fill="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=CellDefinition.GridLineBrush}" 
                    Width="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=CellDefinition.GridLineWidth}" />
        <dc:EditingContentControl x:Name="Editor" Margin="-1" Style="{TemplateBinding EditorStyle}" Validation.ErrorTemplate="{TemplateBinding Validation.ErrorTemplate}"
                                    Padding="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Padding, Converter={StaticResource additionConverter}, ConverterParameter=1}"
                                    VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}" HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
                                    EditorSettings="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=CellDefinition.EditorSettings}"
                                    ContentTemplate="{TemplateBinding ContentTemplate}" ContentStringFormat="{TemplateBinding ContentStringFormat}"
                                    Content="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Content, Mode=TwoWay, UpdateSourceTrigger=Explicit}" />
        <VisualStateManager.VisualStateGroups>
            <VisualStateGroup Name="CommonStates">
                <VisualState Name="Normal" />
                <VisualState Name="Disabled" />
                <VisualState Name="Highlighted">
                    <Storyboard>
                        <DoubleAnimation Storyboard.TargetName="HighlightBorder" Storyboard.TargetProperty="Opacity" Duration="00:00:00.03" To="1" />
                    </Storyboard>
                </VisualState>
            </VisualStateGroup>
            <VisualStateGroup Name="SelectionStates">
                <VisualState Name="Unselected" />
                <VisualState Name="Selected">
                    <Storyboard>
                        <DoubleAnimation Storyboard.TargetName="SelectedBorder" Storyboard.TargetProperty="Opacity" Duration="00:00:00.03" To="1" />
                    </Storyboard>
                </VisualState>
                <VisualState Name="SelectedByColumn">
                    <Storyboard>
                        <DoubleAnimation Storyboard.TargetName="SelectedBorder" Storyboard.TargetProperty="Opacity" Duration="00:00:00.03" To="1" />
                    </Storyboard>
                </VisualState>
                <VisualState Name="SelectedInactive">
                    <Storyboard>
                        <DoubleAnimation Storyboard.TargetName="InactiveSelectedBorder" Storyboard.TargetProperty="Opacity" Duration="00:00:00.03" To="1" />
                    </Storyboard>
                </VisualState>
            </VisualStateGroup>                            
        </VisualStateManager.VisualStateGroups>
    </Grid>
</ControlTemplate>

<ControlTemplate TargetType="{x:Type ctrls:ColumnsPresenter}">
    <Grid Name="MainGrid">
        <Grid.ContextMenu>
            <ContextMenu ItemsSource="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=ColumnDefinitions}" 
                            ItemContainerStyle="{DynamicResource {x:Static ctrls:ColumnsPresenter.ContextMenuItemStyleKey}}" />
        </Grid.ContextMenu>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition />
        </Grid.RowDefinitions>
        <ContentPresenter Name="Label" Content="{TemplateBinding Label}" ContentTemplate="{TemplateBinding LabelTemplate}" />
        <Border Grid.Row="1" BorderThickness="{TemplateBinding BorderThickness}" BorderBrush="{TemplateBinding BorderBrush}">
            <Grid>
                <Rectangle VerticalAlignment="Top" Height="{TemplateBinding HeaderHeight}" Fill="{TemplateBinding HeaderBackground}" />
                <ItemsPresenter />
                <Border VerticalAlignment="Top" Height="{TemplateBinding HeaderHeight}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding HeaderBorderThickness}" />
            </Grid>
        </Border>
    </Grid>
    <ControlTemplate.Triggers>
        <DataTrigger Binding="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=ColumnDefinitions.IsContextMenuEnabled}" Value="False">
            <Setter TargetName="MainGrid" Property="Grid.ContextMenu" Value="{x:Null}" />
        </DataTrigger>
    </ControlTemplate.Triggers>
</ControlTemplate>

<ControlTemplate TargetType="ctrls:ColumnPresenter">
    <Grid Background="Transparent" SnapsToDevicePixels="True">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition />
        </Grid.RowDefinitions>
        <ctrls:ColumnHeader x:Name="Header" Visibility="{Binding ShowHeader, Converter={StaticResource boolToVisibilityConverter}}" />
        <Thumb Name="ResizeThumb" Width="6" HorizontalAlignment="Right" Cursor="SizeWE" 
                Visibility="{Binding AllowColumnResize, Converter={StaticResource boolToVisibilityConverter}}">
            <Thumb.Template>
                <ControlTemplate>
                    <Grid Background="Transparent" />
                </ControlTemplate>
            </Thumb.Template>
        </Thumb>
        <Border Name="ColumnBorder" Grid.Row="1" Background="{TemplateBinding Background}" BorderThickness="{TemplateBinding BorderThickness}" BorderBrush="{TemplateBinding BorderBrush}" />
        <Rectangle Grid.Row="1" HorizontalAlignment="Right" VerticalAlignment="Top"
                    Height="{Binding RelativeSource={RelativeSource AncestorType=ctrls:AdvTabularControl}, Path=Padding, Converter={StaticResource thicknessToDoubleConverter}, ConverterParameter=Top}" 
                    Fill="{Binding GridLineBrush}" Width="{Binding GridLineWidth}" />
    </Grid>
    <ControlTemplate.Triggers>
        <Trigger Property="Pin" Value="Right">
            <Setter TargetName="ResizeThumb" Property="HorizontalAlignment" Value="Left" />
            <Setter TargetName="ResizeThumb" Property="Margin" Value="-6,0,0,0" />
        </Trigger>
    </ControlTemplate.Triggers>
</ControlTemplate>

<ControlTemplate TargetType="ctrls:ColumnHeader">
    <ControlTemplate.Resources>
    </ControlTemplate.Resources>
    <Grid Background="Transparent">
        <Border Background="{TemplateBinding Background}" BorderThickness="{TemplateBinding BorderThickness}" BorderBrush="{TemplateBinding BorderBrush}" />
        <Border Name="CellSelectedBorder" Margin="-1,0,0,0" Opacity="0" BorderThickness="1,0,1,1" BorderBrush="{DynamicResource {x:Static ctrls:ColumnPresenter.CellSelectedHeaderBorderBrushKey}}"
                Background="{DynamicResource {x:Static ctrls:ColumnPresenter.CellSelectedHeaderBackgroundKey}}" />
        <Border Name="ColumnSelectedBorder" Margin="-1,0,0,0" Opacity="0" BorderThickness="1,0,1,1" BorderBrush="{DynamicResource {x:Static ctrls:ColumnPresenter.ColumnSelectedHeaderBorderBrushKey}}"
                Background="{DynamicResource {x:Static ctrls:ColumnPresenter.ColumnSelectedHeaderBackgroundKey}}" />
        <Border Name="SelectedInactiveBorder" Margin="-1,0,0,0" Opacity="0" BorderThickness="1,0,1,1" BorderBrush="{DynamicResource {x:Static ctrls:ColumnPresenter.SelectedInactiveHeaderBorderBrushKey}}"
                Background="{DynamicResource {x:Static ctrls:ColumnPresenter.SelectedInactiveHeaderBackgroundKey}}" />
        <Border Name="PressedBorder" Margin="-1,0,0,0" Opacity="0" BorderThickness="1,0,1,1" BorderBrush="{DynamicResource {x:Static ctrls:ColumnPresenter.HeaderHighlightBorderBrushKey}}"
                Background="{DynamicResource {x:Static ctrls:ColumnPresenter.HeaderPressedBackgroundKey}}" />
        <Border Name="HighlightBorder" Margin="-1,0,0,0" Opacity="0" BorderThickness="1,0,1,1" BorderBrush="{DynamicResource {x:Static ctrls:ColumnPresenter.HeaderHighlightBorderBrushKey}}"
                Background="{DynamicResource {x:Static ctrls:ColumnPresenter.HeaderHighlightBackgroundKey}}" />
        <ContentPresenter Name="Presenter" Margin="{TemplateBinding Padding}" 
                            HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" />
        <Control Name="SortGlyph" Grid.Column="1" Style="{DynamicResource {x:Static ctrls:ColumnPresenter.ColumnSortGlyphStyleKey}}" />
        <VisualStateManager.VisualStateGroups>
            <VisualStateGroup Name="CommonStates">
                <VisualState Name="Normal" />
                <VisualState Name="Disabled" />
                <VisualState Name="Highlighted">
                    <Storyboard>
                        <DoubleAnimation Storyboard.TargetName="HighlightBorder" Storyboard.TargetProperty="Opacity" Duration="0" To="1" />
                    </Storyboard>
                </VisualState>
                <VisualState Name="Pressed">
                    <Storyboard>
                        <DoubleAnimation Storyboard.TargetName="PressedBorder" Storyboard.TargetProperty="Opacity" Duration="0" To="1" />
                    </Storyboard>
                </VisualState>
            </VisualStateGroup>
            <VisualStateGroup Name="SelectionStates">
                <VisualState Name="Unselected" />
                <VisualState Name="ColumnSelected">
                    <Storyboard>
                        <DoubleAnimation Storyboard.TargetName="ColumnSelectedBorder" Storyboard.TargetProperty="Opacity" Duration="0" To="1" />
                    </Storyboard>
                </VisualState>
                <VisualState Name="CellSelectedWithin">
                    <Storyboard>
                        <DoubleAnimation Storyboard.TargetName="CellSelectedBorder" Storyboard.TargetProperty="Opacity" Duration="0" To="1" />
                    </Storyboard>
                </VisualState>
                <VisualState Name="SelectedInactive">
                    <Storyboard>
                        <DoubleAnimation Storyboard.TargetName="SelectedInactiveBorder" Storyboard.TargetProperty="Opacity" Duration="0" To="1" />
                    </Storyboard>
                </VisualState>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>
    </Grid>
</ControlTemplate>

<Style x:Key="{x:Static ctrls:ColumnsPresenter.ContextMenuItemStyleKey}" TargetType="MenuItem">
    <Style.Resources>
        <ctrls:VisibilityToBooleanConverter x:Key="visibilityToBoolConverter" />
    </Style.Resources>
    <Setter Property="Foreground" Value="{DynamicResource {x:Static ctrls:MenuResources.MenuItemForegroundKey}}" />
    <Setter Property="Padding" Value="{DynamicResource {x:Static ctrls:MenuResources.MenuItemPaddingKey}}" />
    <Setter Property="IsCheckable" Value="True" />
    <Setter Property="IsChecked" Value="{Binding Visibility, Converter={StaticResource visibilityToBoolConverter}, Mode=TwoWay}" />
    <Setter Property="Header" Value="{Binding Header}" />
    <Style.Triggers>
        <DataTrigger Binding="{Binding IsLocked}" Value="True">
            <Setter Property="Visibility" Value="Collapsed" />
        </DataTrigger>
    </Style.Triggers>
</Style>

Related posts:

1. WPF Color Control Quick Start Guide
2. Brush Control Quick Start Guide
3. WPF AdvTree Quick Start Guide

1. Add RibbonControl to the form.
2. Select the RibbonTabItem2 that is created by default.
3. In VS.NET Property window find Group property and select it
4. Click the drop-down button for Group property and choose Create New Group
5. Select RibbonControl and in Property VS.NET window ensure that TabGroupsVisible property is set to true

Note that Tab Groups will be displayed only if there is space above the tab to show the group. If Quick Access Toolbar extends over the tab then group will not be rendered.

Related posts:

1. How to use Option Groups feature
2. Ribbon Quick Access Toolbar Customization
3. How To Add GalleryGroup to GalleryContainer

1. Set DataSource property to the source of your data. This can be array of custom objects or data set.
2. Set ItemTemplate property to the item which will act as template for each data row from data source. The ItemTemplate is an BaseItem inherited item that is repeated for each data row. In VS.NET designer you can invoke drop-down to create desired item to use as template.
3. Set ItemTemplateBindings collection with the list of bindings that are applied on the ItemTemplate. ItemTemplateBindings collection accepts BindingDef type which describes the single binding. Two key properties on BindingDef must be set: DataMember – which is name of the field from your data-source that provides the data for PropertyName – which specifies the property on ItemTemplate which receives data.

   Please note that if you are changing ItemTemplateBindings collection after the DataSource is assigned, you should call RefreshItems() to re-generate the visual data representation.

You can add following code to the form which has itemPanel1 control added to it to demo the data-binding (note that code assumes your form is named Form1 and ItemPanel is named itemPanel1):

C#:

public Form1()
{
    InitializeComponent();
 
    // Create custom data
    List<CustomClass> items = new List<CustomClass>();
    for (int i = 0; i < 20; i++)
    {
        items.Add(new CustomClass("Item " + i.ToString(), "Name " + i.ToString()));
    }
    // Create template used for each data row
    MetroTileItem template = new MetroTileItem();
    template.TileColor = eMetroTileColor.Magenta;
    itemPanel1.ItemTemplate = template;
    // Define bindings
    itemPanel1.ItemTemplateBindings.Clear();
    // Bind MetroTileItem.Text to CustomClass.Text
    itemPanel1.ItemTemplateBindings.Add(new BindingDef("Text", "Text"));
    // Bind MetroTileItem.TitleText to CustomClass.Name
    itemPanel1.ItemTemplateBindings.Add(new BindingDef("TitleText", "Name"));
    // Assign data source
    itemPanel1.DataSource = items;
}
 
public class CustomClass : INotifyPropertyChanged
{
    public CustomClass()
    {
    }
    /// <summary>
    /// Initializes a new instance of the CustomClass class.
    /// </summary>
    /// <param name="text"></param>
    /// <param name="name"></param>
    public CustomClass(string text, string name)
    {
        _Text = text;
        _Name = name;
    }
 
    private string _Text;
    public string Text
    {
        get { return _Text; }
        set
        {
            _Text = value;
            OnPropertyChanged(new PropertyChangedEventArgs("Text"));
        }
    }
 
    private string _Name;
    public string Name
    {
        get { return _Name; }
        set
        {
            _Name = value;
            OnPropertyChanged(new PropertyChangedEventArgs("Name"));
        }
    }
 
    #region INotifyPropertyChanged Members
    /// <summary>
    /// Raises the PropertyChanged event.
    /// </summary>
    /// <param name="e">Provides event arguments.</param>
    protected virtual void OnPropertyChanged(PropertyChangedEventArgs e)
    {
        PropertyChangedEventHandler handler = PropertyChanged;
        if (handler != null) handler(this, e);
    }
    /// <summary>
    /// Occurs when property on BindingDef object has changed.
    /// </summary>
    [Description("Occurs when property on BindingDef object has changed.Occurs when property on BindingDef object has changed.")]
    public event PropertyChangedEventHandler PropertyChanged;
 
    #endregion
}

VB:

Public Sub New()
	' Create custom data
	Dim items As New List(Of CustomClass)()
	For i As Integer = 0 To 19
		items.Add(New CustomClass("Item " & i.ToString(), "Name " & i.ToString()))
	Next
	' Create template used for each data row
	Dim template As New MetroTileItem()
	template.TileColor = eMetroTileColor.Magenta
	itemPanel1.ItemTemplate = template
	' Define bindings
	itemPanel1.ItemTemplateBindings.Clear()
	' Bind MetroTileItem.Text to CustomClass.Text
	itemPanel1.ItemTemplateBindings.Add(New BindingDef("Text", "Text"))
	' Bind MetroTileItem.TitleText to CustomClass.Name
	itemPanel1.ItemTemplateBindings.Add(New BindingDef("TitleText", "Name"))
	' Assign data source
	itemPanel1.DataSource = items
End Sub
 
Public Class CustomClass
	Implements INotifyPropertyChanged
	Public Sub New()
	End Sub
	''' <summary>
	''' Initializes a new instance of the CustomClass class.
	''' </summary>
	''' <param name="text"></param>
	''' <param name="name"></param>
	Public Sub New(text As String, name As String)
		_Text = text
		_Name = name
	End Sub
 
	Private _Text As String
	Public Property Text() As String
		Get
			Return _Text
		End Get
		Set
			_Text = value
			OnPropertyChanged(New PropertyChangedEventArgs("Text"))
		End Set
	End Property
 
	Private _Name As String
	Public Property Name() As String
		Get
			Return _Name
		End Get
		Set
			_Name = value
			OnPropertyChanged(New PropertyChangedEventArgs("Name"))
		End Set
	End Property
 
	#Region "INotifyPropertyChanged Members"
	''' <summary>
	''' Raises the PropertyChanged event.
	''' </summary>
	''' <param name="e">Provides event arguments.</param>
	Protected Overridable Sub OnPropertyChanged(e As PropertyChangedEventArgs)
		Dim handler As PropertyChangedEventHandler = PropertyChanged
		RaiseEvent handler(Me, e)
	End Sub
	''' <summary>
	''' Occurs when property on BindingDef object has changed.
	''' </summary>
	<Description("Occurs when property on BindingDef object has changed.Occurs when property on BindingDef object has changed.")> _
	Public Event PropertyChanged As PropertyChangedEventHandler
 
	#End Region
End Class
 
Convert again

Related posts:

1. Data-binding on popup and DataSource
2. Data Binding on undocked/floating Bars, dockable windows
3. Micro-Charts for WinForms Quick Start Guide

<dc:NavigationPane DataContext="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type Window}}}" ItemsSource="{Binding Path=PaneItems}" LargeItemsCount="2">
    <dc:NavigationPane.ItemTemplate>
        <DataTemplate>
            <TextBlock Text="{Binding Path=DisplayName}" />
        </DataTemplate>
    </dc:NavigationPane.ItemTemplate>
    <dc:NavigationPane.ItemContainerStyle>
        <Style TargetType="{x:Type dc:PaneItem}">
            <Setter Property="ImageSource" Value="{Binding Path=DisplayImage}" />
        </Style>
    </dc:NavigationPane.ItemContainerStyle>
</dc:NavigationPane>

Notice that we created new ItemTemplate and also notice how Image is set by creating ItemContainerStyle.

Related posts:

1. How to Create WPF Navigation Pane Items Using Code

C#:

void DataGridViewRowPostPaint(object sender, DataGridViewRowPostPaintEventArgs e)
{
    DataGridView dg = (DataGridView)sender;
    // Current row record
    string rowNumber = (e.RowIndex + 1).ToString();
 
    // Format row based on number of records displayed by using leading zeros
    while (rowNumber.Length < dg.RowCount.ToString().Length) rowNumber = "0" + rowNumber;
 
    // Position text
    SizeF size = e.Graphics.MeasureString(rowNumber, this.Font);
    if (dg.RowHeadersWidth < (int)(size.Width + 20)) dg.RowHeadersWidth = (int)(size.Width + 20);
 
    // Use default system text brush
    Brush b = SystemBrushes.ControlText;
 
    // Draw row number
    e.Graphics.DrawString(rowNumber, dg.Font, b, e.RowBounds.Location.X + 15, e.RowBounds.Location.Y + ((e.RowBounds.Height - size.Height) / 2));
}

VB:

Private Sub DataGridViewRowPostPaint(sender As Object, e As DataGridViewRowPostPaintEventArgs)
	Dim dg As DataGridView = DirectCast(sender, DataGridView)
	' Current row record
	Dim rowNumber As String = (e.RowIndex + 1).ToString()
 
	' Format row based on number of records displayed by using leading zeros
	While rowNumber.Length < dg.RowCount.ToString().Length
		rowNumber = "0" & rowNumber
	End While
 
	' Position text
	Dim size As SizeF = e.Graphics.MeasureString(rowNumber, Me.Font)
	If dg.RowHeadersWidth < CInt(size.Width + 20) Then
		dg.RowHeadersWidth = CInt(size.Width + 20)
	End If
 
	' Use default system text brush
	Dim b As Brush = SystemBrushes.ControlText
 
	' Draw row number
	e.Graphics.DrawString(rowNumber, dg.Font, b, e.RowBounds.Location.X + 15, e.RowBounds.Location.Y + ((e.RowBounds.Height - size.Height) / 2))
End Sub

Related posts:

1. How to set custom size for BalloonTip Control
2. How to change global text rendering properties
3. Data Binding on undocked/floating Bars, dockable windows

1. MetroAppWindow – A chromeless window with support for resizing. This is a Window with WindowStyle property fixed to None (this cannot be changed.) Other inherited Window properties are supported and behave the same.  
2. MetroShell – A TabControl for MetroTabItems that also serves as the container for other Metro controls. Usually MetroAppWindow will have a MetroShell as its single Content item.  Provides the glue which holds all other parts together and ensures consistent look and feel. 
3. MetroChrome – Provides chrome for Metro app and is host for the quick access toolbar.
4. MetroStatusBar – Metro styled status bar for your application.
5. QuickAccessToolBar – A quick access toolbar like the one in Ribbon control.  
6. MetroBackstage – Backstage area opens when File button is clicked.
7. MetroToolBar – A toolbar which expands to show extra items.
8. MetroTile – Based on Button with the additional properties Title, ImageSource and TileColor – an enumeration of built-in Brushes. 
9. MetroStartControl – A container for MetroTiles which has the ability to slide in and out of view. 
10. MetroDialog – A chromeless window with MetroChrome and Metro styling.

Building a Metro App

The typical Metro app begins with MetroAppWindow. This provides a chromeless Window with square borders and support for resizing, including a styled ResizeGrip used when ResizeMode = CanResizeWithGrip.

MetroUI.Theme attached property should be set on the window ensuring all Metro styles and resources are available as required.

The single Content element of the window will generally be an instance of MetroShell. MetroShell is based on TabControl, but instead of TabItem, its native container type is MetroTabItem. In addition to providing tab control functionality for the Metro app, MetroShell provides a convenient way to add the different Metro controls to the UI and for ensuring that they are properly positioned and function together.

Use the following MetroShell properties for adding Metro parts to your app (Note: all of these properties are defined as type Object, even though specific types are provided – though not absolutely required. The reason for this is so they work well in an MVVM environment):

• Backstage – This is the object which will be displayed when the end user clicks on the File button (or when MetroShell.IsBackstageOpen is set true.) Generally, it will be an instance of MetroBackstage.
• Chrome – This is the top most object. It should be a MetroChrome. 
• StatusBar – This is the bottom most object. Generally a MetroStatusBar.
• Start – A place holder for MetroStartControl which can be added to give your app a Metro style staging area.

The quick access toolbar – QuickAccessToolBar – is added to the UI via a property of MetroChrome of the same name. Elements added to the QAT at design time are included in the customize menu. Note the use of attached property QuickAccessToolBar.DisplayName to give these elements display text for the customize menu.

Here is a very basic example of a Metro app based on the above:

<m:MetroAppWindow x:Class="MetroSample.MainWindow"
	xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
	xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
	xmlns:m="clr-namespace:DevComponents.WPF.Metro;assembly=DevComponents.WPF.Metro"
	Title="DOTNETBAR METRO SAMPLE"
	Height="600" Width="825"
	ResizeMode="CanResizeWithGrip"
	Icon="AppIcon.ico"
	m:MetroUI.Theme="{x:Static m:MetroTheme.Default}">
    <m:MetroShell>
        <m:MetroShell.Chrome>            
            <m:MetroChrome>
                <m:MetroChrome.QuickAccessToolBar>
                    <m:QuickAccessToolBar>
                        <Button m:QuickAccessToolBar.DisplayName="Open">
                            <Image Source="/Images/Open.png" />
                        </Button>
                        <Button m:QuickAccessToolBar.DisplayName="Save">
                            <Image Source="/Images/Save.png" />
                        </Button>
                    </m:QuickAccessToolBar>
                </m:MetroChrome.QuickAccessToolBar>
            </m:MetroChrome>
        </m:MetroShell.Chrome>
        <m:MetroShell.Backstage>
            <m:MetroBackstage CloseOnClick="True">
                <m:BackstageButton ImageSource="/Images/Save.png" Content="Save" />
                <m:BackstageTabItem Header="Print">
                    <Grid>
                        <TextBlock Text="Print" FontSize="30" VerticalAlignment="Center" HorizontalAlignment="Center" />
                    </Grid>
                </m:BackstageTabItem>
            </m:MetroBackstage>
        </m:MetroShell.Backstage>
        <m:MetroShell.StatusBar>
            <m:MetroStatusBar>
                <TextBlock Text="CONNECTED TO SERVER - ALL DATA IS UP TO DATE" HorizontalAlignment="Left" TextTrimming="CharacterEllipsis" />
                <TextBlock Text="READY" Margin="10,0,0,0" HorizontalAlignment="Right" />
            </m:MetroStatusBar>
        </m:MetroShell.StatusBar>
        <m:MetroShell.Items>
            <m:MetroTabItem Header="MAIL" IsSelected="True">
                <Grid>
                    <TextBlock Text="MAIL CONTENT AREA" HorizontalAlignment="Center" VerticalAlignment="Center" />
                </Grid>
            </m:MetroTabItem>
            <m:MetroTabItem Header="CALENDAR">
                <Grid>
                    <TextBlock Text="CALENDAR CONTENT AREA" HorizontalAlignment="Center" VerticalAlignment="Center" />
                </Grid>
            </m:MetroTabItem>
            <m:MetroTabItem Header="CONTACTS">
                <Grid>
                    <TextBlock Text="CONTACTS CONTENT AREA" HorizontalAlignment="Center" VerticalAlignment="Center" />
                </Grid>
            </m:MetroTabItem>
        </m:MetroShell.Items>
    </m:MetroShell>
</m:MetroAppWindow>

And here is a screen shot of the above example when executed:

The central content area of MetroShell is where the content of the selected tab is positioned. Anything you require for your application can be placed inside a MetroTabItem. Any control from the list in the Metro Styles section above will be automatically given the Metro look and feel (that is, unless you override the built-in Styling with styles of your own.)

Metro Look & Feel

Metro Colors

All colors used by Metro UI are automatically generated from two seed colors. The seed colors are referred to as the Canvas color and the Base color.

Colors for Metro theme are created and defined by the class MetroColors, which is based on ResourceDictionary. Colors are created and stored as resources and are also exposed as instance properties. A set of ComponentResourceKeys are defined which are used for for accessing the colors from Xaml. A corresponding set of Brushes, in addition to the color resources, is also provided.

Color generation is performed by calling method MetroColors.GenerateColors, which takes two Color parameters as input – one for canvas color and one for base color.

Since MetroColors is  a ResourceDictionary, its colors and brushes can be made available to elements within a visual tree by simply being merged with the resources of the top element. We use a behavior to accomplish this. The behavior is implemented as an attached dependency property named Theme on the static class MetroUI. MetroUI.Theme is a property of type MetroTheme.

Following is a list of the names of the Color properties defined by MetroColors. Corresponding component resource keys have the same names with ‘Key’ appended to them. Component resource keys for the corresponding Brushes are similarly named but the word ‘Brush’ is used in place of the word ‘Color’.

• CanvasColor (CanvasColorKey, CanvasBrushKey)
• TextColor
• TextInactiveColor
• TextDisabledColor
• CanvasDarkColor
• CanvasLightColor
• BaseColor
• BaseTextColor
• BaseLightColor
• BaseLightTextColor
• BaseDarkColor
• BaseDarkerColor
• ComplementColor
• ComplementLightColor
• ComplementDarkColor
• ComplementDarkerColor
• ComplementTextColor
• ComplementLightTextColor
• CanvasGradientStartColor
• CanvasGradientEndColor

Metro Theme

MetroTheme is a wrapper class for canvas and base color, with an additional property for display name. It also exposes a set of static, self-typed, properties which are used as “built-in” themes. Setting up your application to use the Metro theme is simply a matter of setting a value for MetroUI.Theme on the root element (usually the Window itself.) Note: if your application has multiple windows you can set different color themes for each.

m:MetroUI.Theme="{x:Static m:MetroTheme.Rust}"

You can use the Metro colors and brushes in your application, when needed, by using a DynamicResource. In this example, the Background of the border is being set to the Brush identified by the static property MetroColors.CanvasBrushKey:

<Border Background="{DynamicResource {x:Static m:MetroColors.CanvasBrushKey}}" />

Here is the list of of the pre-defined themes available as static members of class MetroTheme:

• Default
• BlackClouds
• BlackLilac
• BlackMaroon
• BlackSky
• BluishBrown
• Bordeaux
• Brown
• Cherry
• DarkBrown
• DarkRed
• EarlyMaroon
• EarlyOrange
• EarlyRed
• Espresso
• GrayOrange
• Latte
• LatteDarkSteel
• LatteRed
• MaroonSilver
• NapaRed
• Orange
• PowderRed
• RetroBlue
• Rust
• SliverBlues
• SilverGreen
• SimplyBlue
• SkyGreen
• WashedBlue
• WashedWhite

Metro Styles

Of course all controls in the Metro library are by default styled to match the Metro UI look and feel. But these don’t help with all the other controls you will need when building your app. To make it easy to keep the Metro UI consistent throughout your application we have defined a set of custom Styles (or resources used by the default styles) for many of the common controls from DotNetBar as well as from Microsoft. Implicit Styles for these controls are merged into the resources with MetroColors the first time MetroUI.Theme is set.

Custom styles are defined for the following Microsoft controls:

• Button
• ToggleButton
• RadioButton
• CheckBox
• MenuItem
• ContextMenu
• ToolTip
• TextBox
• ComboBoxItem
• ComboBox
• ListBoxItem
• ListBox
• ScrollBar
• ScrollViewer

Metro styling is also provided for the following DotNetBar controls (other than the purpose built Metro controls):

• AdvTree
• AdvTreeNode
• AdvTreeCell
• PropertyGrid
• PropertyGridItem
• DropDownButton
• EnumPicker
• ColorControl
• BrushControl

Localization

This section describes how to change the strings displayed by Metro controls.

Strings associated with the window commands Minimize, Maximize, Close, Restore, Size and Move can be set directly in code via properties on the static WindowCommands.Strings (in DevComponents.WPF.Controls). Additionally, the strings can be defined as resources in your window’s resource dictionary. The following component resource keys are mapped appropriately.

• WindowCommands.CloseStringKey
• WindowCommands.MaximizeStringKey
• WindowCommands.MinimizeStringKey
• WindowCommands.MoveStringKey
• WindowCommands.RestoreStringKey
• WindowCommands.SizeStringKey

All other strings which are used in Metro UI are defined the class MetroStrings (in DevComponents.WPF.Metro). They can be accessed directly in code via the static instance MetroStrings.Default. In addition to being settable via properties of MetroStrings, these strings can also be defined as resources in your window’s resource dictionary.

The string properties defined by MetroStrings are:

• CustomizeQATMenuHeaderString
• AddToQATCommandString
• RemoveFromQATCommandString
• CustomizeQATCommandString

The corresponding component resource keys are:

• MetroStrings.CustomizeQATMenuHeaderStringKey
• MetroStrings.AddToQATCommandString
• MetroStrings.RemoveFromQATCommandString
• MetroStrings.CustomizeQATCommandString

Here is an example of defining a string in a resource dictionary:

<sys:String x:Key="{x:Static ctrls:WindowCommands.CloseStringKey}">Custom Close String</sys:String>

Note that the namespace sys is defined like this:  xmlns:sys="clr-namespace:System;assembly=mscorlib"

Metro Controls

This section will look at the individual Metro controls in greater detail.

MetroAppWindow

MetroAppWindow is based on ChromelessWindow – which is defined in the DevComponents.WPF.Controls library. ChromelessWindow is based on System.Windows.Controls.Window and inherits all of that object’s functionality except for the WindowStyle property, which has been fixed to the value None and cannot be changed. Here is a screen shot of an empty MetroAppWindow:

Properties

Properties defined by MetroAppWindow (either directly or via ChromelessWindow) include:

• HasDropShadow – Determines whether the drop shadow will be drawn around the Window.
• ResizeBorderThickness – Specifies the thickness of the Border for which resizing is enabled. Does not affect the window’s visual border. The visual border is specified by the standard BorderThickness property, in conjunction with the BorderBrush property.

Events

And the events are:

• ResizeBorderClickEvent – Routed event that is raised when the resize border receives a mouse click.

MetroShell

MetroShell is based on TabControl and inherits all of its properties, methods and events.

Properties

The following additional properties are defined by MetroShell:

• Backstage – This is the object which will be displayed when the end user clicks on the File button (or when MetroShell.IsBackstageOpen is set true.) Generally, it will be an instance of MetroBackstage.
• BackstageButtonContent – Defines the content rendered inside the backstage button (i.e. the File button.)
• Chrome – This is the top most object. It should normally be a MetroChrome.
• IsBackstageOpen – Determines whether the backstage object is visible.
• ShowBackstageButton – Determines whether the backstage button is visible.
• ShowStatusBar – Determines whether the status bar is visible.
• Start – This object is rendered on top of the main application area. It is a place holder for a MetroStartControl.
• StatusBar – This is the bottom most object. Generally a MetroStatusBar.

Events

MetroShell exposes the following events:

• BackstageOpened – Routed event that is raised when the value of IsBackstageOpened changes from false to true.
• BackstageClosed – Routed event raised when the value of IsBackstageOpened changes from true to false.

Methods

The following methods are defined by MetroShell:

• OnBackstageOpened (protected).
• OnBackstageClosed (protected).

MetroChrome

MetroChrome is an ItemsControl. Custom elements are added to its Items collection and by default displayed to the left of the minimize button. Window icon and title are taken from the containing Window. Minimize, Maximize and Close buttons are enabled or hidden based on the Window’s WindowState and ResizeMode properties, in the same manner as the standard Window chrome. The system menu is likewise shown the same as the system menu of the standard Window. System menu can be disabled by setting ShowSystemMenu = false. Here is an image of MetroChrome with QAT and custom items included:

Properties

The following properties are defined by MetroChrome:

• QuickAccessToolBar – An Object which serves as the quick access toolbar for the application. This should be a QuickAccessToolBar.
• ShowSystemMenu – Determines whether the system menu is shown when user right-clicks over the title area or left-clicks on the app icon.

MetroChrome does not define any public or protected methods.

QuickAccessToolBar

QuickAccesssToolBar is based on System.Windows.Controls.ToolBar. Anything added to its Items collection will be visible in the toolbar. An overflow panel with overflow button is included in the default style.

Items added to the QAT at design time (or at runtime before its template is applied) will appear in the customize menu, which allows the user to select/deselect which items are visible in the UI. Items added to the customize menu need a display name, which you provide using the attached property QuickAccessToolBar.DisplayName. Here is a picture of the QAT with the Customize menu open:

Elements in the app UI which implement ISupportQuickAccessToolBar can be added to QAT by the user at run-time. Currently there are three controls built-in which implement ISupportQuickAccessToolBar: MetroButton, MetroToggleButton and MetroComboBox. The default context menu for each of these has the option “Add to Quick Access ToolBar”. Note: elements which can be added to the QAT at runtime by user need a unique identifier. You can use the element’s Name property for this or the attached property QuickAccessToolBar.Id.

All items that are visible in the QAT are given context menu which has option “Remove from Quick Access ToolBar”. However, if you explicitly set a ContextMenu on an element that you place into the QAT, that context menu will not be replaced.

The current state of the QAT is stored in a string available via the dependency property SerializationString. You can this to restore the QAT to its last state when your app is starts up.

Properties

The following dependency properties (in addition to inherited properties) are defined by QuickAccessToolBar:

• IsCustomizeMenuOpen – Determines whether the customize menu is open.
• IsLocked – When locked, items cannot be added or removed from the QAT.
• SerializationString – Stores current state of QAT and can be used to reset UI when your app starts up.
• ShowCustomizeButton – Determines whether the customize button is visible.

QuickAccessToolBar also defines the following attached dependency properties:

• CanAddToQuickAccessToolBar – Applies to elements which implement ISupportQuickAccessToolBar only. Provides a means of disabling the element for the QAT. Default value is true.
• DisplayName – Used by the customize menu for user-friendly identification of elements.
• Id – Used as unique identifier for elements which implement ISupportQuickAccessTooolBar.

Methods

The following public methods are defined by QuickAccessToolBar:

• Add(ISupportQuickAccessToolBar item) – Clones the item and adds the clone to the QAT’s visible items collection.
• Contains(ISupportQuickAccessToolBar) – Determines whether the item is in the QAT.
• Contains(string) – Determines whether an item with given ID is in the QAT.
• Remove(object) – Removes the object from the QAT.

MetroToolBar

MetroToolBar is an enhanced ToolBar developed especially for Metro UI. It it meant to be placed anywhere in your application that makes sense for you to do so.

What makes MetroToolBar different from a standard tool bar is that it has an expanded state. In addition to the Items and ItemsSource properties, MetroToolBar exposes properties ExtraItems and ExtraItemsSource. The tool bar expands to show the extra items. When it expands, it does so over the top of existing content, rather than displacing and causing the content to be moved. The tool bar can be expanded programmatically or by user input – there is a button for this purpose. Like a ComboBox, It will collapse automatically when the user clicks on a button within it or clicks anywhere outside of it. Here is an image of MetroToolBar in its expanded state:

MetroToolBar is a good place to put controls which you want to be QAT enabled. These include any control which implements ISupportQuickAccessToolBar. Current Metro controls which implement this interface are MetroButton, MetroToggleButton and MetroComboBox.

Properties

In addition to the inherited properties, MetroToolBar defines the following properties:

• AutoCollapse – Determines whether the toolbar collapses automatically. The default value is true.
• ExpandDirection – Specifies the direction that the toolbar will expand. Possible values are Up, Down and Auto. Default is Auto.
• ExtraItemsSource – This value is passed on to the internal ItemsControl which contains the Extra Items.
• IsExpanded – Determines whether the tool bar is expanded.

Events

MetroToolBar defines the following events:

• Expanded – Raised when the value of IsExpanded changes to true.
• Collapsed – Raised when the value of IsExpanded changes to false.

MetroStatusBar

MetroStatusBar is based on ItemsControl and inherits all its properties, events and methods. It differs from ItemsControl in that its default panel is MetroStatusBarPanel.

MetroStatusBarPanel is based on Grid. Using a Grid for the panel allows great control as to where elements are positioned within it. The number of columns is synchronized with the number of items in parent status bar. Column widths are set depending on horizontal alignment of the element it contains: Auto for left aligned, Star for center aligned, Star for the first right aligned and Auto after that, and Star for elements which are aligned Stretch.

MetroStatusBar does not define any properties, methods or events other than what it inherits.

MetroBackstage

MetroBackstage is based on TabControl. The native container type is BackstageTabItem, It will, however, accept any UIElement. In general, you will use a combination of BackstageTabItem and BackstageButton to achieve styling consistent with the Metro UI. Here is an image of MetroBackstage with several BackkstageTabItems and BackstageButtons:

MetroBackstage defines a single property: CloseOnClick. When true, the backstage will close automatically when a click or mouse left button up event occurs within it.

MetroTile

MetroTile is a Button with extra properties and a default template designed to help you maintain a consistent look and feel. Use properties Content, ImageSource, Title and TileColor to complete the presentation of the tile.

Properties

MetroTile defines these properties (in addition to the inherited properties):

• ImageSource – Specifies the source (ImageSource) for the image which is displayed by the tile.
• TileColor – An enumeration specifying one from a set of built-in brushes which is made the tile’s background. Alternatively you can set Background yourself.
• Title – Specifies the tile’s title text.

MetroStartControl

MetroStartControl is designed to emulate the Metro start screen in Windows 8. 

MetroStartControl is a PageSlider. The native container type is MetroStartPage.

The way to add MetroStartControl to your Metro UI is via the Start property of MetroShell. The start control is rendered on top of the main application UI (i.e. MetroShell) and slides out of view when the end user wants to access main app. Programmatically, this is controlled via the property IsDocked. A value of true makes the control slide out of view. Changing from true to false causes it to slide back into the view. By default, when the user clicks on a region not occupied by a MetroTile the control will slide out of view (IsDocked will be set to true.) This can be changed by setting DockOnClick = false.

By default, when the control’s contents are docked – i.e. rendered outside the control’s visible boundaries – a Thumb is displayed on the boundary edge which the user can use to drag the contents back into view. Clicking on the thumb also will set IsDocked = false. The thumb can be hidden by setting ShowDragThumb = false.

Here is an image of MetroStartControl that is being dragged back into visible state by the user:

Another feature of MetroStartControl is its embedded TransitioningSelector control. TransitioningSelector (in DevComponents.WPF.Controls) is a MultiSelector which works much like a TabControl in that its items are selectable and when an item is selected its content is rendered in the main content area. What TransitioningSelector adds is animation. For example, if the SlidingAnimator is used, when selected an item’s content slides into view and when unselected slides out of view. When used in MetroStartControl this enables modal views (i.e. any UI element) to be presented to the user in response to commands from any part of the application. You can add items to the embedded transitioning selector by binding a list to property TransitioningSelectorItemsSource or adding items directly to TransitioningSelectorItems. The latter can be done in Xaml.

Here is an example of a MetroStartControl being set as value of property MetroShell.Start:

<m:MetroShell.Start>
    <m:MetroStartControl Name="StartControl">
        <m:MetroStartControl.TransitioningSelectorItems>
            <ctrls:TransitioningSelectorItem Name="OptionsForm" Background="Red">
                <Grid Background="{Binding RelativeSource={RelativeSource AncestorType=m:MetroAppWindow}, Path=Background}">
                    <TextBlock HorizontalAlignment="Center" VerticalAlignment="Center" Text="OPTIONS HERE" />
                    <Button Content="Ok" Width="80" Height="30" HorizontalAlignment="Right" VerticalAlignment="Bottom" Margin="30" FontSize="16" FontWeight="Bold" Click="OptionsFormOkButton_Click" />
                </Grid>
            </ctrls:TransitioningSelectorItem>
        </m:MetroStartControl.TransitioningSelectorItems>
        <m:MetroStartControl.Items>
            <m:MetroTile Title="Options" ImageSource="/Images/Options.png" TileColor="Blueish" Content="Select options for the app." Click="ShowOptionTile_Click"/>
            <m:MetroTile Title="Main App" ImageSource="/Images/ShowApp.png" TileColor="Green" Content="Go to the main application." Click="ShowAppTile_Click"/>
        </m:MetroStartControl.Items>
    </m:MetroStartControl>
</m:MetroShell.Start>

Properties

MetroStartControl defines the following properties:

• AnimationDuration – The duration of the slide animation when docking or undocking.
• DockingSide – Determines the side to which the control content will go when it slides out of view (i.e. when docked.)
• DockOnClick – Determines whether the the StartControl docks itself when clicked on outside of a MetroTile.
• IsDocked – Determines whether the control is in the docked state. In the docked state the control’s contents are outside the control’s visual boundaries. Changing this value triggers the sliding animation to start.
• ImageSource – Image part of the current user identity.
• FirstName – First name of the current user identity.
• LastName – Last name of the current user identity.
• ShowDragThumb – When true, a Thumb is made available at the control’s dock edge with which the user can drag the content out of the docked state and into visible state.
• Title – The StartControl’s title.
• TransitioningSelectorItems – Gets a reference to a list which is used as ItemsSource for the embedded TransitioningSelector. (Not a dependency property.)
• TransitioningSelectorItemsSource – An enumerable which is set as ItemsSource of the embedded TransitioningSelector.
• TransitioningSelectorItemContainerStyle – A Style which is set as value for ItemContainerStyle property of the embedded TransitioningSelector.

Events

MetroStartControl defines these events:

• Docked – Routed event raised when the value of IsDocked changes to true.
• Undocked – Routed event raised when the value of IsDocked changes to false.

MetroDialog

MetroDialog is a chromeless window similar to MetroAppWindow, but with default MetroChrome and a stylized border. You can base your own dialogs on MetroDialog for convenience.

If a window is set as MetroDialog’s Owner, and if that window has a value for the MetroUI.Theme attached property, then that theme is automatically used by the dialog. Otherwise, if you do not set a theme yourself, the default theme will be used (i.e. MetroTheme.Default)

MetroDialog exports a single property, Chrome, which is given an appropriate default MetroChrome if left unset.

Related posts:

1. Getting started with Metro UI in DotNetBar for WinForms
2. All you need to know about Color Input controls in DotNetBar for WPF
3. How to build Office 2010 style Backstage application menu with DotNetBar for WPF

1. MetroAppForm – which is chrome-less Metro style form:

2. MetroShell – which provides basic window chrome, backstage and top-level application tabs:

3. MetroStatusBar – provides Metro style status bar:

The easiest way to get started is to simply use new form template in Visual Studio that we provide. In Visual Studio go to Project->Add Windows Forms in your Windows Forms project and from the list choose Metro App Form (you might need to scroll form template list in some versions of VS.NET to find this template). Template will give you basic shell like this:

Modal Panels

MetroAppForm can show any control as modal panel. The control will be centered inside of the form and it will cover all form content but leave visible only form title (if MetroShell is used). It will also disable all commands on MetroShell practically giving you same functionality as modal dialog. To show a control as modal panel simply call ShowModalPanel method on MetroAppForm. You will specify control you want shown as modal panel as well as optional slide animation that will accompany showing of the control. To close the modal panel call CloseModalPanel method and pass reference to your control as well. You can also specify the slide animation to be performed while panel is taken out of the view.

You can stack multiple modal panels on top of each other by calling ShowModalPanel method.

Key MetroAppForm Properties

Following key properties are provided on MetroAppForm to control its behavior:

• BorderColor – allows you to override theme border colors for the form.
• BorderThickness – specifies the custom form border thickness.
• CloseBoxVisible – specifies whether x button in top-right corner of the form chrome that closes the form is visible.
• FormResizeBorder – specifies the thickness in pixels around the form edge which allows user to resize the form.
• IsActive – returns whether form is active.
• MetroShell – returns reference to MetroShell control that provides form chrome.
• Sizable – specifies whether form can be resized.

Localizing MetroAppForm

MetroAppForm provides its own Metro styled system menus. The menu text can be localized using standard WinForms localization by setting following properties on MetroAppForm:
SystemMenuClose, SystemMenuMaximize, SystemMenuMinimize, SystemMenuMove, SystemMenuRestore and SystemMenuSize.

MetroForm

MetroForm is a standard form with window chrome which you can use for modal dialogs (although we recommend using modal panels instead). The easiest way to add new MetroForm to your project is using templates we provide. In Visual Studio go to Project->Add Windows Forms in your Windows Forms project and from the list choose Metro Form (you might need to scroll form template list in some versions of VS.NET to find this template). Template will give you form like this:

MetroShell

MetroShell is a root control that is docked to the top of the form and it provides form chrome (system buttons to close, minimize and maximize form), backstage or application menu, quick access toolbar and top-level application tabs. Many elements that are displayed by MetroShell control are optional, so for example you do not have to have application menu or backstage and you can remove it at design-time. Same applies to quick access toolbars and even tabs.

Application Menu

Application menu on MetroShell control is opened using FILE button:

To create default backstage application menu or standard menu use right-click context menu options in VS.NET as shown in image below:

If your application does not have need for application menu simply selection File button and delete it.

Quick Access Toolbar

Quick Access Toolbar (QAT) provides access to common used commands in an app. Following image shows an example of QAT:

You can provide default commands by adding them at design-time. To add button to QAT at design-time right-click the QAT and choose Create Button context-menu command. If you want some buttons in QAT to be permanently there and which end-user cannot remove, set CanCustomize=false on those buttons.

User can add commands to QAT from MetroToolbar controls by right-clicking the command and choosing appropriate command from context-menu. Note that MetroToolbar toolbars that have commands that can be added to QAT should be available, i.e. loaded, when MetroShell control is created as well. This will ensure that any customization that end-user has made to the QAT can be applied and loaded. You load and save QAT customization by serializing MetroShell.QatLayout property which is simple text property an which can be serialized to any storage of your  choice, like registry or text file.

To prevent buttons from MetroToolbar from being added to the QAT set CanCustomize=false on those buttons. MetroToolbar.Text property will be used in QAT Customization Dialog to categorize available QAT commands.

Help and Settings Buttons

MetroShell control by default shows the Help and Settings buttons in the form caption as shown:

These buttons do not necessarily have to be used for Help and Settings, you can change their text using SettingsButtonText and HelpButtonText properties. Events SettingsButtonClick and HelpButtonClick are invoked when buttons are clicked. You can hide any of the buttons using SettingsButtonVisible and HelpButtonVisible properties all on MetroShell control.

Key MetroShell Control Properties, Methods and Events

Key Properties:

• CanCustomize – Indicates whether control can be customized and items added to Quick Access Toolbar by end-user.
• CaptionFont – Indicates custom Font that is used to render the form caption.
• CaptionHeight – Indicates custom height for the form caption.
• CaptionVisible – Indicates whether control shows the caption which includes system buttons, form title and QAT.
• CategorizeMode – Specifies how commands are categorized in QAT Customize Dialog.
• GlobalContextMenuBar – Specifies Context menu bar associated with the this control which is used as part of Global Items feature.
• Items – Gets the collection of the items that appear in tab-strip area of the control.
• MouseWheelTabScrollEnabled – Indicates whether selected tab is changed when mouse wheel is used over the tab-strip.
• QatFrequentCommands – Get the collection of the commands that are displayed on the Customize Quick Access Toolbar menu and which allow end-user to quickly add or remove them from QAT. Commands shown here should be available on MetroToolbar controls.
• QatLayout – Gets or sets the Quick Access Toolbar layout. This property is used to save and load the QAT customizations.
• QatLayoutChanged – Gets whether end-user made any customizations to QAT.
• QuickToolbarItems – Gets collection that holds all items displayed on QAT.
• SelectedTab – Gets or sets currently selected Metro tab.
• SystemText – Gets the object that holds all internal strings MetroShell control uses.  When performing Localization you will change properties on this object.
• TabStripFont – Gets or sets the font that Metro tab-strip area uses.
• TitleText – Specifies the form title-bar text. By default control uses Form.Text to display it on title-bar, but if you wish that displayed title text is different from Form.Text or if you wish to use our text-markup, set this property.
• UseCustomizeDialog – Indicates whether built-in customize dialog is used to customize the quick access toolbar. You can handle the EnterCustomize event to display your custom dialog instead of built-in dialog for customization.
• UseExternalCustomization – Indicates whether custom context menu content is used instead of built-in customization menu which is shown when end-user clicks the buttons on MetroToolbar. When set to true you must handle BeforeCustomizeMenuPopup event to provide your own customize context menu commands.

Key Events:

• BeforeQatCustomizeDialog – Occurs before Quick Access Toolbar dialog is displayed. This event provides the opportunity to cancel the showing of built-in dialog and display custom customization dialog.
• AfterQatCustomizeDialog – Occurs after the Quick Access Toolbar dialog is closed.
• AfterQatDialogChangesApplied – Occurs after any changes done on the Quick Access Toolbar dialog are applied to the actual Quick Access Toolbar.
• BeforeAddItemToQuickAccessToolbar – Occurs before an item is added to the quick access toolbar as result of user action. This event provides ability to cancel the addition of the item by setting the Cancel=true of event arguments.
• BeforeCustomizeMenuPopup – Occurs just before the customize popup menu is displayed and provides the ability to cancel the menu display as well as to add/remove the menu items from the customize popup menu.
• BeforeRemoveItemFromQuickAccessToolbar – Occurs before an item is removed from the quick access toolbar as result of user action. This event provides ability to cancel the addition of the item by setting the Cancel=true of event arguments.
• TitleTextMarkupLinkClick – Occurs when text markup link from TitleText markup is clicked. Markup links can be created using “a” tag.

Key Methods:

• AddItemToQuickAccessToolbar – Adds an object that inherits from BaseItem to QAT.
• RemoveItemFromQuickAccessToolbar – Remove an item from QAT.
• CreateTab – Creates a metro tab and associated panel.
• ShowQatCustomizeDialog – Shows Quick Access Toolbar customize dialog.
• RegisterToolbar – Registers MetroToolbar with control so it can participate in QAT customization.
• UnregisterToolbar – Removes MetroToolbar from QAT customization.

MetroToolbar

MetroToolbar is a toolbar like control which displays the most frequently used items at all times but also allows the access to extra or infrequently used items when expanded. Here is MetroToolbar control in its default state displaying the top-level items:

Notice the button with 3 dots in right-hand side. That is expand button which expands the toolbar and shows extra toolbar items as shown below:

Toolbar will be automatically collapsed once extra button is clicked or mouse is clicked somewhere outside the toolbar.

Working with MetroToolbar is very simple. At design-time right-click toolbar to create items. Drag & drop items between top-level and extra line to change their position.

Since MetroToolbar shows the extra content inline, meaning its size and location is changed to show it, we recommend placing the control on the form without setting its Dock or even Anchor properties. Reason for this is that when MetroToolbar expands it should not change the layout of the other controls, which would happen if you set Dock or Anchor properties. Expanding the MetroToolbar should simply cover other control temporary while choice of extra items is being made.

Key MetroToolbar Properties

• AnimationSpeed – Specifies toolbar collapse/expand animation speed duration in milliseconds. Default value is 150 milliseconds. Set to zero, 0 to disable animation.
• AutoCollapse – Specifies whether control is automatically collapsed, i.e. Expanded property set to False, if control was expanded and any button on the control was clicked or mouse is clicked elsewhere, parent form has lost input focus or some other control gains input focus.
• AutoRegister – Specifies whether toolbar is attempted to be automatically registered with parent MetroShell control so it can participate in Quick Access Toolbar operations. Default value is true.
• ExpandDirection – Specifies expand direction for the toolbar. Default value is Auto.
• Expanded – Indicates whether control is expanded or not. When control is expanded both main and extra toolbar items are visible. When collapsed only main items are visible.
• ExtraItems – Gets collection that holds extra items displayed on toolbar when expanded.
• Items – Gets collection of top-level items toolbar displays at all times.
• ItemSpacing – Specifies spacing between toolbar items.

Key MetroToolbar Events

• ExpandedChanging – Occurs before Expanded property has changed, i.e. control expanded or collapsed and allows you to cancel action by setting Cancel=true on event arguments.
• ExpandedChanged – Occurs after Expanded property value has changed, i.e. control was expanded or collapsed.

Styling

Metro UI uses StyleManager component to control its appearance. We have developed proprietary color scheme generation algorithms that will take two colors you specify and generate complete color scheme for all UI elements in a way that color scheme is visually pleasing and is perfect fit for Metro UI. StyleManager is automatically added to the form once you add MetroShell control. We provide number of per-defined very good looking color combinations but please experiment yourself.

Our color scheme generation algorithm takes 2 colors as input:

1. Canvas color which is a background color for forms etc.
2. Base color which is a master signature color for the color scheme and which is used with Canvas color to generate whole color scheme.

These colors can be specified on StyleManager.MetroColorParameters object. Simply select it in VS.NET property dialog and change its values as shown below:

No related posts.

Toolbar is used to assist in arrangement and styling of a group of common Silverlight controls from such as Button, ToggleButton, RadioButton, ComboBox and TextBox along with common DevComponents controls such as DropDownButton, SplitButton and EnumPicker.  Toolbar follows the basic design of the Toolbar control which is included with WPF, for those familiar with that control.

Toolbar is an ItemsControl, and therefore any object can be placed in it. It is also fully compatible with an MVVM approach.

A Toolbar can be added to the visual tree directly, or it can be placed inside a ToolbarTray. ToolbarTray is a container for arranging Toolbars. Use the attached properties ToolbarTray.Band and ToolbarTray.BandIndex to control the positioning of the toolbars.

Toolbar control manages overflow. If the width of the Toolbar is insufficient to display all the items, then the hidden items are available to the user via an overflow panel. The overflow panel is opened with the overflow button. By default this button is always visible. However, this can be changed via property AlwaysShowOverflowButton.

It is possible to add custom items to the overflow panel, for example a command button which opens a dialog. CustomItem property is used for this purpose. CustomItem is typed as an Object. To add a collection of custom items use an ItemsControl or supply a DataTemplate which knows how to render the collection.

Auto styling of common controls is supported. A special resource dictionary is used to store pre-defined styles for the controls which are commonly added to the Toolbar. By default, if an item, or its container, is one the supported common controls, then before it is inserted into the Toolbar panel’s Children collection, its Style is set equal to the corresponding Style found in the resource dictionary. Note that if the control’s Style property is already set, that Style will not be overridden. To turn off auto-styling in general, set the Toolbar property AutoStyleCommonControls to false.

The resource dictionary which defines the Styles for common controls added to the Toolbar is a componentized resource dictionary (meaning that it has a code-behind class associated with it.) The resource dictionary instance is a static singleton accessible via ToolbarCommonControlStyles.Default. This instance is created and merged into the application’s resources if, and only if, a Toolbar is used. The Styles it defines are accessible in code via properties defined on the class ToolbarCommonControlStyles as well as in Xaml as static resources with keys the same as the property names. Note that if you are referencing the Style resources in xaml it may be necessary to ensure that they are loaded into the global resources before the framework attempts to resolve the StaticReference. To to this, simply set a variable equal to ToolbarCommonControlStyles.Default prior to calling InitializeComponent() in your Silverlight UserControl.

The resource dictionary ToolbarCommonControlStyles contains the following named resources. Additionally, it defines properties with the same names which are typed Style.

• ToolbarSeparatorStyle
• ToolbarButtonStyle
• ToolbarButtonToggleButtonStyle
• ToolbarRadioButtonStyle
• ToolbarComboBoxItemStyle
• ToolbarComboBoxStyle
• ToolbarTextBoxStyle
• ToolbarDropDownButtonStyle
• ToolbarSplitButtonStyle
• ToolbarEnumPickerStyle

Properties

Following are lists of the properties defined by Toolbar and ToolbarTray for your reference.

Toolbar Properties

AutoStyleCommonControls – Determines whether the built-in styling for common controls should be used. Default value is true.

AlwaysShowOverflowButton – Determines whether the overflow button is shown even if there are no overflow items or custom items to show. The default value is true.

CornerRadius – Get or set the corner radius of the Toolbar.

CustomItem – An object which is added to the overflow panel.

CustomItemTemplate – A DataTemplate which shows how to render CustomItem.

HasOverflowItems – Gets whether there are overflow items. This is a read-only property.

IsOverflowOpen – Gets or sets whether the overflow panel drop down is open.

Orientation – Gets or sets whether the Toolbar is orientated Horizontally or Vertically. The default is Horizontal.

ToolbarTray Properties

Orientation – Gets or sets whether the Toolbar is orientated Horizontally or Vertically. The default is Horizontal.

Band – This is an attached property which, when set on a Toolbar, determines which row or column (depending on Orientation) the Toolbar is placed in.

BandIndex – This is a attached property which, when set on a Toolbar, determines the Toolbar’s position within its Band.

Default Styles

Following is a listing of the default styles for Toolbar and ToolbarTray (and the resources they depend on) which you can use as starting point for customization.

    <Style x:Key="ToolbarOverflowButtonStyle" TargetType="ToggleButton">
        <Setter Property="ClickMode" Value="Press" />
        <Setter Property="dc:DynamicResource.BackgroundKey" Value="ToolbarOverflowButtonBackground" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="ToggleButton">
                    <Grid Name="MainGrid" Background="Transparent">
                        <Border Background="{TemplateBinding Background}"
                                CornerRadius="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=(dc:ControlBehavior.CornerRadius)}" />
                        <Border Name="HoverBorder" Opacity="0" dc:DynamicResource.BackgroundKey="ButtonHoverBackground" 
                                CornerRadius="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=(dc:ControlBehavior.CornerRadius)}" />
                        <Border Name="PressedBorder" Opacity="0" dc:DynamicResource.BackgroundKey="ButtonCheckedBackground" 
                                CornerRadius="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=(dc:ControlBehavior.CornerRadius)}" />
                        <Border Name="IsCheckedBorder" Opacity="0" dc:DynamicResource.BackgroundKey="ButtonCheckedBackground" 
                                CornerRadius="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=(dc:ControlBehavior.CornerRadius)}" />
                        <ContentPresenter Name="ContentPresenter" Margin="{TemplateBinding Padding}" 
                                          VerticalAlignment="{TemplateBinding VerticalContentAlignment}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" />
                        <VisualStateManager.VisualStateGroups>
                            <VisualStateGroup Name="CommonStates">
                                <VisualState Name="Normal" />
                                <VisualState Name="MouseOver">
                                    <Storyboard>
                                        <DoubleAnimation Storyboard.TargetName="HoverBorder" Storyboard.TargetProperty="Opacity" Duration="0" To="1" />
                                    </Storyboard>
                                </VisualState>
                                <VisualState Name="Pressed">
                                    <Storyboard>
                                        <DoubleAnimation Storyboard.TargetName="PressedBorder" Storyboard.TargetProperty="Opacity" Duration="0" To="1" />
                                    </Storyboard>
                                </VisualState>
                                <VisualState Name="Disabled" />
                            </VisualStateGroup>
                            <VisualStateGroup Name="CheckedStates">
                                <VisualState Name="Unchecked">
                                    <Storyboard>
                                        <DoubleAnimation Storyboard.TargetName="IsCheckedBorder" Storyboard.TargetProperty="Opacity" Duration="0" To="0" />
                                    </Storyboard>
                                </VisualState>
                                <VisualState Name="Checked">
                                    <Storyboard>
                                        <DoubleAnimation Storyboard.TargetName="IsCheckedBorder" Storyboard.TargetProperty="Opacity" Duration="0" To="1" />                                           
                                    </Storyboard>
                                </VisualState>
                            </VisualStateGroup>
                            <VisualStateGroup Name="FocusStates">
                                <VisualState Name="Focused" />
                                <VisualState Name="Unfocused" />
                            </VisualStateGroup>
                        </VisualStateManager.VisualStateGroups>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
 
    <Style TargetType="dc:Toolbar">
        <Setter Property="VerticalAlignment" Value="Top" />
        <Setter Property="HorizontalAlignment" Value="Left" />
        <Setter Property="CornerRadius" Value="3" />
        <Setter Property="dc:DynamicResource.BorderBrushKey" Value="ToolbarBorder" />
        <Setter Property="dc:DynamicResource.BackgroundKey" Value="ToolbarBackground" />
        <Setter Property="Margin" Value="1,1,0,0" />
        <Setter Property="Padding" Value="1" />
        <Setter Property="BorderThickness" Value="1" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="dc:Toolbar">
                    <Border Name="OuterBorder" Grid.ColumnSpan="2" BorderThickness="{TemplateBinding BorderThickness}" 
                            BorderBrush="{TemplateBinding BorderBrush}" CornerRadius="{TemplateBinding CornerRadius}">
                        <Grid> 
                            <Grid.Resources>
                                <dc:NullableObjectToVisibilityValueConverter x:Key="nullableToVisibilityConverter" />
                                <dc:BoolToVisibilityConverter x:Key="boolToVisibilityConverter" />
                            </Grid.Resources>
                            <Grid Name="HorizontalContent" Visibility="Collapsed" VerticalAlignment="Center">
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="*" />
                                    <ColumnDefinition x:Name="OverflowButtonColumn" Width="Auto" />
                                </Grid.ColumnDefinitions>
                                <dc:PopupAwareToggleButton x:Name="HorizontalOverflowButton" Grid.Column="1" HorizontalAlignment="Right" 
                                                            HorizontalContentAlignment="Center" VerticalContentAlignment="Bottom"
                                                            Style="{StaticResource ToolbarOverflowButtonStyle}" 
                                                            IsChecked="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=IsOverflowOpen, Mode=TwoWay}">
                                    <Border Name="HorizontalOverflowGlyph" Margin="3,0,3,4" BorderBrush="Black" BorderThickness="0,1,0,0">
                                        <Path Margin="1,2" HorizontalAlignment="Center" Fill="Black" Data="M 0,0 L 2.5,3 5,0 Z" />
                                    </Border>
                                </dc:PopupAwareToggleButton>
                                <Border Padding="{TemplateBinding Padding}" Background="{TemplateBinding Background}" CornerRadius="{TemplateBinding CornerRadius}">
                                    <dc:ToolbarPanel x:Name="HorizontalItemsHost" />
                                </Border>
                                <dc:AutoClosePopup x:Name="HorizontalPopup" KeepInHorizontalBounds="True"                                                    
                                                    Placement="Bottom" PlacementTarget="{Binding ElementName=HorizontalOverflowButton}"
                                                    IsOpen="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=IsOverflowOpen, Mode=TwoWay}">
                                    <Border Padding="3,2" BorderThickness="1" dc:DynamicResource.BorderBrushKey="ToolbarOverflowBorder" dc:DynamicResource.BackgroundKey="ToolbarOverflowBackground">
                                        <Border.Effect>
                                            <DropShadowEffect Opacity="0.3" ShadowDepth="3" />
                                        </Border.Effect>
                                        <Grid>
                                            <Grid.RowDefinitions>
                                                <RowDefinition Height="Auto" />
                                                <RowDefinition Height="Auto" />
                                            </Grid.RowDefinitions>
                                            <StackPanel Name="HorizontalOverflowPanel" Orientation="Horizontal" />
                                            <Grid Grid.Row="1" Visibility="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=CustomItems, Converter={StaticResource nullableToVisibilityConverter}}">
                                                <Grid.RowDefinitions>
                                                    <RowDefinition Height="Auto" />
                                                    <RowDefinition Height="Auto" />
                                                </Grid.RowDefinitions>
                                                <Rectangle Margin="0,3" Height="1" VerticalAlignment="Top" Fill="Gray"
                                                            Visibility="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=HasOverflowItems, Converter={StaticResource boolToVisibilityConverter}}" />
                                                <ContentPresenter Grid.Row="1" Content="{TemplateBinding CustomItem}" ContentTemplate="{TemplateBinding CustomItemTemplate}" />
                                            </Grid>
                                        </Grid>
                                    </Border>
                                </dc:AutoClosePopup>
                            </Grid>
                            <Grid Name="VerticalContent" Visibility="Collapsed">
                                <Grid.RowDefinitions>
                                    <RowDefinition Height="*" />
                                    <RowDefinition x:Name="OverflowButtonRow" Height="Auto" />
                                </Grid.RowDefinitions>
                                <dc:PopupAwareToggleButton x:Name="VerticalOverflowButton" Grid.Row="1" VerticalAlignment="Bottom"
                                                           HorizontalContentAlignment="Right" VerticalContentAlignment="Center"
                                                           Style="{StaticResource ToolbarOverflowButtonStyle}" 
                                                           IsChecked="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=IsOverflowOpen, Mode=TwoWay}">
                                    <Border Name="VerticalOverflowGlyph" Margin="0,3,4,3" BorderBrush="Black" BorderThickness="1,0,0,0">
                                        <Path Margin="2,1" HorizontalAlignment="Center" Fill="Black" Data="M 0,0 L 3,2.5 0,5 Z" />
                                    </Border>
                                </dc:PopupAwareToggleButton>
                                <Border Padding="{TemplateBinding Padding}" Background="{TemplateBinding Background}" CornerRadius="{TemplateBinding CornerRadius}">
                                    <dc:ToolbarPanel x:Name="VerticalItemsHost" />
                                </Border>
                                <dc:AutoClosePopup x:Name="VerticalPopup" KeepInVerticalBounds="True"
                                                    Placement="Right" PlacementTarget="{Binding ElementName=VerticalOverflowButton}"
                                                    IsOpen="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=IsOverflowOpen, Mode=TwoWay}">
                                    <Border Padding="2,3" BorderThickness="1" dc:DynamicResource.BorderBrushKey="ToolbarOverflowBorder" dc:DynamicResource.BackgroundKey="ToolbarOverflowBackground">
                                        <Border.Effect>
                                            <DropShadowEffect Opacity="0.3" ShadowDepth="3" />
                                        </Border.Effect>
                                        <Grid>
                                            <Grid.ColumnDefinitions>
                                                <ColumnDefinition Width="Auto" />
                                                <ColumnDefinition Width="Auto" />
                                            </Grid.ColumnDefinitions> 
                                            <StackPanel Name="VerticalOverflowPanel" Orientation="Vertical" />
                                            <Grid Grid.Column="1" Visibility="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=CustomItems, Converter={StaticResource nullableToVisibilityConverter}}">
                                                <Grid.ColumnDefinitions>
                                                    <ColumnDefinition Width="Auto" />
                                                    <ColumnDefinition Width="Auto" />
                                                </Grid.ColumnDefinitions>
                                                <Rectangle Margin="3,0" Width="1" HorizontalAlignment="Left" Fill="Gray" 
                                                            Visibility="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=HasOverflowItems, Converter={StaticResource boolToVisibilityConverter}}"/>
                                                <ContentPresenter Grid.Column="1" Content="{TemplateBinding CustomItem}" ContentTemplate="{TemplateBinding CustomItemTemplate}" />
                                            </Grid>
                                        </Grid>
                                    </Border>
                                </dc:AutoClosePopup>
                            </Grid>
                        </Grid>
                        <VisualStateManager.VisualStateGroups>
                            <VisualStateGroup Name="OverflowButtonStates">
                                <VisualState Name="OverflowButtonEnabled" />
                                <VisualState Name="OverflowButtonDisabled">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="HorizontalOverflowButton" Storyboard.TargetProperty="IsEnabled">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="False" />
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="VerticalOverflowButton" Storyboard.TargetProperty="IsEnabled">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="False" />
                                        </ObjectAnimationUsingKeyFrames>
                                        <DoubleAnimation Storyboard.TargetName="HorizontalOverflowGlyph" Storyboard.TargetProperty="Opacity" To="0.3" Duration="0" />
                                        <DoubleAnimation Storyboard.TargetName="VerticalOverflowGlyph" Storyboard.TargetProperty="Opacity" To="0.3" Duration="0" />
                                    </Storyboard>
                                </VisualState>
                                <VisualState Name="OverflowButtonCollapsed">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="HorizontalOverflowButton" Storyboard.TargetProperty="Visibility">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed" />
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="OverflowButtonColumn" Storyboard.TargetProperty="Width">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="0" />
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="VerticalOverflowButton" Storyboard.TargetProperty="Visibility">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed" />
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="OverflowButtonRow" Storyboard.TargetProperty="Height">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="0" />
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                            </VisualStateGroup>
                            <VisualStateGroup Name="OrientationStates">
                                <VisualState Name="Horizontal">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="HorizontalContent" Storyboard.TargetProperty="Visibility">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="Visible" />
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="VerticalPopup" Storyboard.TargetProperty="Visibility">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed" />
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                                <VisualState Name="Vertical">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="VerticalContent" Storyboard.TargetProperty="Visibility">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="Visible" />
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="HorizontalPopup" Storyboard.TargetProperty="Visibility">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed" />
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                            </VisualStateGroup>
                        </VisualStateManager.VisualStateGroups>
                    </Border>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
 
    <Style TargetType="dc:ToolbarTray">       
        <Setter Property="Padding" Value="4" />
        <Setter Property="Background" Value="{x:Null}" />
        <Setter Property="dc:DynamicResource.BackgroundKey" Value="ToolbarTrayBackground OnlyIfNull" />
        <Setter Property="ItemsPanel">
            <Setter.Value>
                <ItemsPanelTemplate>
                    <dc:ToolbarTrayPanel />
                </ItemsPanelTemplate>
            </Setter.Value>
        </Setter>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="dc:ToolbarTray">
                    <Border Padding="{TemplateBinding Padding}" BorderBrush="{TemplateBinding BorderBrush}" 
                            BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}">
                         <ItemsPresenter />
                    </Border>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

Related posts:

1. Circular Progress Control (Silverlight) Quick Start Guide
2. Rating Control for Silverlight Quick Start Guide
3. SuperToolTip Control

To display the value of Value in the control, set DisplayValue to true. This will make visible a text block positioned in the control’s center. Font size is set to 10 point by the default style, but can be changed through progress control’s FontSize property. (Likewise for other font properties inherited from FrameworkElement.)

An extensive sample project for CircularProgressControl is included with the installation of DotNetBar for WPF.

Modes

Two Modes are supported, Endless and Percent.

In Percent mode, progress is indicated by the angle of the display where the angle is determined by the value of Value as a percentage of the distance between Minimum and Maximum. Of course, the value of Value must be updated by the client as progress is made.

In Endless mode, the control’s content will rotate continuously, indicating “busy”. (Note that endless mode can serve as a progress reporter and not just a “busy” indicator by setting DisplayValue to true and updating Value as progress is made.) The speed of rotation can be controlled with property RotationSpeedMultiplier. Values less than 1 will slow the rotation, greater than 1 will speed it up.

Types

CircularProgressControl has 5 built-in Types, which determine the look-and-feel. Included is a type simulating the Vista wait cursor and a type that simulates the Silverlight download wait control. Also included is a Content type for using content of your choosing in the rotating portion of the control.

Below is an screen shot showing the available Types in various states and stages of progress which was taken of the included sample project.

ProgressBrush is used for the element or elements which indicate progress.

Use BorderBrush and BorderThickness to control the stroke of the outer circumference. Note that BorderThickness is inherited property of type Thickness, but the default template only uses the value assigned to Left. Background can be used to achieve different effects depending on the Type.

Use property InnerRadius to achieve the effect of a ring. InnerBorderThickness and InnerBorderBrush control the stroke of the inner circumference. (For consistency with inherited property BorderBrush, InnerBorderThickness is also of type Thickness.)

It is possible to define your own custom type. To do so, create a ControlTemplate targeting type Control and set it as value of property AnimatingControlTemplate.

Following is a list of the built-in Types:

• Custom – Use when you want to set up a custom AnimatingControlTemplate.
• Basic
• Pie
• Wedge (use InternalValueOverride to set the relative angle of the wedge. If this is not done, then the wedge size is reflective of the value of Value.)
• Line – Has 12 lines.
• Line3 – Has 3 lines.
• Dot – Has 12 dots.
• Dot3 – Has 3 dots.
• Cone – Applies the shader effect ConeEffect (defined in DevComponents.WPF.Controls namespace) to the ProgresBrush, which turns the two ends of the linear gradient into each other creating a circle.
• Content (set ClipToBounds to false if content is unwantedly clipped by circular border.)
• Pod (aka Vista Busy) – Use PalleteColor to change the color scheme of the background while maintaining same look and feel. Setting Background directly will override the default look.
• VanishingDot (aka Silverlight) – Use PalleteColor to change color scheme of dots but maintain same general look. Setting ProgressBrush directly will override the default look.

Properties

Here is a complete list of properties defined by CircularProgressControl for your reference:

AnimatingControlTemplatet – A ControlTemplate for a Control which is responsible for animating progress.

PalleteColor – An optional color which is used by certain Types for creating default look and feel. In particular, the Pod (Vista Busy) type uses PalleteColor as input for creating a default Background to achieve the Vista look. VanishingDot (Silverlight) uses it to create default ProgressBrush used as fill for the dots.

Content – Content which will be rotated when Type is Content. By setting a value for Content, Type is automatically set to Content unless it has already been set to something else.

ContentTemplate – a DataTemplate which shows how to render Content.

DisplayValue – Determines whether to display the value of Value inside the control. Default value is false.

IsRunning – Determines whether the progress control is rotating when mode is Endless. Is ignored if mode is not Endless.

InnerRadius – Sets the radius of the inner border of the circular control. Value can be either absolute or relative. Values less than or equal to 1 will be treated as relative to Radius. Values greater than 1 are treated as absolute.

InnerBorderThickness – Thickness of the stroke used to draw the inner radius. Note that because the inherited property BorderThickness is of type Thickness, this property is also a Thickness for consistency. (Only the left value is used.)

InternalValueOverride – Provides a means of directly controlling the angle of the progress display. Must be a double between 0 and 1.

Mode – Either Percent or Endless.

ProgressBrush – Brush used for the UI Element which indicates progress.

Radius – A read-only property indicating the radius of the circle.

RotationSpeedMultiplier – Use to control speed of rotation when in Endless mode. Value of 1 is the default speed. Less than 1 slows down and greater than 1 speeds up the rotation.

Type – Determines the look and feel of the circular progress control.

ValueStringFormat – Optional format string for displaying Value, when DisplayValue is true. (Hint: to show percentage when Minimum and Maximum are their default values of 0 and 1 use 0% as format string.)

Styles and Templates

Here is the default Template for CircularProgressControl, included for your reference:

<ControlTemplate x:Key="CircularProgressControlDefaultTemplate" TargetType="dc:CircularProgressControl">
    <Grid Name="SquareGrid">
        <Grid.Resources>
            <dc:DoubleToPointConverter x:Key="doubleToPointConverter" />
        </Grid.Resources>
        <Grid Name="ClippedGrid" Background="{TemplateBinding Background}">
            <dc:CircularProgressAnimatingControl x:Name="AnimatingControl" Margin="{TemplateBinding BorderThickness}" Padding="{TemplateBinding Padding}" 
                                                    IsRunning="{TemplateBinding IsRunning}" Background="{TemplateBinding ProgressBrush}"
                                                    DataContext="{Binding RelativeSource={RelativeSource TemplatedParent}}" Template="{TemplateBinding AnimatingControlTemplate}" />
            <Grid.Clip>
                <GeometryGroup>
                    <EllipseGeometry Center="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Radius, Converter={StaticResource doubleToPointConverter}}" 
                                                    RadiusX="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Radius}" 
                                                    RadiusY="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Radius}" />
                    <EllipseGeometry Center="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Radius, Converter={StaticResource doubleToPointConverter}}" 
                                                    RadiusX="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=InnerRadiusInternal}" 
                                                    RadiusY="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=InnerRadiusInternal}" />
                </GeometryGroup>
            </Grid.Clip>
        </Grid>
        <Ellipse Stretch="Uniform" Stroke="{TemplateBinding BorderBrush}" 
                                StrokeThickness="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=BorderThickness, Converter={StaticResource thicknessToDoubleConverter}}" />
        <Ellipse Stretch="Uniform" HorizontalAlignment="Center" VerticalAlignment="Center"  Stroke="{TemplateBinding InnerBorderBrush}"
                                Width="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=InnerRadiusInternal, Converter={StaticResource multiplicationConverter}, ConverterParameter=2}" 
                                Height="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=InnerRadiusInternal, Converter={StaticResource multiplicationConverter}, ConverterParameter=2}"
                                StrokeThickness="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=InnerBorderThickness, Converter={StaticResource thicknessToDoubleConverter}}" />
        <TextBlock Name="ValueTextBlock" VerticalAlignment="Center" HorizontalAlignment="Center" 
                                Visibility="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=DisplayValue, Converter={StaticResource boolToVisibilityConverter}}" />
 
        <VisualStateManager.VisualStateGroups>
            <VisualStateGroup Name="TypeStates">
                <VisualState Name="Custom" />
                <VisualState Name="Basic">
                    <Storyboard>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="AnimatingControl" Storyboard.TargetProperty="Template">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource BasicAnimatingControlTemplateKey}" />
                        </ObjectAnimationUsingKeyFrames>
                    </Storyboard>
                </VisualState>
                <VisualState Name="Line">
                    <Storyboard>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="AnimatingControl" Storyboard.TargetProperty="Template">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource LineAnimatingControlTemplateKey}" />
                        </ObjectAnimationUsingKeyFrames>
                    </Storyboard>
                </VisualState>
                <VisualState Name="Line3">
                    <Storyboard>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="AnimatingControl" Storyboard.TargetProperty="Template">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource Line3AnimatingControlTemplateKey}" />
                        </ObjectAnimationUsingKeyFrames>
                    </Storyboard>
                </VisualState>
                <VisualState Name="Dot">
                    <Storyboard>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="AnimatingControl" Storyboard.TargetProperty="Template">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource DotAnimatingControlTemplateKey}" />
                        </ObjectAnimationUsingKeyFrames>
                    </Storyboard>
                </VisualState>
                <VisualState Name="Dot3">
                    <Storyboard>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="AnimatingControl" Storyboard.TargetProperty="Template">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource Dot3AnimatingControlTemplateKey}" />
                        </ObjectAnimationUsingKeyFrames>
                    </Storyboard>
                </VisualState>
                <VisualState Name="Pie">
                    <Storyboard>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="AnimatingControl" Storyboard.TargetProperty="Template">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PieAnimatingControlTemplateKey}" />
                        </ObjectAnimationUsingKeyFrames>
                    </Storyboard>
                </VisualState>
                <VisualState Name="Wedge">
                    <Storyboard>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="AnimatingControl" Storyboard.TargetProperty="Template">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource WedgeAnimatingControlTemplateKey}" />
                        </ObjectAnimationUsingKeyFrames>
                    </Storyboard>
                </VisualState>
                <VisualState Name="Cone">
                    <Storyboard>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="AnimatingControl" Storyboard.TargetProperty="Template">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ConeAnimatingControlTemplateKey}" />
                        </ObjectAnimationUsingKeyFrames>
                    </Storyboard>
                </VisualState>
                <VisualState Name="Pod">
                    <Storyboard>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="AnimatingControl" Storyboard.TargetProperty="Template">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PodAnimatingControlTemplateKey}" />
                        </ObjectAnimationUsingKeyFrames>
                    </Storyboard>
                </VisualState>
                <VisualState Name="VanishingDot">
                    <Storyboard>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="AnimatingControl" Storyboard.TargetProperty="Template">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource VanishingDotAnimatingControlTemplateKey}" />
                        </ObjectAnimationUsingKeyFrames>
                    </Storyboard>
                </VisualState>
                <VisualState Name="Content">
                    <Storyboard>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="AnimatingControl" Storyboard.TargetProperty="Template">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ContentAnimatingControlTemplateKey}" />
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ClippedGrid" Storyboard.TargetProperty="Clip">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="{x:Null}" />
                        </ObjectAnimationUsingKeyFrames>
                    </Storyboard>
                </VisualState>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>
    </Grid>
</ControlTemplate>

Here is the ControlTemplate used for the Control which presents the animating content. You can use this as a starting point for creating custom ControlTemplate which you then set as value of property AnimatingControlTemplate.

<ControlTemplate x:Key="BasicAnimatingControlTemplateKey" TargetType="dc:CircularProgressAnimatingControl">
    <Grid Name="AnimatedGrid" RenderTransformOrigin="0.5,0.5" HorizontalAlignment="Center" VerticalAlignment="Center"
            Width="{Binding Path=Radius, Converter={StaticResource multiplicationConverter}, ConverterParameter=2}" 
            Height="{Binding Path=Radius, Converter={StaticResource multiplicationConverter}, ConverterParameter=2}">
        <Grid.Resources>
            <dc:ObjectValueToBooleanConverter x:Key="valueToBooleanConverter" />
            <Storyboard x:Key="IsRunningStoryboard" RepeatBehavior="Forever">
                <DoubleAnimation Storyboard.TargetName="ProgressEllipse" Storyboard.TargetProperty="(Grid.RenderTransform).(RotateTransform.Angle)" Duration="00:00:01.25" From="0" To="359.99" />
            </Storyboard>
        </Grid.Resources>
        <Grid.RowDefinitions>
            <RowDefinition />
            <RowDefinition />
        </Grid.RowDefinitions>
        <Ellipse Name="ProgressEllipse" Grid.RowSpan="2" Stretch="Uniform" Fill="{Binding ProgressBrush}" RenderTransformOrigin="0.5,0.5">
            <Ellipse.RenderTransform>
                <RotateTransform />
            </Ellipse.RenderTransform>
        </Ellipse>
        <Rectangle Name="ProgressMarker" HorizontalAlignment="Center" Width="1" Fill="{Binding BorderBrush}" Stretch="Fill" />
        <Grid.RenderTransform>
            <RotateTransform Angle="{Binding Path=NormalizedValue, Converter={StaticResource multiplicationConverter}, ConverterParameter=360}" />
        </Grid.RenderTransform>
        <VisualStateManager.VisualStateGroups>
            <VisualStateGroup Name="ModeStates">
                <VisualState Name="Percent" />
                <VisualState Name="Endless">
                    <Storyboard>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ProgressMarker" Storyboard.TargetProperty="Visibility">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed" />
                        </ObjectAnimationUsingKeyFrames>
                    </Storyboard>
                </VisualState>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>
    </Grid>
</ControlTemplate>

Related posts:

1. Rating Control for Silverlight Quick Start Guide
2. SuperToolTip Control
3. Customizing Appointment Views in Silverlight Schedule