트리뷰의 스크롤뷰어 관련 질문

안녕하세요.

TreeView를 커스텀해서 디자인해보고 있는데,
TreeViewItem이 Extend 될 때 TreeView 내부의 ScrollViewer가
Extend된 TreeViewItem 사이즈 만큼 늘어나지 않고 있습니다.
어떤 부분이 문제인지 파악이 안되는데 어느 부분을 손대야지
ScrollViewer의 스크롤이 늘어난 ItemPresenter 사이즈를 인식해서 변할 수 있을까요

TreeView 스타일 부분

<Style TargetType="{x:Type back:CustomTreeView}">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type back:CustomTreeView}">
                <Border 
                    BorderBrush="{TemplateBinding BorderBrush}" 
                    BorderThickness="{TemplateBinding BorderThickness}" 
                    Background="{TemplateBinding Background}"
                    CornerRadius="50">
                    <Border.OpacityMask>
                        <VisualBrush>
                            <VisualBrush.Visual>
                                <Border 
                                    Background="Black"
                                    SnapsToDevicePixels="True"
                                    CornerRadius="{Binding CornerRadius, RelativeSource={RelativeSource AncestorType=Border}}"
                                    Width="{Binding ActualWidth, RelativeSource={RelativeSource AncestorType=Border}}"
                                    Height="{Binding ActualHeight, RelativeSource={RelativeSource AncestorType=Border}}"
                                    />
                            </VisualBrush.Visual>
                        </VisualBrush>
                    </Border.OpacityMask>
                    <ScrollViewer x:Name="_tv_scrollviewer_" 
                                  VerticalScrollBarVisibility="Visible"
                              Margin="0 20 0 20">
                        <ItemsPresenter/>
                    </ScrollViewer>
                </Border>
                <ControlTemplate.Triggers>
                    <Trigger Property="VirtualizingPanel.IsVirtualizing" Value="true">
                        <Setter Property="CanContentScroll" TargetName="_tv_scrollviewer_" Value="true"/>
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

TreeViewItem부분

<Style TargetType="{x:Type back:CustomTreeViewItem}">
    <Setter Property="Background" Value="Transparent"/>
    <Setter Property="Foreground" Value="Black"/>
    <Setter Property="IsExpanded" Value="{Binding IsTreeExpanded, Mode=TwoWay}"/>
    <Setter Property="IsSelected" Value="{Binding IsTreeSelected}"/>
    <Setter Property="ItemsSource" Value="{Binding ChildItem}"/>
    <Setter Property="SnapsToDevicePixels" Value="True"/>
    <Setter Property="UseLayoutRounding" Value="True"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type back:CustomTreeViewItem}">
                <Grid>
                    <Grid.RowDefinitions>
                        <RowDefinition Height="Auto"/>
                        <RowDefinition Height="Auto"/>
                    </Grid.RowDefinitions>
                    <Border x:Name="item"
                         Background="{TemplateBinding Background}"
                            Margin="0 5 0 0"
                            >
                        <Grid>
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="Auto"/>
                                <ColumnDefinition Width="Auto"/>
                            </Grid.ColumnDefinitions>
                            <back:ExpandButton x:Name="expand"
                                                Grid.Column="0"
                                             Foreground="{TemplateBinding Foreground}"
                                             IsChecked="{Binding IsTreeExpanded, Mode=TwoWay}"
                                               VerticalAlignment="Center"/>
                            <Border Grid.Column="1"
                                    x:Name="textBorder"
                                        CornerRadius="5"
                                        Margin="0 0 30 0"
                                        Background="#1BA1E2">
                                <TextBlock x:Name="text"
                                           Grid.Column="1"
                                           Foreground="White"
                                           Text="{Binding Name}"
                                           Margin="5 0 5 0"
                                           TextTrimming="CharacterEllipsis"
                                           VerticalAlignment="Center"/>
                            </Border>
                        </Grid>
                    </Border>
                    <ItemsPresenter Grid.Row="1" x:Name="items" Visibility="Collapsed" Margin="20 0 0 0"/>
                </Grid>
                <ControlTemplate.Triggers>
                    <Trigger Property="IsExpanded" Value="True">
                        <Setter TargetName="items" Property="Visibility" Value="Visible"/>
                    </Trigger>
                    <DataTrigger Binding="{Binding ElementName=expand, Path=IsChecked}" Value="True">
                        <Setter TargetName="items" Property="Visibility" Value="Visible"/>
                    </DataTrigger>
                    <DataTrigger Binding="{Binding ElementName=expand, Path=IsChecked}" Value="False">
                        <Setter TargetName="items" Property="Visibility" Value="Collapsed"/>
                    </DataTrigger>
                    <Trigger Property="IsSelected" Value="True">
                        <Setter Property="Background" Value="Gray"/>
                        <Setter Property="Foreground" Value="White"/>
                    </Trigger>
                    <DataTrigger Binding="{Binding ChildItem}" Value="{x:Null}">
                        <Setter TargetName="expand" Property="Visibility" Value="Hidden"/>
                    </DataTrigger>
                    <DataTrigger Binding="{Binding IsLast}" Value="true">
                        <Setter TargetName="textBorder" Property="Background" Value="#B5739D"/>
                    </DataTrigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>
1 Like
 <ItemsPresenter Grid.Row="1" x:Name="items" Visibility="Collapsed" Margin="20 0 0 0"/>
<ScrollViewer>
   <ItemsPresenter Grid.Row="1" x:Name="items" Visibility="Collapsed" Margin="20 0 0 0"/>
</ScrollViewer>

TreeViewItem부분에 ItemsPresenter 부분의 스크롤뷰어를 한번 감싸보시면 어떠실까요 !

아이템마다 Viewer가 감싸지는 현상이 생깁니다

1 Like

아!
질문의 요지를 잘못 읽었네요! 위 답변은 무시해주세요 :frowning:

VerticalScrollBarVisibility 보시면
Visible 이외에도 Auto 라는 Enum값이 존재합니다.
Auto로 한번 설정해보시겠습니까?

답변 감사합니다.
VerticalScrollBarVisibility=“Auto” 역시도 변동되는 Item 사이즈에 대응되지 않았습니다.

1 Like

해결책을 찾았습니다.

ScrollViewer부분을 아래와 같이 수정했습니다.

<ScrollViewer   Focusable="False"
                CanContentScroll="False"
                Padding="4"
          Margin="0 20 0 20">
    <ItemsPresenter/>
</ScrollViewer>
2 Likes