Hello. I am Paul Kinlan.

I lead the Chrome and the Open Web Developer Relations team at Google. Exploring the intersection of modern web design and future-facing technologies.

2 min read

Changing Styles with the times (Answers and Thoughts)

I've been discussing how to load styles and new UI designs into an Avalon application, specifically focusing on the challenge of connecting the UI to the code-behind class when loading XAML at runtime. While the XAML loader can parse properties, it doesn't automatically handle event delegate generation and element naming like compiled code/BAML. One idea is to have UI designers create BAML, allowing the app to load new compiled XAML and use the same code-behind class. Another approach involves designing multiple layouts sharing the same code-behind class. I'm also exploring loading a XAML file with resources at runtime and assigning them dynamically. More to come on my findings!

Stay in the loop.

I'm trialing a newsletter. Join for monthly insights into web dev, Chrome, and the open web.

alternate_email

Get in touch

Open to chat about Chrome or Web development.

Book a consultation
1 min read

Looks like you can do it! Yipee!

I found a way to dynamically load resource files for skinning XAML apps! It's surprisingly easy. One method involves simply loading a resource and assigning it to the application. Another example demonstrates loading "Style" resources at runtime, allowing for dynamic visual trees and other customizations. Check out the links for more details and code examples.
3 min read

Changing Styles with the times

I'm exploring ways to dynamically change the layout and styles of my Avalon application at runtime, allowing users to switch between different UI themes. I'm considering several approaches:

  1. Stylesheets: Can styles be stored externally and loaded dynamically? I've looked at DynamicResource but I'm unsure if it supports loading XAML from external files.
  2. Dynamic XAML Loading: Can I reload the XAML used by a window at runtime using LoadComponent? The _contentLoaded flag suggests this might not be possible.
  3. Restart on Style Change: A simpler but less desirable option is to require the application to restart when the user changes the UI style.
  4. Localization Analogy: Could the localization framework be adapted for loading different XAML files? I'm unsure if there's a connection between Resource Files and XAML resources.
2 min read

DoubleAnimation Crashes XAMLPad (MayCTP): Some Answers To Questions

DoubleAnimation crashes in XAMLPad (May CTP) when animating Width or Height without specifying both "From" and "To" values, or when a base value isn't set. This is because the animation infers these values from the base value, which may not be available until layout execution. Setting the Width or Height on the element or in a style usually resolves the issue. However, I encountered a case where animating a MenuItem's width failed even after attempting to set a default width through a style. A suggested solution involved explicitly setting the width on the element, as the animation infers the 'To' value from the base value, which needs to be available for a smooth transition. I then tried setting a default Width on the MenuItem Style and the crash still occurs in XAMLPad. My next step is to test this in a WinFX application.
1 min read

New Start.Com

I just completed all the questions on Start.com, and they gave me a link to their new beta site: http://www.start.com/myw3b/. It's supposed to be an all-in-one platform for RSS, search, info, and more. I'm really excited about this and the new Google services – they're making websites so much more interactive!
1 min read

XAML Menu Throbbing! (Answers to Questions)

I've found answers to my XAML menu throbbing questions! Using RoutedEvents in ControlTemplates (and DataTemplates!) lets me start and stop timelines for animations. I can place these triggers inside styles, and it turns out TargetName isn't always required. A cool discovery: storyboards inside ControlTemplates/DataTemplates can be accessed by any control matching the style's TargetType. My wobbly menu example demonstrates these techniques.
1 min read

DoubleAnimation Crashes XAMLPad (MayCTP)

I've encountered a crash in XAMLPad (May CTP) when animating the width of a MenuItem. Specifically, if I remove the "From" attribute in a DoubleAnimation within a SetterTimeline, XAMLPad crashes. I expected the animation to start from the MenuItem's default width. Is this the correct way to use DoubleAnimation without specifying "From"? The crash occurs in a specific context: the Timeline is defined within a Style applied to a HeaderTemplate's DataTemplate element for a custom-drawn control. See the linked XAML for a complete example.
2 min read

XAML Menu Throbbing!

I had this cool idea to add some throbbing action to my GelButton menu items in XAML. I wanted them to subtly pulse when hovered over. Turns out, it's harder than I thought! I've learned some limitations in XAML (May CTP): you can't start/stop storyboards from triggers, apply a single animation to all controls of a type, and TargetID is deprecated in favor of TargetName. Points 1 & 2 are especially problematic as they blur the lines between UI and application logic. I'm going to look for workarounds and see if others have solutions. Might even post my (probably wrong) ideas on how things should work.
2 min read

XAML Menu Example

I've been experimenting with the Microsoft Avalon CTP (Community Technology Preview) Framework and wanted to share a simple XAML menu example. This example demonstrates how to create a custom style for menu items to make them look like GelButtons. Initially, I tried using a ControlTemplate but later realized a HeaderTemplate within the style was the correct approach. The XAML code provided creates a menu with styled menu items, showcasing how to customize the appearance and behavior of menu items in Avalon.
1 min read

XAML Menu Example: Addendum

A quick follow-up to my last post about the XAML menu example: It no longer uses the Animated Gel Button animation, and the GelButton code modification I mentioned actually came from a different page on the same site I linked previously.