Using ExtendGlass

16 12 2007

winvista-button_rgb.jpgvs08_v_rgb_web.jpg

Few months back I wrote about my small library which helps to enable Glass effects in your WPF applications. Today lets see how we could really make use of it in order to get displays like – a portion of your window has glass effects and the rest dont. Best example to take is Windows Media Player

wmp-glass.png

You should be aware that the WMP has the glass effects enabled at the bottom as seen in the above screenshot.

So how does our sample application going to look like? Below is the screenshot 🙂

smaple-glass-app.png

Not so bad, but we did achieve to have the upper portion without glass and rest with glass 😉

So, what needs to be done to get something like this? Very simple,

1) Decide the margin M for which you are going to enable glass
2) Clip the part of the window W which you don’t want to enable glass to that margin M
3) Give a good background to that part of the Window W

In my above sample, below is the code where I enable the glass interface,

private void Window_SourceInitialized(object sender,EventArgs e)

{

      Thickness margin = new Thickness();

      margin.Top = 0;

      margin.Left = 20;

      margin.Right = 20;

      margin.Bottom = StackPanelTop.Width;

      ExtendGlassFrame extendGlass =

                new ExtendGlassFrame();

      extendGlass.Extend(this, margin);

}

Notice that I have set my bottom margin to my StackPanel’s width property. Its just some funky logic placed there 😉

And the XAML looks like,

<StackPanel Name="StackPanelTop" Margin="20,0,20,50" Grid.Row="0"
        Background="Lavender" Height="100" Orientation="Horizontal" >
        <Button  Content="No Glass" Background="AliceBlue" Width="80" Height="25"
                HorizontalAlignment="Center"  Margin="9,0,0,0"/>
        <Button  Content="No Glass" Background="AliceBlue" Width="80" Height="25"
                HorizontalAlignment="Center" Margin="10,0,0,0"  />
</StackPanel>
 <StackPanel Grid.Row="1" Orientation="Horizontal" HorizontalAlignment="Center">
       <Button  Content="Transparent!" Background="Transparent"
               Width="80" Height="25"/>
       <Button  Content="Transparent!" Background="Transparent"
               Width="80" Height="25"   Margin="10,0,0,0"/>
</StackPanel>

So, its some funky logic used here, but I wanted to show that having some logic for your User Interface, you could easily create wonders 😉

Advertisements

Actions

Information

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s




%d bloggers like this: