wpf列表框给列一个标题
本文关键字:一个 标题 列表 wpf | 更新日期: 2023-09-27 18:11:52
我有以下标记(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列上方放置一个标题。谁能告诉我如何添加标题到我的两列。
Listview无疑是最好的选择,但是,如果你需要使用列表框,你可以用这种方式修改列表框的模板。
<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>
我建议你使用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>
我还没有运行这个,所以代码可能会有一些问题,但这将给你的想法添加标题到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>
即使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>
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>