0

Olá, sou novato com Windows Presentation Forms (WPF) e preciso saber como posso fazer o efeito de "overflow: hidden" que temos no CSS. Tenho o seguinte trecho de código:

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

A intenção do código acima seria recriar o código abaixo

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

Como posso fazer com que o Border "oculte as sobras" do meu label?

1 Resposta 1

1

Eu não conheço muito bem como funciona o "overflow:hidden;", CSS definitivamente não é minha praia. Pelo que eu pesquisei sobre ele, quando o conteúdo do texto for muito grande, ele vai cortar e esconder o texto, como nesse link. Se for isso mesmo que você quer fazer, fiz uma simulação.

O objetivo final é:

inserir a descrição da imagem aqui

O primeiro passo é entender que o se não for definido a largura e altura máxima, o label e o border vão expandir para ocupar toda a área do container que eles estiverem, portando, esse código gera a imagem abaixo:

<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>

inserir a descrição da imagem aqui

Aí tem duas situações, imagino que você tenha usado o CornerRadius="12" no border porque quer os cantos arredondados, certo? Se for, precisa mudar seu código para isso:

<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>

E terá esse resultado: inserir a descrição da imagem aqui

Por último, para restringir o tamanho do label, basta inserir as propriedades Width e Height como no código abaixo:

<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>

E o resultado final é esse:

inserir a descrição da imagem aqui

Um dica fora da sua pergunta:

Se você for usar o label apenas para apresentar texto, troca por TextBlock, por questões de desempenho mesmo.

<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>

inserir a descrição da imagem aqui

Espero ter entendido sua pergunta, se não for isso, posta uma foto do resultado com css que eu vejo se consigo te ajudar.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .