WPFでItemsControlを使用すると、コントロールが正しく整列する

Question

ItemsControlを使用するときに、コントロールを正しく整列してサイズを変更する方法を教えてもらえますか？

私のようなもので終わるためにObservableCollectionで定義されている複数のフィールドの右に左に記述してTextBoxを持ちたい：

First Name: [FirstNameTextBox] 
Last Name:  [LastNameTextBox] 
Date of Birth: [DobTextBox] 

ではなく、私はこれを取得しています：

First Name: [FirstNameTextBox] 
Last Name: [LastNameTextBox] 
Date of Birth: [DobTextBox] 

私は、すべてのテキストボックスが最大<TextBlock>に基づいて整列させたいです。これは<Grid>コントロールで直接行われた場合は、すべてのコントロールがグリッドに直接であり、あなたはちょうど私が私がでSharedSizeGroupプロパティを使用すると考えていた

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

を定義し、次の列の定義を持っているだろうと、それはまっすぐ進むだろう<Grid>でも、サイズは正しく変更されません。代わりに<Grid>には<TextBlock>ストレッチが表示されます。

ここに私のコードです：

<Grid Grid.IsSharedSizeScope="True" Grid.Row="1"> 
    <Grid.ColumnDefinitions> 
     <ColumnDefinition Width="Auto" SharedSizeGroup="Labels" /> 
     <ColumnDefinition Width="*" SharedSizeGroup="InputControls" /> 
    </Grid.ColumnDefinitions> 
    <ItemsControl Grid.Row="1" ItemsSource="{Binding SelectedTemplate.Fields}"> 
     <ItemsControl.ItemTemplate> 
      <DataTemplate> 
       <Grid> 
        <Grid.ColumnDefinitions> 
         <ColumnDefinition SharedSizeGroup="Labels"/> 
         <ColumnDefinition SharedSizeGroup="InputControls"/> 
        </Grid.ColumnDefinitions> 
        <TextBlock Text="{Binding Path=Label}" Grid.Column="0" Margin="5" 
        VerticalAlignment="Center" Background="Red" /> 
        <TextBox Text="{Binding Path=Value}" Grid.Column="1" Margin="5" 
        VerticalAlignment="Center" Background="Blue" /> 
       </Grid> 
      </DataTemplate> 
     </ItemsControl.ItemTemplate> 
    </ItemsControl> 
</Grid> 

私はこの問題を解決することができますどのように任意のアイデアは？

ありがとうございました。

UPDATE1：私は必要なときにこれを動作させることはできません。これは私がこれまで持っているものです：

<Grid Grid.Row="1" Background="Purple"> 
    <Grid.ColumnDefinitions> 
     <ColumnDefinition Width="*" SharedSizeGroup="Overall" /> 
    </Grid.ColumnDefinitions> 
    <Grid> 
     <Grid.ColumnDefinitions> 
      <ColumnDefinition SharedSizeGroup="Labels" Width="Auto" /> 
      <ColumnDefinition SharedSizeGroup="InputControls" Width="*" /> 
     </Grid.ColumnDefinitions> 
     <ItemsControl ItemsSource="{Binding SelectedTemplate.Fields}"        
        Background="Yellow" 
        Grid.IsSharedSizeScope="True"> 
      <ItemsControl.ItemTemplate> 
       <DataTemplate> 
        <Grid Background="Green"> 
         <Grid.ColumnDefinitions> 
          <ColumnDefinition SharedSizeGroup="Labels"/> 
          <ColumnDefinition SharedSizeGroup="InputControls"/> 
         </Grid.ColumnDefinitions> 
         <TextBlock Text="{Binding Path=Label}" 
           Grid.Column="0" 
           Margin="5" 
           VerticalAlignment="Center"/> 
         <TextBox Text="{Binding Path=Name}" 
          Grid.Column="1" 
          Margin="5" 
          VerticalAlignment="Center"/> 
        </Grid> 
       </DataTemplate> 
      </ItemsControl.ItemTemplate> 
     </ItemsControl> 
    </Grid> 

これは、この方法で私のレイアウトを表示し終わる：

あなたが見ることができるように、私のTextBoxが正しく最大TextBlockに基づいて整列されています私のItemsControlsはずっと伸​​びていません。私はColumnDefinitionsが定義されているのと同じグリッド内にあるので意味があると思います。私はColumnDefinitions' out this grid to the outer grid and remove all instances of Grid.IsSharedSizeScope`を移動した場合

は今、私は以下の推測：再び私のItemsControlには、今、私のようにすべての方法を伸ばしているように私は必要なものに近い

そのGrid.ColumnSpan="2"を設定し、私のTextBoxはまだTextBlockに揃えられていますが、今まで通り伸びていますが、今度はAutoに設定されているようにTextBlockが小さくなるはずですが、あたかもその列が設定されているかのように振る舞います*へと私はpを失っていると思うそれが削除されて以来、IsSharedSizeScopeを使用してください。

