in

ExpressionBlog.com

Microsoft Expression Studio Community

This Blog

Syndication

Mirrored Blogs

Browse by Tags

All Tags » Templates (RSS)
  • A third way to handle Templated Buttons & Images

    In yesterday’s blog post I suggested that there were two solutions to crating a templated button that used an image. One was to create a different template for each image (yuck) and the other was to create a custom temlpated button. A third, and excellent alternative was suggested to me by email by Justin Angel, and that is to set the images as Resources in Expression Blend. Then, you can add buttons to your pages, and apply the template (which will control such things as how they behavior in response to a mouse over, and you can apply the Resource as a background. Very nice. Here is how I did it to get the effect I wanted. (NB: this will all be shown in detail in a forthcoming video, and is summarized here very quickly): 1. I copied the source code from the previous project to my new project as a starting point I threw away the button templates I added four stock photos to my project and one by one added them to the design surface, and clicked on them and then selected Tools –> Make Brush Resource –> Make Brush Resource and when presented with the dialog box gave each a name, and made it an application resource… Thus I ended up with four resources, each usable as a background. 4. Next I created a single template for my button, but this time instead of making a template from scratch, a made a copy of the existing template. A little spelunking and I was able to discard the cowl that made the background hard to see, and I changed the mouse-over behavior to bounce like a silly Mac-dock entry and I modified the pressed behavior as well. 1: <vsm:VisualState x:Name= "MouseOver" > 2: <Storyboard AutoReverse= "True" RepeatBehavior= "Forever" > 3: 4: <DoubleAnimationUsingKeyFrames BeginTime= "00:00:00" 5: Storyboard.TargetName= "Background" 6: Storyboard.TargetProperty= "(UIElement.RenderTransform). 7: (TransformGroup.Children)[3].(TranslateTransform.Y)" > 8: <SplineDoubleKeyFrame KeyTime= "00:00:00" Value= "-10" /> 9: <SplineDoubleKeyFrame KeyTime= "00:00:00.3000000" Value= "0" /> 10: </DoubleAnimationUsingKeyFrames> 11: <!-- you get the idea --> 12: <Storyboard.TargetName= "CurvedBevel" 13: <Storyboard.TargetName= "Accent" 14: <Storyboard.TargetName= "contentPresenter" 15: </Storyboard> 16: </vsm:VisualState> Finally, I added a stack panel to hold the buttons and added...
  • Web Cast and Digging Deeper

    Today I had the pleasure of presenting a web cast on building an application with more than one page and passing data among those pages. I have 2 videos on this topic, so if you missed the web cast and are interested, you may find this first video on switching pages of interest, and the second video should be posted soon.   Multi-Page In A Nutshell The premise is that there is a third page that has no content and when it is time to display one of your pages, you make the page you want to display (which is, after all, a UserControl) the content of that third page (I’ve chosen to name the third page PageSwitcher but of course you may call it anything you like. PageSwitcher has a method, Navigate that takes a UserControl and makes whatever you pass in, its content.  The implementation for the button on each page is to make the page you are switching to the new content. Passing Values Because we destroy the current page when we replace it (to conserve on client-side resources) if we wish to pass information (such as the book name, authors, whether the book is published and whether or not it is fiction) the easiest way is to make PageSwitcher the temporary repository; and the most efficient way to do that is to overload the navigate method to take an Object so that you may pass in anything at all, and then fish it out when your new page is loaded (very effective, very efficient and not at all type safe!). To see this at work, assume the user has filled out the fields as shown in Page 1 and clicked switch. The event handler for the button might look a bit like this: void SwitchButton_Click( object sender, RoutedEventArgs e ) { PageSwitcher ps = this .Parent as PageSwitcher; if ( ps != null ) { Book b = new Book(); b.BookName = BookName.Text; b.Authors = Authors.Text; b.isPublished = IsPublished.IsChecked == true ; b.isFiction = Fiction.IsChecked == true ; ps.Navigate( new Page2(),b ); } We know that our “parent” is the PageSwitcher as we are its content, and so the cast is safe (but being good o-o programmers we check (Доверяй, но проверяй) We then spin up a Book instance (defined off camera and fill in the properties from the user-filled in fields and then call the overloaded Navigate method, providing a new instance of Page2 and our newly filled in book. We trust PageSwitcher to (a) abandon Page.xaml and make Page2 its content and to hold onto whatever we’ve passed it until Page2 asks for it (think Secretkeeper in Harry Potter). When Page2 is safely established...
  • In-State Animation In A Nutshell

    I’ll be covering this in videos and tutorials in depth, but I’ve come to realize that in-state animation is so straight forward that it can be explained in a quick blog entry. In fact, the really hard part is explaining what it is viz: the Visual State Manager uses animation (story boards) move from one state (e.g., MouseOver) to another state (e.g., MouseDown). In-state Animation allows you to add animation whilst (I’m going to the UK soon) you are in a state. An example: When teaching templates I show how to have a button “swell” when you mouse over, and then I show how to have that swelling be non-instantaneous (by setting the transition time to non zero). You can see all that in this tutorial or in this video .  If however, you’d like your button not only to swell, but then to pulse gently while you hold the mouse over it, you need a bit of in-state animation. Fortunately, this is incredibly easy to do. Start With The Tutorial Code To keep this as simple as possible, I’m going to start with the code from the tutorial which I’ll open in Blend. There is quite a bit here, but I don’t care about any of it except modifying the template for the Button – specifically the Mouse-Over behavior. Thus I’ll click on the Resources tab, turn the triangle to reveal what is in App.xaml and double-click on RoundButton, putting Blend into Template Editing.  In the Objects and Timeline I can see the contents of the Round Button (the Ellipse and the Text). I’ll click on MouseOver which is the state I want to change and I see that both are already being changed (they swell) and in properties / Transform I can see that the Ellipse and the Text are increased to 1.2 (120%) of their normal size. Great, ready to go. To begin the in-state animation, I click on the Show Timeline button: This immediately causes the timeline to slide out from behind the Objects and Timeline window. There are two ovals at time 0 indicating that what I’m looking at in the properties window is the state of the ButtonEllipse and ButtonText the instant the button is fully in MosueOver state (that is, once the transition completes). I’ll click on 1 second which will light that line yellow and set the properties that I want at 1 second; specifically that the ButtonEllipse and the ButtonText will have shrunk to 0.8.  A connection appears between 0 and 1 second indicating that the time between will be filled for me with the intermediate values, and sure enough if I click on one of the ticks between...
  • Templates and Animation Webcast – Follow up

    I had the pleasure of presenting a Webcast on Templates and Animation today, and as promised, here is the answer to an open question, and the set of links that were mentioned. The videos that may be of help as background information are here Here is the  Tutorial introduction to Styles and Templates. available in HTML or pdf Here is the list of upcoming Webcasts , complete with full descriptions and an opportunity to register. Link to Karen Corby’s excellent 4 part series on the Parts & State Model (great preparation for the August 27 Webcast ) Why couldn’t we animate the Border? You will remember that I was unable to animate the border thickness in my impromptu demonstration of in-state animation. Had I looked at the documentation, I would quickly have found that the border thickness is read-only! Fortunately we were able to animate the opacity which actually gave a more satisfying effect. Source Code The complete source code for today’s web cast is available here.