Search code examples
wpflistboxitemscontrol

How do I put a header on the ItemsControl?


I want to show a product list with a header like a DataGrid. But I don't know how to show heading in the listbox.

<ListBox ItemsSource="{Binding CustomSalesProducts, Mode=TwoWay}" HorizontalContentAlignment="Stretch" VerticalContentAlignment="Stretch" Template="{DynamicResource ListBox}" Style="{DynamicResource ListBoxStyle1}" BorderBrush="{DynamicResource BorderBrush}" Foreground="{DynamicResource ForegroundBrush}" FontFamily="Palatino Linotype" FontSize="13.333" ItemContainerStyle="{DynamicResource ListBoxItemStyle}" SelectedValue="{Binding CurrentCustomSale, Mode=TwoWay}">
        <ItemsControl.ItemsPanel>
            <ItemsPanelTemplate>
                <VirtualizingStackPanel CanHorizontallyScroll="True" CanVerticallyScroll="True" Orientation="Vertical"/>
            </ItemsPanelTemplate>
        </ItemsControl.ItemsPanel>
        <ItemsControl.ItemTemplate>
            <DataTemplate>
                <StackPanel>

                    <StackPanel Orientation="Horizontal">
                        <TextBox Text="{Binding ProductName, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" Margin="{StaticResource Margin4}" Style="{DynamicResource MiniTextBoxStyle}" ToolTip="Quantity" KeyUp="TextBox_KeyUp"/>
                        <TextBox Text="{Binding OrderQty, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" Margin="{StaticResource Margin4}" Style="{DynamicResource MiniTextBoxStyle}" ToolTip="Quantity" KeyUp="TextBox_KeyUp">
                        </TextBox>
                            <TextBox Text="{Binding UnitSalePrice, Mode=TwoWay}" Style="{DynamicResource MiniTextBoxStyle}"  Margin="{StaticResource Margin4}" ToolTip="Price" IsReadOnly="True" />
                        <TextBox Text="{Binding MainDiscount, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" Margin="{StaticResource Margin4}" Style="{DynamicResource MiniTextBoxStyle}" ToolTip="Discount" KeyUp="TextBox_KeyUp"/>
                        <TextBox Text="{Binding Discount, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" Margin="{StaticResource Margin4}" IsReadOnly="True" Style="{DynamicResource MiniTextBoxStyle}" ToolTip="Line Discount" KeyUp="TextBox_KeyUp"/>
                    <TextBox Text="{Binding TaxAmount, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" Margin="{StaticResource Margin4}" Style="{DynamicResource MiniTextBoxStyle}"  ToolTip="Tax Amount" IsReadOnly="True" />
                    <TextBox Text="{Binding LineTotal, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" Margin="{StaticResource Margin4}" Style="{DynamicResource MiniTextBoxStyle}"  ToolTip="Total" IsReadOnly="True" />

                    </StackPanel>
                </StackPanel>
            </DataTemplate>
        </ItemsControl.ItemTemplate>
    </ListBox>

I want this kind of output

--------------------------------------
ID   Name          Price      Discount
1   xxxx            1245        8
2   xxxxxxxx        4354        9
..... and so on..

Solution

  • I think what you really whant is a ListView with a GridView view.

    <ListView ItemsSource="{Binding Source=
                           {StaticResource EmployeeInfoDataSource}}">
      <ListView.View>
        <GridView AllowsColumnReorder="true"
                  ColumnHeaderToolTip="Employee Information">
          <GridViewColumn DisplayMemberBinding=
                              "{Binding Path=FirstName}" 
                          Header="First Name" Width="100"/>
          <GridViewColumn DisplayMemberBinding=
                              "{Binding Path=EmployeeNumber}" 
                          Header="Employee No." Width="100"/>
        </GridView>
      </ListView.View>
    </ListView>