Rants Tagged with “XAML”
1 (Total Pages: 1/Total Results: 7)
Before I left for Europe, I had a chance to sit down with Richard and Carl and espouse my views on views. Specifically we discussed how the separation of UIs (in declarative UI's like XAML and JavaScript templating) may help developers know specifically when they are in or out of the user interface part of their project. Hopefully this will make it easier to keep our code from getting tangled. Watch out for the bad pizza/spagetti code reference...
Mike Swanson has updated his excellent plugin to address some issues with the output to make the XAML smaller as well as fix some issues with the way that PathGeometries are created that makes them more Blend friendly. In case you haven't been watching closely (and I wasn't), the plugin now supports export of Silverlight XAML which means that Expression Design isn't the only way to get Illustrator files to Silverlight XAML!
I've been digging into some of the open source and 3rd party controls that are becoming available for Silverlight 2. While running into some odd issues with some of them it occurred to me that there are some design guidelines that haven't been well communicated. Back in the early days of WPF I learned (though exactly where is unclear) that every control should support an empty constructor and that all properties (e.g. XAML Attributes) should have a default value. I knew this to be true but I couldn't document where it came from.
So as usual when I am stuck, I contacted Chris Sells as he was my mentor in early XAML usage. He was at MSDN at the time gathering content and helped me get the Data Binding articles as well into the Software Design Review for WPF (then Avalon). If anyone could help me figure out where I learned this, he'd know. He reminded me of the language they use internally: "Create-Set-Use". Essentially this means that the design pattern for controls is that they should work without requiring any properties:
<Grid ...>
<Rectangle />
</Grid>
You can see that the Rectangle doesn't require any properties to be valid. Of course this Rectangle has no fill brush and no stroke brush which means it will likely not be visible. But that's OK because it is valid XAML and doesn't break. The XAML for a control doesn't have to read the mind of the user, but should behave (e.g. not throw exceptions). One of the most egregious was a control that threw an exception if I failed to set the Width and Height. Worse yet, when it did throw these exceptions, it didn't tell me what *all* the properties I needed therefore it was painful to use. Width and Height are particularly problematic in this way in that by not defaulting to "Auto", showing the control in a non-Canvas container meant I needed to set "Auto" to the values which is what they should *always* be defaulted to.
Create-Set-Use happens during parsing of the XAML. This comes back to thinking of XAML as a serialization format for in-memory objects. XAML is simply a way to define what the structure of a particular document should be when its de-serialized. If you keep in mind that an Element becomes an object construction and that properties become SetValue calls, it makes it fairly clear what is happening during the parsing of the XAML itself.
As you write your own Silverlight or WPF classes that you expect to be used in XAML (this includes controls but also may be types that can be created as resources), try to keep these design ideas in mind. It will make life easier for your users.
I use ListBox's and DataTemplates a lot to show data in different ways in WPF. One of the problems I've faced is how to change the look of the "Selected" element. All the examples I could find assumed you were not using a DataTemplate. Luckily Chris Sells came to my rescue and pointed me at the ItemContainerStyle. Using a Template for the ListBoxItem in the ItemContainerStyle let me control the look and feel of the Selected element (or disabled items) easily.
What I wanted was a nice glow effect instead of the default blue background:
This worked fine, but I was still getting the default behavor (of coloring the background blue) when I selected an item. To fix it, I added a Style that overrode the ListItemBox's template and replaced it with a simple border. I added a Trigger to this template on the IsSelected to add a nice bitmap affect of a red glow. Here's the entire XAML example:
<Grid xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Grid.Resources>
<!-- The Data Source -->
<XmlDataProvider x:Key="FolderListData">
<x:XData>
<People xmlns="">
<Person Name="Chris"
Picture="http://www.sellsbrothers.com/services/me.jpg" />
<Person Name="Shawn"
Picture="http://wildermuth.com/images/headshot.jpg" />
<Person Name="Ian"
Picture="http://tinyurl.com/2szrbm" />
</People >
</x:XData>
</XmlDataProvider>
<!-- ItemContainerStyle with the Trigger for Selected -->
<Style x:Key="RedGlowItemContainer" TargetType="{x:Type ListBoxItem}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ListBoxItem}">
<Border Background="LightGray"
CornerRadius="8"
BorderThickness="3"
x:Name="IconBorder"
Margin="8,4,8,4" >
<ContentPresenter />
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsSelected" Value="true">
<Setter TargetName="IconBorder" Property="BitmapEffect">
<Setter.Value>
<OuterGlowBitmapEffect GlowColor="Red" GlowSize="5" />
</Setter.Value>
</Setter>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Grid.Resources>
<ListBox ItemsSource="{Binding Source={StaticResource FolderListData}, XPath=//Person}"
HorizontalAlignment="Center"
ItemContainerStyle="{StaticResource RedGlowItemContainer}">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Margin="10,10,10,10"
HorizontalAlignment="Center"
VerticalAlignment="Center" >
<Image Width="90"
Source="{Binding XPath=@Picture}" />
<TextBlock HorizontalAlignment="Center"
VerticalAlignment="Center"
Height="20"
Text="{Binding XPath=@Name}"/>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</Grid>
Let me know what you think...
If you want to know more about Silverlight now, you can pick up Chris Sells and Ian Griffith's book, "Programming WPF: Second Edition". The rough cut edition is available now from O'Reilly with the final print edition coming soon. I wrote the Silverlight Appendix for that book. The Rough Cut includes the Appendix (as well as a great WPF) with its old WPF/E moniker, but the release will include the fully silver-lit version.
In addition, i'll have a "Silverlight Short Cut" available soon from O'Reilly in time for MIX (By end of April). I'll let you know in this space when that is available for download! If you're unfamilliar with Short Cuts, here's O'Reilly description from their website:
Short Cuts are PDF documents that spotlight one specific topic, usually in fewer than 100 pages. Whether it's a first look at a brand new technology, a quick reference, or a thorough explanation of a narrow but crucial subject, Short Cuts bring you focused information in an easy-to-use, portable package.
I've been digging a bit into how themes work for a new article. In doing that I wanted to see how WPF used their theme files. Their theme files are stored as BAML in the PresentationUI assembly. As usual reflector came to the rescue with a BamlViewer plugin (available as part of the ReflectorAddIn's CodePlex Project).
I downloaded it and started to look at the generic.xaml file that WPF uses. Unfortunately the XAML window in the add-in was hard to navigate and didn't support searching. What I really wanted was a way to support select/copy in the XAML viewer and a way to actually save the XAML files so I could do more in depth investigating. Since the add-in didn't support, I volunteered to add it:
I am not sure if the latest version that I have linked to above includes my changes yet or not. If it doesn't, you can download the sources and they definitely have my changes.
Now...back to that generic.xaml file...interesting...but you'll have to read my upcoming article to see what I found!
Here is a nice
"WPF/E" Egg Timer Sample that was mentioned on
Mike Harsh's blog. Its a great first example by
Simon Allerdice.
