How to play the "overflow: Hidden" effect of CSS in WPF?

Question

Hello, I’m new to Windows Presentation Forms (WPF) and need to know how to make the effect of "overflow: Hidden" that we have in CSS. I have the following code snippet:

<Border BorderThickness="0" Background="Transparent" CornerRadius="12">
    <Label Content="Foo" Background="Red"/>
</Border>

The intention of the above code would be to recreate the code below

<label style="overflow:hidden; background:red; border-radius:12;">foo</label>

How can I get Border to "hide leftovers" from my label?

Answer 1

I don’t know very well how "overflow:Hidden;" works, CSS is definitely not my thing. From what I researched about it, when the content of the text is too large, it will cut and hide the text, as in that link. If that’s what you want to do, I ran a simulation.

The ultimate goal is:

The first step is to understand that if the maximum width and height is not set, the label and border will expand to occupy the entire area of the container they are, therefore, this code generates the image below:

<Window x:Class="WpfApp1.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:WpfApp1"
        mc:Ignorable="d"
        Title="MainWindow" Height="350" Width="525">
    <Grid>
        <Border BorderThickness="0" Background="Transparent" CornerRadius="12">
            <Label Background="Red" Content="Foo 1234561561f65d1s6f" />
        </Border>
    </Grid>
</Window>

There are two situations, I imagine you used Cornerradius="12" on the border because you want the corners rounded, right? If it is, you need to change your code for it:

<Window x:Class="WpfApp1.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:WpfApp1"
        mc:Ignorable="d"
        Title="MainWindow" Height="350" Width="525">
    <Grid>
        <Border BorderThickness="0" Background="Red" CornerRadius="12">
            <Label Content="Foo 1234561561f65d1s6f" />
        </Border>
    </Grid>
</Window>

And it will have that result:

Finally, to restrict the label size, just insert the Width and Height properties as in the code below:

<Window x:Class="WpfApp1.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:WpfApp1"
        mc:Ignorable="d"
        Title="MainWindow" Height="350" Width="525">
    <Grid>
        <Border BorderThickness="0" Background="Red" Width="50" Height="30" CornerRadius="12">
            <Label Content="Foo 1234561561f65d1s6f" />
        </Border>
    </Grid>
</Window>

And the end result is this:

A tip out of your question:

If you are going to use the label only to present text, exchange for Textblock, for even performance reasons.

<Window x:Class="WpfApp1.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:WpfApp1"
        mc:Ignorable="d"
        Title="MainWindow" Height="350" Width="525">
    <Grid>
        <Border BorderThickness="0" Background="Red" Width="50" Height="30" CornerRadius="12">
            <TextBlock Text="Foo 1234561561f65d1s6f" VerticalAlignment="Center" Margin="3" />
        </Border>
    </Grid>
</Window>

I hope I understand your question, if not this, post a photo of the result with css that I see if I can help you.