Create a new Windows 10 project to know how to create windows 10 projects refer to my previous article:
Now create one normal button as shown below
create one normal button
XAML Code.
  1. <Button Height="200" Width="200" Content="Tap Here" HorizontalAlignment="Center" Click="Button_Click"/>
Now add the below style in your page resource area. It looks like below:
  1. <Page
  2. x:Class="CustomCircleButton.MainPage"
  3. xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  4. xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  5. xmlns:local="using:CustomCircleButton"
  6. xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
  7. xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
  8. mc:Ignorable="d">
  9. <Page.Resources>
  10. <Style x:Key="CircleButton" TargetType="Button">
  11. <Setter Property="Background">
  12. <Setter.Value>
  13. <LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">
  14. <GradientStop Offset="0" Color="Blue"/>
  15. <GradientStop Offset="1" Color="BlueViolet"/>
  16. </LinearGradientBrush>
  17. </Setter.Value>
  18. </Setter>
  19. <Setter Property="Template">
  20. <Setter.Value>
  21. <ControlTemplate TargetType="Button">
  22. <Grid>
  23. <VisualStateManager.VisualStateGroups>
  24. <VisualStateGroup x:Name="CommonStates">
  25. <VisualState x:Name="Disabled"/>
  26. <VisualState x:Name="Normal"/>
  27. <VisualState x:Name="MouseOver"/>
  28. <VisualState x:Name="Pressed">
  29. <Storyboard>
  30. <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Inner" Storyboard.TargetProperty="(ScaleTransform.ScaleY)">
  31. <DiscreteObjectKeyFrame KeyTime="0:0:0.0" Value="1"/>
  32. </ObjectAnimationUsingKeyFrames>
  33. <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Outer" Storyboard.TargetProperty="(ScaleTransform.ScaleY)">
  34. <DiscreteObjectKeyFrame KeyTime="0:0:0.0" Value="-1"/>
  35. </ObjectAnimationUsingKeyFrames>
  36. </Storyboard>
  37. </VisualState>
  38. </VisualStateGroup>
  39. <VisualStateGroup x:Name="FocusStates">
  40. <VisualState x:Name="Focused"/>
  41. <VisualState x:Name="Unfocused"/>
  42. </VisualStateGroup>
  43. </VisualStateManager.VisualStateGroups>
  44. <Ellipse Margin="4" Fill="{TemplateBinding Background}" RenderTransformOrigin="0.5,0.5">
  45. <Ellipse.RenderTransform>
  46. <ScaleTransform ScaleY="1" x:Name="Outer"/>
  47. </Ellipse.RenderTransform>
  48. </Ellipse>
  49. <Ellipse Margin="20" Fill="{TemplateBinding Background}" RenderTransformOrigin="0.5,0.5">
  50. <Ellipse.RenderTransform>
  51. <ScaleTransform ScaleY="-1" x:Name="Inner"/>
  52. </Ellipse.RenderTransform>
  53. </Ellipse>
  54. <ContentPresenter x:Name="content" HorizontalAlignment="Center" VerticalAlignment="Center"/>
  55. </Grid>
  56. </ControlTemplate>
  57. </Setter.Value>
  58. </Setter>
  59. </Style>
  60. </Page.Resources>
Now add this style to the simple button already we created:
  1. <Button Height="200" Width="200" Content="Tap Here" HorizontalAlignment="Center" Style="{StaticResource CircleButton}" Click="Button_Click"/>
  2. </Grid>
Now your button looks like below screen.
button looks
Now run the app and check how it looks in Windows 10 desktop and simulator
Desktop
Desktop
Simulator
Simulator