Как создать закругленную кнопку угла в wpf из стилей?

Question

скорее всего это может быть дубликат, но мой вопрос другой, я хочу создать закругленную кнопку закрытия угла в wpf UserControl из стилей. Я не знаю, как я могу это сделать,

Я пробовал как следует.

<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

Попробуйте

<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>