2017-07-13 35 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

希望這會幫助別人!