Color Palettes using Color Resources in Silverlight

I’ve been asked by a client if it was possible to make color versions of¬†a design. I told him that that was actually very easy. And it is. It is just that you have to treat your colors a little different: you’ll have to create color palettes using Color Resources. Because that worked a little different in Silverlight 2 Beta 1 than in WPF I was on the wrong foot for a long time. Finally I worked it out and here it is:

There’s only one way to specify a Color in Silverlight:

<Color x:Key="colAccent">#FF800000</Color>

and this gets underlined in Visual Studio indicating that Color cannot have direct content (meaning the color code between the <Color> and </Color> tags). You’ll have to ignore that ūüôā

All other ways to specify color won’t work in Silverlight:

  <!-- Colors in Silverlight 2 beta 2:-->
        <!-- all these don't work -->
        <!--<Color x:Key="colBrightAccent" A="FF" R="00" G="00" B="00" />-->
        <!--<Color x:Key="colBrightAccent" A="#FF" R="#00" G="#00" B="#00" />-->
        <!-- <Color x:Key="colBrightAccent" A="255" R="255" G="0" B="0" />-->
        <!--<Color x:Key="colBrightAccent" scA="1" scR="0" scG="0" scB="0" />-->

Note that at least the second and the fourth are valid in WPF. The third seems to go well in Blend, but gives an error in the browser and won’t show anything: the screen remains white.

Still, this allows you to create palettes of color. Here’s one with two colors:

<Color x:Key="colAccent">#FF800000</Color>
<Color x:Key="colBrightAccent">#FFFF0000</Color>

  

You can use these in SolidColorBrushes and LinearGradienBrushes like these:

        <!-- Brushes that can apply those colors using color resources -->
        <SolidColorBrush x:Key="brAccent" Color="{StaticResource colAccent}" />
        <SolidColorBrush x:Key="brBrightAccent" Color="{StaticResource colBrightAccent}" />

        <!--Gradient Brushes can use those colors too! -->
        <LinearGradientBrush x:Key="lgbrAccent" StartPoint="0.5,0" EndPoint="0.5,1">
            <GradientStop Color="{StaticResource colBrightAccent}" Offset="0" />
            <GradientStop Color="{StaticResource colAccent}" Offset="1" />
        </LinearGradientBrush>

Place all this in app.xaml between de <Application.Resources> tags and you’ll be ready to apply them in some normal XAML:

 <Grid x:Name="LayoutRoot" Width="200" Height="150">
  <Grid.RowDefinitions>
   <RowDefinition /><RowDefinition /><RowDefinition />
  </Grid.RowDefinitions>
  <Rectangle Grid.Row="0" Fill="{StaticResource brAccent}" Stroke="{StaticResource brBrightAccent}" RadiusY="25" RadiusX="25" StrokeThickness="5"/>
  <Rectangle Grid.Row="1" Fill="{StaticResource brBrightAccent}" Stroke="{StaticResource brAccent}" RadiusY="25" RadiusX="25" StrokeThickness="5"/>
  <Rectangle Grid.Row="2" Fill="{StaticResource lgbrAccent}" Stroke="{StaticResource brAccent}" RadiusX="25" RadiusY="25" StrokeThickness="5" /> 
 </Grid>

What makes it easy to make color versions of a design is the fact that you can easily replace the two color codes in the Palette to change the look of the entire application! This would do the trick:

  <Color x:Key="colAccent">#FF008000</Color>
  <Color x:Key="colBrightAccent">#FF00FF00</Color>

Be aware of the use of a Color Resource (colBright) in a LinearGradientBrush, but a Brush Resource (brBright) when you use it for a Fill or a Stroke.

So with about 10 colors as resource in app.xaml, you can actually create a basis for skinning your application. It’s just that now I still have to replace all the separated colors in my project with StaticResources and that will take some time… So now it is easy, but it will take a while ūüôā If you remember to work like this from scratch, you’ll be fine when a¬†client ask you if color versions are possible…

