Codejock XAML Markup Guide - Home Page

Codejock Software Home Page
Information
Basic Markup
Markup Panels
Extended Markup

Codejock XAML Markup Guide:

Markup can be used to add hyperlinks, buttons, images, beautify the text, etc. inside Codejock controls such as the ShortctBar, TaskPanel, Label, etc. Usually this applies to the ToolTip, Caption and Text properties for a control.

For example, insead of displaying a standard plain text Tooltip some Markup can be used to an image with formatted text. In the case of a tree control like that in Outlook the nodes of the tree can use Markup to format the text to indicate new mail by blding the text and colorizing how many new messages have been received. Markup will allow partial strings to be colorized\formatted, an image inserted within the text, etc. Pretty much any type of customization can be done to the ToolTip, Caption and Text properties for a control.

A general unterstanding of standard XML and XAML from WPF (the programming interface for Windows Presentation Foundation) will be beneficial when working with Markup. Markup used by Codejock controls use the same sytax of XAML from WPF. Please note that valid XAML systax is required, but not every XAML feature is currently supported.

A list of supported XAML task can be found here.

The goal of this guide is not to teach you XAML, there are many resources on the web for that. Our intention is to give you an overview of some of the important XAML features that can be used with Codejock controls and how to use them. This guide will hopefully allow users whom have never seen XAML begin adding basic Markup to their controls without referencing outside sources, but again, it is not meant to teach you XAML as we could write an entire book on that. Some of this might be redundant for those who have worked with XAML in the past.

Microsoft, Visual Studio, and the Visual Studio logo are trademarks or registered trademarks of Microsoft Corporation in the United States and/or other countries. Other products and/or company names may be trademarks or registered trademarks of their respective owners.


Codejock XAML Markup Guide - The MarkupPad

Information
Basic Markup
Markup Panels
Extended Markup

The MarkupPad:

The MarkupPad is a utility provided that allows Markup to be created and the result seen in real-time just as it would when used in a application. The MarkupPad is similar to FrontPage only for XAML. Although the tool is not required to write XAML (since Codejock uses standard XAML syntax), but it is helpful as you can see what the XAML is creating as the code is typed as well as see any errors in the syntax. As soon as an error is typed all the text will turn red and a small note wll be displayed in the statusbar with the current error. It is also good to use the MarkupPad as not all XAML features are supported and when an invalid or non-supported tag is used the MarkupPad will let you know.


Codejock XAML Markup Guide - Supported XAML Tags

Information
Basic Markup
Markup Panels
Extended Markup

Supported XAML Tags:

The following is a list of supported XAML tags and their supported attributes.

Page (Style, Margin, ClipToBound, HorizontalAlignment, VerticalAlignment, Width, Height, MinWidth, MaxWidth, MinHeight, MaxHeight,) Border (Cursor, Style, Margin, ClipToBound, HorizontalAlignment, VerticalAlignment, Width, Height, MinWidth, MaxWidth, MinHeight, MaxHeight, Padding, Background, BorderThickness, BorderBrush) TextBlock (Cursor, Style, Margin, ClipToBound, HorizontalAlignment, VerticalAlignment, Width, Height, MinWidth, MaxWidth, MinHeight, MaxHeight, Padding, Background, Foreground, TextWrapping, TextAlignment, TextDecorations, FontSize, FontWeight, FontFamily, FontStyle, BaselineAlignment, Text) Image (Style, Margin, ClipToBound, HorizontalAlignment, VerticalAlignment, Width, Height, MinWidth, MaxWidth, MinHeight, MaxHeight, Source) Run (Cursor, Background, Foreground, TextDecorations, FontSize, FontWeight, FontFamily, FontStyle, BaselineAlignment, Text) LineBreak Span (Background, Foreground, TextDecorations, FontSize, FontWeight, FontFamily, FontStyle) Bold (Background, Foreground, TextDecorations, FontSize, FontWeight, FontFamily, FontStyle) Italic (Background, Foreground, TextDecorations, FontSize, FontWeight, FontFamily, FontStyle) Underline (Background, Foreground, TextDecorations, FontSize, FontWeight, FontFamily, FontStyle) InlineUIContainer (Background, Foreground, TextDecorations, FontSize, FontWeight, FontFamily, FontStyle) Hyperlink (Background, Foreground, TextDecorations, FontSize, FontWeight, FontFamily, FontStyle) Panel (Style, Margin, ClipToBound, HorizontalAlignment, VerticalAlignment, Width, Height, MinWidth, MaxWidth, MinHeight, MaxHeight, Background) StackPanel (Style, Margin, ClipToBound, HorizontalAlignment, VerticalAlignment, Width, Height, MinWidth, MaxWidth, MinHeight, MaxHeight, Background, Orientation) WrapPanel (Style, Margin, ClipToBound, HorizontalAlignment, VerticalAlignment, Width, Height, MinWidth, MaxWidth, MinHeight, MaxHeight, Background, Orientation, ItemHeight, ItemWidth) Canvas (Style, Margin, ClipToBound, HorizontalAlignment, VerticalAlignment, Width, Height, MinWidth, MaxWidth, MinHeight, MaxHeight, Background, Left, Right, Top, Bottom) Grid (Style, Margin, ClipToBound, HorizontalAlignment, VerticalAlignment, Width, Height, MinWidth, MaxWidth, MinHeight, MaxHeight, Background, ColumnDefinitions, RowDefinitions) ColumnDefinition (Width, MinWidth, MaxWidth) RowDefinition (Height, MinHeight, MaxHeight) Polygon (Width, Margin, ClipToBound, HorizontalAlignment, VerticalAlignment, Width, Height, MinWidth, MaxWidth, MinHeight, Points) Polyline (Width, Margin, ClipToBound, HorizontalAlignment, VerticalAlignment, Width, Height, MinWidth, MaxWidth, MinHeight, Points) Rectangle (IsMouseOver, Width, Margin, ClipToBound, HorizontalAlignment, VerticalAlignment, Width, Height, MinWidth, MaxWidth, MinHeight) Ellipse (Width, Margin, ClipToBound, HorizontalAlignment, VerticalAlignment, Width, Height, MinWidth, MaxWidth, MinHeight) Line (Width, Margin, ClipToBound, HorizontalAlignment, VerticalAlignment, Width, Height, MinWidth, MaxWidth, MinHeight, X1, Y1, X2, Y2) Button (IsPressed, Style, Width, Margin, ClipToBound, HorizontalAlignment, VerticalAlignment, Width, Height, MinWidth, MaxWidth, MinHeight, Content) CheckBox RadioButton ScrollViewer (Style, VerticalScrollBarVisibility, HorizontalScrollBarVisibility) SolidColorBrush (Color) LinearGradientBrush (StartPoint, EndPoint, GradientStops) GradientStop (Color, Offset) Style (TargetType, BasedOn, Resources) Setter (Property, Value) Events - (MouseEnter, MouseLeave, MouseMove, MouseLeftButtonUp, MouseLeftButtonDown, MouseRightButtonUp, MouseRightButtonDown)


