Tạo button tròn bằng WPF – Create a circle button with WPF C#

image

Trong Windows 7 chúng ta thường thấy các button trông rất bóng loáng và đẹp. Chúng ta cũng có thể tạo được những button kiểu cách như vậy bằng sức mạnh của WPF trong bộ. WPF vốn nổi tiếng với việc thiết kế giao diện trong chương trình. Việc học WPF sẽ nhanh chóng nếu như đã học qua lập trình Windows Form với ngôn ngữ C# hoặc VB. Bài viết này sẽ trình bày chi tiết các tạo một button hình tròn và các đánh bóng button giúp cho chương trinh của bạn thêm bắt mắt hơn.

1.  Tạo project WPF với ngôn ngữ C#

Lưu ý bài viết này trình bày dựa trên việc tạo dựng project trên bộ Visual studio 2010.

–  Click File –> New –> Project… (Ctrl + Shift + N) –> Chọn mục Visual C# –> Windows –> WPF Application rồi đặt tên cho project WPF mới. Sau đó chọn Ok.

–  Một cửa sổ thiết kết sẽ được tạo ra sau các thao tác trên.

–  Click chuột phải vào project trong Solution Explorer –> Add –> New Item

(Hoặc trong menu Project chọn Add new item(Ctrl + Shift + A))

image

–  Cửa sổ hiện ra, chọn mục WPF –> Resource Dictionary(WPF)  rồi đặt tên cho cho nó.

image

– File resource dictionary vừa tạo ra sẽ giống như hình bên dưới:

image

2. Viết code cho Resource Dictionary:

–  Dưới đây là nội dung cần viết trong  file resource dictionary đã được tạo:

<ResourceDictionary
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" >

    <Style x:Key="ButtonStyle" TargetType="{x:Type Button}">
        <Setter Property="SnapsToDevicePixels" Value="True"/>
        <Setter Property="OverridesDefaultStyle" Value="True"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type Button}">
                    <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>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsMouseOver" Value="True">
                         <Setter TargetName="RefractionLayer"
                                 Property="Fill">
                          <Setter.Value>
                           <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.45"
                                                      Color="#FFFFFFFF"/>
                                    </RadialGradientBrush>
                                </Setter.Value>
                         </Setter>
                         <Setter TargetName="ReflectionLayer"
                                    Property="Fill">
                          <Setter.Value>
                           <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="#BBFFFFFF"/>
                                       <GradientStop Offset="0"
                                                     Color="#00000000"/>
                                    </RadialGradientBrush>
                                </Setter.Value>
                            </Setter>
                        </Trigger>
                       <Trigger Property="IsPressed" Value="True">
                        <Setter TargetName="RefractionLayer"
                                    Property="Fill">
                          <Setter.Value>
                           <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.3"
                                                     Color="#FFFFFFFF"/>
                                    </RadialGradientBrush>
                                </Setter.Value>
                        </Setter>
                       <Setter TargetName="ReflectionLayer"
                                 Property="Fill">
                         <Setter.Value>
                           <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="#CCFFFFFF"/>
                                        <GradientStop Offset="0.85"
                                                      Color="#66FFFFFF"/>
                                        <GradientStop Offset="0"
                                                      Color="#00000000"/>
                                    </RadialGradientBrush>
                                </Setter.Value>
                            </Setter>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

</ResourceDictionary>

–  Có thể nói đơn giản ý tưởng của cách tạo button trên là vẽ ra một hình ellipse và sau đó tiến hành tô màu cho nó.

–  Một button được định nghĩa bao gồm 3 lớp(layer) bao gồm: lớp background, lớp refraction, và một ContenPresenter để chứa nội dung của button.

a. Lớp Background:

image

b. Lớp Refraction Chúng ta tạo độ bóng cho button trên lớp này.

image

image

c. ContentPresenter Đoạn code trên add một ô chứa nội dung vào giữa button.

image

–  Ngoài ra đoạn code XAML trên còn thêm một số tương tác cho button như: sự kiện Mouse Hover, Mouse Pressed.

3. Sử dụng Resource Dictionary trong cửa sổ thiết kế chính

–  File resource dictionary vừa tạo bản thân nó không hiển thị được gì. Chúng ta sẽ khai báo nó trong khai báo các button để hiệu ứng có tác dụng.

image

–  Đầu tiên chúng ta khai báo sử dụng file resource đã tạo trong code XAML ở cửa sổ thiết kế như sau: (Với Style for Button.xaml là tên file resource dictionary đã tạo ở trên) code được viết phía trên nhất

   <Window.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary Source="Style for Button.xaml"/>
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
    </Window.Resources>

–  Khai báo sử dụng hiệu ứng trong file resource dictionary.

<Button x:Name="btnTest1" HorizontalAlignment="Stretch"
                VerticalAlignment="Top" Margin="5,11,408,0" Height="34"
                Content="Hello" Style="{StaticResource ButtonStyle}"
                />

Hoặc trong property của button chọn Style đó trong phần Local như hình bên dưới.

image

4. Chương trình DEMO

image

Click vào đây để download chương trình Demo tạo Style cho Button bằng WPF viết trên Visual Studio 2010

(Tham khảo codeproject.com)

Advertisements

About thanhcuong1990

Handsome and talent!! ^^
This entry was posted in WPF. Bookmark the permalink.

2 Responses to Tạo button tròn bằng WPF – Create a circle button with WPF C#

  1. super says:

    Em chào anh ! em đang tìm hiểu về WPF và Window form, em muốn tạo 1 button trong Wpf và chuyển sang winform, em có làm theo hướng dẫn của Microsoft nhưng không thể tạo được, em rát mong anh có thể giúp em, em chân thành cảm ơn.đây là bài em : http://www.mediafire.com/?d1nr38esn5r1luk. Còn đây là video mà em làm theo http://windowsclient.net/learn/video.aspx?v=293703

  2. Tuân says:

    Link die rồi bạn ơi, cho mình xin file Demo đi

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