首页 > 解决方案 > WPF 不显示垂直滚动条

问题描述

我正在尝试根据从数据库收集的信息创建一个显示用户控件的应用程序。问题是,如果项目总高度超过为此显示保留的主窗口网格,我看不到垂直滚动条。从我发现可能存在一个问题,stackpanel/scrollviewer 不限制它的孩子的大小。我坚持如何解决这个问题,有没有办法将项目堆叠在有限的空间中,滚动条仅在需要时才可见。我想避免“硬编码”滚动查看器的高度。现在我坚持以下代码:

XAML:(主窗口)

<Grid   Name="selectedOptionGrid"
        Grid.Column="1"
        Grid.Row="1"
        HorizontalAlignment="Left"
        VerticalAlignment="Top">
        <StackPanel Name="selectedOptionStack"/>
        <!-- Dock selected windows based on option selected-->
</Grid>

(用户控制,附加窗口停靠到主窗口)

<UserControl x:Class="Power_Planner_1._0.Team_Planner.MyTasks.ucTaskWindow"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             xmlns:local="clr-namespace:Power_Planner_1._0.Team_Planner.MyTasks" 
             mc:Ignorable="d">
    <Grid Background="White"
          VerticalAlignment="Stretch"
          HorizontalAlignment="Stretch">
            <Grid.RowDefinitions>
                <RowDefinition Height="20"/>
                <RowDefinition Height="5"/>
                <RowDefinition Height="*"/>
            </Grid.RowDefinitions>

            <StackPanel Grid.Row="0"
                        Orientation="Horizontal"
                        VerticalAlignment="Top"
                        Margin="0,5,0,0">
                        <TextBlock Margin="60,0,0,0" Width="160" FontWeight="Bold">Task Name</TextBlock>
                        <TextBlock Margin="10,0,0,0" Width="160" FontWeight="Bold">Team Name</TextBlock>
                        <TextBlock Margin="0,0,0,0" Width="55" FontWeight="Bold">Deadline</TextBlock>
                        <TextBlock Margin="20,0,0,0" Width="60" FontWeight="Bold">Start</TextBlock>
                        <TextBlock Margin="28,0,0,0" Width="60" FontWeight="Bold">End</TextBlock>
                        <TextBlock Margin="20,0,0,0" Width="60" FontWeight="Bold">Run Time</TextBlock>
        </StackPanel>
            
            <Separator  Grid.Row="1"
                        VerticalAlignment="Top"/>

            <Grid   Name="taskListGrid"
                    Grid.Row="2"
                    Height="510"
                    Width="830">
                <ScrollViewer   VerticalScrollBarVisibility="Auto"
                                Width="{Binding ActualWidth,RelativeSource={RelativeSource 
                                Mode=FindAncestor, AncestorType=Grid}}"                   
                                Height="{Binding ActualHeight,RelativeSource={RelativeSource
                                Mode=FindAncestor, AncestorType=Grid}}">
                    <StackPanel Orientation="Vertical"
                                    x:Name="taskListStack">
                        <StackPanel.Resources>
                            <Style TargetType="UserControl">
                                <Setter Property="Margin" Value="0,5,0,0"/>
                            </Style>
                        </StackPanel.Resources>
                    </StackPanel>
                </ScrollViewer>
            </Grid>



    </Grid>
</UserControl>

最后是创建的项目:

