WPF Datagridの行は、スクロールバーがないスペースを埋めるために伸びます

Question

Windowがどのサイズであっても、すべての空き領域を埋めるためにDataGridに行を伸ばすことができません。この場合、親グリッドの2番目の行（7 *）内のすべてのスペースを埋める必要があります。 DataGridには常に20行と2列があります。スクロールバーを表示することは決してありません。私は、データグリッドは次のようになりたいと思い

：ウィンドウが短すぎる

ただし、項目が切り捨てられます。

ウィンドウがあまりにもあれば高さ、データグリッドの下部に醜い灰色の領域があります：

ここでは、XAMLである：

<UserControl 
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
    xmlns:ignore="http://www.galasoft.ch/ignore" 
    xmlns:viewModel="clr-namespace:WMT.ViewModel" 
    xmlns:view="clr-namespace:WMT.View" 
    xmlns:Design="clr-namespace:WMT.Design" 
    xmlns:res="clr-namespace:WMT.Resources" 
    xmlns:local="clr-namespace:WMT" 
    xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity" 
    xmlns:ei="http://schemas.microsoft.com/expression/2010/interactions" 
    xmlns:Custom="http://www.galasoft.ch/mvvmlight" 
    xmlns:debug="debug-mode" 
    xmlns:System="clr-namespace:System;assembly=mscorlib" 
    xmlns:Converters="clr-namespace:GTP.Contracts.Converters;assembly=GTP.Contracts" 
    xmlns:Behaviours="clr-namespace:GTP.Contracts.Behaviours;assembly=GTP.Contracts" 
    x:Class="WMT.View.FRView" 
    mc:Ignorable="d mc" 
    d:DesignWidth="706" 
    d:DesignHeight="554" 
    d:DataContext="{d:DesignInstance {x:Type Design:DesignFRViewModel}, IsDesignTimeCreatable=True}" ScrollViewer.VerticalScrollBarVisibility="Disabled" 
    > 
<UserControl.Resources> 
    <ResourceDictionary> 
     <ResourceDictionary.MergedDictionaries> 
      <ResourceDictionary Source="pack://application:,,,/WMT;component/Styles.xaml"/> 
     </ResourceDictionary.MergedDictionaries> 
     <Converters:NegateConverter x:Key="NegateConverter"/> 
     <System:Double x:Key="StandardWidth">240</System:Double> 
     <Thickness x:Key="StandardMargin">0,0,10,0</Thickness> 
    </ResourceDictionary> 
</UserControl.Resources> 
<UserControl.Background> 
    <ImageBrush ImageSource="/WMT;component/Images/cloud.bmp"/> 
</UserControl.Background> 

<Grid ShowGridLines="True"> 
    <Grid.ColumnDefinitions> 
     <ColumnDefinition/> 
     <ColumnDefinition/> 
    </Grid.ColumnDefinitions> 
    <Grid.RowDefinitions> 
     <RowDefinition Height="0.5*"/> 
     <RowDefinition Height="7*"/> 
     <RowDefinition Height="2.5*"/> 
    </Grid.RowDefinitions> 
    <DataGrid Grid.Row="1" 
       ItemsSource="{Binding WmtResult.Responses}" 
       AutoGenerateColumns="False" 
       CanUserReorderColumns="False" 
       CanUserResizeColumns="False" 
       CanUserSortColumns="False" 
       GridLinesVisibility="None" 
       CanUserAddRows="False" 
       CanUserDeleteRows="False" 
       CanUserResizeRows="False" 
       RowHeaderWidth="0" 
       HorizontalContentAlignment="Stretch" 
       VerticalContentAlignment="Stretch" 
       HorizontalScrollBarVisibility="Disabled" 
       VerticalScrollBarVisibility="Disabled"> 
     <DataGrid.Columns> 
      <DataGridTextColumn Binding="{Binding IRPrompt.Item}" 
           ClipboardContentBinding="{x:Null}" 
           Width="3*" 
           Header="Word"/> 
      <DataGridTextColumn Binding="{Binding FRPrompt}" 
           ClipboardContentBinding="{x:Null}" 
           Width="*" 
           Header="Count"/> 
     </DataGrid.Columns> 
    </DataGrid> 
</Grid> 

私の代わりにデータグリッドのリストビューを試してみましたが、同様の問題がありました。どこかでViewboxを使用する必要がありますか？詳しい情報が必要な場合はお知らせください。ありがとう。

EDIT

私は、ビューボックス内のデータグリッドを配置するライアンFlohrの提案をしようとしています。これにより、切り捨ての問題とDataGridの問題の下にある灰色の領域が解決されます。 DataGridはスペースを垂直に正しく塗りつぶしますが、スペースは水平に塗りつぶされません。

はここで更新XAMLです：

