WPF Listbox dando un colpo di testa colonne

Question

Ho il seguente markup (XAML):

<ListBox Name="lbEurInsuredType" HorizontalContentAlignment="Stretch"> 
      <ListBox.ItemTemplate> 
       <DataTemplate> 
        <Grid Margin="0,2"> 
         <Grid.ColumnDefinitions> 
         <ColumnDefinition Width="100"></ColumnDefinition> 
          <ColumnDefinition Width="30"></ColumnDefinition><ColumnDefinition Width="2"></ColumnDefinition> 
          <ColumnDefinition Width="30"></ColumnDefinition> 
        </Grid.ColumnDefinitions> 
        <TextBlock Text="{Binding Title}"></TextBlock> 
        <TextBox Text="{Binding Uw}" Grid.Column="1"></TextBox> 
        <TextBox Text="{Binding Partner}" Grid.Column="3"></TextBox> 
       </Grid> 
      </DataTemplate></ListBox.ItemTemplate> 

     </ListBox> 

questo tutto sembra ok, ma ora al di sopra della colonna 1 e 3 voglio mettere un colpo di testa. Qualcuno può mostrarmi come aggiungo le intestazioni alle mie due colonne.

Answer 1

ListView è sicuramente l'opzione migliore, ma, se hai bisogno di usare una listbox, puoi modificare il template della listbox in questo modo.

<ListBox Name="lbEurInsuredType" HorizontalContentAlignment="Stretch"> 
     <ListBox.Template> 
      <ControlTemplate> 
       <DockPanel LastChildFill="True"> 
        <Grid DockPanel.Dock="Top" Height="30"> 
         <Grid.ColumnDefinitions> 
          <ColumnDefinition Width="100"></ColumnDefinition> 
          <ColumnDefinition Width="30"></ColumnDefinition> 
          <ColumnDefinition Width="2"></ColumnDefinition> 
          <ColumnDefinition Width="30"></ColumnDefinition> 
         </Grid.ColumnDefinitions> 
         <Label Grid.Column="0">Column 1</Label> 
         <Label Grid.Column="1">Column 2</Label> 
         <Label Grid.Column="2">Column 3</Label> 
         <Label Grid.Column="3">Column 4</Label> 
        </Grid> 
        <ItemsPresenter></ItemsPresenter> 
       </DockPanel> 
      </ControlTemplate> 
     </ListBox.Template> 
     <ListBox.ItemTemplate> 
      <DataTemplate> 
       <Grid Margin="0,2"> 
        <Grid.ColumnDefinitions> 
         <ColumnDefinition Width="100"></ColumnDefinition> 
         <ColumnDefinition Width="30"></ColumnDefinition> 
         <ColumnDefinition Width="2"></ColumnDefinition> 
         <ColumnDefinition Width="30"></ColumnDefinition> 
        </Grid.ColumnDefinitions> 
        <TextBlock Text="{Binding Title}"></TextBlock> 
        <TextBox Text="{Binding Uw}" Grid.Column="1"></TextBox> 
        <TextBox Text="{Binding Partner}" Grid.Column="3"></TextBox> 
       </Grid> 
      </DataTemplate> 
     </ListBox.ItemTemplate> 
    </ListBox> 

Answer 2

non ho eseguito questo modo ci potrebbe essere qualche problema con il codice, ma questo vi darà l'idea di aggiungere intestazioni alla ListBox