Codejock XAML Markup Guide - Controls that Support a XAML Captions and or Text

Information
Basic Markup
Markup Panels
Extended Markup

Controls that Support a XAML Caption and or Text:

The following controls support XAML captions or text.

  • Calendar*
  • CheckBox
  • Label
  • List Box
  • Push Button
  • Radio Button
  • Tab Control
  • Task Dialog
  • TaskPanel
  • Tree View

The Calendar can use XAML when displaying events\appintments which do not use the Caption or Text propety names. An example can be seen here.


Codejock XAML Markup Guide - Controls that Support XAML Tooltips

Information
Basic Markup
Markup Panels
Extended Markup

Controls that Support XAML Tooltips:

Reference the tooltip sample for instucitons on how to create XAML tooltips.

The following controls support XAML tooltips.

  • CommandBars
  • DockingPane
  • PropertyGrid
  • ReportControl
  • TabControl
  • TaskPanel


Codejock XAML Markup Guide - The Basics

Information
Basic Markup
Markup Panels
Extended Markup

The Basics - XAML Code Snippets:

Any valid snippet of Extensible Markup Language (XML) can be used that is composed from the list of supported tags and attributes. The sample below is a simple XAML snippet that displays a button. This snippet can be used in the ToolTip, Caption and Text properties for a control to display this button.

<Button Foreground="Green" Width="100px" Height="30px">
    <TextBlock FontSize ='12pt' VerticalAlignment="Center"
               HorizontalAlignment="Center">XAML Button :-)</TextBlock>
</Button>
 By default, text is display as the control normally would. To use Markup in a Codejock control the EnableMarkup property must be set to True. If not, then the actualy Markup code will be displayed and not pre-compiled into readable text.


Codejock XAML Markup Guide - Loading Images

Information
Basic Markup
Markup Panels
Extended Markup

Loading Images Using XAML:

Images stored in a ImageManager control: To reference an image stored in the ImageManager control, simply set "Source" attribute of an Image element to the id of the image to load. Note for this example there is an image with id "101" in the ImageManager control.

<Image Source='101'/></InlineUIContainer> Markup</TextBlock>
Images stored in a file: Set the "Source" attribute of an Image element to the "file" keyword along with the path to the image file: <Image Source='Icons/Help.bmp'/></InlineUIContainer> Markup</TextBlock>


Codejock XAML Markup Guide - TextBlock Control

Information
Basic Markup
Markup Panels
Extended Markup

Using TextBlock Control:

The TextBlock control will probably be the most used control when using XAML with Codejock controls. The TextBlock control provides flexible text support for Codejock controls. You would use the TextBlock primarily for basic UI scenarios that do not require more than one paragraph of text. You have already seen the TextBlock many times in the Captions, Text and Tooltips section.

TextBlock supports the hosting and display of Inline flow content elements. Supported TextBlock elements are Bold, Hyperlink, InlineUIContainer, Italic, LineBreak, Run, Span, and Underline. With the supported elements the TextBlock is excellent for displaying customized single-line text.

Inline Support:
Since the Content property of TextBlock and Run classes are inline you have two ways to display basic text. In the sample below you will see the Text property is used to maually specify the text for the TextBlock, this method can be used for basic text to make the code more readable.

XAML:

<TextBlock Text="This is some text." />
Results:

The code below does exactly the same thing as the code above. This approach should be used if more cusomization is required the displayed text, for example, if a words needs to be in italic or bold.

XAML: <TextBlock> This is some text. </TextBlock>
Results:

Bold, Hyperlink, Italic and Underline all inherit the Text property from Span (Span is the "parent" tag for these tags) so they can be used inline as well. In the sample below you will see the Text property is used to maually specify the text for the Italic and Bold elements.

XAML: <TextBlock> This is some <Italic Text="italic" /> text and this is some <Bold Text="bold" /> text. </TextBlock>
Results:

The code below does exactly the same thing as the code above.

XAML: <TextBlock> This is <Italic>italic</Italic> text and this is <Bold>bold</Bold> text. </TextBlock>
Results:

Using the Run class:
Run is used to format text within a TextBlock. It can also be placed inside a Span tag. Below is an exelent example of how Run can be used inline to modify specifc parts of text in a TextBlock.

XAML: <StackPanel Margin='3'> <TextBlock HorizontalAlignment="Left" Cursor="Hand">Drafts</TextBlock> <TextBlock HorizontalAlignment="Left" Cursor="Hand"> <Bold>Inbox</Bold> <Run Foreground='Blue'>(490)</Run> </TextBlock> <TextBlock HorizontalAlignment="Left" Cursor="Hand">Sent items</TextBlock> <TextBlock HorizontalAlignment="Left" Cursor="Hand"> <Italic>Large Mail</Italic> </TextBlock> <TextBlock HorizontalAlignment="Left" Cursor="Hand"> <Bold>Junk E-mail</Bold> <Run Foreground='Green'>[490]</Run> </TextBlock> </StackPanel>
Results:

Putting it All Together:
The sample below uses both the Run, Bold and Italic tags to format the text in the TextBlock.

XAML:
<Page xmlns='http://schemas.microsoft.com/winfx/2006/xaml/presentation'
      xmlns:x='http://schemas.microsoft.com/winfx/2006/xaml'>
  <StackPanel TextElement.FontSize="26" TextElement.FontFamily="Times New Roman"
                VerticalAlignment="Center" HorizontalAlignment="Center">
    <TextBlock>Pythagarean Theorem</TextBlock>
      <StackPanel Orientation="Horizontal">
        <TextBlock><Bold>A</Bold><Run BaselineAlignment="Top" FontSize="12">2
                  </Run> + <Bold>B</Bold><Run BaselineAlignment="Top"
                  FontSize="12">2</Run></TextBlock>
          <TextBlock><Run></Run> = <Bold>C</Bold><Run BaselineAlignment="Top"
                   FontSize="12">2</Run></TextBlock>
     </StackPanel>
  </StackPanel>
</Page>
Results:


Codejock XAML Markup Guide - XAML Tooltips

Information
Basic Markup
Markup Panels
Extended Markup

Using XAML for Tooltips:

Only controls with a TooltipContext property can use Markup for tooltips. The sample below shows a TabControl that uses Markup tooltip, in this case, the second tab's tooltip is being set. Note EnableMarkup is not needed to enable Markup for the toolip. The style of the tooltip must be set to xtpToolTipMarkup. To display both a Markup Tooltip and Markup in the caption on the TabControl tabs both EnableMarkup and xtpToolTipMarkup are required. The xtpToolTipMarkup style is required to display Markup tooltips for the TabControl (or any other TooltipContext enabled control). Note the sample used images stored in a ImageManager as the image source.

A list of controls that support XAML Tooltips can be found here.

The sample below will use XAML to create a tooltip for a tab button in a TabControl:

XAML:

'VB 6 code snippet
TabControl.ToolTipContext.Style = xtpToolTipMarkup

