in

ExpressionBlog.com

Microsoft Expression Studio Community

This Blog

Syndication

Mirrored Blogs

Browse by Tags

All Tags » Controls and Events (RSS)
  • Popup Control

    Beta 2 includes a wealth of new controls including the Popup (that is new, right? It’s not that I just didn’t notice it before?). I received an email today asking if I’d do a short How Do I video on creating a Popup and I certainly will, but here is a wicked fast tutorial for those of you who can’t wait…. There are three approaches. 1. Create the Popup as Xaml, most easily in Blend 2. Create the Popup dynamically, most easily in Visual Studio 3. Create the Popup as a User Control (the right answer, once you’re comfortable with how Popups are created Creating the Popup in Xaml Here is a picture of what we’re going to build. The basic Silverlight control will have a button and an image….. The button’s event handler makes the Popup visible. If you are old enough to get the reference, from having watched it when it was first on, remind me to buy you a glass of milk the next time we’re at a conference together There are two important things to notice: the Popup covers any elements that are at its location (when you create it you give it a vertical and horizontal offset from the upper left of the control) and the Popup is entirely within the Silverlight control. Method 1 - Xaml Create your basic project with the Click Me button and the Image in Blend. Set their properties as usual. Then select a Popup from the Asset Library and place that inside your Grid as well. Make the Popup the container by double clicking on it, and you are ready to add the border and StackPanel. Double click on the panel to make it the container and add the TextBlock and Button. Set all the properties. Once you have the controls set, it is time to save all the files and edit in Visual Studio. Your Xaml file will look more or less like this: <UserControl xmlns= "http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x= "http://schemas.microsoft.com/winfx/2006/xaml" x:Class= "PopUpControl.Page" xmlns:d= "http://schemas.microsoft.com/expression/blend/2008" xmlns:mc= "http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable= "d" Width= "640" Height= "480" > <Grid x:Name= "LayoutRoot" Background= "White" > <Grid.RowDefinitions> <RowDefinition Height= "0.15*" /> <RowDefinition Height= "0.85*" /> </Grid.RowDefinitions> <Button x:Name= "ShowPopupButton" Height= "40" HorizontalAlignment= "Left"...
  • Beta 2 Event Bubbling

    There are many great changes in Beta 2, and some are designed to make Silverlight more like WPF. One side effect of this is that event bubbling has changed just a bit and that bit breaks some of the examples I love to use. In Beta 1, the distinction was that all the controls handled their own click events but the more primitive events such as many of the mouse events were allowed to bubble. This allowed for interesting if not terribly useful demonstrations in which I placed a check box inside a button and was able to demonstrate that if I were to use the click event on the check box the button would never see the click, but if I used a MouseLeftButtonDown, hey! Presto! the button did see the event. This has now changed in Beta 2 to make Silverlight behave more like WPF. By and large (other than breaking my demo) this is a good thing.  The consistency now is that objects that directly derive from UI element do support event bubbling for the mouse events (that is,  Ellipse, Glyphs, Image, InkPresenter, Line, MediaElement, Path, Polygon, Polyline, Rectangle and TextBlock.)  In addition, the container classes do. Thus, if you set up the following bizarre application in which you have a grid, with a grid in it, that contains a stack panel that in turn contains a rectangle, a TextBlock, a check box, a button and a listbox (the last to show the results)… <UserControl x:Class= "EventBubbling.Page" xmlns= "http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x= "http://schemas.microsoft.com/winfx/2006/xaml" Width= "400" Height= "800" > <Grid x:Name= "LayoutRoot" Background= "White" > <Grid x:Name= "InterimGrid" > <StackPanel x:Name= "myStackPanel" Orientation= "Vertical" > <Rectangle x:Name= "myRect" Width= "30" Height= "30" Fill= "Blue" Stroke= "Red" StrokeThickness= "2" Margin= "0,10,0,10" /> <TextBlock x:Name= "myTextBlock" Text= "Hello" HorizontalAlignment= "Center" FontSize= "14" Margin= "0,10,0,10" /> <CheckBox x:Name= "myCheckBox" Content= "Check Me" Width= "80" Height= "40" Margin= "0,10,0,10" HorizontalAlignment= "Center" /> <Button x:Name= "myButton" Content= "TinyButton" Height= "30"...