2014-02-06 19 views
1

我有一個使用MVVM模式的.NET 4.0 WPF應用程序,並且我無法在其中一個屏幕(UserControl as View)上實現所需的結果。我已經清除了大部分頁面以顯示問題的核心。該頁面由三行一列的網格組成。第一行包含標題文本,最後一行包含「保存」按鈕。中間一行包含一行和一列的網格,並在ItemsControl中使用自定義用戶控件的數據模板顯示ObservableCollection。在集合中有十個項目,我希望它們顯示在兩列和五行,所以我有一個WrapPanel作爲ItemsPanelTemplate。WPF ItemsControl內容裁剪而不是滾動

我希望ItemsControl在可用空間內滾動,但它正在擴展到內容大小,並且大部分內容正在從頁面底部剪切掉。

我列出了用於ObservableCollection用作數據模板的用戶控件的XAML,以及下面的主頁面的XAML。任何幫助是極大的讚賞。

<UserControl x:Class="OIL.UserControls.ShopNotes.ShopNoteComponent" 
     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" 
     mc:Ignorable="d" 
     d:DesignHeight="120" d:DesignWidth="150"> 
<Grid> 
    <Grid.RowDefinitions> 
     <RowDefinition /> 
    </Grid.RowDefinitions> 
    <Grid.ColumnDefinitions> 
     <ColumnDefinition /> 
    </Grid.ColumnDefinitions> 
    <Border Grid.Row="0" Grid.Column="0" Width="140" Margin="5,5,5,5" HorizontalAlignment="Center" VerticalAlignment="Top" BorderBrush="Black" BorderThickness="1" CornerRadius="5"> 
     <StackPanel Width="120" Margin="0,5,0,5" HorizontalAlignment="Center" VerticalAlignment="Top" Orientation="Vertical"> 
      <Image Height="25" Width="30" HorizontalAlignment="Left" Source="/OIL;component/Images/BlueCam.png"> 
       <Image.ToolTip> 
        <Image Source="{Binding Path=ToolTipImagePath}" /> 
       </Image.ToolTip> 
      </Image> 
      <Label Style="{DynamicResource LargeText}" Content="{Binding Path=ComponentTitle}" /> 
      <CheckBox Width="80" Margin="0,5,0,5" HorizontalAlignment="Left" Style="{DynamicResource NormalText}" Content=" Mandatory?" 
         IsChecked="{Binding Path=ComponentMandatory, Mode=TwoWay}" 
         IsEnabled="{Binding Path=ComponentSelected}" /> 
      <CheckBox Width="15" Margin="0,5,0,5" HorizontalAlignment="Center" 
         IsChecked="{Binding Path=ComponentSelected, Mode=TwoWay}" /> 
     </StackPanel> 
    </Border> 
</Grid> 

這裏是主要的XAML頁面:

<UserControl x:Class="OIL.View.ConfiguratorViews.Configurator_ShopNotes_Tab" 
     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:igWPF="http://infragistics.com/Editors" 
     xmlns:uc="clr-namespace:OIL.UserControls.ShopNotes" 
     mc:Ignorable="d" 
     d:DesignHeight="570" d:DesignWidth="866"> 
<UserControl.Resources> 
    <BooleanToVisibilityConverter x:Key="BooleanToVisibilityConverter" /> 
    <DataTemplate x:Key="ShopNotesComponentsTemplate"> 
     <uc:ShopNoteComponent /> 
    </DataTemplate> 