<ListBox Name="lbEurInsuredType" HorizontalContentAlignment="Stretch"> 
    <ListBox.ItemTemplate> 
     <DataTemplate> 
      <Grid Margin="0,2"> 
       <Grid.RowDefinitions> 
        <RowDefinition /> 
        <RowDefinition /> 
       </Grid.RowDefinitions> 
       <Grid.ColumnDefinitions> 
        <ColumnDefinition Width="100"></ColumnDefinition> 
        <ColumnDefinition Width="30"></ColumnDefinition> 
        <ColumnDefinition Width="2"></ColumnDefinition> 
        <ColumnDefinition Width="30"></ColumnDefinition> 
       </Grid.ColumnDefinitions> 

       <TextBlock Text="Title" ></TextBlock> 
       <TextBlock Text="Uw" Grid.Column="1" ></TextBox> 
       <TextBlock Text="Partner" Grid.Column="3" ></TextBox> 

       <TextBlock Text="{Binding Title}" Grid.Row="1"></TextBlock> 
       <TextBox Text="{Binding Uw}" Grid.Column="1" Grid.Row="1"></TextBox> 
       <TextBox Text="{Binding Partner}" Grid.Column="3" Grid.Row="1"></TextBox> 
      </Grid> 
     </DataTemplate> 
    </ListBox.ItemTemplate> 
</ListBox> 

Answer 3

Si potrebbe nido un'etichetta (o un blocco di testo per che importa) all'interno di una delle definizioni di colonna e stile di conseguenza.

<ColumnDefinition> 
    <Label Content="Header 1" FontSize="20"/> 
</ColumnDefinition> 

Answer 4

vi consiglio di utilizzare un ListView, invece, che più appropriato a voi caso, è possibile utilizzare un GridView dentro e definire le colonne necessarie allora restyling loro molto più facilmente

<ListView Name="lbEurInsuredType" HorizontalContentAlignment="Stretch" ItemsSource="{Binding Items}"> 
     <ListView.View> 
      <GridView> 
       <GridView.Columns> 
        <GridViewColumn> 
         <GridViewColumn.CellTemplate> 
          <DataTemplate> 
           <TextBlock Text="{Binding Title}"></TextBlock> 
          </DataTemplate> 
         </GridViewColumn.CellTemplate> 
         <GridViewColumn.Header> 
          <TextBlock Text="Column 1"></TextBlock> 
         </GridViewColumn.Header> 
        </GridViewColumn> 
        <GridViewColumn> 
         <GridViewColumn.CellTemplate> 
          <DataTemplate> 
           <TextBlock Text="{Binding Uw}"></TextBlock> 
          </DataTemplate> 
         </GridViewColumn.CellTemplate>       
        </GridViewColumn> 
        <GridViewColumn> 
         <GridViewColumn.CellTemplate> 
          <DataTemplate> 
           <TextBlock Text="{Binding Partner}"></TextBlock> 
          </DataTemplate> 
         </GridViewColumn.CellTemplate> 
         <GridViewColumn.Header> 
          <TextBlock Text="Column 3"></TextBlock> 
         </GridViewColumn.Header> 
        </GridViewColumn> 
       </GridView.Columns> 
      </GridView> 
     </ListView.View>      
    </ListView> 

Answer 5

Anche Casella di riepilogo può essere all'interno di un controllo utente con il modello dinamico dei dati

<Grid Style="{StaticResource TableHeader}"> 
     <Grid.Resources> 
      <Style TargetType="{x:Type Border}" BasedOn="{StaticResource TableBorder}"/> 
      <Style TargetType="{x:Type TextBlock}" BasedOn="{StaticResource TextTableHeader}"> 
       <Setter Property="TextWrapping" Value="Wrap"/> 
      </Style> 
     </Grid.Resources> 

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

     <Border BorderThickness="1"> 
      <TextBlock Text="Card"/> 
     </Border> 

     <Border Grid.Column="1" BorderThickness="0 1 1 1"> 
      <TextBlock Text="Type"/> 
     </Border> 

     <Border Grid.Column="2" BorderThickness="0 1 1 1"> 
      <TextBlock Text="Limit"/> 
     </Border> 

     <Border Grid.Column="3" BorderThickness="0 1 1 1"> 
      <TextBlock Text="Amount"/> 
     </Border> 

     <Border Grid.Column="4" BorderThickness="0 1 1 1"> 
      <TextBlock Text="Payment Due"/> 
     </Border> 

    </Grid> 

    <ListBox Style="{StaticResource ListBoxStyle}" 
      ItemsSource="{Binding Source}" 
      SelectedItem="{Binding SelectedItem}" 
      IsHitTestVisible="{Binding IsSelectionActive}" 
      ItemTemplate="{Binding ItemTemplate}" /> 
