Home/ Questions/Q 8407293
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-09T23:19:15+00:00

How do I get the following XAML code to integrate into a buttons background.

  • 0

How do I get the following XAML code to integrate into a buttons background. I’ve tried so many ways but I’m struggling to get it work. PS I’m new at XAML.

    <Viewbox Width="55.247" Height="55.247"
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Canvas Width="55.247" Height="55.247">

  <Canvas>

  <!-- button/circle -->
  <Path StrokeThickness="1.0" Stroke="#ff335284" StrokeMiterLimit="1.0" Data="F1 M 54.747,27.624 C 54.747,42.603 42.603,54.747 27.624,54.747 C 12.644,54.747 0.500,42.603 0.500,27.624 C 0.500,12.644 12.644,0.500 27.624,0.500 C 42.603,0.500 54.747,12.644 54.747,27.624 Z">
    <Path.Fill>
      <RadialGradientBrush MappingMode="Absolute" GradientOrigin="392.717,-251.469" Center="392.717,-251.469" RadiusX="27.123" RadiusY="27.123">
        <RadialGradientBrush.GradientStops>
          <GradientStop Offset="0.00" Color="#ff00aae4"/>
          <GradientStop Offset="1.00" Color="#ff2463a7"/>
        </RadialGradientBrush.GradientStops>
        <RadialGradientBrush.Transform>
          <MatrixTransform Matrix="1.000,0.000,-0.000,-1.000,-365.093,-223.845" />
        </RadialGradientBrush.Transform>
      </RadialGradientBrush>
    </Path.Fill>
  </Path>

  </Canvas>
</Canvas>
</Viewbox>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    The following example replaces the standard Button Template with your design AND adds a content presenter so you can still set the content of the button.

    <Button Content="OK" Width="75" Height="75">
    <Button.Template>
        <ControlTemplate TargetType="Button">

            <Grid>
                <Path StrokeThickness="1.0" Stroke="#ff335284" StrokeMiterLimit="1.0" Data="F1 M 54.747,27.624 C 54.747,42.603 42.603,54.747 27.624,54.747 C 12.644,54.747 0.500,42.603 0.500,27.624 C 0.500,12.644 12.644,0.500 27.624,0.500 C 42.603,0.500 54.747,12.644 54.747,27.624 Z">
                  <Path.Fill>
                      <RadialGradientBrush MappingMode="Absolute" GradientOrigin="392.717,-251.469" Center="392.717,-251.469" RadiusX="27.123" RadiusY="27.123">
                          <RadialGradientBrush.GradientStops>
                              <GradientStop Offset="0.00" Color="#ff00aae4"/>
                              <GradientStop Offset="1.00" Color="#ff2463a7"/>
                          </RadialGradientBrush.GradientStops>
                          <RadialGradientBrush.Transform>
                              <MatrixTransform Matrix="1.000,0.000,-0.000,-1.000,-365.093,-223.845" />
                          </RadialGradientBrush.Transform>
                      </RadialGradientBrush>
                 </Path.Fill>
             </Path>
             <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
        </Grid>

    </ControlTemplate>
</Button.Template>

    • 0