TabControl.Item(1).ToolTip = _
"<Border Padding='4' Width='200px' BorderThickness='1' " & _
"BorderBrush='#767676' Background='#e4ecf7'>" & _
"<StackPanel TextBlock.FontFamily='Tahoma'>" & _
"   <TextBlock Padding='1, 3, 1, 3' FontWeight='Bold'>Change Case" & _
"</TextBlock>" & _
"   <TextBlock Padding='9, 6, 30, 7' TextWrapping='Wrap'>Change all the " & _
"selected text to UPPERCASE, lowercase, or other common capitalizations." & _
"</TextBlock>" & _
"   <Border Height='1' Background='#9ebbdd' />" & _
"   <Border Height='1' Background='White' />" & _
"   <StackPanel Margin='1, 7, 0, 3' Orientation='Horizontal'>" & _
"        <Image Source='12'/><TextBlock Margin='7, 0, 0, 0' " & _
"VerticalAlignment='Center' FontWeight='Bold'>Press F1 for more help." & _
"</TextBlock>" & _
"   </StackPanel>" & _
"</StackPanel>" & _
"</Border>"
Results:


Codejock XAML Markup Guide - Using XAML in Visual Basic

Information
Basic Markup
Markup Panels
Extended Markup

Using XAML in Visual Basic:

Using XAML to format text in Codejock controls is quick and painless. Below are a few excellent XAML samples in practicle use.

This sample shows how to display an Outlook style tree control using Markup:

XAML:

'VB 6 code snippet TreeViewMarkup.EnableMarkup = True TreeViewMarkup.Nodes.Add , , "Root", "Personal Folders" TreeViewMarkup.Nodes.Add "Root", xtpTreeViewChild, , "Deleted Items" TreeViewMarkup.Nodes.Add "Root", xtpTreeViewChild, , "Drafts" TreeViewMarkup.Nodes.Add "Root", xtpTreeViewChild, , "<TextBlock>" & _ "<Bold>Inbox</Bold> <Run Foreground='Blue' Text='(1)'/></TextBlock>" TreeViewMarkup.Nodes.Add "Root", xtpTreeViewChild, , "<TextBlock>" & _ "<Bold>Junk E-mail</Bold> <Run Foreground='Green' Text='[3]'/></TextBlock>" TreeViewMarkup.Nodes.Add "Root", xtpTreeViewChild, , "Outbox" TreeViewMarkup.Nodes("Root").Expanded = True
Results:

Below is a sample that shows how to mix an image with text on a button using Markup, note the image is loaded from a image file. To reference an image stored in the ImageManager control, simply set "Source" to the id of the image to load:

XAML:
'VB 6 code snippet
PushButton1.EnableMarkup = True
PushButton1.Caption = "<TextBlock>Need " & _
                      "<InlineUIContainer BaselineAlignment='Bottom'>" & _
    "<Image Source='Icons/Help.bmp'/></InlineUIContainer> with " & _
    "Markup?</TextBlock>"
Results:

The following sample illustrates the sample techniques at the sample above, however, this sample shows how to create more elaborate XAML using only the Label control:

XAML: 'VB 6 code snippet LabelMarkup.EnableMarkup = True LabelMarkup.Caption = _ "<Border Margin='0' Padding='4' BorderThickness='1' BorderBrush='#767676' " & _ "Background='#e4ecf7'>" & _ "<StackPanel TextBlock.FontFamily='Tahoma'>" & _ " <TextBlock Padding='1, 3, 1, 3' FontWeight='Bold'>Change Case" & _ "</TextBlock>" & _ " <TextBlock Padding='9, 6, 30, 7' TextWrapping='Wrap'>Change all the " & _ "selected text to UPPERCASE, lowercase, or other common " & _ "capitalizations.</TextBlock>" & _ " <Border Height='1' Background='#9ebbdd' />" & _ " <Border Height='1' Background='White' />" & _ " <StackPanel Margin='1, 7, 0, 3' Orientation='Horizontal'>" & _ " <Image Source='12'/><TextBlock Margin='7, 0, 0, 0' " & _ "VerticalAlignment='Center' FontWeight='Bold'>Press F1 for" & _ " more help.</TextBlock>" & _ " </StackPanel>" & _ "</StackPanel>" & _ "</Border>"
Results:


Codejock XAML Markup Guide - Task Panel Sample

Information
Basic Markup
Markup Panels
Extended Markup

Task Panel Sample:

Below is a simple Visual Basic 6 sample using snippets of XAML to format the text of Task Panel Items:

XAML:

'Global definitions
Const ID_TASKITEM_DRAFTS = 632
Const ID_TASKITEM_INBOX = 633
Const ID_TASKITEM_SENT = 634
Const ID_TASKITEM_LARGEMAIL = 635
Const ID_TASKITEM_JUNK = 636

Private Sub Form_Load()
    Dim Group As TaskPanelGroup
    Dim Item As TaskPanelGroupItem

    wndTaskPanel.EnableMarkup = True

    Set Group = wndTaskPanel.Groups.Add(0, "System Email Client")
    Group.Tooltip = "These tasks apply to your default email client"
    Group.Special = True

    Group.Items.Add ID_TASKITEM_DRAFTS, "<TextBlock" & _
                    "HorizontalAlignment='Left' Cursor='Hand'>Drafts" & _
                    "</TextBlock>", xtpTaskItemTypeText
    Group.Items.Add ID_TASKITEM_INBOX, "<TextBlock " & _
                    "HorizontalAlignment='Left' Cursor='Hand'>" & _
                    "<Bold>Inbox</Bold><Run Foreground='Blue'>(490)</Run>" & _
                    "</TextBlock>", xtpTaskItemTypeText
    Group.Items.Add ID_TASKITEM_SENT, "<TextBlock " & _
                    "HorizontalAlignment='Left' Cursor='Hand'>Sent Items" & _
                    "</TextBlock>", xtpTaskItemTypeText
    Group.Items.Add ID_TASKITEM_LARGEMAIL, "<TextBlock " & _
                    "HorizontalAlignment='Left' Cursor='Hand'>" & _
                    "<Italic>Large Mail</Italic>" & _
                    "</TextBlock>", xtpTaskItemTypeText
    Group.Items.Add ID_TASKITEM_JUNK, "<TextBlock " & _
                    "HorizontalAlignment='Left' Cursor='Hand'>" & _
                    "<Bold>Junk E-mail</Bold><Run Foreground='Blue'>" & _
                    "[490]</Run>" & _
                    "</TextBlock>", xtpTaskItemTypeText
End Sub
Results:


Codejock XAML Markup Guide - Calendar Events Using XAML Sample

Information
Basic Markup
Markup Panels
Extended Markup

Calendar Events Using XAML Sample:

The Calendar allows you to use XAML to format the contents of events\appointments displayed in the calendar. Only the Office 2007 calendar theme supports XAML.

There is a "static" Markup use case and "dynamic" one. Both of them works only for Office 2007 theme.

For Static you only to have enable Markup in the Calendar and it will show markup text autamically for those events which have "xtpMarkupTemplate" property set (see in code).

For Dynamic you have to enable text customization (GetItemText method), and then set Markup text for some events...