<UserControl 
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
    xmlns:ignore="http://www.galasoft.ch/ignore" 
    xmlns:viewModel="clr-namespace:WMT.ViewModel" 
    xmlns:view="clr-namespace:WMT.View" 
    xmlns:Design="clr-namespace:WMT.Design" 
    xmlns:res="clr-namespace:WMT.Resources" 
    xmlns:local="clr-namespace:WMT" 
    xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity" 
    xmlns:ei="http://schemas.microsoft.com/expression/2010/interactions" 
    xmlns:Custom="http://www.galasoft.ch/mvvmlight" 
    xmlns:debug="debug-mode" 
    xmlns:System="clr-namespace:System;assembly=mscorlib" 
    xmlns:Converters="clr-namespace:GTP.Contracts.Converters;assembly=GTP.Contracts" 
    xmlns:Behaviours="clr-namespace:GTP.Contracts.Behaviours;assembly=GTP.Contracts" 
    x:Class="WMT.View.FRView" 
    mc:Ignorable="d mc" 
    d:DesignWidth="754" 
    d:DesignHeight="685" 
    d:DataContext="{d:DesignInstance {x:Type Design:DesignFRViewModel}, IsDesignTimeCreatable=True}" ScrollViewer.VerticalScrollBarVisibility="Disabled" 
    > 
<UserControl.Resources> 
    <ResourceDictionary> 
     <ResourceDictionary.MergedDictionaries> 
      <ResourceDictionary Source="pack://application:,,,/WMT;component/Styles.xaml"/> 
     </ResourceDictionary.MergedDictionaries> 
     <Converters:NegateConverter x:Key="NegateConverter"/> 
     <System:Double x:Key="StandardWidth">240</System:Double> 
     <Thickness x:Key="StandardMargin">0,0,10,0</Thickness> 
    </ResourceDictionary> 
</UserControl.Resources> 
<UserControl.Background> 
    <ImageBrush ImageSource="/WMT;component/Images/cloud.bmp"/> 
</UserControl.Background> 
<Grid> 
    <Grid.ColumnDefinitions> 
     <ColumnDefinition/> 
     <ColumnDefinition/> 
    </Grid.ColumnDefinitions> 
    <Grid.RowDefinitions> 
     <RowDefinition Height="0.5*"/> 
     <RowDefinition Height="7*"/> 
     <RowDefinition Height="2.5*"/> 
    </Grid.RowDefinitions> 
    <Viewbox Grid.Row="1"> 
     <DataGrid Grid.Row="1" 
        ItemsSource="{Binding WmtResult.Responses}" 
        AutoGenerateColumns="False" 
        CanUserReorderColumns="False" 
        CanUserResizeColumns="False" 
        CanUserSortColumns="False" 
        GridLinesVisibility="None" 
        CanUserAddRows="False" 
        CanUserDeleteRows="False" 
        CanUserResizeRows="False" 
        RowHeaderWidth="0" 
        VerticalContentAlignment="Stretch" 
        HorizontalScrollBarVisibility="Disabled" 
        VerticalScrollBarVisibility="Disabled" HorizontalContentAlignment="Stretch"> 
      <DataGrid.Columns> 
       <DataGridTextColumn Binding="{Binding IRPrompt.Item}" 
            ClipboardContentBinding="{x:Null}" 
            Header="Word" 
            > 
        <!--<DataGridTextColumn.CellStyle> 
         <Style TargetType="{x:Type DataGridCell}"> 
          <Setter Property="Margin" Value="0,0,190,0" /> 
         </Style> 
        </DataGridTextColumn.CellStyle>--> 
       </DataGridTextColumn> 
       <DataGridTextColumn Binding="{Binding FRPrompt}" 
            ClipboardContentBinding="{x:Null}" 
            Header="Count"> 
        <!--<DataGridTextColumn.CellStyle> 
         <Style TargetType="{x:Type DataGridCell}"> 
          <Setter Property="Margin" Value="0,0,60,0" /> 
         </Style> 
        </DataGridTextColumn.CellStyle>--> 
       </DataGridTextColumn> 
      </DataGrid.Columns> 
     </DataGrid> 
    </Viewbox> 

</Grid> 

がここにスクリーンショットです：

私は、DataGridのたHorizo​​ntalAlignmentとHorizo​​ntalContentAlignmentで遊んでみましたが、運がなかったです。その後、Columns（xamlのコメント部分を参照）の余白を変更しましたが、Windowが特定のサイズである場合にのみ適切な余白が得られます。私は正確な値に設定する余裕がある場合はここで（XAMLでコメントCellStyleのセクションを参照）のスクリーンショットです：

私はに余白をバインドするValueConverterを使用することができるかもしれないと仮定Viewboxの実際の幅の割合ですが、これはかなりハッキリです。

DataGridの内部StackPanelを、スペースを水平に埋め込む何らかのレイアウトコントロールに置き換える方法はありますか？ 1列目は2列目の3倍にする必要があります。

Answer 1

私が記入するストレッチセットでDataGridの周りビューボックスを使用して所望の結果を達成することができました。また、ウィンドウサイズが変更されたときに保持される縦横比を与えるために、DataGridに高さと幅を設定する必要がありました。