<UserControl x:Class="Power_Planner_1._0.Team_Planner.MyTasks.ucTaskItem"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             xmlns:local="clr-namespace:Power_Planner_1._0.Team_Planner.MyTasks"
             xmlns:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes"
             mc:Ignorable="d" d:DesignHeight="45">
    <Border CornerRadius="12,12,12,12"
            BorderThickness="1,1,1,1"
            BorderBrush="LightGray"
            Background="#FF456780"
            Padding="0">
        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="50"/>
                <ColumnDefinition Width="160"/>
                <ColumnDefinition Width="160"/>
                <ColumnDefinition Width="65"/>
                <ColumnDefinition Width="90"/>
                <ColumnDefinition Width="90"/>
                <ColumnDefinition Width="65"/>
                <ColumnDefinition Width="*"/>
            </Grid.ColumnDefinitions>
            <!--Picture-->
                <Border     Grid.Column="0"
                            CornerRadius="25,25,25,25"
                            BorderThickness="1,1,1,1"
                            Width="30"
                            Height="30"
                            BorderBrush="LightGray"
                            Background="ForestGreen"
                            HorizontalAlignment="Left"
                            Margin="10,0,0,0">
                </Border>
                <!--Task Name-->
                <TextBlock  Grid.Column="1"
                            Margin="10,0,0,0"
                            FontSize="12"
                            Foreground="LightGray"
                            Text="{Binding taskName}"
                            Width="160"
                            VerticalAlignment="Center">
                </TextBlock>
                <!--Team Name-->
                <TextBlock  Grid.Column="2"
                            Margin="20,0,0,0"
                            FontSize="12"
                            Foreground="LightGray"
                            Text="{Binding teamName}"
                            Width="160"
                            VerticalAlignment="Center">
                </TextBlock>
                <!--Deadline-->
                <TextBlock  Grid.Column="3"
                            Margin="20,0,0,0"
                            FontSize="12"
                            Foreground="LightGray"
                            Text="{Binding deadline}"
                            Width="45"
                            VerticalAlignment="Center">
                </TextBlock>
                <!--Start-->
                <Button Grid.Column="4"
                            Background="#FF456780"
                            BorderBrush="LightGray"
                            Height="25"
                            Margin="20,0,0,0"
                            Width="60">
                    <Button.Resources>
                        <Style TargetType="{x:Type Border}">
                            <Setter Property="CornerRadius" Value="10"/>
                        </Style>
                    </Button.Resources>
                <TextBlock Foreground="LightGray">Start</TextBlock>
                </Button>
                <!--Stop-->
                <Button Grid.Column="5"
                            Background="#FF456780"
                            BorderBrush="LightGray"
                            Height="25"
                            Margin="20,0,0,0"
                            Width="60">
                    <Button.Resources>
                        <Style TargetType="{x:Type Border}">
                            <Setter Property="CornerRadius" Value="10"/>
                        </Style>
                    </Button.Resources>
                    <TextBlock Foreground="LightGray">Stop</TextBlock>
                </Button>
                <!--Deadline-->
                <TextBlock  Grid.Column="6"
                            Margin="20,0,0,0"
                            FontSize="12"
                            Foreground="LightGray"
                            Text="{Binding runtime}"
                            Width="45"
                            VerticalAlignment="Center">
                </TextBlock>
                <!--Other Options-->
                <materialDesign:PopupBox    Grid.Column="7"
                                            StaysOpen="False" 
                                            Foreground="White"
                                            HorizontalAlignment="Right">
                    <StackPanel Width="150"
                                Background="White">
                        <Button Content="Edit"/>
                        <Button Content="View Details"/>
                        <Button Content="Comment"/>
                    </StackPanel>
                </materialDesign:PopupBox>
        </Grid>
    </Border>

</UserControl>

添加项目的代码:

taskListStack.Children.Clear();
var task1 = new clsTaskItem("Test1", "blablabla", "12:40", "02:30");
taskListStack.Children.Add(new ucTaskItem(task1));
var task2 = new clsTaskItem("Test2", "blablabla", "13:45");
taskListStack.Children.Add(new ucTaskItem(task2));
var task3 = new clsTaskItem("Test3", "blablabla", "11:45");
taskListStack.Children.Add(new ucTaskItem(task3));
var task4 = new clsTaskItem("Test4", "blablabla", "14:45");
taskListStack.Children.Add(new ucTaskItem(task4));
var task5 = new clsTaskItem("Test5", "blablabla", "17:45");
taskListStack.Children.Add(new ucTaskItem(task5));
var task6 = new clsTaskItem("Test6", "blablabla", "18:45");
taskListStack.Children.Add(new ucTaskItem(task6));
var task7 = new clsTaskItem("Test7", "blablabla", "13:23");
taskListStack.Children.Add(new ucTaskItem(task7));
var task8 = new clsTaskItem("Test8", "blablabla", "12:54");
taskListStack.Children.Add(new ucTaskItem(task8));
var task9 = new clsTaskItem("Test9", "blablabla", "17:23");
taskListStack.Children.Add(new ucTaskItem(task9));
var task10 = new clsTaskItem("Test10", "blablabla", "17:10");
taskListStack.Children.Add(new ucTaskItem(task10));
    taskListStack.Children.Add(new ucTaskItem(task1));
    taskListStack.Children.Add(new ucTaskItem(task2));
    taskListStack.Children.Add(new ucTaskItem(task3));
    taskListStack.Children.Add(new ucTaskItem(task4));
    taskListStack.Children.Add(new ucTaskItem(task5));
    taskListStack.Children.Add(new ucTaskItem(task6));
    taskListStack.Children.Add(new ucTaskItem(task7));
    taskListStack.Children.Add(new ucTaskItem(task8));
    taskListStack.Children.Add(new ucTaskItem(task9));
    taskListStack.Children.Add(new ucTaskItem(task10));

和任务项类(通过数据上下文绑定到哪些项)

public class clsTaskItem
{
    public clsTaskItem(string tsname, string tmname, string dline, string rtime = "00:00:00")
    {
        taskName = tsname;
        teamName = tmname;
        deadline = dline;
        runtime = rtime;
    }

    public string taskName  { get; private set; }
    public string teamName  { get; private set; }
    public string deadline  { get; private set; }
    public string runtime   { get; private set; }
}

如您所见,我试图将滚动查看器高度绑定到我在其上创建的网格,认为如果我将高度设置为自动,它将从网格实际高度获取高度。好吧,这没有多大意义,因此它不起作用。我正在尝试找到另一种对项目进行分组的解决方案,这样我就可以轻松扩展主窗口,而无需对每个窗口进行编码以通过此扩展进行扩展,以便项目既能填充所有可用空间,又能在需要时显示滚动条。

请帮忙 :)

标签: c#wpf

解决方案


推荐阅读