如何使scrollviewer在这种情况下工作？

我的MVVM应用程序出现了一些问题。所以场景如下：如何使scrollviewer在这种情况下工作？

在我MainWindow.xaml，我都放在网格列一个ContentControl中，其内容是绑定到将被渲染到相应的View（在这种情况下，CurrentViewModel ，Overview.xaml）。
```
 <ContentControl Grid.Row="1" Grid.Column="1" Content="{Binding CurrentViewModel}"> 
```

在该特定视图（Overview.xaml）有多个用户控件放置一个StackPanel内。

<ScrollViewer CanContentScroll="True" VerticalScrollBarVisibility="Visible" HorizontalScrollBarVisibility="Visible"> 
<StackPanel CanVerticallyScroll="True" CanHorizontallyScroll="True"> 
    <views:DiagramView DataContext="{Binding Path=DiagramViewModel, Source={StaticResource Locator}}" /> 
    <views:IncomeCollectionView DataContext="{Binding Path=IncomesViewModel, Source={StaticResource Locator}}" /> 
    <views:ExpenseCollectionView DataContext="{Binding Path=ExpensesViewModel, Source={StaticResource Locator}}" /> 
    <views:CheckCollectionView DataContext="{Binding Path=ChecksViewModel, Source={StaticResource Locator}}" /> 
    <views:BalanceCollectionView DataContext="{Binding Path=BalancesViewModel, Source={StaticResource Locator}}" /> 
    <views:VacationCollectionView DataContext="{Binding Path=VacationsViewModel, Source={StaticResource Locator}}" /> 
    <views:KHCollectionView DataContext="{Binding Path=KhViewModel, Source={StaticResource Locator}}" /> 
    <views:OctaviaCollectionView DataContext="{Binding Path=OctaviaViewModel, Source={StaticResource Locator}}" /> 
</StackPanel> 
</ScrollViewer>

此的StackPanel中的每个用户控件有一个非常相似的外观（当然也有在XAML更多的东西）。 在我的应用程序中没有关于宽度或高度的常量值。

 <ListView ItemsSource="{Binding Source={StaticResource groupedCollection}}" SelectedItem="{Binding CurrentItem}"> 
     <ListView.GroupStyle> 
      <GroupStyle> 
       <GroupStyle.HeaderTemplate> 
        <DataTemplate> 
         <TextBlock Text="{Binding Items[0].CurrentCategory}" /> 
        </DataTemplate> 
       </GroupStyle.HeaderTemplate> 
      </GroupStyle> 
     </ListView.GroupStyle> 
     <ListView.ItemsPanel> 
      <ItemsPanelTemplate> 
       <UniformGrid Columns="12" Rows="1" /> 
      </ItemsPanelTemplate> 
     </ListView.ItemsPanel> 
     <ListView.ItemContainerStyle> 
      <Style> 
       <Setter Property="Grid.Column" Value="{Binding GeneratedColumn}"/> 
      </Style> 
     </ListView.ItemContainerStyle> 
     <ListView.ItemTemplate> 
      <DataTemplate> 
       <StackPanel> 
        <TextBlock Text="{Binding EncryptedAmount}" /> 
        <StackPanel Orientation="Horizontal"> 
         <TextBlock Text="Got paid on " /> 
         <TextBlock Text="{Binding Date}" /> 
        </StackPanel> 
        <Button Content="details" 
          Command="{Binding Path=DataContext.ShowDialogCommand, 
          RelativeSource={RelativeSource AncestorType={x:Type UserControl}}}" 
          CommandParameter="QuickEdit"/> 
        <Button Content="remove" Command="{Binding RemoveCommand}" CommandParameter="Income removed." /> 
       </StackPanel> 
      </DataTemplate> 
     </ListView.ItemTemplate> 
    </ListView>

