convert a canvas to a button in WPF

Question

I designed a button in a canvas, now I want to convert it to a button, with isPressed, or MouseOver attribute... Here is the XAML code of canvas:

<Canvas x:Name="btnBelep" HorizontalAlignment="Left" Height="69.416" VerticalAlignment="Top" Width="252" Grid.Row="1" Margin="1,1.125,0,0" d:IsLocked="True">
    <Path x:Name="Rectangle_6" Data="F1M1,2C1,2 251.103,2 251.103,2 251.103,2 251.103,70 251.103,70 251.103,70 1,70 1,70 1,70 1,2 1,2z" Fill="#FFE3E3E3" Height="69.395" Width="252" Stretch="Fill"/>
    <TextBlock x:Name="Beléptetés1" Foreground="#FF3F3E3E" FontSize="16" FontFamily="Arial" IsHyphenationEnabled="True" LineStackingStrategy="BlockLineHeight" Canvas.Left="73.833" LineHeight="16" TextAlignment="Left" TextWrapping="Wrap" Text="Beléptetés" Canvas.Top="25.176"/>
    <Path x:Name="Plus_Sign_In_A_Circular_Outline__Attribute_as_Freepik_from_Flaticon_com" Data="F1M14.234,6.491C14.808,6.491 15.274,6.948 15.274,7.514 15.274,7.514 15.274,12.015 15.274,12.015 15.274,12.015 19.85,12.015 19.85,12.015 20.425,12.015 20.891,12.473 20.89,13.038 20.89,13.603 20.424,14.061 19.85,14.061 19.85,14.061 15.274,14.061 15.274,14.061 15.274,14.061 15.274,18.563 15.274,18.563 15.274,19.128 14.808,19.586 14.234,19.586 13.659,19.586 13.194,19.128 13.194,18.563 13.194,18.563 13.194,14.061 13.194,14.061 13.194,14.061 8.618,14.061 8.618,14.061 8.043,14.061 7.578,13.603 7.578,13.038 7.578,12.473 8.043,12.015 8.618,12.015 8.618,12.015 13.194,12.015 13.194,12.015 13.194,12.015 13.194,7.514 13.194,7.514 13.194,6.948 13.66,6.491 14.234,6.491z M14.234,3.235C8.738,3.235 4.268,7.632 4.268,13.038 4.268,18.444 8.738,22.841 14.234,22.841 19.73,22.841 24.201,18.444 24.201,13.038 24.201,7.632 19.73,3.235 14.234,3.235z M14.234,1.001C20.981,1.001 26.471,6.401 26.471,13.038 26.471,19.675 20.981,25.076 14.234,25.076 7.487,25.076 1.998,19.675 1.998,13.038 1.998,6.401 7.487,1.001 14.234,1.001z" Fill="#FFD76B93" Height="27" Canvas.Left="30.833" Canvas.Top="17.257" Width="28"/>
    <Path x:Name="Shape_3_Copy2" Data="F1M1,3C1,3 1,2 1,2 1,2 251.103,2 251.103,2 251.103,2 251.103,3 251.103,3 251.103,3 1,3 1,3z" Fill="#FFC7C7C7" Height="3" Canvas.Top="66.395" Width="252" Stretch="Fill"/>
</Canvas>

Answer 1

Wrap your Convas in a Viewbox and apply to the button. The viewbox will help convert the canvas (absolute cords) into the UI panels (relative cords)...

<Button>
    <Viewbox>
        <Canvas>
               ....
        </Canvas>
    </Viewbox>
</Button>

Answer 2

Assign that Canvas as the Content property of your button:

<Button>
   <Button.Content>
       Awesome Canvas
   </Button.Content>
</Button>

Since Content is assumed to be the tag when nothing else is present, you can also do:

<Button>
   Awesome Canvas
</Button>