</Grid> 

Answer 6

ListBox non ha HeaderTemplate. ListView non è l'opzione migliore perché non supporta Width="*". Se sei disperato e vai a DataGrid potresti avere molto più del necessario. La soluzione è utilizzare HeaderedItemsControl

Basta modificare il nome della raccolta a cui si sta vincolando e modificare le proprietà di rilegatura.

<!-- actual XAML --> 
     <HeaderedItemsControl 

                ItemTemplate="{DynamicResource CorrugationItemTemplate}" 
                ItemsSource="{Binding CorrugationItemCollection}" 
                Style="{DynamicResource CorrugationStyle}"/> 


    <!-- this goes in the resource dict --> 

     <DataTemplate x:Key="CorrugationItemTemplate"> 
      <Grid Width="Auto" Background="#e1e1e1"> 
       <Grid.ColumnDefinitions> 
        <ColumnDefinition Width="*"/> 
        <ColumnDefinition Width="60"/> 
        <ColumnDefinition Width="60"/> 
        <ColumnDefinition Width="60"/> 
        <ColumnDefinition Width="60"/> 
       </Grid.ColumnDefinitions> 
       <Border Grid.Column="0" Background="Lime" > 
        <Label Content="{Binding RangeLabel}" /> 
       </Border> 
       <Border Grid.Column="1" Background="Orange" > 
        <Label Content="{Binding LeftPreGrind}" /> 
       </Border> 
       <Border Grid.Column="2" Background="Lime" > 
        <Label Content="{Binding RightPreGrind}" /> 
       </Border> 
       <Border Grid.Column="3" Background="Orange" > 
        <Label Content="{Binding LeftPostGrind}" /> 
       </Border> 
       <Border Grid.Column="4" Background="Lime" > 
        <Label Content="{Binding RightPostGrind}" /> 
       </Border> 
      </Grid> 
     </DataTemplate> 

     <Style TargetType="{x:Type HeaderedItemsControl}" x:Key="CorrugationStyle"> 
      <Setter Property="Template"> 
       <Setter.Value> 
        <ControlTemplate TargetType="{x:Type HeaderedItemsControl}"> 
         <Grid> 
          <Grid.ColumnDefinitions> 
           <ColumnDefinition Width="*"/> 
           <ColumnDefinition Width="60"/> 
           <ColumnDefinition Width="60"/> 
           <ColumnDefinition Width="60"/> 
           <ColumnDefinition Width="60"/> 
          </Grid.ColumnDefinitions> 
          <Grid.RowDefinitions> 
           <RowDefinition Height="20pt"/> 
           <RowDefinition Height="4*"/> 
          </Grid.RowDefinitions> 

          <Border Grid.Column="0" Background="Orange" > 
           <Label Content="Range" /> 
          </Border> 
          <Border Grid.Column="1" Background="Lime" > 
           <Label Content="LeftPreGrind" /> 
          </Border> 
          <Border Grid.Column="2" Background="Orange" > 
           <Label Content="RightPreGrind" /> 
          </Border> 
          <Border Grid.Column="3" Background="Lime" > 
           <Label Content="LeftPostGrind" /> 
          </Border> 
          <Border Grid.Column="4" Background="Orange" > 
           <Label Content="RightPostGrind" /> 
          </Border> 




          <Grid Grid.Row="1" Grid.ColumnSpan="5" Width="Auto" Height="Auto" Background="White"> 
           <ItemsPresenter/> 
          </Grid> 
         </Grid> 
        </ControlTemplate> 
       </Setter.Value> 
      </Setter> 
     </Style>