垂直滚动条不在wpf中的usercontrol内的datagrid中进行apearing

时间:2021-09-22 09:46:46

I have a user control in WPF that has a DataGrid. I add this user control in a Window inside a TabItem of TabControl. The Vertical scrollbar is not getting visible. I resized the window and it seems the user control is taking its complete height after considering height of DataGrid.

我在WPF中有一个具有DataGrid的用户控件。我在TabControl的TabItem中的一个窗口中添加此用户控件。垂直滚动条未显示。我调整了窗口大小,在考虑DataGrid的高度后,用户控件似乎正在完成高度。

How to make the vertical scrollbar appear and still keep the height of DataGrid to auto depending on the height available as per height of the user control and window ?

如何使垂直滚动条出现并仍然根据用户控件和窗口高度的可用高度将DataGrid的高度保持为自动?

EDIT: Main Window:

编辑:主窗口:

<Window>
  <Grid>
    <TabControl Name="tc"
                SelectionChanged="tc_SelectionChanged">
      <TabItem Header="ABC">
        <local:uc1 />
      </TabItem>
      <TabItem Header="DEF">
        <local:uc2 />
      </TabItem>
    </TabControl>
  </Grid>
</Window>

User Control:

<UserControl>
  <Grid>
    <Grid.RowDefinitions>
      <RowDefinition Height="Auto"></RowDefinition>
      <RowDefinition Height="30"></RowDefinition>
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
      <ColumnDefinition Width="2*"></ColumnDefinition>
      <ColumnDefinition Width="*"></ColumnDefinition>
    </Grid.ColumnDefinitions>

    <StackPanel Grid.Row="0"
                Grid.Column="0"
                Orientation="Vertical">
      <StackPanel Orientation="Horizontal">
        <Button>Add</Button>
        <Button>Remove</Button>
        <Button>Refresh</Button>
      </StackPanel>

      <Label Name="lblTopMessage">some message</Label>

      <DataGrid Name="dg"
                IsReadOnly="True">
        <DataGrid.Columns>
          <DataGridTextColumn Binding="{Binding Name}"
                              Header="Name"
                              Width="*"></DataGridTextColumn>
          <DataGridTextColumn Binding="{Binding Value}"
                              Header="Value"
                              Width="130"></DataGridTextColumn>
          <DataGridTextColumn Binding="{Binding List}"
                              Header="List"
                              Width="*"></DataGridTextColumn>
        </DataGrid.Columns>
      </DataGrid>

    </StackPanel>
    <Grid Grid.Row="0"
          Grid.Column="1"
          Name="gridTS">
      <Grid.RowDefinitions>
        <RowDefinition Height="Auto"></RowDefinition>
        <RowDefinition Height="Auto"></RowDefinition>
        <RowDefinition Height="Auto"></RowDefinition>
        <RowDefinition Height="Auto"></RowDefinition>
        <RowDefinition Height="Auto"></RowDefinition>
        <RowDefinition Height="Auto"></RowDefinition>
      </Grid.RowDefinitions>
      <Grid.ColumnDefinitions>
        <ColumnDefinition Width="100"></ColumnDefinition>
        <ColumnDefinition Width="*"></ColumnDefinition>
      </Grid.ColumnDefinitions>
      <TextBlock Name="lblNewSource"
                 Grid.Row="0"
                 Grid.ColumnSpan="2"
                 HorizontalAlignment="Center"
                 Padding="0 5 0 0"
                 FontWeight="Bold">New Source</TextBlock>
      <TextBlock Grid.Row="1"
                 Grid.Column="0"
                 Padding="10 10 0 0">Name:</TextBlock>
      <TextBlock Grid.Row="2"
                 Grid.Column="0"
                 Padding="10 10 0 0">Value:</TextBlock>
      <TextBlock Grid.Row="3"
                 Grid.Column="0"
                 Padding="10 10 0 0">List:</TextBlock>

      <TextBox Grid.Row="1"
               Grid.Column="1"
               Name="txtName"
               IsEnabled="False"></TextBox>
      <ComboBox Grid.Row="2"
                Grid.Column="1"
                Name="cbValue"></ComboBox>
      <ListBox Grid.Row="3"
               Grid.Column="1"
               Name="lbList">
        <ListBox.ItemTemplate>
          <DataTemplate>
            <CheckBox Margin="3 5 0 3"
                      Content="{Binding Name}"
                      IsChecked="{Binding IsActive}" />
          </DataTemplate>
        </ListBox.ItemTemplate>
      </ListBox>

      <Button Name="btnSave"
              Click="btnSave_Click"
              Grid.Row="4"
              Grid.Column="1">Save</Button>
      <TextBlock TextWrapping="WrapWithOverflow"
                 Name="lblMessage"
                 Grid.Row="5"
                 Grid.Column="1"
                 Margin="0 10 10 0"></TextBlock>
    </Grid>
  </Grid>
