無法在動態生成的組框上設置包裹面板功能

Question

嗨，哥們:)我正在處理組合框和換行面板的WPF應用程序。看看標題，它似乎很簡單，但動態生成一組組後，我發現它很困難。這裏是場景：

我在我的項目中有2個xaml文件。一個是CodecView.xaml和CodecWidgetView.xaml。我已動態生成在啓動時4個groupboxes如下：

CodecView.xaml：

<UserControl.Resources> 
    <DataTemplate x:Key="CWDataTemplate"> 
     <WrapPanel> 
      <TextBlock Text="{Binding Description}" Margin="0,0,0,0"/> 
      <local:CodecWidgetView Margin="5,10,5,5"/> 
     </WrapPanel> 
    </DataTemplate> 
</UserControl.Resources> 

<Grid Grid.Row="0" >   
     <Grid Name="NumberofCodecs" > 
      <ItemsControl ItemTemplate="{StaticResource CWDataTemplate}" ItemsSource="{Binding CodecWidgets}"/> 
     </Grid>    
    </Grid> 

CodecWidgetView.xaml：

<Grid> 
    <GroupBox Height="Auto" HorizontalAlignment="Stretch" Margin="5,5,5,5" Name="groupBox1" VerticalAlignment="Stretch" Width="Auto"> 
     <Grid> 
      <Grid.RowDefinitions> 
       <RowDefinition /> 
       <RowDefinition /> 
       <RowDefinition /> 
       <RowDefinition /> 
      </Grid.RowDefinitions> 

      <Grid Grid.Row="0"> 
       <Grid.ColumnDefinitions> 
        <ColumnDefinition /> 
        <ColumnDefinition /> 
        <ColumnDefinition /> 
       </Grid.ColumnDefinitions> 
       <ToggleButton Name="FrequencyBox" Content="Master" Grid.Column="1" Height="25" Width="50" VerticalAlignment="Center" HorizontalAlignment="Center" Margin="0" /> 
       <ComboBox Grid.Column="2" ItemsSource="{Binding ModesList}" SelectedItem="{Binding SelectedModesList, Mode=OneWayToSource}" SelectedIndex="2" Height="23" HorizontalAlignment="Center" Margin="0,0,0,0" Name="comboBox2" VerticalAlignment="Center" Width="80" /> 
       <ComboBox Grid.Column="0" ItemsSource="{Binding FrequencyList}" SelectedItem="{Binding SelectedFrequencyList, Mode=OneWayToSource}" SelectedIndex="0" Height="23" HorizontalAlignment="Center" Margin="0,0,0,0" Name="comboBox1" VerticalAlignment="Center" Width="80" /> 
      </Grid> 

      <Grid Grid.Row="1"> 
       <Grid.ColumnDefinitions> 
        <ColumnDefinition /> 
        <ColumnDefinition /> 
        <ColumnDefinition /> 
        <ColumnDefinition /> 
       </Grid.ColumnDefinitions> 
       <RadioButton Style="{StaticResource {x:Type ToggleButton}}" Command="{Binding OneSixBitCommand}" Margin="0" Content="16 Bit" Name="OneSixBit" Height="25" Width="45" Grid.Column="0" HorizontalAlignment="Center" VerticalAlignment="Center" /> 
       <RadioButton Style="{StaticResource {x:Type ToggleButton}}" Command="{Binding TwoZeroBitCommand}" Margin="0" Content="20 Bit" Name="TwoZeroBit" Height="25" Width="45" Grid.Column="1" HorizontalAlignment="Center" VerticalAlignment="Center" /> 
       <RadioButton Style="{StaticResource {x:Type ToggleButton}}" Command="{Binding TwoFourBitCommand}" Margin="0" Content="24 Bit" Name="TwoFourBit" Height="25" Width="45" Grid.Column="2" HorizontalAlignment="Center" VerticalAlignment="Center" /> 
       <RadioButton Style="{StaticResource {x:Type ToggleButton}}" Command="{Binding ThreeTwoBitCommand}" Margin="0" Content="32 Bit" Name="ThreetwoBit" Height="25" Width="45" Grid.Column="3" HorizontalAlignment="Center" VerticalAlignment="Center" /> 
      </Grid> 

      <Grid Grid.Row="2"> 
       <Label Name="BitDelay" Content="Bit Delay" VerticalAlignment="Center" HorizontalAlignment="Center" Margin="0,0,205,0" Height="25" Width="55" /> 
       <Slider Height="23" HorizontalAlignment="Center" Minimum="0.0" Maximum="255.0" TickFrequency="1.0" Margin="95,0,0,0" Name="bitdelayslider" VerticalAlignment="Center" Width="160" /> 
       <TextBox Name="BitDelayValue" IsReadOnly="True" Text="{Binding ElementName=bitdelayslider,Path=Value, StringFormat=0.0}" Width="40" Height="20" Margin="0,0,110,0" HorizontalAlignment="Center" VerticalAlignment="Center" /> 
      </Grid> 

      <Grid Grid.Row="3"> 
       <Label Name="DBGain" Content="DB Gain" VerticalAlignment="Center" HorizontalAlignment="Center" Margin="0,0,205,0" Height="25" Width="55" /> 
       <TextBox Name="DBGainValue" IsReadOnly="True" Text="{Binding ElementName=dbgainslider,Path=Value, StringFormat=0.0}" Width="40" Height="20" Margin="0,0,110,0" HorizontalAlignment="Center" VerticalAlignment="Center" /> 
       <Slider Height="23" HorizontalAlignment="Center" Minimum="0.0" Maximum="59.5" TickFrequency="0.5" Margin="95,0,0,0" Name="dbgainslider" VerticalAlignment="Center" Width="160" /> 
      </Grid> 
     </Grid> 
    </GroupBox> 
