1

I am trying to Set a label's content to be invisible, so that I can overlay that on the content behind. For instance, the control's background is a solid color but, the text has a alpha transparency that allows me to see through the entire control (Like a photoshop trick). That way, dynamic content can be seen with a variable background. I apply this pattern with PNG files but, that obviously wont do when the content needs to change. A great example of this question (Since I am not very good at asking it) can be found here... but, of course, this is for css. (How to make "see through" text?) Any help on this would be appreciated

Community
  • 1
  • 1
UnOjO2010
  • 45
  • 1
  • 8
  • This was my own question for a while... "Masking out a text from a border's background" . There is a way to achieve this, but it doesn't involve using a Label. through code behind you can define an OpacityMask for a border removing the text. – uncommon_name Jan 03 '16 at 12:38
  • I am not sure I follow. I understand the use of opacitymask but, thus far my attempts to use it within this "UserControl" have been fruitless. I did just try it in the code behind to no avail. What are we placing within the border to achieve transparent text? TextBlock? I have tried a few combinations based on your suggestion but, still don't have much to show for it. :( – UnOjO2010 Jan 03 '16 at 12:57
  • what I'm trying to say is that I'm sure we can render a textblock with a technique (http://stackoverflow.com/a/28626055/4805219) , if we could only modify the resulting BitmapSource objects pixels and invert their Alpha channel and set it as OpacityMask it would work! :) – uncommon_name Jan 03 '16 at 13:15

1 Answers1

1

So I found a solution to this thing... The trick is to use Clip instead of OpacityMask.

First look at the layout:

<Grid Background="Red">
    <Border Background="White" Name="targetImage" VerticalAlignment="Center" Height="200"/>

    <Button VerticalAlignment="Bottom" Content="render" Click="ButtonBase_OnClick"></Button>
</Grid>

Here the grid with the red background can be used as your Background Image! The border inside it covers it with the white color. Then I put a button that removes the Text we want from border when pressed.

here is the code for button click event:

private void ButtonBase_OnClick(object sender, RoutedEventArgs e)
    {
        Typeface face = new Typeface("Candara");
        FormattedText tx = new FormattedText("Hello", Thread.CurrentThread.CurrentUICulture, FlowDirection.LeftToRight, face, 70, Brushes.Black);
        Geometry textGeom = tx.BuildGeometry(new Point(0, 0));
        Rect boundingRect = new Rect(new Point(-100000, -100000), new Point(100000, 100000));
        RectangleGeometry boundingGeom = new RectangleGeometry(boundingRect);
        GeometryGroup group = new GeometryGroup();
        group.Children.Add(boundingGeom);
        group.Children.Add(textGeom);
        targetImage.Clip = group;   


    }

It's basically creating a text! then we need to invert the mask. inverting is done using the help of boundingRect .

Edit: Almost forgot. You can put all this logic inside a User control. and run this code everytime the Text property of your Usercontrol changes.

have fun ;)

uncommon_name
  • 470
  • 2
  • 5
  • 19
  • How in the world did you find an answer to that so quick? Genius! I was still flipping the logic in the Visual. I did that before with an OCR Screen capture and knew what that strategy involved. But, this is genius!! +200 :) Thanks so much, been at this for hours now! :P – UnOjO2010 Jan 03 '16 at 13:42
  • downvote for using the exact same code and variable names as an answer dated 1 year earlier. https://stackoverflow.com/a/27942156/2353523 – soulshined Jul 31 '18 at 03:52