Njoy!

Using the Blend Visual State Manager (VSM) on the MediaPlayer-style VideoButton

¬†Last weekend I played around with the new version of Blend 2.5 to see how the Visual State Manager (VSM) was working. I was pleasantly surprised by the simplicity of it all. Actually it works just like an animation. You just don’t need a timeline for states. So if you know how to animate in Blend, it is fairly easy to add states to buttons. To show you, I’ve adde states to the MediaPlayer-style videobutton I made in the previous post.

First doubleclick the button in the Objects and Timeline category in the Interaction Panel. A yellow line indicates it is selected. Then from the Button in the breadcrumbsbar below the titel of the document, click the little arrow and select Edit ControlParts (Template) and Edit Template. Since we’re using a button with a self-made template we already have a template. If you start with a new button, you’ll have to create a template using the menu first.

In the button Template, the States Category in the Interaction Panel will show several default states for the button. Below,¬†¬†I’ve selected the pressed state. The “State Recording is on” message appears in red and just like in animating, you can now change Opacity, Color for that state. You can even use transformation, as you may notice that the glow and the TextBlock are moved down a few pixels.

The Name of the elements of the button in the Templates are preceded by a red circle with a white arrow to indicate it is particitpating in the current state. I have not discovered how to delete this using the UI, but you can easily find it in the XAML is you have to.

You can add transitions for the several states of this button using the + icons and Рicons on the State bars. Change the transistion time with the (as buttons disguised) TextBoxes. You can drag to change the value like in other TextBoxes in Blend.

These are the states I created: a lighter yellow for the MouseOver, a darker yellow and transitions on the glow and text for the Pressed and a colorless version for the Disabled state. Note the the Focus state kicks in when the button is Pressen and remains Focused when released…

 

 

 

 

 

 

 

 

 

 

 

 

The XAML that the VSM generates is rather¬†lengthy. Just as an example here’s the state which has least code (except for the Normal state that has an empty Storyboard)…


       <vsm:VisualStateManager.VisualStateGroups>
        <vsm:VisualStateGroup x:Name="CommonStates">
         <vsm:VisualStateGroup.Transitions>
          <vsm:VisualTransition Duration="0:0:0.2" To="MouseOver"/>
          <vsm:VisualTransition Duration="0:0:0.1" To="Pressed"/>
         </vsm:VisualStateGroup.Transitions>

         <vsm:VisualState x:Name="Normal">
          <Storyboard/>
         </vsm:VisualState>

         <vsm:VisualState x:Name="MouseOver">
          <Storyboard>
           <ColorAnimationUsingKeyFrames Duration="0" Storyboard.TargetName="BackgroundGradient" Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)&#91;2&#93;.(GradientStop.Color)">
            <SplineColorKeyFrame KeyTime="0" Value="#FFFFFB93"/>
           </ColorAnimationUsingKeyFrames>
           <ColorAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="BackgroundGradient" Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)&#91;0&#93;.(GradientStop.Color)">
            <SplineColorKeyFrame KeyTime="00:00:00" Value="#FFFEFF77"/>
           </ColorAnimationUsingKeyFrames>
           <ColorAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="BackgroundGradient" Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)&#91;1&#93;.(GradientStop.Color)">
            <SplineColorKeyFrame KeyTime="00:00:00" Value="#FFFDB005"/>
           </ColorAnimationUsingKeyFrames>
          </Storyboard>
         </vsm:VisualState>

        </vsm:VisualStateGroup>
       </vsm:VisualStateManager.VisualStateGroups>

Njoy!

Create a MediaPlayer11-style Playbutton with glow

Just to show how easy it is to make a button in MediaPlayer11-style. Here’s a short HowTo on how to do this in Expression Blend:

In Blend, open a New Project…

Select Ellipse in Toolbox

