ScrollBar не виден внутри ScrollViewer - PullRequest
0 голосов
/ 25 декабря 2018

Я застрял в этой проблеме на некоторое время, и мне кажется, что я не могу справиться с этим.Я создал UserControl с именем TaskListControl, который по сути является списком другого UserControl с именем TaskListItemControl, и я хочу, чтобы он отображал вертикальный ScrollBar, когда содержимое переполняется, но этого не происходит.

После некоторого поиска и тестирования я попытался сломать CustomControl, потому что подозреваю, что проблема связана с неопределенным занятием пространства списком предметов.Я включил ScrollViewer внутри Grid и поместил его внутри MainWindow, но ничего не изменилось.

Вот код для TaskListItem, содержащийся в списке:

<UserControl x:Class="CSB.Tasks.TaskListItemControl"
         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:CSB.Tasks"
         xmlns:core="clr-namespace:CSB.Tasks.Core;assembly=CSB.Tasks.Core"
         mc:Ignorable="d"
         Height="70"
         d:DesignHeight="100" d:DesignWidth="400">

<!-- Custom control that represents a Task. -->
<UserControl.Resources>
    <!-- The control style. -->
    <Style x:Key="ContentStyle" TargetType="{x:Type ContentControl}">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type ContentControl}">

                    <Border x:Name="ContainerBorder" BorderBrush="{StaticResource LightVoidnessBrush}"
                            Background="{StaticResource DeepVoidnessBrush}"
                            BorderThickness="1" 
                            Margin="2">

                        <!-- The grid that contains the control. -->
                        <Grid Name="ContainerGrid" Background="Transparent">

                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="Auto"/>
                                <ColumnDefinition Width="*"/>
                                <ColumnDefinition Width="Auto"/>
                            </Grid.ColumnDefinitions>

                            <!-- Border representing the priority state of the Task:
                            The color is defined by a ValueConverter according to the PriorityLevel of the Task object. -->
                            <Border Grid.Column="0"
                                    Width="10"
                                    Background="{Binding Priority, Converter={local:PriorityLevelToRGBConverter}}">
                            </Border>

                            <!-- Border containing the Task's informations. -->
                            <Border Grid.Column="1" Padding="5">
                                <StackPanel>
                                    <!-- The title of the Task. -->
                                    <TextBlock Text="{Binding Title}" FontSize="{StaticResource TaskListItemTitleFontSize}" Foreground="{StaticResource DirtyWhiteBrush}"/>

                                    <!-- The customer the Taks refers to. -->
                                    <TextBlock Text="{Binding Customer}" Style="{StaticResource TaskListItemControlCustomerTextBlockStyle}"/>

                                    <!-- The description of the Task. -->
                                    <TextBlock Text="{Binding Description}"
                                               TextTrimming="WordEllipsis"
                                               Foreground="{StaticResource DirtyWhiteBrush}"/>
                                </StackPanel>
                            </Border>

                            <!-- Border that contains the controls for the Task management. -->
                            <Border Grid.Column="2"
                                    Padding="5">

                                <!-- Selection checkbox of the Task. -->
                                <CheckBox Grid.Column="2" VerticalAlignment="Center"/>
                            </Border>

                        </Grid>

                    </Border>

                    <!-- Template triggers. -->
                    <ControlTemplate.Triggers>

                        <DataTrigger Binding="{Binding IsSelected}" Value="True">
                            <Setter Property="Background" TargetName="ContainerBorder" Value="{StaticResource VoidnessBrush}"/>
                            <Setter Property="BorderBrush" TargetName="ContainerBorder" Value="{StaticResource PeterriverBrush}"/>
                        </DataTrigger>

                        <EventTrigger RoutedEvent="MouseEnter">
                            <BeginStoryboard>
                                <Storyboard>
                                    <ColorAnimation Duration="0:0:0:0" To="{StaticResource LightVoidness}" Storyboard.TargetName="ContainerGrid" Storyboard.TargetProperty="Background.Color"/>
                                </Storyboard>
                            </BeginStoryboard>
                        </EventTrigger>

                        <EventTrigger RoutedEvent="MouseLeave">
                            <BeginStoryboard>
                                <Storyboard>
                                    <ColorAnimation Duration="0:0:0:0" To="Transparent" Storyboard.TargetName="ContainerGrid" Storyboard.TargetProperty="Background.Color"/>
                                </Storyboard>
                            </BeginStoryboard>
                        </EventTrigger>
                    </ControlTemplate.Triggers>

                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</UserControl.Resources>

