« Very cool Speed test for your Internet connection | Main | Microsoft Doesn't need to take a lesson from Apple ... »

WPF Media Center 2005 Fake-Out

Some experimenting this evening with WPF:

Done completely in WPF without any code. It doesn't yet have the cool sliding animation that the Microsoft Media Center uses, but it's nice looking nonetheless! The active option glows much like the Media Center and the edges of the list fade into nothing-ness just like the real thing. I just eye-balled the original so the colors aren't exact matches by any means (I wasn't going for exact match, just the spirit of the MediaCenter).

To do the faded list of buttons, for the purposes of this demo, I used an opacity mask like this:

<ScrollViewer Opacity="1" Margin="165,92,191,104" x:Name="ScrollViewer" VerticalScrollBarVisibility="Hidden">
<ScrollViewer.OpacityMask>
<LinearGradientBrush StartPoint="0,0.5" EndPoint="1,0.5">
<LinearGradientBrush.RelativeTransform>
<TransformGroup>
<TranslateTransform X="-0.5" Y="-0.5"/>
<ScaleTransform ScaleX="1.0141371299213975" ScaleY="1.0141371299213975"/>
<SkewTransform AngleX="0" AngleY="0"/>
<RotateTransform Angle="-89.602136078970744"/>
<TranslateTransform X="0.5" Y="0.5"/>
<TranslateTransform X="-0.010563229438366996" Y="0.0035211220837406574"/>
</TransformGroup>
</LinearGradientBrush.RelativeTransform>
<GradientStop Offset="0.48717948717948717" Color="#FF000000"/>
<GradientStop Offset="1" Color="sc#0, 1, 1, 1"/>
<GradientStop Offset="0" Color="sc#0, 1, 1, 1"/>
<GradientStop Offset="0.85897435897435892" Color="#FF000000"/>
<GradientStop Offset="0.14102564102564102" Color="#FF000000"/>
</LinearGradientBrush>
</ScrollViewer.OpacityMask>
<StackPanel HorizontalAlignment="Stretch" VerticalAlignment="Center" Width="Auto" Height="Auto" x:Name="StackPanel" ClipToBounds="True" CanVerticallyScroll="True" Margin="0,0,0,0">
<Button Height="38.106666666666" x:Name="Button_Copy3" Content="Expression"/>
<Button Height="38.106666666666" x:Name="Button_Copy4" Content="XAML"/>
<Button Height="38.106666666666" x:Name="Button_Copy5" Content="VB.NET"/>
<Button Height="38.106666666666" x:Name="Button_Copy6" Content="Microsoft"/>
<Button Height="38.106666666666" x:Name="Button" Content=".NET" Width="284"/>
<Button Height="38.106666666666" x:Name="Button_Copy" Content="C#"/>
<Button Height="38.106666666666" x:Name="Button_Copy1" Content="Web"/>
<Button Height="38.106666666666" x:Name="Button_Copy2" Content="2D/3D"/>
<Button Height="38.106666666666" x:Name="Button_Copy7" Content="Button"/>
</StackPanel>
</ScrollViewer>

Comments

Very nice!
Ya know what I've always wondered how to do as well is the Rollover gradient effect Media Player 11's top buttons like "Rip" & "Burn" have.

Will you release the source or a binary of this?

Help support my web site by searching and buying through Amazon.com (in assocation with Amazon.com).