</UserControl>

3 个解决方案

#1


8  

UPDATED: I just took DataGrid out of StackPanel. Try this code:

更新:我刚从StackPanel中取出了DataGrid。试试这段代码:

<Grid>
  <Grid.RowDefinitions>
    <RowDefinition Height="45.361"></RowDefinition>
    <RowDefinition Height="102.639" />
    <RowDefinition Height="30"></RowDefinition>
  </Grid.RowDefinitions>
  <Grid.ColumnDefinitions>
    <ColumnDefinition Width="2*"></ColumnDefinition>
    <ColumnDefinition Width="*"></ColumnDefinition>
  </Grid.ColumnDefinitions>

  <StackPanel Grid.Row="0"
              Grid.Column="0"
              Orientation="Vertical">
    <StackPanel Orientation="Horizontal">
      <Button>Add</Button>
      <Button>Remove</Button>
      <Button>Refresh</Button>
    </StackPanel>

    <Label Name="lblTopMessage">some message</Label>

  </StackPanel>

  <DataGrid Grid.Row="1"
            Name="dg"
            IsReadOnly="True">
    <DataGrid.Columns>
      <DataGridTextColumn Binding="{Binding Name}"
                          Header="Name"
                          Width="*"></DataGridTextColumn>
      <DataGridTextColumn Binding="{Binding Value}"
                          Header="Value"
                          Width="130"></DataGridTextColumn>
      <DataGridTextColumn Binding="{Binding List}"
                          Header="List"
                          Width="*"></DataGridTextColumn>
    </DataGrid.Columns>
  </DataGrid>

  <Grid Grid.Row="0"
        Grid.Column="1"
        Name="gridTS"
        Grid.RowSpan="2">
    <Grid.RowDefinitions>
      <RowDefinition Height="Auto"></RowDefinition>
      <RowDefinition Height="Auto"></RowDefinition>
      <RowDefinition Height="Auto"></RowDefinition>
      <RowDefinition Height="Auto"></RowDefinition>
      <RowDefinition Height="Auto"></RowDefinition>
      <RowDefinition Height="Auto"></RowDefinition>
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
      <ColumnDefinition Width="100"></ColumnDefinition>
      <ColumnDefinition Width="*"></ColumnDefinition>
    </Grid.ColumnDefinitions>
    <TextBlock Name="lblNewSource"
               Grid.Row="0"
               Grid.ColumnSpan="2"
               HorizontalAlignment="Center"
               Padding="0 5 0 0"
               FontWeight="Bold">New Source</TextBlock>
    <TextBlock Grid.Row="1"
               Grid.Column="0"
               Padding="10 10 0 0">Name:</TextBlock>
    <TextBlock Grid.Row="2"
               Grid.Column="0"
               Padding="10 10 0 0">Value:</TextBlock>
    <TextBlock Grid.Row="3"
               Grid.Column="0"
               Padding="10 10 0 0">List:</TextBlock>

    <TextBox Grid.Row="1"
             Grid.Column="1"
             Name="txtName"
             IsEnabled="False"></TextBox>
    <ComboBox Grid.Row="2"
              Grid.Column="1"
              Name="cbValue"></ComboBox>
    <ListBox Grid.Row="3"
             Grid.Column="1"
             Name="lbList">
      <ListBox.ItemTemplate>
        <DataTemplate>
          <CheckBox Margin="3 5 0 3"
                    Content="{Binding Name}"
                    IsChecked="{Binding IsActive}" />
        </DataTemplate>
      </ListBox.ItemTemplate>
    </ListBox>

    <Button Name="btnSave"
            Grid.Row="4"
            Grid.Column="1">Save</Button>
    <TextBlock TextWrapping="WrapWithOverflow"
               Name="lblMessage"
               Grid.Row="5"
               Grid.Column="1"
               Margin="0 10 10 0"></TextBlock>
  </Grid>