<!-- Content of the control: assignment of the DataContext for design-time testing. -->
<ContentControl d:DataContext="{x:Static core:TaskListItemDesignModel.Instance}" 
                Style="{StaticResource ContentStyle}"/>

А вот код TaskListControl:

<UserControl x:Class="CSB.Tasks.TaskListControl"
         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:CSB.Tasks"
         xmlns:core="clr-namespace:CSB.Tasks.Core;assembly=CSB.Tasks.Core"
         mc:Ignorable="d" 
         d:DesignHeight="500" d:DesignWidth="500">

<!-- Custom control that represents a list of TaskListItemControl. -->
<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="*"/>
    </Grid.RowDefinitions>

    <ScrollViewer Grid.Row="0"
                  VerticalScrollBarVisibility="Auto"
                  HorizontalScrollBarVisibility="Auto"
                  DataContext="{x:Static core:TaskListDesignModel.Instance}"
                  Height="{Binding RelativeSource={RelativeSource AncestorType=Window, Mode=FindAncestor}, Path=Height}">

        <!-- The items shown in the list. -->
        <ItemsControl ItemsSource="{Binding Items}">
            <ItemsControl.ItemTemplate>
                <DataTemplate>
                    <local:TaskListItemControl/>
                </DataTemplate>
            </ItemsControl.ItemTemplate>
        </ItemsControl>

    </ScrollViewer>

</Grid>

Как видите, я установил DataContext, чтобы проверить элементы управления и Iна самом деле можно увидеть ScrollBar внутри предварительного просмотра дизайна:

Actual result.

РЕДАКТИРОВАТЬ: Мне удалось показать ScrollBar, но, кажется, переполняет Window, который содержит TaskListControl, поскольку я привязал его высоту к Window высоте, что, очевидно, также учитывает заголовок заголовка.Вот код MainWindow, где используется элемент управления:

<Window x:Class="CSB.Tasks.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:CSB.Tasks"
    mc:Ignorable="d"
    Title="{StaticResource MainWindow_TitleText}"
    Style="{StaticResource WindowDefaultStyle}"
    Height="500" 
    Width="500"
    WindowStartupLocation="CenterScreen">

<WindowChrome.WindowChrome>
    <WindowChrome ResizeBorderThickness="{Binding ResizeBorderThickness}"
                  GlassFrameThickness="0"
                  CornerRadius="{Binding CornerRadius}"/>
</WindowChrome.WindowChrome>

<local:TaskListControl>
    <local:TaskListControl/>
</local:TaskListControl>

TaskListControl помещается непосредственно в Window, так как я пытался вставить его почтикаждый тип «контейнера» (Border, StackPanel, Grid и т. д.), но, к счастью, высота все равно переполняется.

Поскольку я хотел бы обрабатывать высоту непосредственно вопределение UserControl, избегающее делать это каждый раз, когда я его использую:

  • Где я должен поместить TaskListControl внутри MainWindow (какой тип контейнера)?
  • Каким образом я должен установить высоту TaskListControl внутри определения UserControl (теперь она привязана к высоте окна, но совсем не корректна)?

Вот результатчто я достиг до сих пор (вы видите, что нижняя кнопка прокрутки отсутствует):

Final result

У кого-нибудь есть какие-либо предложения?Заранее всем спасибо за помощь.

1 Ответ

0 голосов
/ 26 декабря 2018

Для устранения таких проблем лучше всего установить видимость полосы прокрутки на Видимый, чтобы вы могли видеть, как растет ваш ScrollViewer.Вероятно, он становится больше, чем размер экрана, и если вы установите видимость полосы прокрутки на Видимый, нижняя кнопка прокрутки будет отсутствовать.

Возможно, вы поместили свой пользовательский элемент управления в контейнер, высота которого * равнастановится больше экрана, и полоса прокрутки никогда не будет отображаться.

Обновление : я проверил ваш проект, и я считаю, что проблема заключается в Grid в Windows.xaml.В строках 23-27 измените порядок двух последних определений RowDefinitions следующим образом:

<Grid.RowDefinitions>
    <RowDefinition Height="{Binding TitleHeight}"/>
    <RowDefinition Height="*"/>
    <RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...