的问题是，我似乎无法使垂直ScrollViewer中工作。它被显示，因为我使它可见，但它被禁用。很显然，StackPanel会无限增长，但是没有办法计算需要多少空间？因为大部分内容现在都被切断了。所以我试图把scrollviewer放在每一个可能的地方，但他们都被禁用。

 <Style TargetType="{x:Type ContentControl}"> 
      <Setter Property="Template"> 
       <Setter.Value> 
        <ControlTemplate TargetType="ContentControl"> 
         <ScrollViewer> 
          <ContentPresenter Cursor="{TemplateBinding Cursor}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" 
               Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" 
               Content="{TemplateBinding Content}" ContentTemplate="{TemplateBinding ContentTemplate}"/> 
         </ScrollViewer> 
        </ControlTemplate> 
       </Setter.Value> 
      </Setter> 
     </Style>

所以然后我尝试删除StackPanel实现并尝试使用Grid。不，它也行不通。很明显，我在这里错过了一些基础解决方案，但只是无法弄清楚。任何想法，将不胜感激，似乎是一个非常普遍的情况下诚实。干杯

<ScrollViewer CanContentScroll="True" 
       VerticalScrollBarVisibility="Visible" 
       HorizontalScrollBarVisibility="Visible"> 
    <Grid> 
     <Grid.RowDefinitions> 
      <RowDefinition /> 
      <RowDefinition /> 
      <RowDefinition /> 
      <RowDefinition /> 
      <RowDefinition /> 
      <RowDefinition /> 
      <RowDefinition /> 
      <RowDefinition /> 
     </Grid.RowDefinitions> 

     <views:DiagramView DataContext="{Binding Path=DiagramViewModel, Source={StaticResource Locator}}" /> 
     <views:IncomeCollectionView Grid.Row="1" DataContext="{Binding Path=IncomesViewModel, Source={StaticResource Locator}}" /> 
     <views:ExpenseCollectionView Grid.Row="2" DataContext="{Binding Path=ExpensesViewModel, Source={StaticResource Locator}}" /> 
     <views:CheckCollectionView Grid.Row="3" DataContext="{Binding Path=ChecksViewModel, Source={StaticResource Locator}}" /> 
      ...etc... 
    </Grid> 
</ScrollViewer>

编辑：DiagramView用户控件包含以下内容：

<UserControl x:Class="Expense.Manager.WPF.Views.DiagramView" 
     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
     xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
     xmlns:pie="clr-namespace:Expense.Manager.WPF.CustomPie" 
     xmlns:local="clr-namespace:Expense.Manager.WPF.Shared" 
     mc:Ignorable="d"> 
<UserControl.Resources> 
    <local:BoolToBrushConverter x:Key="BoolToBrushConverter" /> 
</UserControl.Resources> 