</Grid>

I hope that helps.

我希望有所帮助。

#2


4  

Make the vertical scrollbar appear and still keep the height of DataGrid auto.
The answer is NO.

使垂直滚动条出现并仍然保持DataGrid的高度自动。答案是不。

As long as the height is auto it will grow as auto means I get all the height I want.

只要高度是自动的,它就会增长,因为自动意味着我得到了我想要的所有高度。

<RowDefinition Height="Auto"></RowDefinition>

If you want it to use available space then use *

如果您想使用可用空间,请使用*

<RowDefinition Height="*"></RowDefinition>

#3


0  

Set VerticalScrollBarVisibility to Visible.

将VerticalScrollBarVisibility设置为Visible。

<DaraGrid VerticalScrollBarVisibility="Visible" ... >
...
</DataGrid>

Default value is Auto.

默认值为“自动”。

UPDATE

After looking into your code I discovered, that scrollbar visibility is not your real problem. Your problem is DataGrid without fixed height in StackPanel. It takes all space necessary for all items in DataGrid to be displayed and that's the reason why the ScrollBar was not Visible. As I said earlier default value for VerticalScrollBarVisibility is Auto and it means:

在查看我发现的代码后,滚动条可见性不是您真正的问题。您的问题是StackPanel中没有固定高度的DataGrid。它需要显示DataGrid中所有项目所需的所有空间,这就是ScrollBar不可见的原因。正如我之前所说,VerticalScrollBarVisibility的默认值是Auto,它意味着:

MSDN: Auto - A ScrollBar appears and the dimension of the ScrollViewer is applied to the content when the viewport cannot display all of the content.

MSDN:自动 - 出现ScrollBar,当视口无法显示所有内容时,ScrollViewer的维度将应用于内容。

#1


8  

UPDATED: I just took DataGrid out of StackPanel. Try this code:

更新:我刚从StackPanel中取出了DataGrid。试试这段代码:

<Grid>
  <Grid.RowDefinitions>
    <RowDefinition Height="45.361"></RowDefinition>
    <RowDefinition Height="102.639" />
    <RowDefinition Height="30"></RowDefinition>
  </Grid.RowDefinitions>
  <Grid.ColumnDefinitions>
    <ColumnDefinition Width="2*"></ColumnDefinition>
    <ColumnDefinition Width="*"></ColumnDefinition>
  </Grid.ColumnDefinitions>

  <StackPanel Grid.Row="0"
              Grid.Column="0"
              Orientation="Vertical">
    <StackPanel Orientation="Horizontal">
      <Button>Add</Button>
      <Button>Remove</Button>
      <Button>Refresh</Button>
    </StackPanel>

    <Label Name="lblTopMessage">some message</Label>

  </StackPanel>

  <DataGrid Grid.Row="1"
            Name="dg"
            IsReadOnly="True">
    <DataGrid.Columns>
      <DataGridTextColumn Binding="{Binding Name}"
                          Header="Name"
                          Width="*"></DataGridTextColumn>
      <DataGridTextColumn Binding="{Binding Value}"
                          Header="Value"
                          Width="130"></DataGridTextColumn>
      <DataGridTextColumn Binding="{Binding List}"
                          Header="List"
                          Width="*"></DataGridTextColumn>
    </DataGrid.Columns>
  </DataGrid>

  <Grid Grid.Row="0"
        Grid.Column="1"
        Name="gridTS"
        Grid.RowSpan="2">
    <Grid.RowDefinitions>
      <RowDefinition Height="Auto"></RowDefinition>
      <RowDefinition Height="Auto"></RowDefinition>
      <RowDefinition Height="Auto"></RowDefinition>
      <RowDefinition Height="Auto"></RowDefinition>
      <RowDefinition Height="Auto"></RowDefinition>
      <RowDefinition Height="Auto"></RowDefinition>
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
      <ColumnDefinition Width="100"></ColumnDefinition>
      <ColumnDefinition Width="*"></ColumnDefinition>
    </Grid.ColumnDefinitions>
    <TextBlock Name="lblNewSource"
               Grid.Row="0"
               Grid.ColumnSpan="2"
               HorizontalAlignment="Center"
               Padding="0 5 0 0"
               FontWeight="Bold">New Source</TextBlock>
    <TextBlock Grid.Row="1"
               Grid.Column="0"
               Padding="10 10 0 0">Name:</TextBlock>
    <TextBlock Grid.Row="2"
               Grid.Column="0"
               Padding="10 10 0 0">Value:</TextBlock>
    <TextBlock Grid.Row="3"
               Grid.Column="0"
               Padding="10 10 0 0">List:</TextBlock>

    <TextBox Grid.Row="1"
             Grid.Column="1"
             Name="txtName"
             IsEnabled="False"></TextBox>
    <ComboBox Grid.Row="2"
              Grid.Column="1"
              Name="cbValue"></ComboBox>
    <ListBox Grid.Row="3"
             Grid.Column="1"
             Name="lbList">
      <ListBox.ItemTemplate>
        <DataTemplate>
          <CheckBox Margin="3 5 0 3"
                    Content="{Binding Name}"
                    IsChecked="{Binding IsActive}" />
        </DataTemplate>
      </ListBox.ItemTemplate>
    </ListBox>

    <Button Name="btnSave"
            Grid.Row="4"
            Grid.Column="1">Save</Button>
    <TextBlock TextWrapping="WrapWithOverflow"
               Name="lblMessage"
               Grid.Row="5"
               Grid.Column="1"
               Margin="0 10 10 0"></TextBlock>
  </Grid>
</Grid>

I hope that helps.

我希望有所帮助。

#2


4  

Make the vertical scrollbar appear and still keep the height of DataGrid auto.
The answer is NO.

使垂直滚动条出现并仍然保持DataGrid的高度自动。答案是不。

As long as the height is auto it will grow as auto means I get all the height I want.

只要高度是自动的,它就会增长,因为自动意味着我得到了我想要的所有高度。

<RowDefinition Height="Auto"></RowDefinition>

If you want it to use available space then use *

如果您想使用可用空间,请使用*

<RowDefinition Height="*"></RowDefinition>

#3


0  

Set VerticalScrollBarVisibility to Visible.

将VerticalScrollBarVisibility设置为Visible。

<DaraGrid VerticalScrollBarVisibility="Visible" ... >
...
</DataGrid>

Default value is Auto.

默认值为“自动”。

UPDATE

After looking into your code I discovered, that scrollbar visibility is not your real problem. Your problem is DataGrid without fixed height in StackPanel. It takes all space necessary for all items in DataGrid to be displayed and that's the reason why the ScrollBar was not Visible. As I said earlier default value for VerticalScrollBarVisibility is Auto and it means:

在查看我发现的代码后,滚动条可见性不是您真正的问题。您的问题是StackPanel中没有固定高度的DataGrid。它需要显示DataGrid中所有项目所需的所有空间,这就是ScrollBar不可见的原因。正如我之前所说,VerticalScrollBarVisibility的默认值是Auto,它意味着:

MSDN: Auto - A ScrollBar appears and the dimension of the ScrollViewer is applied to the content when the viewport cannot display all of the content.

MSDN:自动 - 出现ScrollBar,当视口无法显示所有内容时,ScrollViewer的维度将应用于内容。