How to create a rounded corner button in wpf from Styles? - xaml

Question

most probably it could be duplicate but my question is different, i want to create a rounded close corner button in wpf UserControl from the styles. I don't know how can i achive this,
i tried as following.
<Style x:Key="dbokPopupCloseStyle" TargetType="Button">
<Setter Property="Padding" Value="5"></Setter>
<Setter Property="BorderThickness" Value="0"></Setter>
<Setter Property="FontWeight" Value="Normal"/>
<Setter Property="FontFamily" Value="seoge UI"/>
<Setter Property="FontSize" Value="17"/>
<Setter Property="Cursor" Value="Hand"/>
<Setter Property="Foreground" Value="White"/>
<Setter Property="Background" Value="#363636"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Grid Background="{TemplateBinding Background}">
<ContentPresenter HorizontalAlignment="Center" Margin="10,5"
VerticalAlignment="Center"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>

Answer 1

Try this
<Window.Resources>
<DataTemplate x:Key="Cancel">
<Viewbox Height="20">
<Canvas Width="31.7872706291756" Height="31.7794719079896">
<Path Fill="{Binding Foreground,RelativeSource={RelativeSource AncestorType={x:Type Button}}}" Data="F1M7.1874998,3.7803054C7.0081378,3.7608244,6.8412588,3.8140474,6.7187498,3.9365554L3.9374998,6.7178054C3.6924818,6.9628234,3.7577738,7.4130804,4.0624998,7.7178054L12.34375,15.999055 4.0624998,24.280305C3.7577728,24.585032,3.6924818,25.035288,3.9374998,25.280305L6.7187498,28.061555C6.9637678,28.306573,7.4140228,28.272532,7.7187498,27.967805L16,19.686555 24.28125,27.967805C24.585977,28.272532,25.036232,28.306573,25.28125,28.061555L28.0625,25.280305C28.307518,25.035287,28.242227,24.585033,27.9375,24.280305L19.65625,15.999055 27.9375,7.7178054C28.242227,7.4130784,28.307518,6.9628194,28.0625,6.7178054L25.28125,3.9365554C25.036232,3.6915374,24.585977,3.7568254,24.28125,4.0615554L16,12.342805 7.7187498,4.0615554C7.5663868,3.9091924,7.3668618,3.7997864,7.1874998,3.7803054z" Stroke="{Binding Foreground,RelativeSource={RelativeSource AncestorType={x:Type Button}}}" StrokeThickness="1"/>
</Canvas>
</Viewbox>
</DataTemplate>
<Style x:Key="Blue_Icon_Tooltipstyle" TargetType="ToolTip">
<Setter Property="OverridesDefaultStyle" Value="True" />
<Setter Property="SnapsToDevicePixels" Value="True"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ToolTip">
<Grid>
<Border CornerRadius="3" Background="Black">
<TextBlock Margin="5" Foreground="White" FontFamily="Segoe Ui Dark" FontSize="12" >
<ContentPresenter></ContentPresenter>
</TextBlock>
</Border>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="CircularButton" TargetType="Button">
<Setter Property="SnapsToDevicePixels" Value="True"/>
<Setter Property="OverridesDefaultStyle" Value="True"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Grid Height="{TemplateBinding Height}" Width="{TemplateBinding Width}">
<Ellipse x:Name="ellipse" Height="{TemplateBinding Height}" Width="{TemplateBinding Width}" Fill="{TemplateBinding Background}" Stroke="{TemplateBinding BorderBrush}" StrokeThickness="3"></Ellipse>
<ContentPresenter></ContentPresenter>
<Grid.ToolTip>
<ToolTip Content="{TemplateBinding ToolTip}" HorizontalOffset="-30" Style="{DynamicResource Blue_Icon_Tooltipstyle }" VerticalOffset="-5" VerticalAlignment="Top" Placement="Top"></ToolTip>
</Grid.ToolTip>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="Button.IsPressed" Value="True" >
<Setter Property="Opacity" Value="0.7" ></Setter>
</Trigger>
<Trigger Property="IsEnabled" Value="False">
<Setter Property="Opacity" Value="0.2"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Window.Resources>
<Grid Background="Red" >
<Button Height="40" Width="40" ToolTip="Cancel" Style="{StaticResource CircularButton}" Background="Black" BorderThickness="1" BorderBrush="White" Foreground="White" ContentTemplate="{StaticResource Cancel}"></Button>
</Grid>
Update
<UserControl.Resources>
<Style x:Key="CircularButton" TargetType="Button">
<Setter Property="SnapsToDevicePixels" Value="True"/>
<Setter Property="OverridesDefaultStyle" Value="True"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Grid Height="{TemplateBinding Height}" Width="{TemplateBinding Width}">
<Ellipse x:Name="ellipse"
Height="{TemplateBinding Height}"
Width="{TemplateBinding Width}"
Fill="{TemplateBinding Background}"
Stroke="{TemplateBinding BorderBrush}"
StrokeThickness="{TemplateBinding BorderThickness}">
</Ellipse>
<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" TextElement.FontSize="20" Content="{TemplateBinding Content}"></ContentPresenter>
<Grid.ToolTip>
<ToolTip Content="{TemplateBinding ToolTip}" HorizontalOffset="-30" Style="{DynamicResource Blue_Icon_Tooltipstyle }" VerticalOffset="-5" VerticalAlignment="Top" Placement="Top"></ToolTip>
</Grid.ToolTip>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="Button.IsPressed" Value="True" >
<Setter Property="Opacity" Value="0.7" ></Setter>
</Trigger>
<Trigger Property="IsEnabled" Value="False">
<Setter Property="Opacity" Value="0.2"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</UserControl.Resources>
<Grid Background="Red" >
<Button Height="40" Width="40" ToolTip="Cancel"
Style="{StaticResource CircularButton}"
Background="Black" BorderThickness="1"
BorderBrush="White" Foreground="White" Content="x"></Button>
</Grid>