Drag Ellipse 150px, Hold Shift to constrain to circle

 

 

 

Click Stroke, Add 3px brown stroke to the circle

Create RadialGadient Yellow, Dark Yellow, Yellow

Click Brush Transform in Toolbox (G):

 

 

 

 

<Ellipse Stroke="#FF722400" StrokeThickness="3">
	<Ellipse.Fill>
		<RadialGradientBrush GradientOrigin="0.35,0.35">
			<RadialGradientBrush.RelativeTransform>
				<TransformGroup>
					<ScaleTransform CenterX="0.5" CenterY="0.5" ScaleX="1.5" ScaleY="1.5"/>
					<TranslateTransform X="-0.09" Y="-0.12"/>
				</TransformGroup>
			</RadialGradientBrush.RelativeTransform>
			<GradientStop Color="#FFFDFF00" Offset="0"/>
			<GradientStop Color="#FFC48700" Offset="0.75"/>
			<GradientStop Color="#FFFFDE00" Offset="1"/>
		</RadialGradientBrush>
	</Ellipse.Fill>
</Ellipse>

Copy And Paste Ellipse in front of existing Ellipse

Hold ALT and Shift dragging lowerleft handle to the middle of the ellipse.

 

 

 

Fill LinearGradient White on Top, White op bottom, with Alpha set to Zero.
Set Stroke to none

 

 

 

Select Object/Path/Convert to Path

Select Direct Selection Tool in ToolBox (A)

 

 

 

Drag bottom Controlpoint up above the middel of the lower ellipse

 

 

 

 

Finish up with characters from WingDings font and a circle with Black to White diagonal LinearGradient behind the button.

 

 

 

Njoy!


 <Grid x:Name="VideoButton" Width="200" Height="200" Background="Black">
  <Ellipse Stretch="Fill"  Width="175" Height="175">
   <Ellipse.Fill>
    <LinearGradientBrush EndPoint="1,1" StartPoint="0,0">
     <GradientStop Color="#FFFFFFFF" Offset="1"/>
     <GradientStop Color="#FF000000" Offset="0"/>
    </LinearGradientBrush>
   </Ellipse.Fill>
  </Ellipse>
  <Ellipse Stretch="Fill" Stroke="#FF000000"  Width="150" Height="150">
   <Ellipse.Fill>
    <RadialGradientBrush GradientOrigin="0.33,0.33">
     <RadialGradientBrush.RelativeTransform>
      <TransformGroup>
       <ScaleTransform CenterX="0.5" CenterY="0.5" ScaleX="1.3" ScaleY="1.3"/>
       <TranslateTransform X="-0.015" Y="-0.075"/>
      </TransformGroup>
     </RadialGradientBrush.RelativeTransform>
     <GradientStop Color="#FFFDFF00" Offset="0"/>
     <GradientStop Color="#FFC48700" Offset="0.775"/>
     <GradientStop Color="#FFFFDE00" Offset="1"/>
    </RadialGradientBrush>
   </Ellipse.Fill>
  </Ellipse>
  <TextBlock VerticalAlignment="Center" TextAlignment="Center"><Run FontFamily="Webdings" FontSize="96" Text=":"/></TextBlock>
  <Path Margin="0,-55,0,0" Width="125" Height="75" Stretch="Fill" Data="M181.5,88.5 C181.5,137.10106 139.84441,74.306452 89.862639,74.306452 39.880869,74.306452 0.5,137.10106 0.5,88.5 0.5,39.898942 41.01823,0.5 91,0.5 140.98177,0.5 181.5,39.898942 181.5,88.5 z">
   <Path.Fill>
    <LinearGradientBrush EndPoint="0,1" StartPoint="0,0">
     <GradientStop Color="#FFFFFFFF" Offset="0"/>
     <GradientStop Color="#00FFFFFF" Offset="1"/>
    </LinearGradientBrush>
   </Path.Fill>
  </Path>
 </Grid>