The following steps are needed to enable XAML support:

  • Set the theme to Office 2007 (Both static and dynamic uses)
  • Set MarkupEnabled to True (Both static and dynamic uses)
  • Set the xtpCalendarItemText_EventMarkupTemplate flag (Dynamic use only)

First the Office 2007 theme must be used. Second, you must tell the Calendar to enable XAML support. Third, if you plan to change XMAL text dynamically you need the AskItemTextFlags method to set the xtpCalendarItemText_EventMarkupTemplate flag.

(Static use) If all you want to do is display XAML text for each event statically, you simply add a custom property nammed "xtpMarkupTemplate" and the calendar will display the XAML.

(Dynamic use) AskItemTextFlags specifys that the GetItemText event will fire when it comes time to draw the text for an event\appointment. We only specified the xtpCalendarItemText_EventMarkupTemplate flag so we will only be notified when we need to set the XAML text for the event\appointment.

(Dynamic use) When using the xtpCalendarItemText_EventMarkupTemplate, you will be creating all viewable text for the event\appointment using XAML. You don't need a subject, location, body, etc. It will only display the XAML string you provide, which can be any valid XAML snippet.

(Static and Dynamic use) The best way to store a XAML snippet is in the custom properties of an event\appointment. With this method you can add as many snippets as you need.

When using statically, you simply add a property nammed "xtpMarkupTemplate" and the string of the property should be the XAML string to display in the event.

Note that you might not want to display the XAML string when in WeekView or MonthView depending on how much XAML was added or the size of the displayed XAML. In this case you could simply test for these views in the GetItemText and choose not to use the XAML for those views.

The sample below shows how to enable Markup support in the Calendar and how to add XAML to an event\appointment.

This sample can be used both statically and dynamically, just un-comment the code specified for dynamic use.

Note that this can be used as a stand alone application, simply cut and paste all of the code and place it inside the code section of a form that contains a calendar control:

Results:

XAML:

Private Sub Form_Load() 'Use Office 2007 Theme for Calendar CalendarControl.VisualTheme = xtpCalendarThemeOffice2007 'Enable Markup CalendarControl.MarkupEnabled = True 'Enable custom text handling for event 'Un-comment this line for dynamic use 'CalendarControl.AskItemTextFlags = xtpCalendarItemText_EventMarkupTemplate 'Set the Calendar's View Dim Today As Date Today = Now CalendarControl.ViewType = xtpCalendarDayView CalendarControl.DayView.ShowDay DateTime.Date CalendarControl.DataProvider.AddEvent Add_Test_Event CalendarControl.Populate CalendarControl.DayView.ScrollToWorkDayBegin End Sub 'Ony used when text is added dynamically Private Sub CalendarControl_GetItemText(ByVal Params As _ XtremeCalendarControl.CalendarGetItemTextParams) If Params.Item = xtpCalendarItemText_EventMarkupTemplate Then If CalendarControl.MarkupEnabled And _ Params.ViewEvent.Event.CustomProperties.Count Then 'Here you can add some custom XAML, it does not need to be stored 'in the properties of an event Params.Text = _ Params.ViewEvent.Event.CustomProperties.Property("xtpMarkupTemplate") End If End If End Sub 'Function to create a sample event Private Function Add_Test_Event() As CalendarEvent Dim m_pEditingEvent As CalendarEvent Set m_pEditingEvent = CalendarControl.DataProvider.CreateEvent m_pEditingEvent.StartTime = Now m_pEditingEvent.EndTime = Now + 0.22 'Properties of the event, they will be displayed when 'Markup is not enabled. m_pEditingEvent.Subject = "SuitePro 2008 Released!" m_pEditingEvent.Location = "Internet Download (Link Included)" m_pEditingEvent.Body = "Codejock Software released SuitePro" & _ " 2008 today. All development machines " & _ "must be updated no later than 06/15/08." & _ "Implementation will begin immediately!" m_pEditingEvent.AllDayEvent = False m_pEditingEvent.Label = 2 m_pEditingEvent.BusyStatus = xtpCalendarBusyStatusFree m_pEditingEvent.MeetingFlag = True m_pEditingEvent.ScheduleID = 1 'Store a XAML string to be displayed in the event body m_pEditingEvent.CustomProperties.Property("xtpMarkupTemplate") = _ "<StackPanel Margin='5, 5, 5, 5' VerticalAlignment='Top'" & _ "HorizontalAlignment='Center'>" & _ "<TextBlock Padding='0,10,0,0' TextWrapping='Wrap'><Bold>Subject:</Bold> " & _ "<Bold>SuitePro</Bold> <Run Foreground='White'>2008</Run> " & _ "Released!</TextBlock>" & _ "<TextBlock Padding='0,10,0,0'><Bold>Body:</Bold></TextBlock>" & _ "<TextBlock Padding='10,10,0,0' TextWrapping='Wrap'>" & _ "<Bold><Run Foreground='Blue'>Codejock</Run> Software</Bold> released " & _ "<Bold>SuitePro</Bold> <Run Foreground='White'>2008</Run> today. All" & _ " development machines <Bold>must</Bold> be updated no later than " & _ "<Run Foreground='Red'>06/15/08</Run>." & _ "</TextBlock>" & _ "<TextBlock Padding='10,10,0,0' TextWrapping='Wrap'>" & _ "Download the software <Hyperlink Cursor='Hand'>here</Hyperlink>." & _ "</TextBlock>" & _ "<TextBlock Padding='10,10,0,0' TextWrapping='Wrap'>" & _ "Implementation will begin immediately! If you have and comments or" & _ "concerns email John at <Hyperlink Foreground='Blue' Cursor='Hand'>" & _ "support@codejock.com</Hyperlink>." & _ "</TextBlock>" & _ "<TextBlock Padding='10,10,0,0'>" & _ " - Management" & _ "</TextBlock>" & _ "</StackPanel>" Set Add_Test_Event = m_pEditingEvent End Function


Codejock XAML Markup Guide - The Stack Panel Control

Information
Basic Markup
Markup Panels
Extended Markup

The Stack Panel Control:

Elements are abled to be "stacked" in a specified direction using a Stack Panel.

The Stack Panel Control is used to arrange child elements into a single line. You have the option to display the elements horizontally or vertically, the default is horizontally. By default, both the HorizontalAlignment and VerticalAlignment properties are set to stretch.

The Stack Panel uses logical scrolling to scroll to the next element that was added to the stack panel. Wrap the host Stack Panel in a ScrollViewer wiht the CanContentScroll property to false to use physical scrolling instead of logical scrolling.

Below is a very simple sample of how to use a stack panel to view a list of radio buttons vertically:

XAML:

<Page xmlns='http://schemas.microsoft.com/winfx/2006/xaml/presentation'
      xmlns:x='http://schemas.microsoft.com/winfx/2006/xaml'>
    <Border VerticalAlignment="Center" HorizontalAlignment="Center">
        <StackPanel Orientation="Horizontal" Background="Gold">
        <ScrollViewer Width = "100" MaxHeight="100" Margin="4">
            <StackPanel>
                <RadioButton Content="Item 1"/>
                <RadioButton Content="Item 2"/>
                <RadioButton Content="Item 3"/>
                <RadioButton Content="Item 4"/>
                <RadioButton Content="Item 5"/>
                <RadioButton Content="Item 6"/>
                <RadioButton Content="Item 7"/>
                <RadioButton Content="Item 8"/>
                <RadioButton Content="Item 9"/>
            </StackPanel>
        </ScrollViewer>
        </StackPanel>
    </Border>
</Page>
Results:


Codejock XAML Markup Guide - The Grid Control

Information
Basic Markup
Markup Panels
Extended Markup

The Grid Control:

Displaying elements in a table format using columns and rows is done with the Grid Control.

Unlike a Table, the Grid is used strictly for layout purposes. The Grid is usful in that you can arrange controls in columns and rows and have them lined up vertivally and horizontally. This is nice if items are not all the same size, the columns and rows will still remain uniform.

The Grid is probably one of the more complex controls you will use. To use a Grid you must specify how many row and columns are needed, and how each row and column should be sized. Optionally, you can set the width and height of the grid.

To start, you would add some Column and\or Row definitions:

XAML:

<Grid.ColumnDefinitions>
  <ColumnDefinition Width="Auto"/>
  <ColumnDefinition Width="100"/>
  <ColumnDefinition Width="2.5*"/>
  <ColumnDefinition Width="1.5*"/>
</Grid.ColumnDefinitions>

From the definition above, the first column will get sized to its contents (uses the size properties of the content object), the second column will have a width of 100 pixels, the thrid and fourth are apportioned in the remaining leftover\avilable space. The star "*" uses weighted proportions to distribute available space, so * is one times the available space, 2* is two times the available space, etc. Column 3 will get 2.5 times the available space and column 4 will get 1.5 times the available space.

When using the star method of sizing it is possible to have a column too small if the porportions are entered wrong. This can be solved by entering a minimum width or using Auto sizing.

XAML:
<Grid.ColumnDefinitions>
  <ColumnDefinition MinWidth="20" Width="2*"/>
  <ColumnDefinition Width="100"/>
  <ColumnDefinition Width="2.5*"/>
  <ColumnDefinition Width="1.5*"/>
</Grid.ColumnDefinitions>

From the definition above, the first column will have a minimum width of 20 pixels. Also notice that a width of 2* was also set. The width for column 1 will at a minimum be 20 pixels, but it can be larger depending on the width of the grid.

Below is a very simple sample of how to use a Grid panel to create a 3x3 cube:

XAML:
<Page xmlns='http://schemas.microsoft.com/winfx/2006/xaml/presentation'
      xmlns:x='http://schemas.microsoft.com/winfx/2006/xaml' >

    <Grid Width="150" VerticalAlignment="Center" HorizontalAlignment="Center">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto"/>
            <ColumnDefinition Width="50"/>
            <ColumnDefinition Width="*"/>
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition MinHeight="50"/>
            <RowDefinition MinHeight="50"/>
            <RowDefinition MinHeight="50"/>
        </Grid.RowDefinitions>

        <Border Background="Red"  Grid.Column = "0">
            <TextBlock Width="50" VerticalAlignment="Top"
                       HorizontalAlignment="Left">1</TextBlock>
        </Border>
        <Border Background="Blue" Grid.Column = "1">
            <TextBlock HorizontalAlignment="Center">2</TextBlock>
        </Border>
        <Border Background="Green" Grid.Row = "0" Grid.Column = "2">
            <TextBlock VerticalAlignment="Top" HorizontalAlignment="Right" >3
            </TextBlock>
        </Border>
        <Border Background="Yellow" Grid.Row = "1" Grid.Column = "0">
            <TextBlock VerticalAlignment="Center" HorizontalAlignment="Left">4
            </TextBlock>
        </Border>
        <Border Background="White" Grid.Row = "1" Grid.Column = "1"
                Cursor="Hand">
            <TextBlock VerticalAlignment="Center"
                       HorizontalAlignment="Center">5</TextBlock>
        </Border>
        <Border Background="Orange" Grid.Row = "1" Grid.Column = "2">
            <TextBlock VerticalAlignment="Center"
                       HorizontalAlignment="Right">6</TextBlock>
        </Border>
        <Border Background="Cyan" Grid.Row = "2" Grid.Column = "0">
            <TextBlock VerticalAlignment="Bottom" HorizontalAlignment="Left">7
            </TextBlock>
        </Border>
        <Border Background="Gray" Grid.Row = "2" Grid.Column = "1">
            <TextBlock VerticalAlignment="Bottom"
                       HorizontalAlignment="Center">8</TextBlock>
        </Border>
        <Border Background="LightGreen" Grid.Row = "2" Grid.Column = "2">
            <TextBlock VerticalAlignment="Bottom"
                       HorizontalAlignment="Right">9</TextBlock>
        </Border>
    </Grid>
</Page>
Results:

In the sample above the grid width was set to 150 pixels. The first column's width is set to Auto, so it will use the width of it's content object, in this case the firt TextBlock control in column 1 has a width set to 50. Column 2 is set to 50 pixels, and column 3 is set to *, which will use up the remaining space. For this sample all three columns end up with a width of 50 pixels.

The grid control is the only control that can make a layout based on percentages. If the HorizontalAlignment and VerticalAlignment values of the grid are set to Stretch then star "*" sizing can be used to represent the percentage of space to use. This can be applied to the entire screen or it can be a percentage of the parent control that contains the grid.

Below is the 3x3 cube sample again, but this time it will divide the columns up using star "*" sizing and the HorizontalAlignment and VerticalAlignment values set to Stretch. The columns will all get 33% of the available space:

XAML:
<Page xmlns='http://schemas.microsoft.com/winfx/2006/xaml/presentation'
      xmlns:x='http://schemas.microsoft.com/winfx/2006/xaml' >

    <Grid VerticalAlignment="Stretch" HorizontalAlignment="Stretch">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="33*"/>
            <ColumnDefinition Width="33*"/>
            <ColumnDefinition Width="33*"/>
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition MinHeight="50"/>
            <RowDefinition MinHeight="50"/>
            <RowDefinition MinHeight="50"/>
        </Grid.RowDefinitions>

        <Border Background="Red"  Grid.Column = "0" />
        <Border Background="Blue" Grid.Column = "1" />
        <Border Background="Green" Grid.Row = "0" Grid.Column = "2" />
        <Border Background="Yellow" Grid.Row = "1" Grid.Column = "0" />
        <Border Background="White" Grid.Row = "1" Grid.Column = "1" />
        <Border Background="Orange" Grid.Row = "1" Grid.Column = "2" />
        <Border Background="Cyan" Grid.Row = "2" Grid.Column = "0" />
        <Border Background="Gray" Grid.Row = "2" Grid.Column = "1" />
        <Border Background="LightGreen" Grid.Row = "2" Grid.Column = "2" />
    </Grid>