<UserControl 
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
    xmlns:ignore="http://www.galasoft.ch/ignore" 
    xmlns:viewModel="clr-namespace:WMT.ViewModel" 
    xmlns:view="clr-namespace:WMT.View" 
    xmlns:Design="clr-namespace:WMT.Design" 
    xmlns:res="clr-namespace:WMT.Resources" 
    xmlns:local="clr-namespace:WMT" 
    xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity" 
    xmlns:ei="http://schemas.microsoft.com/expression/2010/interactions" 
    xmlns:Custom="http://www.galasoft.ch/mvvmlight" 
    xmlns:debug="debug-mode" 
    xmlns:System="clr-namespace:System;assembly=mscorlib" 
    xmlns:Converters="clr-namespace:GTP.Contracts.Converters;assembly=GTP.Contracts" 
    xmlns:Behaviours="clr-namespace:GTP.Contracts.Behaviours;assembly=GTP.Contracts" 
    x:Class="WMT.View.FRView" 
    mc:Ignorable="d mc" 
    d:DesignWidth="688" 
    d:DesignHeight="554" 
    d:DataContext="{d:DesignInstance {x:Type Design:DesignFRViewModel}, IsDesignTimeCreatable=True}" ScrollViewer.VerticalScrollBarVisibility="Disabled" 
    > 
<UserControl.Resources> 
    <ResourceDictionary> 
     <ResourceDictionary.MergedDictionaries> 
      <ResourceDictionary Source="pack://application:,,,/WMT;component/Styles.xaml"/> 
     </ResourceDictionary.MergedDictionaries> 
     <Converters:NegateConverter x:Key="NegateConverter"/> 
     <System:Double x:Key="StandardWidth">240</System:Double> 
     <Thickness x:Key="StandardMargin">0,0,10,0</Thickness> 
    </ResourceDictionary> 
</UserControl.Resources> 
<UserControl.Background> 
    <ImageBrush ImageSource="/WMT;component/Images/cloud.bmp"/> 
</UserControl.Background> 
<Grid> 
    <Grid.ColumnDefinitions> 
     <ColumnDefinition/> 
     <ColumnDefinition/> 
    </Grid.ColumnDefinitions> 
    <Grid.RowDefinitions> 
     <RowDefinition Height="0.5*"/> 
     <RowDefinition Height="7*"/> 
     <RowDefinition Height="2.5*"/> 
    </Grid.RowDefinitions> 
    <Viewbox Grid.Row="1" Stretch="Fill"> 
     <DataGrid Grid.Row="1" 
        Background="White" 
        ItemsSource="{Binding WmtResult.Responses}" 
        AutoGenerateColumns="False" 
        CanUserReorderColumns="False" 
        CanUserResizeColumns="False" 
        CanUserSortColumns="False" 
        GridLinesVisibility="None" 
        CanUserAddRows="False" 
        CanUserDeleteRows="False" 
        CanUserResizeRows="False" 
        RowHeaderWidth="0" 
        VerticalContentAlignment="Stretch" 
        HorizontalScrollBarVisibility="Disabled" 
        VerticalScrollBarVisibility="Disabled" 
        HorizontalContentAlignment="Stretch" 
        ColumnWidth="*" 
        IsReadOnly="True" 
        Height="385" Width="300"> 
      <DataGrid.Columns> 
       <DataGridTextColumn Binding="{Binding IRPrompt.Item}" 
            ClipboardContentBinding="{x:Null}" 
            Header="Word" 
            Width="2*" 
            > 
       </DataGridTextColumn> 
       <DataGridTextColumn Binding="{Binding FRPrompt}" 
            ClipboardContentBinding="{x:Null}" 
            Header="Count" 
            Width="*"> 
        </DataGridTextColumn> 
      </DataGrid.Columns> 
     </DataGrid> 
    </Viewbox> 

</Grid> 

Answer 2

すべての20行が表示されるようにするには、ウィンドウのサイズが小さすぎると同時に、垂直スクロールバーが表示されない場合でも、DataGridをViewBoxに配置する必要があります。これにより、「醜い灰色」が表示されなくなります。

DataGridコントロール内の内部

、コンテンツ自体は、コンテンツ自体が必要とするものは何でも空間に成長するのStackPanelの内側にあります。そのStackPanelはScrollViewerの内部にあります。そのため、コンテンツがWindowに対して大きくなりすぎると、スクロールすることができます。あなたがスクロールバー機能を無効にしたので、それは本質的に単なるStackPanelです。グリッド上で明示的なサイズ制限が設定されているため、DataGridは、サイズが許容するDataGridの部分だけを表示し、コンテンツを切り捨てられているように見せます。一方、グリッドがStackPanelの内部コンテンツよりもはるかに大きくなると、StackPanelのサイズはグリッドになりますが、コンテンツは停止するところで停止します。あなたが見ている "醜い"灰色は、コントロールの背景色です。