2017-07-13 38 views
0

有人能告诉我如何在使用ItemsControl时正确对齐和调整控件的大小。在WPF中使用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>控制直接完成,这将是简单的,因为所有的控制都是直接在网格中,你会只是有以下几列定义来定义

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

我想我可以在使用SharedSizeGroup属性<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> 

这最终显示的是我的布局是这样的:

enter image description here

正如你看到的,我TextBox正确对齐基于最大TextBlock但是我的ItemsControl并不是一直延伸的。我想这是有道理的,因为它在ColumnDefinitions定义的同一个网格中。

现在,如果我移动ColumnDefinitions' out this grid to the outer grid and remove all instances of Grid.IsSharedSizeScope`,我想以下几点:

enter image description here

这再一次接近我所需要的是我的ItemsControl现在一路绵延,我已将其设置为Grid.ColumnSpan="2",而我的TextBox仍与TextBlock对齐,并且一直在延伸,但现在的问题是TextBlock应该更小,因为列设置为Auto,但它们表现得好像设置了列一样到*,我想我失去了p因为它已被删除,因此使用IsSharedSizeScope

现在,如果我添加IsSharedSizeScope="True"到外网,我得到以下结果:

enter image description here

再次,这是接近我想为我的ItemsControl的被拉伸,我的文本框也被拉伸,但他们不再是最大的TextBlock

最后,如果我添加Grid.IsSharedSizeScope="True"ItemsControl最初由@ MM8建议,

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

我得到如下:

enter image description here

这让我又回到了起点,虽然定义是不同的?

我需要实现以下目标:

enter image description here

我在做什么错?

谢谢。

+0

'ListView'会给你正是你想要的。 – XAMlMAX

回答

4

尝试设置ItemsControl本身的Grid.IsSharedSizeScope属性:

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

同步元素的宽度在一个ItemsControl:https://joshsmithonwpf.wordpress.com/2008/09/06/synchronizing-the-width-of-elements-in-an-itemscontrol/

+0

就是这样!谢谢。 – Thierry

+0

嗨@ mm8,我太快接受答案,它部分解决了我的问题。它现在基于最长的TextBlock正确地对齐我的TextBoxes,但它并没有将它们延伸到ItemsControl中。我尝试了不同的场景,但无法让它们伸展。我显然缺少别的东西。有任何想法吗?谢谢。 – Thierry

+0

你想伸展什么TextBox? – mm8

0

我终于找到了下面的文章中回答:WPF Tutorial - Grid Panel下该部分:“如何在多个网格上共享一列的宽度”。

按文章:

列和参与大小共享不尊重星上浆行。在大小分享场景中,Star尺寸被视为Auto。由于在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> 

而且结果现在终于看起来是正确的:

enter image description here

希望这会帮助别人!