</UserControl.Resources> 
<Border Margin="10" CornerRadius="13" BorderThickness="3" BorderBrush="#FF666666"> 
    <Grid> 
     <Grid.RowDefinitions> 
      <RowDefinition Height="40" /> 
      <RowDefinition Height="*" /> 
      <RowDefinition Height="50" /> 
     </Grid.RowDefinitions> 
     <Grid.ColumnDefinitions> 
      <ColumnDefinition Width="*" /> 
     </Grid.ColumnDefinitions> 
     <StackPanel Grid.Row="0" Grid.Column="0" Orientation="Horizontal"> 
      <Button Height="30" Width="75" Margin="10,5,0,5" HorizontalAlignment="Center" VerticalAlignment="Center" Background="{x:Null}" 
        Command="{Binding Path=AddNewTemplateCommand}" 
        Content="Add" /> 
      <Button Height="30" Width="75" Margin="10,5,0,5" HorizontalAlignment="Center" VerticalAlignment="Center" Background="{x:Null}" 
        Command="{Binding Path=EditTemplateCommand}" 
        Content="Edit" /> 
      <Grid Margin="10,5,0,5"> 
       <Grid.RowDefinitions> 
        <RowDefinition Height="Auto" /> 
       </Grid.RowDefinitions> 
       <Grid.ColumnDefinitions> 
        <ColumnDefinition Width="*" /> 
       </Grid.ColumnDefinitions> 
       <StackPanel Grid.Row="0" Grid.Column="0" Orientation="Horizontal" Visibility="{Binding Path=IsNewTemplate, Converter={StaticResource BooleanToVisibilityConverter}}"> 
        <TextBox Height="30" Width="250" HorizontalAlignment="Left" VerticalAlignment="Center" Style="{DynamicResource NormalText}" Text="{Binding Path=TemplateDescription}" /> 
       </StackPanel> 
       <StackPanel Grid.Row="0" Grid.Column="0" Orientation="Horizontal" Visibility="{Binding Path=IsEditedTemplate, Converter={StaticResource BooleanToVisibilityConverter}}"> 
        <igWPF:XamComboEditor Name="cmbShopNotesTemplate" Height="30" HorizontalAlignment="Left" VerticalAlignment="Center" 
              ItemsSource="{Binding Path=ShopNoteTemplates, Mode=TwoWay}" 
              DisplayMemberPath="CONFIGURATION_DESC" 
              SelectedItem="{Binding Path=SelectedShopNoteTemplate, ValidatesOnDataErrors=True}" 
              Value="Select Shop Notes Template" 
              NullText="Select Shop Notes Template" 
              IsEditable="True"> 
        </igWPF:XamComboEditor> 
       </StackPanel> 
      </Grid> 
     </StackPanel> 
     <Grid Grid.Row="1" Grid.Column="0"> 
      <Grid.RowDefinitions> 
       <RowDefinition Height="40" /> 
       <RowDefinition Height="*" /> 
      </Grid.RowDefinitions> 
      <Grid.ColumnDefinitions> 
       <ColumnDefinition Width="*" /> 
      </Grid.ColumnDefinitions> 
      <Label Grid.Row="0" Grid.Column="0" Height="30" Margin="0,5,0,5" HorizontalAlignment="Center" VerticalAlignment="Center" Style="{DynamicResource NormalText}" Content="* Hover over camera icon to view Shop Note component" /> 
      <ItemsControl Grid.Row="1" Grid.Column="0" HorizontalAlignment="Left" 
          ItemsSource="{Binding Path=ShopNoteComponents, UpdateSourceTrigger=PropertyChanged, Mode=TwoWay}" 
          ItemTemplate="{StaticResource ShopNotesComponentsTemplate}"> 
       <ItemsControl.ItemsPanel> 
        <ItemsPanelTemplate> 
         <WrapPanel Width="300" /> 
        </ItemsPanelTemplate> 
       </ItemsControl.ItemsPanel> 
      </ItemsControl> 
     </Grid> 
     <Button Grid.Row="2" Grid.Column="0" Height="30" Width="150" Margin="10,10,0,10" HorizontalAlignment="Left" VerticalAlignment="Center" 
      Background="{x:Null}" 
      Command="{Binding Path=SaveTemplateCommand}" 
      Content="Save" /> 
    </Grid> 
</Border> 

編輯:我已刪除了ScrollViewer中開始的問題,實際上張貼之間變化問題稱號。此外,注意到保存按鈕是在內部網格,而不是外部網格,所以我糾正了這一點(渲染沒有改變)。

回答

0

ItemsControl有自己的ScrollViewerListBox。您可以代替你ItemsControlListBox,或者乾脆把它包在一個ScrollViwer,小心翼翼地移動Grid.RowGrid.Column設置是這樣的:

<ScrollViewer Grid.Row="1" Grid.Column="0"> 
    <ItemsControl HorizontalAlignment="Left" ItemsSource="{Binding Path=Items, 
     UpdateSourceTrigger=PropertyChanged, Mode=TwoWay}" 
     ItemTemplate="{StaticResource ShopNotesComponentsTemplate}"> 
     <ItemsControl.ItemsPanel> 
      <ItemsPanelTemplate> 
       <WrapPanel Width="300" /> 
      </ItemsPanelTemplate> 
     </ItemsControl.ItemsPanel> 
    </ItemsControl> 
</ScrollViewer> 
+0

謝謝你,謝里登。這回答了我的問題,至少在我在這裏發佈的範圍內,我會將其標記爲答案。但是,我的問題稍微寬泛一點,而且還需要做更多的工作來實施解決方案。我將添加一個額外的答案,可能會幫助其他類似問題的人。 –

+0

@BrianHancock,儘管您希望返回以提供完整的解決方案令人欽佩,但請不要*發佈包含此問題中*而非*的詳細信息的解決方案,因爲這可能會混淆用戶。 – Sheridan

+0

我明白了。我刪除了我的回覆帖子。 –