今、私は外側グリッドにIsSharedSizeScope="True"を追加した場合、私は次のような結果を得る：私のItemsControlが引き伸ばされるよう

再び

を、これは私が欲しいものに近い、私のテキストボックスもストレッチされているが、それらは最大のTextBlockに調整されなくなりました。私はGrid.IsSharedSizeScope="True"ItemsControlに追加した場合

最後に、当初

<Grid Grid.Row="1" Background="Purple" Grid.IsSharedSizeScope="True"> 
    <Grid.ColumnDefinitions> 
     <ColumnDefinition SharedSizeGroup="Labels" Width="Auto" /> 
     <ColumnDefinition SharedSizeGroup="InputControls" Width="*" /> 
    </Grid.ColumnDefinitions> 
    <Grid Grid.ColumnSpan="2" > 
     <ItemsControl ItemsSource="{Binding SelectedTemplate.Fields}"        
         Background="Yellow" 
         Grid.IsSharedSizeScope="True"> 
      <ItemsControl.ItemTemplate> 
       <DataTemplate> 
        <Grid Background="Green"> 
         <Grid.ColumnDefinitions> 
          <ColumnDefinition SharedSizeGroup="Labels"/> 
          <ColumnDefinition SharedSizeGroup="InputControls"/> 
         </Grid.ColumnDefinitions> 
         <TextBlock Text="{Binding Path=Label}" 
           Grid.Column="0" 
           Margin="5" 
           VerticalAlignment="Center"/> 
         <TextBox Text="{Binding Path=Name}" 
          Grid.Column="1" 
          Margin="5" 
          VerticalAlignment="Center"/> 
        </Grid> 
       </DataTemplate> 
      </ItemsControl.ItemTemplate> 
     </ItemsControl> 
    </Grid> 

    <!--<TextBlock Text="Invoice Number" Grid.Column="0" Margin="5" VerticalAlignment="Center"/> 
     <TextBox Text="InvoiceNumber" Grid.Column="1" Margin="5" VerticalAlignment="Center"/>--> 
</Grid> 

は、私は、次の取得は、@ MM8によって提案：にもかかわらず、振り出しに戻って私をもたらし

定義は異なっていますか？

は、私は次のことを達成する必要があります。

私が間違って何をやっています？

ありがとうございました。

Answer 1

はItemsControl自体のGrid.IsSharedSizeScopeプロパティを設定してください：ItemsControlの中の要素の幅を同期

<ItemsControl Grid.Row="1" ItemsSource="{Binding SelectedBarcodeTemplate.Fields}" 
       Grid.IsSharedSizeScope="True"> 

：https://joshsmithonwpf.wordpress.com/2008/09/06/synchronizing-the-width-of-elements-in-an-itemscontrol/

Answer 2

私は最終的には、以下の記事に答えが見つかりました：WPF Tutorial - Grid Panel下「複数のグリッドにまたがる列の幅を共有する方法」のセクション

記事を1として：サイズ共有に参加

列と行は、スター・サイジングを尊重しません。サイズ共有シナリオでは、スターサイジングは自動として扱われます。 SharedSizeカラム内のTextBlocksのTextWrappingは機能しないので、最後のカラムを共有サイズから除外できます。これはしばしば問題を解決するのに役立ちます。 XAML

だから私の最終的には、次のようになります。

<Grid Grid.Row="1" Background="Purple" > 
    <Grid> 
     <Grid.ColumnDefinitions> 
      <ColumnDefinition SharedSizeGroup="Labels" Width="Auto" /> 
      <ColumnDefinition SharedSizeGroup="InputControls" Width="*" /> 
     </Grid.ColumnDefinitions> 
    </Grid> 

    <ItemsControl ItemsSource="{Binding SelectedBarcodeTemplate.Fields}" 
        Background="Yellow" 
        Grid.IsSharedSizeScope="True"> 
     <ItemsControl.ItemTemplate> 
      <DataTemplate> 
       <Grid Background="Green" ShowGridLines="True"> 
        <Grid.ColumnDefinitions> 
         <ColumnDefinition SharedSizeGroup="Labels"/> 
         <ColumnDefinition /> 
        </Grid.ColumnDefinitions> 
        <TextBlock Text="{Binding Path=Label}" 
           Grid.Column="0" 
           Margin="5" 
           VerticalAlignment="Center"/> 
        <TextBox Text="{Binding Path=Name}" 
          Grid.Column="1" 
          Margin="5" 
          VerticalAlignment="Center" 
          HorizontalAlignment="Stretch"/> 
       </Grid> 
      </DataTemplate> 
     </ItemsControl.ItemTemplate> 
    </ItemsControl> 
</Grid> 

と結果は今、ようやく正しいよう：

が、これは他の人の役に立てば幸い！