{"id":238,"date":"2007-03-16T00:00:00","date_gmt":"2007-03-16T00:00:00","guid":{"rendered":"https:\/\/test.simple-talk.com\/uncategorized\/getting-started-with-xaml\/"},"modified":"2021-05-17T18:36:49","modified_gmt":"2021-05-17T18:36:49","slug":"getting-started-with-xaml","status":"publish","type":"post","link":"https:\/\/www.red-gate.com\/simple-talk\/development\/dotnet-development\/getting-started-with-xaml\/","title":{"rendered":"Getting Started with XAML"},"content":{"rendered":"

Creating .NET 3 Applications with XAML<\/h2>\n

Microsoft’s .NET 3 introduces the option of using markup to create Windows applications, much as we’ve used HTML and related markup to create web applications for the past decade. This is a major break-through and a distinct step on the path towards merging the development process of creating web and desktop applications.<\/p>\n

This new markup language is called eXtensible Application Markup Language, or XAML (pronounced \/’z\u00c3\u00a6m\u00c9l\/ to rhyme with camel). Every XAML object represents a CLR object, and every CLR object may be created declaratively in XAML.<\/p>\n

In this article we’ll create a meaningful, working XAML application. We’ll take you through the creation process, with the goal of demonstrating the flexibility of the language and acquainting you with the fundamentals of creating a working Windows application declaratively.<\/p>\n

Getting Started With XAML<\/h3>\n

Every Window is declared as a panel and every property is declared as an element, or an attribute of an element. In its simplest form, this looks very similar to HTML:<\/p>\n

<Button Width=\"20\" Height=\"10\">OK Button<\/Button>\r\n<\/pre>\n
In fact, XAML is an XML-based superset of HTML, combining the power of HTML to define content, with that of CSS to define layout (carefully separating the two, to the relief of experienced CSS programmers).<\/p>\n
\nNote: To follow along with the examples in this article, you will need to install the release version of .NET 3, which will run happily and harmlessly side-by-side with .NET 2 on any computer running Vista, Windows XP (SP2), or Windows Server 2003 SP1. <\/em>\n<\/div>\n
Core XAML Elements<\/h3>\n
While we won’t even try to cover everything in XAML in this article, we will cover some core elements, both to give you a feel for how XAML applications work and to lay the ground work for walking you through a robust sample application.<\/p>\n
A panel element is a container. Panels come in several different shapes and sizes. Depending on their features they are useful for containing other elements.<\/p>\n
Root elements are special derivations of panel elements and serve as the fundamental container for the page. Each page will have exactly one root element.<\/p>\n
Control elements are user-manipulated objects that help with data or user interactions.<\/p>\n
The PelotonShack Project<\/h3>\n
With these elements, we are going to build a data-bound page that will offer a catalog of bicycle parts from the AdventureWorks2000 database. On the left, there will be a scrolling display of images taken from the database. As the user scrolls over each image, it (that is, the image, not the user) will grow slightly and come into focus. If the user clicks on the image, it will be highlighted in the larger area on the right and its details will be displayed in text, as shown in Figure 1.<\/p>\n
\u00a0\"363-Fig1_XAML.gif\"
\nFigure 1: in which the selected image (not the user) is shown in detail in the right hand panel<\/em><\/p>\n
Creating the Web Application<\/h3>\n
To create this application, begin by opening Visual Studio and creating a new Project<\/span>. Choose the Windows Application (WPF) template, set your directory and set the solution name to PelotonShack<\/span>, as shown in Figure 2.<\/p>\n
\"363-Fig2_XAML.gif\"
\nFigure 2: creating the web application<\/em><\/p>\n
Windows will create a development environment and establish your first window, which it will also name for you:<\/p>\n
<Window x:Class=\"PelotonShack.Window1\"\u00a0\u00a0\u00a0 xmlns=\"http:\/\/schemas.microsoft.com\/winfx\/2006\/xaml\/presentation\"\u00a0\u00a0\u00a0 xmlns:x=\"http:\/\/schemas.microsoft.com\/winfx\/2006\/xaml\"\u00a0\u00a0\u00a0 Title=\"PelotonShack\" Height=\"300\" Width=\"300\">\u00a0\u00a0\u00a0 <Grid>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 ...\u00a0\u00a0\u00a0 <\/Grid><\/Window><\/pre>\n
While there will certainly come a time (and soon) when Visual Studio will offer a complete and working toolkit for building WPF applications, for now we’re going to have the most success and least frustration if we write directly in XAML, in the lower markup window.<\/p>\n
Start by setting the height of Window1 to 600 and the width to 900 (you can fine-tune these numbers later).<\/p>\n
Within the Grid<\/span>, we’ll want to add Grid.Resources<\/span> (to manage styles, GradientBrushes<\/span>, etc.) and we’ll want to add column definitions.<\/p>\n
The Header<\/h4>\n
An easy place to start is by adding the header, as shown in Figure 3:<\/p>\n
\"363-Fig3_XAML.gif\"<\/p>\n
Figure 3: adding the header<\/em><\/p>\n
To create this, we’ll use a text block and style it. The text block is pretty straightforward:<\/p>\n
<TextBlock Style=\"{DynamicResource TitleText}\">\u00a0\u00a0 <Span>The Peloton Shack: <\/Span>\u00a0\u00a0 <Span FontStyle=\"Italic\"> keeping you in the pack!<\/Span><\/TextBlock><\/pre>\n
Notice, however, that the TextBlock<\/span> element is marked with a style reference to the DynamicResource<\/span> ‘TitleText<\/span>‘. Resources are separated out in their own section, so the complete XAML at this point looks as shown in example 1:<\/p>\n
                          Example 1<Window x:Class=\"PelotonShack.Window1\"\u00a0\u00a0\u00a0 xmlns=\"http:\/\/schemas.microsoft.com\/winfx\/2006\/xaml\/presentation\"\u00a0\u00a0\u00a0 xmlns:x=\"http:\/\/schemas.microsoft.com\/winfx\/2006\/xaml\"\u00a0\u00a0\u00a0 Title=\"PelotonShack\" Height=\"600\" Width=\"900\">\u00a0\u00a0\u00a0 <Grid>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <Grid.Resources>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <Style x:Key=\"TitleText\" TargetType=\"{x:Type TextBlock}\" >\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <Setter Property=\"FontFamily\" Value=\"Segoe Black\" \/>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <Setter Property=\"FontSize\" Value=\"24px\" \/>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <Setter Property=\"Foreground\" Value=\"MidnightBlue\" \/>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <\/Style>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <\/Grid.Resources>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <TextBlock Style=\"{DynamicResource TitleText}\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <Span>The Peloton Shack: <\/Span>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <Span FontStyle=\"Italic\"> keeping you in the pack!<\/Span>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <\/TextBlock>\u00a0\u00a0\u00a0 <\/Grid><\/Window>\u00a0<\/pre>\n
From such humble beginnings, all the rest will follow in just a few easy steps.<\/p>\n
\u00a0Adding the List Box<\/h4>\n
To add the list box of products, we need to accomplish a few tasks all at the same time.<\/p>\n
1. Add a panel to hold the list box in a specific place in our window.<\/p>\n
2. Add a list box to hold the images.<\/p>\n
3. Include style information to tell the list box how to render the data (as images).<\/p>\n
4. Bind the list box to a query of the images from the database.<\/p>\n
The panel we’ll use to hold the list box will, ultimately, have the list box on the left, the larger image on the right and text below. That is, it needs to have two columns and a row. A stack panel can hold items one above the other or one next to another, but when you need to have both rows and columns, the panel you need is a grid:<\/p>\n
<Grid x:Name=\"MainGrid\" Margin=\"125,99,127,118\" Width=\"Auto\" \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 Height=\"Auto\" RenderTransformOrigin=\"0.5,0.5\">\u00a0\u00a0\u00a0 <Grid.ColumnDefinitions>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <ColumnDefinition Width=\"0.33*\"\/>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <ColumnDefinition Width=\"0.66*\"\/>\u00a0\u00a0\u00a0 <\/Grid.ColumnDefinitions>\u00a0\u00a0\u00a0 <Grid.RowDefinitions>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <RowDefinition\/>\u00a0\u00a0\u00a0 <\/Grid.RowDefinitions>\u00a0\u00a0\u00a0 <ContentControl x:Name=\"MasterPane\" HorizontalAlignment=\"Center\" \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 VerticalAlignment=\"Stretch\" RenderTransformOrigin=\"0.5,0.5\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <ListBox x:Name=\"MasterList\"\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 Width=\"Auto\" Height=\"Auto\" \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 RenderTransformOrigin=\"0.5,0.5\" \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 ItemsSource=\"{Binding Mode=Default}\" \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 ItemTemplate=\"{DynamicResource ProductDataTemplate}\"\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 ItemContainerStyle=\"{DynamicResource ProductTemplateItemStyle}\" \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 HorizontalAlignment=\"Center\" \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 SelectedIndex=\"0\" \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 IsSynchronizedWithCurrentItem=\"True\"\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 ScrollViewer.VerticalScrollBarVisibility=\"Visible\"\u00a0\u00a0\u00a0\u00a0>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <\/ListBox>\u00a0\u00a0\u00a0 <\/ContentControl>\u00a0\u00a0\u00a0 <ContentControl\u00a0 x:Name=\"DetailsPane\" Grid.Column=\"1\" \/>\u00a0<\/Grid><\/pre>\n
The first two lines set up the grid’s attributes (margin, width, etc.). This is followed by the Grid<\/span> column definitions, in which we define two columns: one will occupy 1\/3 of the grid’s width, while the second will occupy the remaining 2\/3 of the grid’s width. One row is defined in the Row<\/span> definitions.<\/p>\n
Following the Row<\/span> and Column<\/span> definitions are two content controls: MasterPane<\/span> and DetailsPane<\/span>. The second content control, DetailsPane<\/span>, is left empty for now. The first content control holds the list box. The key attribute for the list box is that the ItemSource<\/span> is set to bind using the default mode. Since this is placed within a window where the DataContext<\/span> was set to ‘theTable<\/span>‘, the list box will use ‘theTable<\/span>‘ as its binding context. The style for binding is set by the ItemTemplate<\/span>.<\/p>\n
ItemsSource=\"{Binding Mode=Default}\" ItemTemplate=\"{DynamicResource ProductDataTemplate}\"The ProductDataTemplate must be defined up in the Grid.Resources section. <DataTemplate x:Key=\"ProductDataTemplate\">\u00a0\u00a0 <StackPanel HorizontalAlignment=\"Center\" \u00a0\u00a0\u00a0\u00a0\u00a0 Background=\"{DynamicResource ListBoxGradient}\"\u00a0 \u00a0\u00a0\u00a0\u00a0\u00a0 Height=\"Auto\" Width=\"150\">\u00a0\u00a0\u00a0\u00a0\u00a0 <Image Source=\"{Binding Path=ThumbNailPhotoFilePath}\" \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 ContextMenuService.IsEnabled=\"True\" \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 ContextMenuService.ContextMenu=\"{Binding Path=Name}\" \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 HorizontalAlignment=\"Center\" \/>\u00a0\u00a0 <\/StackPanel><\/DataTemplate><\/pre>\n
It consists of a stack panel whose horizontal alignment is set to center the items and whose image will be retrieved from the binding where the path is set to ThumbNailPhotoFilePath . <\/em>This is a column that will be retrieved for every row as a result of the select statement that will generate the DataTable<\/span> we’ll be using as the DataContext<\/span> for this list box.<\/p>\n
All of the work for generating the DataTable<\/span>, and associating it with the context, is accomplished in the code-behind file, the constructor for the Window class:<\/p>\n
public partial class Window1 : System.Windows.Window{\u00a0\u00a0 DataTable theTable = new DataTable();\u00a0\u00a0 public Window1()\u00a0\u00a0 {\u00a0\u00a0\u00a0\u00a0\u00a0 InitializeComponent();\u00a0\u00a0\u00a0\u00a0\u00a0 String connString = @\"Data Source=<Your Server>;Initial \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 Catalog=AdventureWorks2000;Integrated Security=True\";\u00a0\u00a0\u00a0\u00a0\u00a0 String query = @\"SELECT\u00a0 \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 Product.ProductID, \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 Product.Name, \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 Product.ProductNumber, \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 Product.ListPrice, \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 Product.Color, \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 Product.Size, \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 Product.Style, \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 ProductPhoto.ThumbNailPhotoFilePath, \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 ProductPhoto.LargePhotoFilePath\u00a0 \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 FROM\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 Product \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 INNER JOIN\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 ProductPhoto \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 ON \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 Product.ProductPhotoID = ProductPhoto.ProductPhotoID \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 WHERE\u00a0\u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 (Product.ProductPhotoID = ProductPhoto.ProductPhotoID \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 AND Product.ListPrice < 100)\";\u00a0\u00a0\u00a0\u00a0\u00a0 using ( SqlConnection conn = new SqlConnection( connString ) )\u00a0\u00a0\u00a0\u00a0\u00a0 {\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 SqlDataAdapter da = new SqlDataAdapter( query, conn );\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 da.Fill( theTable );\u00a0\u00a0\u00a0\u00a0\u00a0 }\u00a0\u00a0\u00a0\u00a0\u00a0 DataContext = theTable;\u00a0\u00a0 }\u00a0<\/pre>\n
The net result is a scrollable list of images extracted from the database, as demonstrated in Figure 4:<\/p>\n
\"363-Fig4_XAML.gif\"<\/p>\n
Figure 4: a scrollable list of images<\/em><\/p>\n
Adding Events<\/h4>\n
We’d like to be able to mouse over the list and make the image currently highlighted by the mouse stand out more than the others. We’ll do this by reducing the opacity of the images to 60% and then increasing that to 100% when the mouse hovers over the image. To accomplish this effect, we add animation, using a story board.<\/p>\n
We’ll indicate that the starting opacity is .60 (60%); and we’ll designate that over the course of two tenths of a second that opacity should increase to 100% when the event MouseEnter<\/span> is registered. This opacity will also return to 60% when the MouseLeave<\/span> event is raised. We declare these requirements by creating a ProductTemplateItemStyle<\/span> for the ItemContainer<\/span> and then creating that style within the Resources<\/span> section:<\/p>\n
<Style x:Key=\"ProductTemplateItemStyle\" TargetType=\"{x:Type ListBoxItem}\">\u00a0\u00a0 <Setter Property=\"Opacity\" Value=\".60\" \/>\u00a0\u00a0 <Style.Triggers>\u00a0\u00a0\u00a0\u00a0\u00a0 <EventTrigger RoutedEvent=\"Mouse.MouseEnter\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <EventTrigger.Actions>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <BeginStoryboard>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <Storyboard>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <DoubleAnimation \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 Duration=\"0:0:0.2\" \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 Storyboard.TargetProperty=\"Opacity\"\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 To=\"1.0\" \/>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <\/Storyboard>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <\/BeginStoryboard>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <\/EventTrigger.Actions>\u00a0\u00a0\u00a0\u00a0\u00a0 <\/EventTrigger>\u00a0\u00a0\u00a0\u00a0\u00a0 <EventTrigger RoutedEvent=\"Mouse.MouseLeave\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <EventTrigger.Actions>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <BeginStoryboard>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <Storyboard>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <DoubleAnimation \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 Duration=\"0:0:0.2\" \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 Storyboard.TargetProperty=\"Opacity\" \/>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <\/Storyboard>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <\/BeginStoryboard>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <\/EventTrigger.Actions>\u00a0\u00a0\u00a0\u00a0\u00a0 <\/EventTrigger>\u00a0\u00a0 <\/Style.Triggers><\/Style><\/pre>\n
The effect is powerful: As you mouse over each item, it appears to light up.<\/p>\n
Creating the Detail View<\/h3>\n
We can now add the second container control to hold the larger image of the selected item and its description. The most interesting thing we’ll do here is add a ‘reflection’:<\/p>\n
<ContentControl x:Name=\"DetailsPane\" Grid.Column=\"1\" \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 Margin=\"15,0,0,0\" Width=\"Auto\" Height=\"Auto\" \u00a0\u00a0 RenderTransformOrigin=\"0.5,0.5\">\u00a0<Grid x:Name=\"DetailsGrid\" Width=\"Auto\" Height=\"Auto\" \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 RenderTransformOrigin=\"0.5,0.5\">\u00a0\u00a0<Grid.ColumnDefinitions>\u00a0\u00a0\u00a0<ColumnDefinition\/>\u00a0\u00a0<\/Grid.ColumnDefinitions>\u00a0\u00a0<Grid.RowDefinitions>\u00a0\u00a0\u00a0<RowDefinition\/>\u00a0\u00a0<\/Grid.RowDefinitions>\u00a0\u00a0<StackPanel>\u00a0\u00a0\u00a0<Image x:Name=\"ProductImage\" \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 RenderTransformOrigin=\"0.5,0.5\"\u00a0 \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 Width=\"Auto\" Height=\"200\" Source=\"{Binding Path=LargePhotoFilePath}\"\/>\u00a0\u00a0\u00a0<Rectangle\u00a0 Fill=\"{DynamicResource ReflectionBrush}\" \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 Margin=\"0,0,0,0\" Stroke=\"{x:Null}\" \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 Width=\"{Binding Path=ActualWidth, \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 ElementName=ProductImage, Mode=Default}\" \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 Height=\"200\" RenderTransformOrigin=\"0.5,0.5\">\u00a0\u00a0\u00a0\u00a0<Rectangle.LayoutTransform>\u00a0\u00a0\u00a0\u00a0\u00a0<TransformGroup>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<ScaleTransform ScaleX=\"1\" ScaleY=\"-1\"\/>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<SkewTransform AngleX=\"0\" AngleY=\"0\"\/>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<RotateTransform Angle=\"0\"\/>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<TranslateTransform X=\"0\" Y=\"0\"\/>\u00a0\u00a0\u00a0\u00a0\u00a0<\/TransformGroup>\u00a0\u00a0\u00a0\u00a0<\/Rectangle.LayoutTransform>\u00a0\u00a0\u00a0\u00a0<Rectangle.OpacityMask>\u00a0\u00a0\u00a0\u00a0\u00a0<LinearGradientBrush StartPoint=\"0.5,1.5\" \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 EndPoint=\"0.5,-0.5\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<GradientStop Color=\"#7FFFFFFF\" Offset=\"0.21\"\/>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<GradientStop Color=\"#00FFFFFF\" Offset=\"0.392\"\/>\u00a0\u00a0\u00a0\u00a0\u00a0<\/LinearGradientBrush>\u00a0\u00a0\u00a0\u00a0<\/Rectangle.OpacityMask>\u00a0\u00a0\u00a0<\/Rectangle>\u00a0\u00a0<\/StackPanel>\u00a0<TextBlock x:Name=\"Name\" Margin=\"0,0,2,19\" HorizontalAlignment=\"Left\" \u00a0\u00a0\u00a0 VerticalAlignment=\"Bottom\" Width=\"64\" Height=\"26\" \u00a0\u00a0\u00a0\u00a0\u00a0 RenderTransformOrigin=\"0.5,0.5\" TextWrapping=\"Wrap\" \u00a0\u00a0\u00a0\u00a0\u00a0 Text=\"{Binding Path=Name}\" TextAlignment=\"Left\"\/>\u00a0<TextBlock x:Name=\"ProductNumber\" Margin=\"0,0,2,19\" \u00a0\u00a0\u00a0 HorizontalAlignment=\"Center\" VerticalAlignment=\"Bottom\" \u00a0\u00a0\u00a0\u00a0\u00a0 Width=\"64\" Height=\"26\" RenderTransformOrigin=\"0.5,0.5\" \u00a0\u00a0\u00a0\u00a0\u00a0 TextAlignment=\"Center\"\u00a0 Text=\"{Binding Path=ProductNumber}\"\/>\u00a0<TextBlock x:Name=\"ListPrice\" Margin=\"0,0,2,19\" \u00a0\u00a0\u00a0 HorizontalAlignment=\"Right\" VerticalAlignment=\"Bottom\" Width=\"64\" \u00a0\u00a0\u00a0\u00a0\u00a0 Height=\"26\" RenderTransformOrigin=\"0.5,0.5\" \u00a0\u00a0\u00a0\u00a0\u00a0 TextAlignment=\"Right\" Text=\"{Binding Path=ListPrice, \u00a0\u00a0\u00a0\u00a0\u00a0 Converter={StaticResource myNumberFormatter}, \u00a0\u00a0\u00a0\u00a0\u00a0 ConverterParameter='$#,###.00'}\"\/>\u00a0<\/Grid><\/ContentControl><\/pre>\n
Creating the Reflection<\/h3>\n
The reflection is created by adding a grid within the content control. Within that grid we will add a stack panel. The image is stacked on top of a rectangle that uses a LayoutTransform<\/span> to flip the image upside down (ScaleY = -1). The rectangle then uses an OpacityMask<\/span> with a LinearGradientBrush<\/span> that starts out at 0.5,1.5 and ends at 0.5, -0.5; that is, the image appears to fade away quickly:<\/p>\n
<Rectangle.LayoutTransform>\u00a0       <TransformGroup>\u00a0\u00a0              <ScaleTransform ScaleX=\"1\" ScaleY=\"-1\"\/>\u00a0\u00a0              <SkewTransform AngleX=\"0\" AngleY=\"0\"\/>\u00a0\u00a0              <RotateTransform Angle=\"0\"\/>\u00a0\u00a0              <TranslateTransform X=\"0\" Y=\"0\"\/>\u00a0        <\/TransformGroup><\/Rectangle.LayoutTransform><Rectangle.OpacityMask>\u00a0       <LinearGradientBrush StartPoint=\"0.5,1.5\" EndPoint=\"0.5,-0.5\">\u00a0\u00a0            <GradientStop Color=\"#7FFFFFFF\" Offset=\"0.21\"\/>\u00a0\u00a0            <GradientStop Color=\"#00FFFFFF\" Offset=\"0.392\"\/>\u00a0       <\/LinearGradientBrush><\/Rectangle.OpacityMask><\/pre>\n
The effect can be seen in this close-up of the rendered image in Figure 5:<\/p>\n
\"363-Fig5_XAML.gif\"<\/p>\n
Figure 5: reflection<\/em><\/p>\n
To finish up, we’ll add a GridSplitter<\/span>, telling it which column we want to split. This will allow the user to reallocate the relative space between the list box and the details:<\/p>\n
<GridSplitter x:Name=\"GridSplitter1\" \u00a0\u00a0\u00a0\u00a0\u00a0 Grid.Column=\"1\" Margin=\"1.5,1.5,0,3\" \u00a0\u00a0 HorizontalAlignment=\"Left\" Width=\"11.5\" \u00a0\u00a0 Height=\"Auto\" RenderTransformOrigin=\"0.5,0.5\"\/><\/pre>\n
The effect is shown in Figure 6:<\/p>\n
\"363-Fig6_XAML.gif\"<\/p>\n
Figure 6: the gridsplitter<\/em><\/p>\n
Complete Source<\/h3>\n
The complete source can be downloaded\u00a0with this article.<\/p>\n","protected":false},"excerpt":{"rendered":"
See for yourself the flexibility of XAML, as Jesse Liberty and Alex Horovitz show you how to create an interactive Windows application declaratively, in .NET 3.0.…<\/p>\n","protected":false},"author":221820,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[143538],"tags":[4143,4717,4229,4178,4716,4715,4714],"coauthors":[49721],"class_list":["post-238","post","type-post","status-publish","format-standard","hentry","category-dotnet-development","tag-net","tag-net-3","tag-net-framework","tag-bi","tag-reflection","tag-windows-application","tag-xaml"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.red-gate.com\/simple-talk\/wp-json\/wp\/v2\/posts\/238","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.red-gate.com\/simple-talk\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.red-gate.com\/simple-talk\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.red-gate.com\/simple-talk\/wp-json\/wp\/v2\/users\/221820"}],"replies":[{"embeddable":true,"href":"https:\/\/www.red-gate.com\/simple-talk\/wp-json\/wp\/v2\/comments?post=238"}],"version-history":[{"count":3,"href":"https:\/\/www.red-gate.com\/simple-talk\/wp-json\/wp\/v2\/posts\/238\/revisions"}],"predecessor-version":[{"id":75068,"href":"https:\/\/www.red-gate.com\/simple-talk\/wp-json\/wp\/v2\/posts\/238\/revisions\/75068"}],"wp:attachment":[{"href":"https:\/\/www.red-gate.com\/simple-talk\/wp-json\/wp\/v2\/media?parent=238"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.red-gate.com\/simple-talk\/wp-json\/wp\/v2\/categories?post=238"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.red-gate.com\/simple-talk\/wp-json\/wp\/v2\/tags?post=238"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/www.red-gate.com\/simple-talk\/wp-json\/wp\/v2\/coauthors?post=238"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}