Friday, May 17, 2013

How to make Glossy Button usercontrol in WPF?

Searching on internet I found one interesting usercontrol which gives a look and feel like a Vista window button.
However, the user control XAML code is as follows:

<UserControl x:Class="UserControls.ucGlossyButton"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
             mc:Ignorable="d"
             d:DesignHeight="300" d:DesignWidth="300">
  <Grid>
    <!-- Background Layer -->
    <!--<Ellipse Fill="{TemplateBinding Background}"/>-->
    <!-- Refraction Layer -->
   
    <Ellipse x:Name="RefractionLayer">
      <Ellipse.Fill>
        <RadialGradientBrush GradientOrigin="0.496,1.052">
          <RadialGradientBrush.RelativeTransform>
            <TransformGroup>
              <ScaleTransform CenterX="0.5" CenterY="0.5" ScaleX="1.5" ScaleY="1.5"/>
              <TranslateTransform X="0.02" Y="0.3"/>
            </TransformGroup>
          </RadialGradientBrush.RelativeTransform>
          <GradientStop Offset="1" Color="#00000000"/>
          <GradientStop Offset="0.4" Color="#FFFFFFFF"/>
        </RadialGradientBrush>
      </Ellipse.Fill>
    </Ellipse>
    <!-- Reflection Layer -->
    <Path x:Name="ReflectionLayer" VerticalAlignment="Top" Stretch="Fill">
      <Path.RenderTransform>
        <ScaleTransform ScaleY="0.5" />
      </Path.RenderTransform>
      <Path.Data>
        <PathGeometry>
          <PathFigure IsClosed="True" StartPoint="98.999,45.499">
            <BezierSegment Point1="98.999,54.170" Point2="89.046,52.258" Point3="85.502,51.029"/>
            <BezierSegment
                                    IsSmoothJoin="True"
                                    Point1="75.860,47.685"
                                    Point2="69.111,45.196"
                                    Point3="50.167,45.196"/>
            <BezierSegment Point1="30.805,45.196" Point2="20.173,47.741" Point3="10.665,51.363"/>
            <BezierSegment
                                    IsSmoothJoin="True"
                                    Point1="7.469,52.580"
                                    Point2="1.000,53.252"
                                    Point3="1.000,44.999"/>
            <BezierSegment Point1="1.000,39.510" Point2="0.884,39.227" Point3="2.519,34.286"/>
            <BezierSegment
                                    IsSmoothJoin="True"
                                    Point1="9.106,14.370"
                                    Point2="27.875,0"
                                    Point3="50,0"/>
            <BezierSegment Point1="72.198,0" Point2="91.018,14.466" Point3="97.546,34.485"/>
            <BezierSegment
                                    IsSmoothJoin="True"
                                    Point1="99.139,39.369"
                                    Point2="98.999,40.084"
                                    Point3="98.999,45.499"/>
          </PathFigure>
        </PathGeometry>
      </Path.Data>
      <Path.Fill>
        <RadialGradientBrush GradientOrigin="0.498,0.526">
          <RadialGradientBrush.RelativeTransform>
            <TransformGroup>
              <ScaleTransform
                                       CenterX="0.5"
                                       CenterY="0.5"
                                       ScaleX="1"
                                       ScaleY="1.997"/>
              <TranslateTransform X="0" Y="0.5"/>
            </TransformGroup>
          </RadialGradientBrush.RelativeTransform>
          <GradientStop Offset="1" Color="#FFFFFFFF"/>
          <GradientStop Offset="0.85" Color="#92FFFFFF"/>
          <GradientStop Offset="0" Color="#00000000"/>
        </RadialGradientBrush>
      </Path.Fill>
    </Path>
    <!-- ContentPresenter -->
    <ContentPresenter Margin="0,2,0,0" HorizontalAlignment="Center" VerticalAlignment="Center"/>


  </Grid>
</UserControl>



You can uncomment first 3 line of the usercontrol body if you are using ControlTemplate in Resouces.

No comments:

Post a Comment