wpfwpf-controls

WPF custom control path,clickable background

I would like to create a button or something with the following form/path:

Picture of the issue


    <Grid Background="red">
        <Path x:Name="pathSilo"
          Stretch="Uniform"
          Stroke="Black" 
          Fill="Blue" 
          Data="M117.244 16.121 C 115.736 18.039,115.624 19.202,115.609 33.113 L 115.592 48.047 65.763 74.807 C 38.357 89.525,15.512 101.988,14.998 102.502 C 13.090 104.410,13.708 382.458,15.625 384.375 C 17.179 385.929,18.229 385.938,199.943 385.938 L 382.699 385.938 384.344 383.846 L 385.989 381.755 385.755 306.307 L 385.522 230.859 383.759 224.609 C 375.298 194.617,354.402 176.774,320.508 170.603 L 318.750 170.283 318.750 137.351 C 318.750 107.891,318.615 104.270,317.465 103.000 C 316.759 102.220,293.739 89.536,266.309 74.814 L 216.437 48.047 216.422 32.617 C 216.401 11.508,223.333 14.063,166.072 14.063 L 118.863 14.063 117.244 16.121 M204.688 35.938 L 204.688 46.094 166.016 46.094 L 127.344 46.094 127.344 35.938 L 127.344 25.781 166.016 25.781 L 204.688 25.781 204.688 35.938 M245.938 77.068 C 266.434 88.088,284.609 97.928,286.328 98.935 L 289.453 100.766 166.016 100.766 L 42.578 100.766 83.203 78.916 L 123.828 57.066 166.250 57.049 L 208.672 57.031 245.938 77.068 M62.500 243.359 L 62.500 374.219 44.141 374.219 L 25.781 374.219 25.781 243.359 L 25.781 112.500 44.141 112.500 L 62.500 112.500 62.500 243.359 M116.406 123.828 L 116.406 135.156 95.313 135.156 L 74.219 135.156 74.219 123.828 L 74.219 112.500 95.313 112.500 L 116.406 112.500 116.406 123.828 M307.813 141.323 C 307.813 172.904,308.094 171.094,303.186 171.094 C 279.697 171.094,251.388 195.700,242.808 223.573 L 241.046 229.297 240.812 302.148 L 240.579 375.000 184.352 375.000 L 128.125 375.000 128.125 243.750 L 128.125 112.500 217.969 112.500 L 307.813 112.500 307.813 141.323 M116.406 157.422 L 116.406 168.750 95.313 168.750 L 74.219 168.750 74.219 157.422 L 74.219 146.094 95.313 146.094 L 116.406 146.094 116.406 157.422 M116.406 191.797 L 116.406 203.125 95.313 203.125 L 74.219 203.125 74.219 191.797 L 74.219 180.469 95.313 180.469 L 116.406 180.469 116.406 191.797 M327.023 183.586 C 350.979 189.613,369.816 209.984,373.808 234.180 L 374.356 237.500 313.350 237.500 L 252.344 237.500 252.344 235.672 C 252.344 229.014,257.593 215.950,263.694 207.422 C 277.988 187.441,303.773 177.736,327.023 183.586 M116.406 226.172 L 116.406 237.500 95.313 237.500 L 74.219 237.500 74.219 226.172 L 74.219 214.844 95.313 214.844 L 116.406 214.844 116.406 226.172 M116.406 260.547 L 116.406 271.875 95.313 271.875 L 74.219 271.875 74.219 260.547 L 74.219 249.219 95.313 249.219 L 116.406 249.219 116.406 260.547 M375.000 311.719 L 375.000 374.219 313.281 374.219 L 251.563 374.219 251.563 311.719 L 251.563 249.219 313.281 249.219 L 375.000 249.219 375.000 311.719 M350.781 277.344 C 349.408 278.717,349.219 279.948,349.219 287.500 C 349.219 297.374,350.132 299.219,355.021 299.219 C 359.691 299.219,360.938 296.645,360.938 287.004 C 360.938 277.642,359.966 275.781,355.078 275.781 C 353.385 275.781,351.749 276.376,350.781 277.344 M97.754 283.594 L 116.406 283.594 116.406 294.922 L 116.406 306.250 95.313 306.250 L 74.219 306.250 74.219 294.434 L 74.219 282.617 76.660 283.105 C 78.003 283.374,87.495 283.594,97.754 283.594 M351.355 309.371 L 349.219 311.051 349.219 332.695 C 349.219 357.424,349.304 357.813,354.732 357.813 C 360.903 357.813,360.938 357.675,360.938 333.290 C 360.938 314.059,360.799 311.725,359.570 310.245 C 357.484 307.733,353.919 307.353,351.355 309.371 M116.406 328.906 L 116.406 340.625 95.313 340.625 L 74.219 340.625 74.219 328.906 L 74.219 317.188 95.313 317.188 L 116.406 317.188 116.406 328.906 M116.406 363.281 L 116.406 375.000 95.313 375.000 L 74.219 375.000 74.219 363.281 L 74.219 351.563 95.313 351.563 L 116.406 351.563 116.406 363.281 "
          />
    </Grid>

It works, but the contextMenu is only triggers when you click on the outline or the path... How can I make the background clickable too? => resolve

I'd also like to be able to change the background color inside the shape...

I'd like to keep what's circled in green as a transparent background.

Thanks in advance

