1. 首頁
  2. 問答
  3. WPF Datagrid行伸展以填充沒有滾動條的空間

WPF Datagrid行伸展以填充沒有滾動條的空間

2016-06-15 109 views
0

我無法讓我的DataGrid將行拉伸以填充所有可用空間，只要Window處於任何大小。在這種情況下，它應該填充父網格第二行（7 *）中的所有空間。 DataGrid將始終有20行和2列。我從不想要顯示任何滾動條。WPF Datagrid行伸展以填充沒有滾動條的空間

我想在DataGrid看起來像這樣：

Ideal

但是，如果窗口太短，項目將被截斷：

Truncated

如果窗口過高，數據網格底部有一個醜陋的灰色區域：

Grey at bottom

這裏是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>

我試過一個ListView，而不是DataGrid的，但也有類似的問題。我需要在某個地方使用Viewbox嗎？讓我知道你是否需要進一步的信息。謝謝。

編輯

我試圖把DataGrid中視框裏面的瑞安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>

以下是截圖：

Viewbox No Margin

我試圖用的Horizo​​ntalAlignment和DataGrid的Horizo​​ntalContentAlignment玩，但沒有運氣。然後，我更改了列的邊距（請參見xaml的註釋部分），但只能在窗口達到特定大小時才能獲得適當的邊距。下面是截圖時，我有邊距設置爲一個精確值（見XAML的評論CellStyle部分）：

ViewboxMarginTooSkinny ViewboxMarginTooShort

我想我也許可以使用ValueConverter的保證金綁定到但是，這看起來很不方便。

有沒有辦法用某種佈局控件替換DataGrid的內部StackPanel，它將水平填充空間？第一列應該是第二列的3倍。

來源

2016-06-15 Johnny Herms

+0

變化是在高度上'Auto' –

+0

如果什麼窗口太短，只顯示2行的行？ – AnjumSKhan

+0

我試圖瞭解你期望的結果。你是說你想要顯示所有20行，即使窗口太小，也不顯示任何滾動條？ –

回答

1

我能夠通過在Stretch設置爲Fill的情況下使用DataGrid周圍的Viewbox來實現期望的結果。我還必須在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="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>

來源

2016-06-16 20:37:24

1

如果您希望顯示所有二十行，即使窗口大小太小，但同時不顯示任何垂直滾動條，您也必須將DataGrid放入ViewBox。這也將確保「醜陋的灰色」不會顯示。

在DataGrid控件的內部，內容本身位於StackPanel內部，它將隨着內容本身需要的空間而增長。該StackPanel位於ScrollViewer的內部，因此如果內容對於Window增長過大，則可以滾動它。由於您禁用了滾動條功能，因此它基本上只是一個將繼續增長的StackPanel。由於您已經在網格上設置了明確的大小限制，因此DataGrid僅顯示其大小允許的DataGrid部分，從而使內容看起來被截斷。另一方面，如果網格增長得比StackPanel內部的內容大得多，那麼StackPanel的大小就是網格的大小，但是它的內容停止在它停止的地方。你所看到的那種「醜陋」的灰色是控件的背景顏色。

來源

2016-06-16 01:56:57

相關問題

 相關問題