</Grid> 

CodecViewModel.cs：是一個視圖模型CodecView.xaml類

public ObservableCollection<CodecWidgetViewModel> CodecWidgets { get; set; } 

    public CodecViewModel() 
    { 
     CodecWidgets = new ObservableCollection<CodecWidgetViewModel>(); 
     CodecWidgets.Add(new CodecWidgetViewModel { Description = "Location 8 - Dig Mic A" }); 
     CodecWidgets.Add(new CodecWidgetViewModel { Description = "Location 9 - Dig Mic B" }); 
     CodecWidgets.Add(new CodecWidgetViewModel { Description = "Location 10 - PCM A 3P3V" }); 
     CodecWidgets.Add(new CodecWidgetViewModel { Description = "Location 11 - PCM B 3P3V" }); 
    } 

個

CodecWidgetViewModel.cs：是一個視圖模型類CodecWidgetView.xaml

private string _description; 
    public string Description 
    { 
     get 
     { 
      return _description; 
     } 

     set 
     { 
      _description = value; 
      OnPropertyChanged("Description"); 
     } 
    } 

這在啓動時動態地生成4個groupboxes一個低於其它的。由於我的windowsize是minheight = 300和minwidth = 300，因此我設置了scrollviewer。因爲我已經使用Wrappanel，當我伸展它時，它應該像預期的那樣行事。這是當寬度被拉伸時，第二個組框應該到第一行的右側，同樣的情況發生在下面。

在啓動時：

當寬度被拉伸：

預期的行爲：

因此看預期的行爲，我想實現wrappanel的行爲:)儘管我已經使用了wrappanel，但它不像預期的那樣。請幫助:)

Answer 1

您已經使用了一個WrapPanel作爲ItemsSource中每個單獨項目的面板，這不是您想要的。

相反，您必須明確告訴ItemsControl使用WrapPanel作爲其所有子級的面板。

<ItemsControl ItemTemplate="{StaticResource CWDataTemplate}" ItemsSource="{Binding CodecWidgets}"> 
    <ItemsControl.ItemsPanel> 
     <ItemsPanelTemplate> 
      <WrapPanel /> 
     </ItemsPanelTemplate> 
    </ItemsControl.ItemsPanel> 
</ItemsControl>