Create a text clipped by shape in xaml

259 views Asked by At

Any ideas how can I сlip text via shape using xaml?

Probably I could overlap the text with circle border with large thickness same color as background but what if background isn't solid color?

Here is an example of what I want:

enter image description here

1

There are 1 answers

1
Danil Lykov On

The approach i chose is using uiElement.Clip property. It allows you to clip only with rectangles, so you need to clip several times.

I combined three clipping squares rotated by 0, 30 and 60 degrees and used a thin overlapping circle border to hide the corners of dodecagon. here's the code in case someone needs it:

            <Ellipse x:Name="Ellipse" Fill="#FF8813B4"  Height="85" Margin="0" Width="85" StrokeThickness="0"
                 HorizontalAlignment="Center" VerticalAlignment="Center" />
        <Grid Width="84" Height="84" HorizontalAlignment="Center">
            <Grid>
                <Grid>
                    <TextBlock x:Name="Label" Text="Tample"  FontSize="70" HorizontalAlignment="Left" VerticalAlignment="Center"
                       FontFamily="Open Sans Semibold" Margin="0,2,0,0" Foreground="#7FFFFFFF" FontWeight="Bold"/>
                    <Grid.Clip>
                        <RectangleGeometry Rect="0,0,84,84">
                            <RectangleGeometry.Transform>
                                <CompositeTransform Rotation="60" CenterX="42" CenterY="42"/>
                            </RectangleGeometry.Transform>
                        </RectangleGeometry>
                    </Grid.Clip>
                </Grid>                
                <Grid.Clip>
                        <RectangleGeometry Rect="0,0,84,84">
                            <RectangleGeometry.Transform>
                                <CompositeTransform Rotation="30" CenterX="42" CenterY="42"/>
                            </RectangleGeometry.Transform>
                        </RectangleGeometry>
                    </Grid.Clip>
                </Grid>
                <Grid.Clip>
                    <RectangleGeometry Rect="0,0,84,84">
                        <RectangleGeometry.Transform>
                            <CompositeTransform Rotation="0" CenterX="42" CenterY="42"/>
                        </RectangleGeometry.Transform>
                    </RectangleGeometry>
                </Grid.Clip>
            </Grid>
        <Ellipse Stroke="#FF8813B4" StrokeThickness="2" Width="87" Height="87" HorizontalAlignment="Center" VerticalAlignment="Center"></Ellipse>