Solution

  • If you want your path to be scalable, then it needs to be placed within a fixed sized container, otherwise it will try to grab as much screen space as it can.

    To make an object clickable, the background needs to be set to something other than the default null value. To keep the same as the parent background, use Transparent.

    There's no need to use a ViewBox control for this layout.

    silo icon and background

    <Grid Width="50" Height="50" Background="Transparent">
    <Grid.ContextMenu>
        <ContextMenu>
            <MenuItem Header="T1"></MenuItem>
        </ContextMenu>
    </Grid.ContextMenu>
    
    // additional path to set the background of the silo icon distinct from the grid background.
    <Path Stretch="Uniform" Fill="Yellow" Data="M 0,0 M 100,100 M 2,98 L 98,98 L 98,60 L 90,50 L 80,40 L 80,25 L 54,15 L 54,2 L 27,2 L 27,15 2,30 z" />

    <Path x:Name="pathSilo"
          Stretch="Uniform"
          Stroke="Black" 
          Fill="Black" 
          Data="M117.244 16.121 C 115.736 18.039,115.624 19.202,115.609 33.113 L 115.592 48.047 65.763 74.807 C 38.357 89.525,15.512 101.988,14.998 102.502 C 13.090 104.410,13.708 382.458,15.625 384.375 C 17.179 385.929,18.229 385.938,199.943 385.938 L 382.699 385.938 384.344 383.846 L 385.989 381.755 385.755 306.307 L 385.522 230.859 383.759 224.609 C 375.298 194.617,354.402 176.774,320.508 170.603 L 318.750 170.283 318.750 137.351 C 318.750 107.891,318.615 104.270,317.465 103.000 C 316.759 102.220,293.739 89.536,266.309 74.814 L 216.437 48.047 216.422 32.617 C 216.401 11.508,223.333 14.063,166.072 14.063 L 118.863 14.063 117.244 16.121 M204.688 35.938 L 204.688 46.094 166.016 46.094 L 127.344 46.094 127.344 35.938 L 127.344 25.781 166.016 25.781 L 204.688 25.781 204.688 35.938 M245.938 77.068 C 266.434 88.088,284.609 97.928,286.328 98.935 L 289.453 100.766 166.016 100.766 L 42.578 100.766 83.203 78.916 L 123.828 57.066 166.250 57.049 L 208.672 57.031 245.938 77.068 M62.500 243.359 L 62.500 374.219 44.141 374.219 L 25.781 374.219 25.781 243.359 L 25.781 112.500 44.141 112.500 L 62.500 112.500 62.500 243.359 M116.406 123.828 L 116.406 135.156 95.313 135.156 L 74.219 135.156 74.219 123.828 L 74.219 112.500 95.313 112.500 L 116.406 112.500 116.406 123.828 M307.813 141.323 C 307.813 172.904,308.094 171.094,303.186 171.094 C 279.697 171.094,251.388 195.700,242.808 223.573 L 241.046 229.297 240.812 302.148 L 240.579 375.000 184.352 375.000 L 128.125 375.000 128.125 243.750 L 128.125 112.500 217.969 112.500 L 307.813 112.500 307.813 141.323 M116.406 157.422 L 116.406 168.750 95.313 168.750 L 74.219 168.750 74.219 157.422 L 74.219 146.094 95.313 146.094 L 116.406 146.094 116.406 157.422 M116.406 191.797 L 116.406 203.125 95.313 203.125 L 74.219 203.125 74.219 191.797 L 74.219 180.469 95.313 180.469 L 116.406 180.469 116.406 191.797 M327.023 183.586 C 350.979 189.613,369.816 209.984,373.808 234.180 L 374.356 237.500 313.350 237.500 L 252.344 237.500 252.344 235.672 C 252.344 229.014,257.593 215.950,263.694 207.422 C 277.988 187.441,303.773 177.736,327.023 183.586 M116.406 226.172 L 116.406 237.500 95.313 237.500 L 74.219 237.500 74.219 226.172 L 74.219 214.844 95.313 214.844 L 116.406 214.844 116.406 226.172 M116.406 260.547 L 116.406 271.875 95.313 271.875 L 74.219 271.875 74.219 260.547 L 74.219 249.219 95.313 249.219 L 116.406 249.219 116.406 260.547 M375.000 311.719 L 375.000 374.219 313.281 374.219 L 251.563 374.219 251.563 311.719 L 251.563 249.219 313.281 249.219 L 375.000 249.219 375.000 311.719 M350.781 277.344 C 349.408 278.717,349.219 279.948,349.219 287.500 C 349.219 297.374,350.132 299.219,355.021 299.219 C 359.691 299.219,360.938 296.645,360.938 287.004 C 360.938 277.642,359.966 275.781,355.078 275.781 C 353.385 275.781,351.749 276.376,350.781 277.344 M97.754 283.594 L 116.406 283.594 116.406 294.922 L 116.406 306.250 95.313 306.250 L 74.219 306.250 74.219 294.434 L 74.219 282.617 76.660 283.105 C 78.003 283.374,87.495 283.594,97.754 283.594 M351.355 309.371 L 349.219 311.051 349.219 332.695 C 349.219 357.424,349.304 357.813,354.732 357.813 C 360.903 357.813,360.938 357.675,360.938 333.290 C 360.938 314.059,360.799 311.725,359.570 310.245 C 357.484 307.733,353.919 307.353,351.355 309.371 M116.406 328.906 L 116.406 340.625 95.313 340.625 L 74.219 340.625 74.219 328.906 L 74.219 317.188 95.313 317.188 L 116.406 317.188 116.406 328.906 M116.406 363.281 L 116.406 375.000 95.313 375.000 L 74.219 375.000 74.219 363.281 L 74.219 351.563 95.313 351.563 L 116.406 351.563 116.406 363.281 "
          />
    
</Grid>