CornerRadius in Canvas?-CodePudding

I'm currently trying to give a canvas element a shape that has a round border. As I know from my experience, the CornerRadius parameter/method does not exist in the Canvas class? Is there another way to develop a round border?

Not Round Corner

                <Canvas Background="White" Width="250" Height="200">
                    <TextBlock Text="LOW" Foreground="Black" FontSize="30" TextAlignment="Center" Margin="10"></TextBlock>
                    <TextBlock FontSize="40" Padding="0, 0, 300, 0" Margin="74" Text="11" Foreground="Black">
                    </TextBlock>
                </Canvas>

CodePudding user response：

I think you need to use the Clip property and define a rounded rectangle as the clip path like this:

<Canvas Background="White">
    <Canvas.Clip>
        <RectangleGeometry Rect="0,0,250,200" RadiusX="15" RadiusY="15" />
    </Canvas.Clip>

    <TextBlock Text="LOW" Foreground="Black" FontSize="30" TextAlignment="Center" Margin="10" />
    <TextBlock FontSize="40" Padding="0, 0, 300, 0" Margin="74" Text="11" Foreground="Black" />
</Canvas>

CodePudding user response：

Maybe you could try to put the canvas into another control that could set the CornerRadius property, like a Grid or a StackPanel.

Here is the code:

   <Grid Background="AliceBlue">
    <Grid CornerRadius="20" Background="White" Height="500" Width="500">
        <Canvas Background="White"  Width="510" Height="510" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" >
        </Canvas>
    </Grid>
</Grid>