How to make the TextBlock which displays "N" draw the inscription on the background that stands on the Label ?

  <Label Height="150" HorizontalContentAlignment="Center" VerticalContentAlignment="Center"> <Label.Background> <ImageBrush ImageSource="design-1377545.jpg" Stretch="Fill" /> </Label.Background> <Label.Content> <StackPanel Orientation="Horizontal" Opacity="0.8"> <Grid> <Polygon HorizontalAlignment="Center" VerticalAlignment="Center" Fill="White" Points="0 40, 20 80, 80 80, 100 40, 80 0, 20 0" Stroke="White" /> <TextBlock HorizontalAlignment="Center" VerticalAlignment="Center" TextAlignment="Center" FontSize="75" Foreground="Black" Text="N" /> </Grid> </StackPanel> </Label.Content> </Label>

enter image description here

UPDATE . I came up with this option, but it is so noticeable that N not transparent, but is simply drawn with exactly the same background as the label.

 <Window.Resources> <ImageBrush x:Key="brush" ImageSource="design-1377545.jpg" Stretch="Fill" /> </Window.Resources> <TextBlock Foreground="{StaticResource brush}" Text="N"> </TextBlock>

enter image description here

UPDATE2. Painted in Paint what effect I want. enter image description here

  • And what you do not like the code given by you? - VladD
  • @VladD, The letter N displayed in black, and I want it to become transparent and drawn in the background color of the label. If there are any lines directly below the letter, they should be drawn on the letter. - Lightness
  • Unclear. :( Do you have a picture showing how it should look like? - VladD
  • @VladD; Updated the question. - Lightness
  • Agaaaaa! Understood, I'll think of something now. - VladD

1 answer 1

There are several ways. For example, it works through VisualBrush (this is such a thing that can clone the appearance of a piece of content in the form of a brush.

So let's get started. For a start, we need a clean background. Therefore, we remove the outer Label , and put the whole structure in the Grid . Then, put the piece with the background in a separate Grid , without child elements. And for TextBlock 'and we specify Foreground . Since you didn't give a picture, I used RadialGradientBrush crazy colors instead. I also added Margin to TextBlock 'for better visual alignment, and reduced Opacity to 0.5 for beauty.

 <Grid> <Grid Name="BgSource"> <Grid.Background> <RadialGradientBrush GradientOrigin="0.5,0.5" Center="0.5,0.5" RadiusX="0.5" RadiusY="0.5"> <GradientStop Color="Yellow" Offset="0" /> <GradientStop Color="Red" Offset="0.25" /> <GradientStop Color="Blue" Offset="0.75" /> <GradientStop Color="LimeGreen" Offset="1" /> </RadialGradientBrush> </Grid.Background> </Grid> <Polygon HorizontalAlignment="Center" VerticalAlignment="Center" Fill="White" Points="0 40, 20 80, 80 80, 100 40, 80 0, 20 0" Stroke="White" Opacity="0.5" /> <TextBlock HorizontalAlignment="Center" VerticalAlignment="Center" TextAlignment="Center" FontSize="75" Text="N" Margin="0,0,0,7"> <TextBlock.Foreground> <!-- вся магия тут --> <VisualBrush Visual="{Binding ElementName=BgSource}" Stretch="None"/> </TextBlock.Foreground> </TextBlock> </Grid>

It turns out this result:

terrible colors, right?

Another solution - via OpacityMask - is outlined here .

  • VisualBrush did not even know. Thanks, it turned out cool! - Lightness
  • @Lightness: Please! - VladD