Windows

Create Custom Round Button in Windows 10

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
Ebook Download
View all
Learn
View all
Membership not found