Как сделать дочерний элемент ограниченным по размеру его родителем в WPF?

Question

У меня есть StackPanel, который больше, чем его родитель Grid.Я подтвердил, что используя Snoop WPF Spy.Width s установлены по умолчанию.Как его ограничить?

Мне не нравится решение ViewBox, потому что оно уменьшает мой текст, и я хочу, чтобы оно было обёрнуто / обрезано.* XAML согласно запросу

<Grid>
    <StackPanel
        Orientation="Horizontal">
        <Border
            BorderBrush="Black"
            BorderThickness="1"
            Width="{ Binding BorderScreenShot }"
            Margin="0,-8,0,0">
            <Image
                ToolTip="Some Text"
                Cursor="Hand"
                Source="{ Binding Image }"
                Stretch="Fill"
                Visibility="{ Binding ImageVisibility }"
                MouseLeftButtonUp="Image_MouseLeftButtonUp" />
        </Border>
        <StackPanel
            Orientation="Vertical"
            Margin="10,0,0,0">
            <TextBlock
                Text="{ Binding Name }"
                TextWrapping="Wrap" />
            <TextBlock
                Text="{ Binding LongText }"
                TextWrapping="Wrap" />
            <StackPanel
                Orientation="Horizontal">
                <TextBlock
                    Text="{ Binding Category }" />
                <TextBlock
                    Text="{ Binding Version }" />
            </StackPanel>
        </StackPanel>
    </StackPanel>
</Grid>

Answer 1

Вы можете попробовать изменить StackPanel на DockPanel (с соответствующими свойствами DockPanel.Dock для дочерних элементов).

Это будет подражать эффекту StackPanel, но позволит ограничить дочерние элементы.

Или используйте WrapPanel вместо StackPanel.

StackPanel имеет бесконечный размер клиента, поэтому ничто внутри StackPanel не будет оборачиваться или обрезаться без установки явных размеров (вместо этого StackPanel просто увеличивается в соответствии с содержимым).

Answer 2

Если вы не хотите сжимать содержимое, на самом деле нет другого способа ограничить его, особенно с учетом изображений.

Это в значительной степени оставляет вас с ScrollViewer, который был разработан именно для этого сценария. Лично мне нравится сочетать возможность увеличения / уменьшения масштаба с функциональностью ScrollViewer. Это дает вашим пользователям большинство вариантов того, как они смотрят на ваш контент.

Answer 3

Дочерний элемент не может быть больше, чем его родительский элемент, если его содержимое не больше.Если вы хотите обрезать текст, вы можете использовать TextBlock.TextTrimming = WordEllipsis/CharacterEllipsis.Это приведет к желаемому поведению, если моя интерпретация вопроса верна.

Однако, это не работает должным образом с StackPanel.Как следует из другого ответа, вы можете использовать DockPanel или Grid для упорядочения содержимого.

В качестве альтернативы вы можете обернуть StackPanel в ScrollViewer и использовать полосу прокрутки для обработки переполнения.

Обновление Это должно исправить

    <DockPanel>
    <Border    
        DockPanel.Dock="Left"
        BorderBrush="Black"            
        BorderThickness="1"            
        Width="{ Binding BorderScreenShot }"           
        Margin="0,-8,0,0">
        <Image                ToolTip="Some Text"                Cursor="Hand"                Source="{ Binding Image }"                Stretch="Fill"                Visibility="{ Binding ImageVisibility }"                MouseLeftButtonUp="Image_MouseLeftButtonUp" />
    </Border>
    <StackPanel            
            DockPanel.Dock="Bottom"
            Orientation="Horizontal">
        <TextBlock                    Text="{ Binding Category }" />
        <TextBlock                    Text="{ Binding Version }" />
    </StackPanel>
    <TextBlock             
        DockPanel.Dock="Top"
        Text="{ Binding Name }"                
        TextWrapping="Wrap" />
    <TextBlock                
        Text="{ Binding LongText }"                
        TextTrimming="WordEllipsis"
        TextWrapping="Wrap" />
</DockPanel>