Hello, I'm new to Windows Presentation Forms (WPF) and I need to know how I can do the overflow: hidden effect we have in CSS. I have the following code snippet:
<Border BorderThickness="0" Background="Transparent" CornerRadius="12">
<Label Content="Foo" Background="Red"/>
</Border>
The intent of the code above would be to recreate the code below
<label style="overflow:hidden; background:red; border-radius:12;">foo</label>
How can I make Border "hide leftovers" from my label?
I do not really know how "overflow: hidden;" CSS works, it's definitely not my beach. From what I've researched about it, when the text content is too large, it will cut and hide the text, such as on this link. If this is what you want to do, I did a simulation.
The ultimate goal is:
Thefirststepistounderstandthatifthemaximumwidthandheightisnotdefined,thelabelandborderwillexpandtooccupytheentireareaofthecontainerthattheyareholding,thiscodegeneratestheimagebelow:
<Windowx: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>
Therearetwosituations,IimagineyouusedCornerRadius="12" on the border because you want the rounded corners, right? If so, you need to change your code to this:
<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 this result:
Finally,torestrictthesizeofthelabel,simplyinserttheWidthandHeightpropertiesasinthecodebelow:
<Windowx: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:
Atipoutsideyourquestion:
Ifyouaregoingtousethelabeljusttodisplaytext,switchtoTextBlockforperformancereasons.
<Windowx: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 to understand your question, if not, put a picture of the result with css that I see if I can help you.