</Page>

Microsoft, Visual Studio, and the Visual Studio logo are trademarks or registered trademarks of Microsoft Corporation in the United States and/or other countries. Other products and/or company names may be trademarks or registered trademarks of their respective owners.


Codejock XAML Markup Guide - The Wrap Panel

Information
Basic Markup
Markup Panels
Extended Markup

The Wrap Panel:

The Wrap Panel is very similar to the Stack Panel, with the addition that child elements are allows to wrap to the next row or column.

A Wrap Panel is most useful when needing to display an unknown number of items. The items might or might not be of the same width or height, but it is likey that they would be (Think of Windows Explorer displaying items as icons\large icons). If that is the case, then ItemWidth and ItemHeight can be used to accomplish uniform sizing. The only other option available is the Orientation, which indicates the items are displayed vertically or horizontally.

Child elements in the Wrap Panel are positioned sequential fom left to right. Content is broken to the next line when the edge of the containing box is reached.

Wrap panels are very commonly used inside of a ScrollViewer control. This is because it is very likey the items in the Wrap panel with wrap bast the boundaries of the containing control, the ScrollViewer will allow these items to be scrolled to.

The sample below shows a Wrap Panel that contains 20 Button controls and displays them in a ScrollViewer with a maximum width and height of 100 pixels:

XAML:

<Page xmlns='http://schemas.microsoft.com/winfx/2006/xaml/presentation'
      xmlns:x='http://schemas.microsoft.com/winfx/2006/xaml'
      TextElement.FontSize="14" VerticalAlignment="Center"
      HorizontalAlignment="Center" Margin="5">

        <ScrollViewer MaxWidth = "100" MaxHeight="100" Margin="4" >
            <WrapPanel>
                <Button Content=" 1 "/>
                <Button Content=" 2 "/>
                <Button Content=" 3 "/>
                <Button Content=" 4 "/>
                <Button Content=" 5 "/>
                <Button Content=" 6 "/>
                <Button Content=" 7 "/>
                <Button Content=" 8 "/>
                <Button Content=" 9 "/>
                <Button Content="10" />
                <Button Content="11"/>
                <Button Content="12"/>
                <Button Content="13"/>
                <Button Content="14"/>
                <Button Content="15"/>
                <Button Content="16"/>
                <Button Content="17"/>
                <Button Content="18"/>
                <Button Content="19"/>
                <Button Content="20"/>
            </WrapPanel>
        </ScrollViewer>
</Page>
Results:


Codejock XAML Markup Guide - Extended XAML Techniques

Information
Basic Markup
Markup Panels
Extended Markup

Extended XAML Techniques:

Only basic XAML snippets have been used in the control so far. Far more completex XAML snippets can be used. The features and techniques that will be discuss can be used exactly as the sample previously shown. Advanced techniques discussed will include Resources, triggers, images, event handeling and displaying full page XAML. The image below shows a full screen application created with XAML using some of the advanced techniques discussed in this guide.


Codejock XAML Markup Guide - Linking XAML Events to Subroutines or Funtions in VB 6

Information
Basic Markup
Markup Panels
Extended Markup

The MarkupContext object is used to connect method calls in XML Markup with actual methods, functions and events in your code.

For example (see code sample below), using SetMethod, the Label control can handle events called from XML Markup with Markup enabled.

When EnableMarkup is true any XML Markup that is in the Label control's Caption property will be translated to viewable text. Using SetMethod, an external method or event can be called from the XML inside the Label control's Caption. In the sample below the "Hyperlink_Click" subroutine is "connected" to the XML Hyperlink Click event using SetMethod.

Connecting XML events to your code can be very useful if using the Label control to create a full page application using XML. For example clicking on hyper links and buttons.

Public Sub Hyperlink_Click(Reserved1 As Object, Reserved2 As Object) MsgBox "Clicked" End Sub Private Sub Form_Load() Label1.EnableMarkup = True Label1.MarkupContext.SetMethod Me, "Hyperlink_Click" Label1.Caption = "<TextBlock>Click <Hyperlink Click='Hyperlink_Click'>" & _ "this</Hyperlink> link</TextBlock>" End Sub


Codejock XAML Markup Guide - XAML Resources

Information
Basic Markup
Markup Panels
Extended Markup

XAML Resources:

Resources in XAML can be used like variable, constant or static read-only value in other languages. XAML allows objects to be reused by first defining them as a resource. Resources are associated with control, element or page and is only available within the element that it is defined in. The resource will also be available to any children elements. For these reasons these resources are locally defined resources. Just about any element can have resources defined for it.

Resources must all be identified with a key. XAML provides the x:Key attribute to define a resource key. Resources defined can be referenced using the StaticResource markup extension. Markup extensions must be enclosed in curly braces which specify that inside is a markup extension.In the sample below the "FolderBrush" linear gradient can be used by any element inside the Page element. The Border element in the sample is referencing the "FolderBrush" resource to fill it's background.

Note: If curly braces need to be used as plain text they must be escaped by placing {} before the leading curly brace.

<Page xmlns='http://schemas.microsoft.com/winfx/2006/xaml/presentation' xmlns:x='http://schemas.microsoft.com/winfx/2006/xaml' > <Page.Resources> <!-- General syntax --> <xxxType x:Key="someKeyName" ...> ... </xxxType> <!-- Gradient Brush Resource --> <LinearGradientBrush x:Key="FolderBrush" StartPoint="0, 0" EndPoint="1,0"> <GradientStop Color="#d6e8ff" Offset="0"/> <GradientStop Color="#e3efff" Offset="0.5"/> <GradientStop Color="#d6e8ff" Offset="1"/> </LinearGradientBrush> </Page.Resources> <Border Padding = '5, 3, 6, 3' BorderBrush='White' BorderThickness='1, 1, 0, 0' Background="{StaticResource FolderBrush}"> <TextBlock FontWeight='Bold' Foreground='#15428b'> Favorite Folders</TextBlock> </Border> </Page>

Without resources the code might look like the sample below. Note The background will need to be modified for every border that uses the same brush. A search and replace can be used, but using resources can be much more efficient if the same brush is used more than one time. The sample below is ideal only when that Border element is the only Border to use that brush.

<Page xmlns='http://schemas.microsoft.com/winfx/2006/xaml/presentation' xmlns:x='http://schemas.microsoft.com/winfx/2006/xaml' > <Border Padding = '5, 3, 6, 3' BorderBrush='White' BorderThickness='1, 1, 0, 0'> <Border.Background> <LinearGradientBrush StartPoint="0, 0" EndPoint="1,0"> <GradientStop Color="#d6e8ff" Offset="0"/> <GradientStop Color="#e3efff" Offset="0.5"/> <GradientStop Color="#d6e8ff" Offset="1"/> </LinearGradientBrush> </Border.Background> <TextBlock FontWeight='Bold' Foreground='#15428b'> Favorite Folders</TextBlock> </Border> </Page>

