Встраивание ItemsControl в ScrollViewer - PullRequest
5 голосов
/ 07 июля 2011

Есть несколько вопросов, связанных с ScrollViewer, которые я исследовал, но ни один из них не помог мне.Это почти наверняка сводится к моему непониманию относительно размера элемента.Во-первых, мой XAML (кроме определения UserControl, это весь элемент управления):

<DockPanel Width="Auto">
            <ScrollViewer DockPanel.Dock="Top" HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Visible" CanContentScroll="True" BorderBrush="{DynamicResource PanelBorder}" BorderThickness="1,1,1,1" Background="{DynamicResource LightGradientBackgroundBrush}">
            <ItemsControl Focusable="false" Width="Auto"  MinHeight="30" ItemsSource="{Binding RequiredFields}" OverridesDefaultStyle="False">
                <ItemsControl.ItemsPanel>
                    <ItemsPanelTemplate>
                        <DockPanel />
                    </ItemsPanelTemplate>
                </ItemsControl.ItemsPanel>
                <ItemsControl.ItemTemplate>
                    <DataTemplate>
                        <Grid Margin="3,0,3,3">
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="110"/>
                                <ColumnDefinition Width="*"/>
                            </Grid.ColumnDefinitions>
                            <Label Content="{Binding Path=Header, Mode=OneTime}" Foreground="{DynamicResource SilverBorderColorBrush}" Grid.Column="0"/>
                            <TextBox Text="{Binding Path=Value}" HorizontalAlignment="Stretch" Foreground="{DynamicResource SilverBorderColorBrush}" Grid.Column="1"/>
                        </Grid>
                    </DataTemplate>
                </ItemsControl.ItemTemplate>
            </ItemsControl>
        </ScrollViewer>
        </DockPanel>

Этот элемент управления загружается на вкладке в качестве содержимого.Окно, в котором размещается вкладка, имеет изменяемый размер, и минимальный размер содержимого вкладки составляет 60. Я пытаюсь сделать так, чтобы средство прокрутки заполняло вкладку, но не выдвигало вкладку за пределы окна.При использовании вышеуказанного XAML избыточное содержимое приводит к увеличению высоты вкладки и появлению в окне полосы прокрутки, а не вкладки.

Средство просмотра прокрутки расширяется до размеров дочерних элементов, поэтому высота вкладки выталкивается наружу.Я хочу, чтобы средство просмотра прокрутки было зафиксировано по размеру вкладки, и чтобы содержимое в средстве просмотра прокрутки росло в границах средства просмотра прокрутки, чтобы полоса прокрутки отображалась, когда содержимого слишком много.

Где я иду не так?

Редактировать:

Проблема в высоте, а не в ширине.Ширина ведет себя как следует.Я изменил оболочку на сетку, как было предложено, но если я не установил свойство Высота, сетка будет расширена, чтобы соответствовать содержимому расширенного средства просмотра прокрутки, вызывая ту же проблему, что и раньше.

Обновленный XAML:

<Grid MinHeight="60" VerticalAlignment="Top">
        <Border BorderBrush="{DynamicResource PanelBorder}" BorderThickness="1,1,1,1">
        <ScrollViewer 
            HorizontalScrollBarVisibility="Auto" 
            VerticalScrollBarVisibility="Visible" 
            CanContentScroll="True" 
            BorderBrush="{DynamicResource PanelBorder}" 
            BorderThickness="1,1,1,1" 
            Background="{DynamicResource LightGradientBackgroundBrush}"
            >
            <ItemsControl Focusable="false" Width="Auto"  MinHeight="30" ItemsSource="{Binding RequiredFields}" OverridesDefaultStyle="False">
                <ItemsControl.ItemsPanel>
                    <ItemsPanelTemplate>
                        <StackPanel Orientation="Vertical" />
                    </ItemsPanelTemplate>
                </ItemsControl.ItemsPanel>
                <ItemsControl.ItemTemplate>
                    <DataTemplate>
                        <Grid Margin="3,0,3,3">
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="110"/>
                                <ColumnDefinition Width="*"/>
                            </Grid.ColumnDefinitions>
                            <Label Content="{Binding Path=Header, Mode=OneTime}" Foreground="{DynamicResource SilverBorderColorBrush}" Grid.Column="0"/>
                            <TextBox Text="{Binding Path=Value}" HorizontalAlignment="Stretch" Foreground="{DynamicResource SilverBorderColorBrush}" Grid.Column="1"/>
                        </Grid>
                    </DataTemplate>
                </ItemsControl.ItemTemplate>
                <ItemsControl.ItemContainerStyle>
                    <Style>
                        <Setter Property="DockPanel.Dock" Value="Top"/>
                    </Style>
                </ItemsControl.ItemContainerStyle>
            </ItemsControl>
        </ScrollViewer>
        </Border>
    </Grid>

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

Мой элемент управления размещен на вкладке,Он загружается динамически, и я не могу контролировать, как устроена вкладка.У меня такое ощущение, что элемент управления вкладками позволяет столько же места, сколько и содержимое внутри него.Поскольку сетка в моем элементе управления использует все доступное пространство, а вкладка предлагает столько места, сколько нужно дочернему контейнеру, а itemscontrol пытается использовать столько места, сколько предлагает сетка;Кульминацией этого является раскрытие вкладки, в которой содержится весь контент ItemsControl.

Если страница вкладки была создана, чтобы не расширяться, чтобы соответствовать ее содержимому, приведенные ниже решения будут работать.К сожалению, я не верю, что это так.

На это ушел целый день.Время двигаться дальше.

Ответы [ 2 ]

6 голосов
/ 07 июля 2011

Ах, да, тонкости макета WPF иногда являются болью. Что убивает вас, так это сочетание DockPanel и Width = "Auto" в вашем ItemsControl. DockPanel сообщает своим дочерним элементам, что у них может быть столько места, сколько они хотят для макета. Затем ваш ItemsControl сообщает своим детям то же самое. В конце концов, Window создает ScrollViewer для обработки негабаритного содержимого.

Замените внешнюю панель DockPanel на сетку, и все должно быть в порядке.

1 голос
/ 07 июля 2011

Чтобы прокрутка не была сильной, вам нужно использовать контейнер Grid

<Grid>            
<ScrollViewer DockPanel.Dock="Top" HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Visible" CanContentScroll="True" BorderBrush="{DynamicResource PanelBorder}" BorderThickness="1,1,1,1" Background="{DynamicResource LightGradientBackgroundBrush}">  
...
</ScrollViewer>        
</Grid>

DockPanel и StackPanel всегда растягиваются, чтобы соответствовать детям

Также посмотрите на эту заметку (я скопировал с здесь )

Панель X Размеры Y Размеры

Canvas No No

Док Да Да

StackPanel (По вертикали) Да Нет

StackPanel (По горизонтали) нет да

Сетка Да * Да *

WrapPanel № нет

  • За исключением случаев использования "Авто" строк и столбцов

Да в приведенной выше таблице означает «Дети растягиваются до доступного размера»

Нет в приведенной выше таблице означает "Дети нужного размера"

...