を使用してヘッダー付きのテーブルを表示する必要がありますListBox
これを作成する方法についてWebで検索したところ、この回答が見つかりました。作成したXAMLコードは次のとおりです。
<Grid Grid.Row="1" Grid.IsSharedSizeScope="True">
<Grid.RowDefinitions>
<RowDefinition Height="*"></RowDefinition>
<RowDefinition Height="6*"></RowDefinition>
</Grid.RowDefinitions>
<Grid Grid.Row="0" ShowGridLines="True">
<Grid.ColumnDefinitions>
<ColumnDefinition SharedSizeGroup="quantityColumn"></ColumnDefinition>
<ColumnDefinition SharedSizeGroup="priceColumn"></ColumnDefinition>
<ColumnDefinition Width="*"></ColumnDefinition>
<ColumnDefinition SharedSizeGroup="editColumn"></ColumnDefinition>
<ColumnDefinition SharedSizeGroup="deleteColumn"></ColumnDefinition>
</Grid.ColumnDefinitions>
<TextBlock Grid.Column="0" Foreground="#5a5a5a" TextAlignment="Center" Margin="1" VerticalAlignment="Center">Cantidad</TextBlock>
<TextBlock Grid.Column="1" Foreground="#5a5a5a" TextAlignment="Center" Margin="1" VerticalAlignment="Center">Precio</TextBlock>
<TextBlock Grid.Column="2" Foreground="#5a5a5a" TextAlignment="Center" Margin="1" VerticalAlignment="Center">Descripción</TextBlock>
<TextBlock Grid.Column="3" Foreground="#5a5a5a" TextAlignment="Center" Margin="1" VerticalAlignment="Center">Editar</TextBlock>
<TextBlock Grid.Column="4" Foreground="#5a5a5a" TextAlignment="Center" Margin="1" VerticalAlignment="Center">Eliminar</TextBlock>
</Grid>
<ListBox Grid.Row="1" HorizontalContentAlignment="Stretch" ScrollViewer.HorizontalScrollBarVisibility="Hidden" ScrollViewer.VerticalScrollBarVisibility="Auto" Name="OrderList" Background="Transparent" BorderBrush="{x:Null}" ManipulationBoundaryFeedback="OrderList_ManipulationBoundaryFeedback">
<ListBox.ItemContainerStyle>
<Style TargetType="{x:Type ListBoxItem}">
<Setter Property="Focusable" Value="False"/>
<EventSetter Event="RequestBringIntoView" Handler="ListBoxItem_RequestBringIntoView"/>
</Style>
</ListBox.ItemContainerStyle>
<ListBox.ItemTemplate>
<DataTemplate>
<Grid ShowGridLines="True">
<Grid.ColumnDefinitions>
<ColumnDefinition SharedSizeGroup="quantityColumn"></ColumnDefinition>
<ColumnDefinition SharedSizeGroup="priceColumn"></ColumnDefinition>
<ColumnDefinition Width="*"></ColumnDefinition>
<ColumnDefinition SharedSizeGroup="editColumn"></ColumnDefinition>
<ColumnDefinition SharedSizeGroup="deleteColumn"></ColumnDefinition>
</Grid.ColumnDefinitions>
<TextBlock Grid.Column="0" Foreground="White" TextAlignment="Center" Margin="7">Cantidad</TextBlock>
<TextBlock Grid.Column="1" Foreground="White" TextAlignment="Center" Margin="7">Precio</TextBlock>
<TextBlock Grid.Column="2" Foreground="White" TextAlignment="Center" Margin="7">Descripción</TextBlock>
<TextBlock Grid.Column="3" Foreground="White" TextAlignment="Center" Margin="7">Editar</TextBlock>
<TextBlock Grid.Column="4" Foreground="White" TextAlignment="Center" Margin="7">Eliminar</TextBlock>
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</Grid>
そして、これが私が作成したc#コードですListBox
List<OrderItem> orders = new List<OrderItem>();
orders.Add(new OrderItem() { a = "wash", b = "b" });
orders.Add(new OrderItem() { a = "the", b = "c" });
orders.Add(new OrderItem() { a = "car", b = "d" });
orders.Add(new OrderItem() { a = "wash", b = "b" });
OrderList.ItemsSource = orders;
は 4 行のみを表示するためListBox
、スクロールバーを設定する必要はなく、ヘッダーはテーブルの列とほぼ 100% 整列しています。
に行を追加するListBox
と、問題が悪化し、スクロールバーが表示されます。
ヘッダーが大きすぎる各列のオフセットを見ることができます。Grid.IsSharedSizeScope
スクロールバーの幅を認識し、ヘッダーの幅と見なすようにするにはどうすればよいですか? 私が必要とするのは、テーブルの列をテーブルのヘッダーと 100% 揃えることです。