locked
Image mask RRS feed

Answers

  • No, OpacityMasks are not supported in Windows.UI.Xaml. There is no way to fake this without completely implementing your own drawing.

    Depending on your specific needs you may be able to get a similar effect in other ways. As Ouch suggested, you can create a shape with the Windows.UI.Xaml.Shapes classes. See Quickstart: Drawing shapes.

    --Rob

    • Marked as answer by Aaron Xue Monday, August 6, 2012 10:00 AM
    Wednesday, August 1, 2012 11:54 PM
    Moderator

All replies

  • Hi,

    You could implement it by a certain Path, Rectangle, Ellipse that Filled with ImageBrush.

    The following link might be helpful: Quickstart: Image and ImageBrush


    Ouch Liu
    Welcome to visit by blog: Ouch@點部落
    Welcome to join the Designer x Developer group on Facebook: Facebook 設計x程式 社團

    Friday, July 27, 2012 8:27 AM
  • Let me be more specific. Currently I have a Canvas that has a blue background.  One of Canvas child UI element is a Border with white background.  The border also has an image to be used as a mask.   Is there a way in XAML to use the image as a mask?   If I have to do it programmatically, what API can I use?

    eme

    Monday, July 30, 2012 4:15 PM
  • Hi,

    Notice that, if you use a image as a mask, then the area of the mask will be a rectangle as large as the image's size.

    If you need a custom shape as a mask, you should implement it with a Path control, then fill it with an ImageBrush.

    By the way, the following links might be helpful to you :

    Quickstart: Drawing shapes (Metro style apps using C#/VB/C++ and XAML)

    XAML vector-based drawing sample

    Hope this information helps.


    Ouch Liu
    Welcome to visit by blog: Ouch@點部落
    Welcome to join the Designer x Developer group on Facebook: Facebook 設計x程式 社團

    Tuesday, July 31, 2012 2:03 AM
  • Hi Ouch ,

    THanks for providing some guidance.

    The sample links does not provide examples how to do mask.  Is image masking supported in XAML with Metro App?


    eme

    Wednesday, August 1, 2012 4:04 PM
  • By image masking do you mean an OpacityMask such that an image can mask out other controls based on the image's alpha channel? If so, then that is not supported in Windows.UI.Xaml.

    --Rob

    Wednesday, August 1, 2012 9:29 PM
    Moderator
  • Is OpacityMask can be done in code though?  Are there any samples that does this in Metro?

    eme

    Wednesday, August 1, 2012 10:53 PM
  • No, OpacityMasks are not supported in Windows.UI.Xaml. There is no way to fake this without completely implementing your own drawing.

    Depending on your specific needs you may be able to get a similar effect in other ways. As Ouch suggested, you can create a shape with the Windows.UI.Xaml.Shapes classes. See Quickstart: Drawing shapes.

    --Rob

    • Marked as answer by Aaron Xue Monday, August 6, 2012 10:00 AM
    Wednesday, August 1, 2012 11:54 PM
    Moderator