in

ExpressionBlog.com

Microsoft Expression Studio Community

This Blog

Syndication

Mirrored Blogs

Browse by Tags

All Tags » Multi-page (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...
Powered by Community Server (Commercial Edition), by Telligent Systems