Skip to content

Instantly share code, notes, and snippets.

@emoacht

emoacht/MainWindow1.xaml

Created April 29, 2023 21:31
Show Gist options
  • Save emoacht/946c07dd956c8858168b1128db9a14c2 to your computer and use it in GitHub Desktop.
Save emoacht/946c07dd956c8858168b1128db9a14c2 to your computer and use it in GitHub Desktop.
Download ZIP
Sample Styles of Round Button
Raw
MainWindow1.xaml
<Window x:Class="WpfApp.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow"
Width="400" Height="200">
<Window.Resources>
<Style x:Key="RoundStyle" TargetType="{x:Type Button}">
<Setter Property="Width" Value="100"/>
<Setter Property="Height" Value="100"/>
<Setter Property="Foreground">
<Setter.Value>
<LinearGradientBrush EndPoint="0.5,1.5" StartPoint="0.5,0">
<GradientStop Color="#FFC850C8"/>
<GradientStop Color="#FF8C50FF" Offset="1"/>
</LinearGradientBrush>
</Setter.Value>
</Setter>
<Setter Property="Background">
<Setter.Value>
<DrawingBrush>
<DrawingBrush.Drawing>
<GeometryDrawing>
<GeometryDrawing.Brush>
<SolidColorBrush Color="#FFA2A2A2"/>
</GeometryDrawing.Brush>
<GeometryDrawing.Geometry>
<EllipseGeometry Center="50,50" RadiusX="45" RadiusY="20"/>
</GeometryDrawing.Geometry>
<GeometryDrawing.Pen>
<Pen>
<Pen.Brush>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FF8C50F0"/>
<GradientStop Color="#FFC850C8" Offset="1"/>
</LinearGradientBrush>
</Pen.Brush>
</Pen>
</GeometryDrawing.Pen>
</GeometryDrawing>
</DrawingBrush.Drawing>
</DrawingBrush>
</Setter.Value>
</Setter>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Grid Background="{TemplateBinding Background}">
<ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
Margin="{TemplateBinding Padding}"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Trigger.EnterActions>
<BeginStoryboard>
<Storyboard >
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Button.Background).(DrawingBrush.Drawing).(GeometryDrawing.Brush).(SolidColorBrush.Color)">
<EasingColorKeyFrame KeyTime="0:0:0.1" Value="#LightGray"/>
</ColorAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</Trigger.EnterActions>
<Trigger.ExitActions>
<BeginStoryboard>
<Storyboard >
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Button.Background).(DrawingBrush.Drawing).(GeometryDrawing.Brush).(SolidColorBrush.Color)">
<EasingColorKeyFrame KeyTime="0:0:0.1" Value="#FFA2A2A2"/>
</ColorAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</Trigger.ExitActions>
</Trigger>
</Style.Triggers>
</Style>
</Window.Resources>
<Grid>
<Button Style="{StaticResource RoundStyle}"
Padding="0,10,0,0"
FontSize="72" FontFamily="Bahnschrift SemiBold"
Content="0"/>
</Grid>
</Window>
Raw
MainWindow2.xaml
<Window x:Class="WpfApp.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow"
Width="400" Height="200">
<Window.Resources>
<Style x:Key="RoundStyle" TargetType="{x:Type Button}">
<Setter Property="Width" Value="100"/>
<Setter Property="Height" Value="100"/>
<Setter Property="Foreground">
<Setter.Value>
<LinearGradientBrush EndPoint="0.5,1.5" StartPoint="0.5,0">
<GradientStop Color="Orchid"/>
<GradientStop Color="DarkViolet" Offset="1"/>
</LinearGradientBrush>
</Setter.Value>
</Setter>
<Setter Property="Background">
<Setter.Value>
<DrawingBrush>
<DrawingBrush.Drawing>
<GeometryDrawing>
<GeometryDrawing.Brush>
<SolidColorBrush Color="DarkGray"/>
</GeometryDrawing.Brush>
<GeometryDrawing.Geometry>
<EllipseGeometry Center="50,50" RadiusX="45" RadiusY="20"/>
</GeometryDrawing.Geometry>
<GeometryDrawing.Pen>
<Pen>
<Pen.Brush>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="DarkViolet"/>
<GradientStop Color="Orchid" Offset="1"/>
</LinearGradientBrush>
</Pen.Brush>
</Pen>
</GeometryDrawing.Pen>
</GeometryDrawing>
</DrawingBrush.Drawing>
</DrawingBrush>
</Setter.Value>
</Setter>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Grid Background="{TemplateBinding Background}">
<ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
Margin="{TemplateBinding Padding}"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Trigger.EnterActions>
<BeginStoryboard>
<Storyboard >
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Button.Background).(DrawingBrush.Drawing).(GeometryDrawing.Brush).(SolidColorBrush.Color)">
<EasingColorKeyFrame KeyTime="0:0:0.1" Value="LightGray"/>
</ColorAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</Trigger.EnterActions>
<Trigger.ExitActions>
<BeginStoryboard>
<Storyboard >
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Button.Background).(DrawingBrush.Drawing).(GeometryDrawing.Brush).(SolidColorBrush.Color)">
<EasingColorKeyFrame KeyTime="0:0:0.1" Value="DarkGray"/>
</ColorAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</Trigger.ExitActions>
</Trigger>
</Style.Triggers>
</Style>
</Window.Resources>
<Grid>
<Button Style="{StaticResource RoundStyle}"
Padding="0,10,0,0"
FontSize="72" FontFamily="Bahnschrift SemiBold"
Content="0"/>
</Grid>
</Window>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment