Andy asked me how he could take a button we built and reuse it in other forms or even other apps.

<Window

       xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

       xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

       xml:lang="en-US"

       x:Class="Window1"   

       x:Name="Window"

       Title="Window1"

       Width="640" Height="480" Background="#FF000000">

<!--This can be Grid.Resources or Application.Resources or anything, depending on what

object’s ResourceDictionary you want this to be stored -->

       <Window.Resources>

<!-- This first resource is the brush that was created -->

              <LinearGradientBrush x:Key="AndysRedBrush" EndPoint="0.512,1.023" StartPoint="0.512,0.205">

                     <GradientStop Color="#A0923030" Offset="0"/>

                     <GradientStop Color="#00FFFFFF" Offset="0.438"/>

                     <GradientStop Color="#33861A1A" Offset="0.433"/>

              </LinearGradientBrush>

<!-- This second resource is the Style generated for the glass button -->

              <Style BasedOn="{x:Null}" TargetType="{x:Type Button}">

                     <Setter Property="Template">

<!-- The template property has the physical design of the control -->

                           <Setter.Value>

                                  <ControlTemplate TargetType="{x:Type Button}">

                                         <Grid>

                                                <Rectangle RadiusX="8.5" RadiusY="8.5" x:Name="rectangle">

                                                       <Rectangle.Fill>

                                                              <LinearGradientBrush EndPoint="0.512,1.023" StartPoint="0.512,0.205">

                                                                     <GradientStop Color="#A0FFFFFF" Offset="0"/>

                                                                     <GradientStop Color="#00FFFFFF" Offset="0.438"/>

                                                                     <GradientStop Color="#33FEFEFE" Offset="0.433"/>

                                                              </LinearGradientBrush>

                                                       </Rectangle.Fill>

                                                       <Rectangle.Stroke>

                                                              <LinearGradientBrush EndPoint="0.464,0.98" StartPoint="0.464,0.065">

                                                                     <GradientStop Color="#CCFFFFFF" Offset="0"/>

                                                                     <GradientStop Color="#CCFFFFFF" Offset="1"/>

                                                                     <GradientStop Color="#77FFFFFF" Offset="0.51"/>

                                                              </LinearGradientBrush>

                                                       </Rectangle.Stroke>

                                                </Rectangle>

                                                <ContentPresenter SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" RecognizesAccessKey="True"/>

                                         </Grid>

<!-- The ControlTemplate.Triggers collection contains the criteria based property triggers that change the visual state of the button -->

                                         <ControlTemplate.Triggers>

                                                <Trigger Property="IsFocused" Value="True">

                                                       <Setter Property="Fill" TargetName="rectangle" Value="{DynamicResource AndysRedBrush}"/>

                                                </Trigger>

                                                <Trigger Property="IsDefaulted" Value="True">

                                                       <Setter Property="Fill" TargetName="rectangle" Value="{DynamicResource AndysRedBrush}"/>

                                                </Trigger>

                                                <Trigger Property="IsMouseOver" Value="True">

                                                       <Setter Property="Fill" TargetName="rectangle">

                                                              <Setter.Value>

                                                                     <LinearGradientBrush EndPoint="0.512,1.023" StartPoint="0.512,0.205">

                                                                           <GradientStop Color="#A0FFFFFF" Offset="0"/>

                                                                           <GradientStop Color="#00FFFFFF" Offset="0.438"/>

                                                                           <GradientStop Color="#335835FA" Offset="0.433"/>

                                                                     </LinearGradientBrush>

                                                              </Setter.Value>

                                                       </Setter>

                                                </Trigger>

                                                <Trigger Property="IsPressed" Value="True">

                                                       <Setter Property="Opacity" TargetName="rectangle" Value="0.73"/>

                                                </Trigger>

                                                <Trigger Property="IsEnabled" Value="False"/>

                                         </ControlTemplate.Triggers>

                                  </ControlTemplate>

                           </Setter.Value>

                     </Setter>

              </Style>

<!-- The resources end here -->

       </Window.Resources>

 

       <Grid x:Name="LayoutRoot">

              <Button HorizontalAlignment="Left" Margin="136,109,0,0" VerticalAlignment="Top" Width="124" Height="44" Content="Button" Foreground="#FFFFFFFF"/>

       </Grid>

</Window>

Go to FILE > NEW ITEM and add a new ResourceDictionary. It will look something like this:

<ResourceDictionary

       xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

       xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">

       <!-- Resource dictionary entries should be defined here. -->

</ResourceDictionary>

Now simply take the entire <Style></Style> tag (and accompanying resources like the LinearGradientBrush) and paste them inside the ResourceDictionary tag. This file can now be used inside the same project or added to other projects and the style will be added automatically.

The new ResourceDictionary file should show up in the Resources pane in Blend, and you can drag-drop styles from there.

Episode 2 | 2/9/2007
Control Customization

In this episode, we take a look at how easy it is to customize existing controls by customizing templates and using triggers. All this is done without writing a single line of code.

Running time: 12:46

URL: http://ux.nukeation.com/default.aspx?episode=2

Heh. Okay, so the first show is out and we made a small mistake. The EXE downloadable. My bad. I was half asleep after editing the video. We're changing it to simple WMV (or zipped WMV, at least) immediately.

Thanks to a bit of help from the people in Microsoft, we're now going to have a full featured online WPF/E based player which will stream the shows (aside from the normal download) at unbelievable resolutions.

Now, episode 1 was a simple teaser. An introduction to what we are gonna do, what the show will be like, what... uh, I mean who we are, etc. Episode 2, coming up in a day or so, will dive into some real stuff.

Here is our schedule:

February

1. Let me WOW you with blend
2. Control Customization
3. DataTemplates in Detail (aka, Return of the Flickr App)
4. Useful Animations

March (yes, we become two-times-a-week)

1. Let's take a whack at Codename "WPF/E"
2. The Developer + Designer Integration Story
3. A great resource for Resources (ResourceDictionaries)
4. WPF Applications in the Browser
5. Using Aero Glass
6. VisualBrush - the Yoda of WPF
7. Reconstructing the Office 2007 look
8. Creating a Nuclear Purge Button