<Grid> 
    <Grid.ColumnDefinitions> 
     <ColumnDefinition Width="Auto" /> 
     <ColumnDefinition Width="Auto" /> 
     <ColumnDefinition Width="Auto" /> 
    </Grid.ColumnDefinitions> 

    <StackPanel> 
     <StackPanel Orientation="Horizontal"> 
      <TextBlock Text="Income this month: " /> 
      <TextBlock> 
       <TextBlock.Text> 
        <PriorityBinding FallbackValue="Retrieving data..."> 
         <Binding Path="EncryptedCurrentMonthIncome" Mode="TwoWay" IsAsync="True" /> 
        </PriorityBinding> 
       </TextBlock.Text> 
      </TextBlock> 
     </StackPanel> 
     <pie:PieChart Data="{Binding PieChartIncomeData, Mode=TwoWay}" Width="250" PieWidth="130" PieHeight="130" Height="140" /> 
    </StackPanel> 

    <StackPanel Grid.Row="0" Grid.Column="1"> 
     <StackPanel Orientation="Horizontal"> 
      <TextBlock Text="Expenses this month: " /> 
      <TextBlock> 
       <TextBlock.Text> 
        <PriorityBinding FallbackValue="Retrieving data..."> 
         <Binding Path="CurrentMonthExpense" Mode="TwoWay" IsAsync="True" /> 
        </PriorityBinding> 
       </TextBlock.Text> 
      </TextBlock> 
     </StackPanel> 
     <pie:PieChart Data="{Binding PieChartExpenseData, Mode=TwoWay}" Width="250" PieWidth="130" PieHeight="130" Height="140" /> 
    </StackPanel> 

    <StackPanel Grid.Column="2"> 
     <StackPanel Orientation="Horizontal"> 
      <TextBlock Text="{Binding VacationsLeft}" /> 
      <TextBlock Text=" days left" /> 
     </StackPanel> 
     <ItemsControl ItemsSource="{Binding VacationsPerYearCollection}"> 
      <ItemsControl.ItemsPanel> 
       <ItemsPanelTemplate> 
        <StackPanel Orientation="Horizontal" /> 
       </ItemsPanelTemplate> 
      </ItemsControl.ItemsPanel> 
      <ItemsControl.ItemTemplate> 
       <DataTemplate> 
        <Rectangle Margin="5, 0, 0, 0" Height="25" Width="4" Fill="{Binding Converter={StaticResource BoolToBrushConverter}}" /> 
       </DataTemplate> 
      </ItemsControl.ItemTemplate> 
     </ItemsControl> 

     <StackPanel Orientation="Horizontal"> 
      <TextBlock Text="Bank savings:" /> 
      <TextBlock Text="{Binding BankSavings}" /> 
     </StackPanel> 
    </StackPanel> 
</Grid>

IncomeCollectionView：

<UserControl x:Class="Expense.Manager.WPF.Views.IncomeCollectionView" 
     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
     xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
     xmlns:views="clr-namespace:Expense.Manager.WPF.Views" 
     mc:Ignorable="d"> 
<UserControl.Resources> 
    <CollectionViewSource x:Key="groupedCollection" IsLiveGroupingRequested="True" Source="{Binding Collection}"> 
     <CollectionViewSource.GroupDescriptions> 
      <PropertyGroupDescription PropertyName="CurrentCategory" /> 
     </CollectionViewSource.GroupDescriptions> 
    </CollectionViewSource> 
</UserControl.Resources> 
    <Grid> 
     <Grid.RowDefinitions> 
      <RowDefinition Height="Auto" /> 
      <RowDefinition Height="Auto" /> 
     </Grid.RowDefinitions> 

     <TextBlock Text="{Binding DisplayName}" Foreground="White" FontWeight="SemiBold" Padding="5" Background="SteelBlue" /> 
      <ListView Grid.Row="1" ItemsSource="{Binding Source={StaticResource groupedCollection}}" SelectedItem="{Binding CurrentItem}"> 
       <ListView.GroupStyle> 
        <GroupStyle> 
         <GroupStyle.HeaderTemplate> 
          <DataTemplate> 
           <TextBlock Text="{Binding Items[0].CurrentCategory}" /> 
          </DataTemplate> 
         </GroupStyle.HeaderTemplate> 
        </GroupStyle> 
       </ListView.GroupStyle> 
       <ListView.ItemsPanel> 
        <ItemsPanelTemplate> 
         <UniformGrid HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Columns="12" Rows="1" /> 
        </ItemsPanelTemplate> 
       </ListView.ItemsPanel> 
       <ListView.ItemContainerStyle> 
        <Style> 
         <Setter Property="Grid.Column" Value="{Binding GeneratedColumn}"/> 
        </Style> 
       </ListView.ItemContainerStyle> 
       <ListView.ItemTemplate> 
        <DataTemplate> 
         <Grid> 
          <Grid.RowDefinitions> 
           <RowDefinition Height="Auto" /> 
           <RowDefinition Height="Auto" /> 
           <RowDefinition Height="Auto" /> 
           <RowDefinition Height="Auto" /> 
          </Grid.RowDefinitions> 

          <TextBlock Text="{Binding EncryptedAmount}" /> 
          <TextBlock Grid.Row="1" Text="{Binding Date}" /> 
          <Button Grid.Row="2" Content="details" 
           Command="{Binding Path=DataContext.ShowDialogCommand, 
           RelativeSource={RelativeSource AncestorType={x:Type UserControl}}}" 
           CommandParameter="QuickEdit"/> 
          <Button Grid.Row="3" Content="remove" Command="{Binding RemoveCommand}" CommandParameter="Income removed." /> 

         </Grid> 
        </DataTemplate> 
       </ListView.ItemTemplate> 
      </ListView> 
    </Grid>

