如何让DataGrid的滚动条显示在Expander中?

时间:2017-02-17 16:17:18

标签: wpf xaml datagrid scrollbar expander

我有一个DataGrid,它位于可调整大小的窗口中的一系列Expanders之一。加载DataGrid行时,DataGrid从窗口底部延伸出来,没有任何滚动条。

我已将问题简化为下面最简单的元素

我已尝试将DataGrid放在单独的ScrollViewer中,但遇到了同样的问题。

我还需要其他两个扩展器在窗口中保持可见,而不是被推离边缘。我将三个扩展器放在DockPanel中取得了一些成功,但DataGrid仍然扩展到填满整个窗口,推动其他扩展器不在视野范围内。

XAML

<Window x:Class="WPFTestApp.MainWindow"
        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:local="clr-namespace:WPFTestApp"
        mc:Ignorable="d"
        Title="MainWindow" Height="350" Width="525">
    <Grid Name="root">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>
        <Expander Grid.Row="0" Name="Expander1" Expanded="Expander_Expanded">
            <Expander.Header>Expander</Expander.Header>
            <Expander.Content>
                <ScrollViewer>
                <DataGrid Grid.Row="1" Name="dataGrid">
                    <DataGrid.Columns>
                        <DataGridTextColumn Header="A" Binding="{Binding A}" />
                        <DataGridTextColumn Header="B" Binding="{Binding B}" />
                        <DataGridTextColumn Header="C" Binding="{Binding C}" />
                        <DataGridTextColumn Header="D" Binding="{Binding D}" />
                    </DataGrid.Columns>
                </DataGrid>
                </ScrollViewer>

            </Expander.Content>
        </Expander>
        <Expander Grid.Row="1" Name="Expander2" Expanded="Expander_Expanded">
            <Expander.Content>
                <TextBlock>...<LineBreak/>...<LineBreak/>...<LineBreak/>...<LineBreak/>...<LineBreak/>...</TextBlock>
            </Expander.Content>
        </Expander>
        <Expander Grid.Row="2" Name="Expander3" Expanded="Expander_Expanded">
            <Expander.Content>
                <TextBlock>...<LineBreak/>...<LineBreak/>...<LineBreak/>...<LineBreak/>...<LineBreak/>...</TextBlock>
            </Expander.Content>
        </Expander>
    </Grid>
</Window>

代码隐藏

using System;
using System.Windows;

namespace WPFTestApp {
    /// <summary>
    /// Interaction logic for MainWindow.xaml
    /// </summary>

    public class Data {
        public Guid A { get; set; }
        public Guid B { get; set; }
        public Guid C { get; set; }
        public Guid D { get; set; }

        public Data() {
            A = Guid.NewGuid();
            B = Guid.NewGuid();
            C = Guid.NewGuid();
            D = Guid.NewGuid();
        }
    }


    public partial class MainWindow : Window {
        public MainWindow() {
            InitializeComponent();

            for (int x = 0; x < 20; x++) {
                dataGrid.Items.Add(new Data());
            }

        }

        private void Expander_Expanded(object sender, RoutedEventArgs e) {
            if (Expander1 != sender)
                Expander1.IsExpanded = false;

            if (Expander2 != sender)
                Expander2.IsExpanded = false;

            if (Expander3 != sender)
                Expander3.IsExpanded = false;
        }
    }
}

2 个答案:

答案 0 :(得分:1)

移除ScrollViewer周围的DataGrid元素并指定RowDefinitions的高度(固定大小或star-sized个):

<Grid Name="root">
    <Grid.RowDefinitions>
        <RowDefinition Height="1*" />
        <RowDefinition Height="1*" />
        <RowDefinition Height="1*" />
    </Grid.RowDefinitions>
    <Expander Grid.Row="0" Name="Expander1" Expanded="Expander_Expanded">
        <Expander.Header>Expander</Expander.Header>
        <Expander.Content>
            <DataGrid Grid.Row="1" Name="dataGrid">
                <DataGrid.Columns>
                    <DataGridTextColumn Header="A" Binding="{Binding A}" />
                    <DataGridTextColumn Header="B" Binding="{Binding B}" />
                    <DataGridTextColumn Header="C" Binding="{Binding C}" />
                    <DataGridTextColumn Header="D" Binding="{Binding D}" />
                </DataGrid.Columns>
            </DataGrid>
        </Expander.Content>
    </Expander>
    <Expander Grid.Row="1" Name="Expander2" Expanded="Expander_Expanded">
        <Expander.Content>
            <TextBlock>...<LineBreak/>...<LineBreak/>...<LineBreak/>...<LineBreak/>...<LineBreak/>...</TextBlock>
        </Expander.Content>
    </Expander>
    <Expander Grid.Row="2" Name="Expander3" Expanded="Expander_Expanded">
        <Expander.Content>
            <TextBlock>...<LineBreak/>...<LineBreak/>...<LineBreak/>...<LineBreak/>...<LineBreak/>...</TextBlock>
        </Expander.Content>
    </Expander>
</Grid>

Height设置为Auto时,您不会获得任何垂直滚动条,因为Expander被认为具有无限高度。

答案 1 :(得分:0)

将RowDefinitions更改为

        DataTable tab = new DataTable();
        DataColumn col = tab.Columns.Add("a");
        // data added code
        foreach (DataColumn col in tab.Columns)
        foreach (DataRow r in tab.Rows)
        {
                if (r[col].Equals("..."))
                {
                    col.ReadOnly = true;
                    break;
                }
        }

将Expander_Expanded函数更改为

<Grid.RowDefinitions>
    <RowDefinition Name="gridRowEx1" Height="Auto" />
    <RowDefinition Name="gridRowEx2" Height="Auto" />
    <RowDefinition Name="gridRowEx3" Height="Auto" />
</Grid.RowDefinitions>

准确地告诉我我需要的东西