Using the x:Key attribute a style can be applied to every element of a specific type such as a TextBlock or Border within the scope of the resource by setting the x:Key and TargetType attributes with the desired type. Using this approach all elements will inherit the style with no additional code when the element is created. In the sample below all Border elements within the Page element will use the "FolderBrush" linear gradient to fill it's background. Notice the x:Key and TargetType attributes both reference the Border element. Note the Border element does not reference any resources, yet it will still use the "FolderBrush" resource to fill the background.

<Page xmlns='http://schemas.microsoft.com/winfx/2006/xaml/presentation'
      xmlns:x='http://schemas.microsoft.com/winfx/2006/xaml' >
    <Page.Resources>
        <LinearGradientBrush x:Key="FolderBrush" StartPoint="0, 0"
                             EndPoint="1,0">
            <GradientStop Color="#d6e8ff" Offset="0"/>
            <GradientStop Color="#e3efff" Offset="0.5"/>
            <GradientStop Color="#d6e8ff" Offset="1"/>
        </LinearGradientBrush>

        <Style x:Key="{x:Type Border}" TargetType="Border">
            <Setter Property="Background"
                    Value="{StaticResource FolderBrush}"/>
        </Style>
    </Page.Resources>

    <Border Padding = '5, 3, 6, 3' BorderBrush='White'
                                   BorderThickness='1, 1, 0, 0'>
        <TextBlock FontWeight='Bold' Foreground='#15428b'>
                                     Favorite Folders</TextBlock>
    </Border>
</Page>

With Codejock XAML resources are used to set styles and triggers for an element, control or page.


Codejock XAML Markup Guide - XAML Styles

Information
Basic Markup
Markup Panels
Extended Markup

XAML Styles:

So far you have seen styles used in the examples. For the most part, the Resource section usually consists mainly of Style objects and used for this purpose alone. Styles can be thought of similarly to Cascading Style Sheets (CSS) in HTML, only much more powerful. Styles are basically a collection of values that are used to apply to elements. You can then use the style to, for example, define TextBlocks to use a font size of 12 and font color of red. If you need to give two or more elements the same property you are better off using a style instead incase you ever need to change the property.

Within a Style object there is a Setter object. The Setter object is used to associate a property with a value. Suppose you want to create several different styles for Border objects. You might have one standard set of properties you would like to set for most Border object, but you also have a need for a second set of properties. With the Style object you can create as many sets of styles as you need. The sample below shows how to define two styles, in this case "StandardBorderStyle" and "LargeBorderStyle", then apply them to Border objects.

<Page xmlns='http://schemas.microsoft.com/winfx/2006/xaml/presentation' xmlns:x='http://schemas.microsoft.com/winfx/2006/xaml' > <Page.Resources> <LinearGradientBrush x:Key="FolderBrush" StartPoint="0, 0" EndPoint="1,0"> <GradientStop Color="#d6e8ff" Offset="0"/> <GradientStop Color="#e3efff" Offset="0.5"/> <GradientStop Color="#d6e8ff" Offset="1"/> </LinearGradientBrush> <Style x:Key="StandardBorderStyle"> <Setter Property="Border.Background" Value="{StaticResource FolderBrush}"/> <Setter Property="Border.Padding" Value='5, 3, 6, 3'/> <Setter Property="Border.BorderBrush" Value='White'/> <Setter Property="Border.BorderThickness" Value='1, 1, 0, 0'/> </Style> <Style x:Key="LargeBorderStyle"> <Setter Property="Border.Background" Value="{StaticResource FolderBrush}"/> <Setter Property="Border.Padding" Value='15, 13, 16, 13'/> <Setter Property="Border.BorderBrush" Value='Black'/> <Setter Property="Border.BorderThickness" Value='5, 5, 5, 5'/> </Style> </Page.Resources> <StackPanel> <Border Style="{StaticResource StandardBorderStyle}"> <TextBlock FontWeight='Bold' Foreground='#15428b'> Standard Border</TextBlock> </Border> <Border Style="{StaticResource LargeBorderStyle}"> <TextBlock FontWeight='Bold' Foreground='#15428b'> Large Border</TextBlock> </Border> </StackPanel> </Page>

As seen in the Resources section, Styles can be applied to all objects of a specific type with no addition codeing. Below is a modified version of the code seen above, only this time the first Border object will have it's style automatically set. Notice the inclusion of the markup extension x:Type, which specifies the object that the style should apply to, and the TargetType property. If you set the TargetType, then the x:Key attribute is not needed and the style will be applied to all objects of the specified TargetType. You must use x:Key if you do not want the style applied to all objects. Note that you do not need to fully qualify names when using TargetType.

Also used is the BasedOn property is used to define a new stle that is based of of an existing style. In this case "TallBorderStyle" is based off of "LargeBorderStyle" so it keeps all of "LargeBorderStyle" styles and sets a new one as well.

Keep in mind that property inheritance does apply and you might need to specifically set some properties in the style.

<Page xmlns='http://schemas.microsoft.com/winfx/2006/xaml/presentation' xmlns:x='http://schemas.microsoft.com/winfx/2006/xaml' > <Page.Resources> <LinearGradientBrush x:Key="FolderBrush" StartPoint="0, 0" EndPoint="1,0"> <GradientStop Color="#d6e8ff" Offset="0"/> <GradientStop Color="#e3efff" Offset="0.5"/> <GradientStop Color="#d6e8ff" Offset="1"/> </LinearGradientBrush> <Style TargetType="Border"> <Setter Property="Background" Value="{StaticResource FolderBrush}"/> <Setter Property="Padding" Value='5, 3, 6, 3'/> <Setter Property="BorderBrush" Value='White'/> <Setter Property="BorderThickness" Value='1, 1, 0, 0'/> </Style> <Style x:Key="LargeBorderStyle"> <Setter Property="Border.Background" Value="{StaticResource FolderBrush}"/> <Setter Property="Border.Padding" Value='15, 13, 16, 13'/> <Setter Property="Border.BorderBrush" Value='Black'/> <Setter Property="Border.BorderThickness" Value='5, 5, 5, 5'/> </Style> <Style x:Key="TallBorderStyle" BasedOn="{StaticResource LargeBorderStyle}"> <Setter Property="Border.Height" Value='200'/> </Style> </Page.Resources> <StackPanel> <Border> <TextBlock FontWeight='Bold' Foreground='#15428b'> Standard Border</TextBlock> </Border> <Border Style="{StaticResource LargeBorderStyle}"> <TextBlock FontWeight='Bold' Foreground='#15428b'> Large Border</TextBlock> </Border> <Border Style="{StaticResource TallBorderStyle}"> <TextBlock FontWeight='Bold' Foreground='#15428b'> Tall Border</TextBlock> </Border> </StackPanel> </Page>


Codejock XAML Markup Guide - XAML Triggers

Information
Basic Markup
Markup Panels
Extended Markup

XAML Triggers:

A trigger is a property of the Style object and it too sets properties. Both triggers and Setters are used to set properties of elements. This difference is that Setters are used to set the element properties when the element is first created, where Triggers are meant to set element properties when something "triggers" the element's property to change. The effects of a trigger will return to the objects original state with the trigger condition becomes false.

