locked
win 7 button look RRS feed

  • Question

  • Hi Everyone,

    Can anyone let me know how to design a button with win 7 look and feel?

    Something like this http://www.silverlighttoys.com/Samples/SL2/CMButton/

    Awaiting your replies..

    Regards,

    Imtiyaz

    Thursday, July 15, 2010 3:43 AM

Answers

All replies

  • Styling the button control is easy but tricky.

    If you need win 7 look alike, Check this

    http://michaelsync.net/2008/11/08/silverlight-glass-button

    This will be even cool

    http://geekswithblogs.net/tkokke/archive/2009/03/17/a-glass-orb-button-in-silverlight.aspx 

    Thursday, July 15, 2010 4:21 AM
  • Thanks Neal,

    I did come across those links earlier, but I gave the link and specified win 7 because I want my application buttons to look and feel that way. For example, when you rollover the buttons in the link I provided the inside radial gradient is following the cursor, just like win 7 taskbar buttons and also the gradient doesn't come with in flash of a sec, it smoothly fades in (on MouseEnter) and fades out (on MouseLeave). I hope I cleared my requirement.

    Regards,

    Imtiyaz

    Thursday, July 15, 2010 4:55 AM
  • Change the VSM accordin to the need. You have full access. Gradient smoothly fades just becase of the time you have give in the VSM, Change it.

     

    Thursday, July 15, 2010 6:27 AM
  • Hi Neal,

    I got the VSM thing, what about the mouse follow?

    Thanks

    Tuesday, May 24, 2011 11:12 AM
  • Mouse flow? can u please elaborate the query?

    Wednesday, May 25, 2011 4:37 AM
  • Mouse follow. Like in this example http://www.silverlighttoys.com/Samples/SL2/CMButton/ If you rollover the buttons there is a radial gradient glow coming and it follows mouse position. An effect similar to the windows 7 task bar buttons.

    Wednesday, May 25, 2011 5:44 AM
  • I will give you the entire contorol style ;;; Smile

    Happy?

    <ContentControl x:Class="SilverlightApplication10.CMButton"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:vsm="clr-namespace:System.Windows;assembly=System.Windows"
       >
        <ContentControl.Template>
            <ControlTemplate>
                <Grid>
                    <vsm:VisualStateManager.VisualStateGroups>
                        <vsm:VisualStateGroup x:Name="CommonStates">
                            <vsm:VisualState x:Name="MouseOver">
                                <Storyboard>
                                    <DoubleAnimationUsingKeyFrames Storyboard.TargetName="ColorGlow" Storyboard.TargetProperty="Opacity">
                                        <SplineDoubleKeyFrame KeyTime="0:0:0.2" Value="1"/>
                                    </DoubleAnimationUsingKeyFrames>
    
                                    <DoubleAnimationUsingKeyFrames Storyboard.TargetName="Highlight" Storyboard.TargetProperty="Opacity">
                                        <SplineDoubleKeyFrame KeyTime="0:0:0.2" Value="1"/>
                                    </DoubleAnimationUsingKeyFrames>
    								
                                </Storyboard>
                            </vsm:VisualState>
                            <vsm:VisualState x:Name="Normal">
                                <Storyboard>
                                    <DoubleAnimationUsingKeyFrames Storyboard.TargetName="ColorGlow" Storyboard.TargetProperty="Opacity">
                                        <SplineDoubleKeyFrame KeyTime="0:0:0.5" Value="0"/>
                                    </DoubleAnimationUsingKeyFrames>
                                    <DoubleAnimationUsingKeyFrames Storyboard.TargetName="Highlight" Storyboard.TargetProperty="Opacity">
                                        <SplineDoubleKeyFrame KeyTime="0:0:0.5" Value=".5"/>
                                    </DoubleAnimationUsingKeyFrames>
                                </Storyboard>
                            </vsm:VisualState>
                            <vsm:VisualState x:Name="Pressed">
                                <Storyboard>
                                    <DoubleAnimationUsingKeyFrames Storyboard.TargetName="Highlight" Storyboard.TargetProperty="Opacity">
                                        <SplineDoubleKeyFrame KeyTime="0:0:0.2" Value=".25"/>
                                    </DoubleAnimationUsingKeyFrames>
                                </Storyboard>
                            </vsm:VisualState>
                        </vsm:VisualStateGroup>
                    </vsm:VisualStateManager.VisualStateGroups>
                    <Grid x:Name="RootElement" MouseMove="GlowMove">
                        <Rectangle   RadiusX="5" RadiusY="5" Margin="0" StrokeThickness=".5">
                            <Rectangle.Stroke>
                                <LinearGradientBrush x:Name="GlowGradient" EndPoint="0.467,0.687" StartPoint="0.339,0.026">
                                    <!-- Change endpoint with mouse x on mouse over (range= 0-1)  Default values are EndPoint="0.467,0.687"  -->
                                    <GradientStop Color="#FFFFFFFF" Offset="0.138"/>
                                    <GradientStop Color="#75FFFFFF" Offset="0.478"/>
                                    <GradientStop Color="#FFA5A5A5" Offset="0.951"/>
                                </LinearGradientBrush>
                            </Rectangle.Stroke>
                            <Rectangle.Fill>
                                <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                                    <GradientStop x:Name="BackgroundStart" Color="#FF1C1C1C" Offset="0.384"/>
                                    <GradientStop x:Name="BackgroundEnd" Color="#FF000000" Offset="1"/>
                                    <!-- Change this with mouse y on mouse over (range= 0 to .6)  -->
                                </LinearGradientBrush>
                            </Rectangle.Fill>
                        </Rectangle>
    
                        <Rectangle x:Name="ColorGlow" RadiusX="5" RadiusY="5" Opacity="0">
                            <Rectangle.Fill>
                                <RadialGradientBrush>
                                    <RadialGradientBrush.RelativeTransform>
                                        <TransformGroup>
                                            <ScaleTransform CenterX="0.5" CenterY="0.5" ScaleX="3" ScaleY="2"/>
    
                                            <TranslateTransform x:Name="StrokeGradient" X="0.0" Y="0.5"/>
                                            <!-- Change this with mouse x on mouse over (range= -.5 to .5)  -->
                                        </TransformGroup>
                                    </RadialGradientBrush.RelativeTransform>
                                    <GradientStop x:Name="GlowStart" Color="#6C0D64FF" Offset="0"/>
                                    <GradientStop x:Name="GlowEnd" Color="#002422EA" Offset="0.6"/>
                                    <GradientStop Color="#13FFFFFF" Offset="1"/>
                                </RadialGradientBrush>
                            </Rectangle.Fill>
                        </Rectangle>
                        <Grid Margin="0" VerticalAlignment="Top"  >
                            <Grid.RowDefinitions>
                                <RowDefinition Height="0.5*"/>
                                <RowDefinition Height="0.5*"/>
                            </Grid.RowDefinitions>
                            <Path x:Name="Highlight" Opacity="0.5" Grid.Row="0" Stretch="Fill" VerticalAlignment="Top" Stroke="{x:Null}" StrokeThickness="1" Data="M29.568031,95.341034 C29.235512,95.042931 29.223934,80.924271 29.481762,76.748161 C29.764137,72.174454 30.841957,70.367218 37.083988,70.551781 C39.757301,70.630821 79.766106,70.543716 84.53524,70.56414 C99.953217,70.630173 119.95674,70.523933 131.4017,70.707321 C131.41687,70.707565 138.43484,70.762383 138.45003,70.762672 C140.66553,70.804741 142.34544,73.946877 142.48964,74.409668 C143.32286,77.083992 142.48961,94.431091 142.48961,94.431091 C142.48961,94.431091 141.70935,92.664558 126.58733,91.237106 C87.716667,87.567894 71.482346,89.095924 53.360565,91.237106 C35.917774,93.298065 29.568031,95.341034 29.568031,95.341034 z">
                                <Path.Fill>
                                    <LinearGradientBrush EndPoint="0.993,0.846" StartPoint="0.007,0.926">
                                        <GradientStop Color="#88FFFFFF" Offset="0.094"/>
                                        <GradientStop Color="#00FFFFFF" Offset="0.634"/>
                                    </LinearGradientBrush>
                                </Path.Fill>
                            </Path>
                        </Grid>
                    </Grid>
                    <ContentPresenter IsHitTestVisible="False" VerticalAlignment="Center" HorizontalAlignment="Center" Content="{TemplateBinding Content}" ContentTemplate="{TemplateBinding ContentTemplate}"/>
                </Grid>
            </ControlTemplate>
        </ContentControl.Template>    
    </ContentControl>
    


     

    Wednesday, May 25, 2011 6:51 AM
  • Hi Neal,

    I'm more happy that you are helping me out with this. Thanks a ton, i'm grateful to you. I used this code and the style is coming but I guess I'm missing the 'MouseMove="GlowMove"' function. Did I miss anything? I'll try to figure it out..

    Thanks a ton.. :)

    Friday, May 27, 2011 3:35 AM