和它在哪里使用：为什么在调整窗口本身的大小后，listview没有调整自己的大小？

<ScrollViewer CanContentScroll="True" HorizontalScrollBarVisibility="Visible" VerticalScrollBarVisibility="Visible"> 
    <Grid HorizontalAlignment="Stretch" VerticalAlignment="Stretch"> 
     <Grid.RowDefinitions> 
      <RowDefinition Height="Auto" /> 
     </Grid.RowDefinitions> 

     <views:IncomeCollectionView Grid.Row="1" DataContext="{Binding Path=IncomesViewModel, Source={StaticResource Locator}}" /> 
    </Grid> 
</ScrollViewer>

来源

2014-10-07 user1930132

我试图丢弃StackPanel执行，并用Grid试了一下。不，它也行不通。

除了最后一句，这几乎是正确的。使用Grid是答案的一半，因为StackPanel没有功能调整其项目...您只需通知ScrollViewer何时滚动。就拿这个例子：

<ScrollViewer> 
    <Grid> 
     <Grid.RowDefinitions> 
      <RowDefinition Height="50" /> 
      <RowDefinition Height="50" /> 
      <RowDefinition Height="50" /> 
      <RowDefinition Height="50" /> 
      <RowDefinition Height="50" /> 
      <RowDefinition Height="50" /> 
      <RowDefinition Height="50" /> 
     </Grid.RowDefinitions> 
     <Rectangle Fill="Cyan" /> 
     <Rectangle Grid.Row="1" Fill="Green" /> 
     <Rectangle Grid.Row="2" Fill="Red" /> 
     <Rectangle Grid.Row="3" Fill="Blue" /> 
     <Rectangle Grid.Row="4" Fill="Orange" /> 
     <Rectangle Grid.Row="5" Fill="Purple" /> 
     <Rectangle Grid.Row="6" Fill="Yellow" /> 
    </Grid> 
</ScrollViewer>

此XAML将使ScrollViewer ScrollBar出现（一旦Window.Height足够小），但如果你删除RowDefinition.Height值（从而使每行整个Grid.Height的比例），你会看到您之前没有ScrollBar的情况。

现在，我们都不想将常量值硬编码到我们的UI中，但是您可以使用RowDefinition.Height属性上的Auto设置来代替。不同于这些Rectangle S，你的控件都将有一定的Height，让您的解决方案是设置每个Grid.RowDefinition S的是这样的：

<RowDefinition Height="Auto" />

，因为他们需要的Grid内这将提供给控制尽可能多的空间，因此（希望）他们将有更多Height在一起比ScrollViewer，因此ScrollViewer将显示其垂直ScrollBar。

来源

2014-10-07 11:12:04 Sheridan

没有，不起作用不幸，如下所示：dropbox.com/s/b6e5uj1coxtvi0t/grid.jpg?dl=0 – user1930132 2014-10-07 17:04:17

甚至不能使用1个UserControl。水平滚动条工作正常，但垂直被禁用.' ' – user1930132 2014-10-07 17:52:43

'嘿，让我们清楚...也许*你的代码*不起作用，但*此代码*工作得很好。如果你以前没有，现在就试试吧......你会发现它确实有效。我已经解释了如何解决你的问题。 'ScrollViewer'内容只需报告一个比'ScrollViewer.Height'更大的Total [Height]。 – Sheridan 2014-10-07 19:22:44

如何使scrollviewer在这种情况下工作？

回答

相关问题