Triggers can be used to respond to actions such as mouse movement and mouse clicks. For example, IsMouseOver can be used as a trigger for when the mouse cursor is placed over a control. Triggers simply "trigger" when a property of a control is a specific value. In the example below the IsPressed property of a Button control is used to change the background color of the button while the button is pressed. This works because the IsPressed property of the button is True and that "triggers" the Setter for that trigger. The Button will change back to normal when the mouse is lifted and the Trigger condition is no longer true.

<Page xmlns='http://schemas.microsoft.com/winfx/2006/xaml/presentation' xmlns:x='http://schemas.microsoft.com/winfx/2006/xaml' > <Page.Resources> <LinearGradientBrush x:Key="BackgroundBrush" StartPoint="0, 0" EndPoint="1,0"> <GradientStop Color="#d6e8ff" Offset="0"/> <GradientStop Color="#e3efff" Offset="0.5"/> <GradientStop Color="#d6e8ff" Offset="1"/> </LinearGradientBrush> <Style x:Key="{x:Type Button}" TargetType="Button"> <Style.Triggers> <Trigger Property="IsPressed" Value="True"> <Trigger.Setters> <Setter Property="Background" Value="{StaticResource BackgroundBrush}"/> </Trigger.Setters> </Trigger> </Style.Triggers> </Style> </Page.Resources> <StackPanel> <Button> <TextBlock FontWeight='Bold' Foreground='#15428b'> Change Background</TextBlock> </Button> </StackPanel> </Page>

Triggers can also be used to set a property based on when the value of another property is set to a specific value. For example, a trigger can occuer when the "Stroke" property of a Rectangle is set to Red. The trigger can then set some properties based on the Stroke now being Red. In the sample below, a trigger is set to "trigger" when the background of the button changes to "BackgroundBrush". When True, the Height of the button is changed to 100.

<Page xmlns='http://schemas.microsoft.com/winfx/2006/xaml/presentation' xmlns:x='http://schemas.microsoft.com/winfx/2006/xaml' > <Page.Resources> <LinearGradientBrush x:Key="BackgroundBrush" StartPoint="0, 0" EndPoint="1,0"> <GradientStop Color="#d6e8ff" Offset="0"/> <GradientStop Color="#e3efff" Offset="0.5"/> <GradientStop Color="#d6e8ff" Offset="1"/> </LinearGradientBrush> <Style x:Key="{x:Type Button}" TargetType="Button"> <Style.Triggers> <Trigger Property="Background" Value="{StaticResource BackgroundBrush}"> <Trigger.Setters> <Setter Property="Height" Value="100"/> </Trigger.Setters> </Trigger> <Trigger Property="IsPressed" Value="True"> <Trigger.Setters> <Setter Property="Background" Value="{StaticResource BackgroundBrush}"/> </Trigger.Setters> </Trigger> </Style.Triggers> </Style> </Page.Resources> <StackPanel> <Button> <TextBlock FontWeight='Bold' Foreground='#15428b'> Change Background</TextBlock> </Button> </StackPanel> </Page>


Codejock XAML Markup Guide - Defining Attributes for Child Elements

Information
Basic Markup
Markup Panels
Extended Markup

Defining Attributes for Child Elements:

There are many ways to define attributes for child elements. The following techniques apply only if all the elements, of course you could use Resources as discussed earlier or you could define attributes locally. A couple of approaches will be reviewed, however this is nothing new to those familiar with XAML. You might choose to use a combination of these techniques as all might be required to accomplish your required effects.

The first apporach is to define the attribute of child elements when the parent element is created (set the properties directly on the element). The following example defines the FontSize, Background and FontQuality attributes for all TextBlock elements within the ScrollViewer. Note that these attributes can be overridden when the TextBlock control is created in the case the one of them needs a different text size. Additional attributes can also be set at the time of the TextBlock creation:

<ScrollViewer TextBlock.FontSize="12" TextBlock.FontQuality="ClearType"
              TextBlock.Background="#ffffff">
          <Border Margin="18" BorderBrush="#999999" BorderThickness="1"
                MaxWidth="680" VerticalAlignment="Top">
    <StackPanel Margin="1">
        <Border Background="#24849c" Padding="4">
            <TextBlock HorizontalAlignment="Right" Foreground="White"
                       FontSize="10">
            <Hyperlink Foreground="White">Windows Home</Hyperlink> |
            <Hyperlink Foreground="White">Secutity</Hyperlink> |
            <Hyperlink Foreground="White">Support</Hyperlink> |
            <Hyperlink Foreground="White">Unsubscribe</Hyperlink>
            </TextBlock>
        </Border>
    </StackPanel>
</Border>
</ScrollViewer>

The second apporach is similar to the first, but image you would now like a gradient background for the TextBlock elements. Without using Resources this would not be possible with the first technique. The sample below shows how to set a gradient as the background for all child TextBloack elements in the ScrollViewer:

<ScrollViewer TextBlock.FontSize="12" TextBlock.FontQuality="ClearType">
<TextBlock.Background>
    <LinearGradientBrush StartPoint="0, 0" EndPoint="0,1">
        <GradientStop Color="#ffffff" Offset="0"/>
        <GradientStop Color="#c9d9ef" Offset="1"/>
    </LinearGradientBrush>
<TextBlock.Background>

          <Border Margin="18" BorderBrush="#999999" BorderThickness="1"
                MaxWidth="680" VerticalAlignment="Top">
    <StackPanel Margin="1">
        <Border Background="#24849c" Padding="4">
            <TextBlock HorizontalAlignment="Right" Foreground="White"
                       FontSize="10">
            <Hyperlink Foreground="White">Windows Home</Hyperlink> |
            <Hyperlink Foreground="White">Secutity</Hyperlink> |
            <Hyperlink Foreground="White">Support</Hyperlink> |
            <Hyperlink Foreground="White">Unsubscribe</Hyperlink>
            </TextBlock>
        </Border>
    </StackPanel>
</Border>
</ScrollViewer>

Microsoft, Visual Studio, and the Visual Studio logo are trademarks or registered trademarks of Microsoft Corporation in the United States and/or other countries. Other products and/or company names may be trademarks or registered trademarks of their respective owners.


Codejock XAML Markup Guide - Full Page Markups

Information
Basic Markup
Markup Panels
Extended Markup

Full Page Markups:

The Label control is unique in that is can also be used to create full screen XAML applications. It is possible to create elaborate full sized applications using Markup. To do this, the Label control is used. For a full sized application designed with Markup you would add a label control to a form and resize the Label control to the full size of the form. It is recommended to first add a Codejock Resizer control that is the size of the form and then drop the Label control inside the Resizer. Then you would set the Caption property of the Label control to the entire XAML string created using the MarkupPad.

You would then use the MarkupContext property of the Label control to connect events that occur in XAML Markup with Subroutines or Functions in your application.

Below is a picture of a Label resized to the size of a form using nothing but XAML, the MDI Child of this application was created using XAML and the Label control. (The image has been scalled down to fit on this page):