Osadzanie elementu ItemsControl w ScrollViewer

Question

Jest kilka pytań dotyczących ScrollViewer, które zbadałem, ale żaden z nich nie zadziałał u mnie. To prawie na pewno sprowadza się do mojego braku zrozumienia co do wielkości elementu. Po pierwsze, mój XAML (inna niż definicja UserControl, to cała kontrola):

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

Ta kontrola jest ładowany w karcie jako treść. Okno, w którym znajduje się zakładka, jest skalowalne, a minimalny rozmiar zawartości karty to 60. Próbuję zrobić to, aby przewijany ekran wypełniał kartę, ale nie przesuwał karty poza obszar okna. W przypadku powyższego XAML nadmiar treści powoduje zwiększenie wysokości tabulatora, a pasek przewijania pojawia się w oknie, a nie w Tab.

Przeglądarka przewijania rozszerza się do rozmiarów jej elementów podrzędnych, co powoduje przesuwanie jej wysokości. To, czego chcę, to przewijarka, która ma być ustawiona na rozmiar karty, i zawartość w przewijaniu rośnie w granicach przewijania, tak, że pasek przewijania jest wyświetlany, gdy jest za dużo treści.

Gdzie się mylę?

Edit:

Problemem jest wysokość, a nie szerokości. Szerokość zachowuje się tak, jak powinna. Zmieniłem opakowanie do siatki zgodnie z sugestią, ale jeśli nie ustawię właściwości Wysokość, siatka rozszerzy się, aby dopasować zawartość rozszerzonego przewijania, powodując taki sam problem jak poprzednio.

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

Żadne z poniższych odpowiedzi przyczyniły się do tej pracy, ale jestem dość przekonany, że odpowiedzi będzie działać w większości przypadków.

Moja kontrola jest obsługiwana na stronie zakładki. Jest on ładowany dynamicznie i nie mam kontroli nad tym, jak zaprojektowana jest strona karty. Mam przeczucie, że kontrolka tabulacji pozwala na tyle przestrzeni, ile zawiera w niej treść. Ponieważ siatka kontrolna mówi, że zużywa całą dostępną przestrzeń, a strona z kartami oferuje tyle miejsca, ile potrzebuje kontener z dzieckiem, a itemcontrol próbuje wykorzystać tyle miejsca, ile oferuje siatka; kończy się ona rozwijaniem strony z zakładkami, która zawiera całą zawartość ItemsControl.

Jeśli strona karty została utworzona w taki sposób, aby nie była rozwijana w celu dopasowania jej zawartości, poniższe rozwiązania zadziałałyby. Niestety, nie sądzę, żeby tak było.

Jeden cały dzień zmarnowany na to. Czas by iść naprzód.

Answer 1

Ach tak zawiłości układu WPF jest ból czasami. To, co cię zabija, to połączenie DockPanel i Width = "Auto" w ItemControl. DockPanel mówi swoim dzieciom, że mogą mieć tyle miejsca, ile chcą dla układu. Your ItemsControl następnie mówi swoim dzieciom to samo. Ostatecznie Window tworzy ScrollViewer do obsługi przewymiarowanej zawartości.

Wymień zewnętrzny DockPanel na siatkę i wszystko powinno być dobrze.

Answer 2

Aby ScrollViewer nie siłą, trzeba stosować siatki

<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 i StackPanel zawsze rozciągnąć aby zmieścić to dzieci

Również spojrzeć na niniejszej noty (I zostały skopiowane z here)

panel X Wymiar Y Wymiar

Płótno Nie Nie

Dock Tak

StackPanel (w pionie) Tak Nie

StackPanel (poziomy) Nie Tak

Siatka Tak * Tak *

WrapPanel Nie Nie

• Z wyjątkiem sytuacji, gdy używane są wiersze i kolumny "Auto"

Tak w powyższej tabeli oznacza „Dzieci są rozciągnięte do dostępnej wielkości”

Nie w powyższej tabeli oznacza „Dzieci są ich pożądany rozmiar”