WPF Listbox дает столбцам заголовок

У меня есть следующая разметка (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>

все это выглядит нормально, но теперь над столбцами 1 и 3 я хочу разместить заголовок. Может ли кто-нибудь показать мне, как я добавляю заголовки в свои два столбца.

8
c# listbox wpf

6 ответов

Listview, безусловно, лучший вариант, но, если вам нужно использовать listbox, вы можете изменить шаблон listbox таким образом.

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

Я рекомендую вам использовать ListView вместо того, что более подходит для вас, вы можете использовать GridView внутри и определить столбцы, которые вам нужно перестилить их гораздо легче

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

Я не запускал это, поэтому может возникнуть проблема с кодом, но это даст вам идею добавить заголовки в 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>
0

даже Listbox может быть внутри пользовательского элемента управления с динамическим шаблоном данных 

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

ListBox не имеет HeaderTemplate. ListView не лучший вариант, потому что он не поддерживает Width="*" . Если вы отчаиваетесь и идете в DataGrid вы можете получить намного больше, чем вам нужно. Решение заключается в использовании HeaderedItemsControl

просто измените имя коллекции, к которой вы привязываетесь, и измените свойства привязки. 

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

вы можете вложить метку (или текстовый блок, если на то пошло) в одно из определений столбцов и соответствующим образом ее стилизовать.

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