Cornerradius와의 테두리 내부의 콘텐츠를 스크롤합니다
-
21-08-2019 - |
문제
나는 잠시 동안 씨름해온 WPF 문제에 대한 도움을 찾고 있습니다. 탭보기를 스타일로 만들어 탭을 왼쪽으로 옮기고 수직으로 표시했습니다. 이 탭은 둥근 모서리가있는 둥근 모서리가있는 테두리 안에 앉아 있습니다.
탭이 스크롤 될 때 문제가 발생합니다. 스크롤 된 컨텐츠를 자르는 둥근 코너 대신 내용은 실제로 여기에서 볼 수 있듯이 코너 위로 올라갑니다.
겹치는 탭 http://gallery.me.com/theplatz/100006/tabbad/web.png?ver=12464623500001
여기 XAML이 있습니다.
<Style x:Key="SidebarTabControl" TargetType="TabControl">
<Setter Property="Background" Value="#FFC6D3DE" />
<Setter Property="Padding" Value="0,20,0,0" />
<Setter Property="TabStripPlacement" Value="Left" />
<Setter Property="IsSynchronizedWithCurrentItem" Value="True" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type TabControl}">
<Grid KeyboardNavigation.TabNavigation="Local">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="200" MinWidth="150" MaxWidth="400" />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Border
CornerRadius="10,0,0,10"
Background="{TemplateBinding Background}">
<ScrollViewer Grid.Column="0"
VerticalScrollBarVisibility="Auto"
HorizontalScrollBarVisibility="Disabled"
ClipToBounds="True">
<Border Padding="{TemplateBinding Padding}">
<TabPanel
IsItemsHost="True"
KeyboardNavigation.TabIndex="1"
Background="Transparent">
</TabPanel>
</Border>
</ScrollViewer>
</Border>
<ContentPresenter
Grid.Column="1"
Margin="0"
ContentSource="SelectedContent" />
<GridSplitter Grid.Column="0"
HorizontalAlignment="Right"
VerticalAlignment="Stretch"
Background="{StaticResource SplitterBrush}"
ShowsPreview="True"
Width="1" />
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="SidebarTab" TargetType="TabItem">
<Setter Property="Padding" Value="10,12,2,12" />
<Setter Property="BorderThickness" Value="0,1,0,1" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type TabItem}">
<Border Padding="{TemplateBinding Padding}"
Name="tab"
BorderThickness="{TemplateBinding BorderThickness}"
BorderBrush="{StaticResource SidebarTabBorderBrush}">
<ContentPresenter Style="{StaticResource SidebarTabForegroundStyle}" Name="content" ContentSource="Header" />
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsSelected" Value="True">
<Setter TargetName="tab" Property="Background" Value="{StaticResource SidebarTabBackgroundBrushSelected}" />
<Setter TargetName="tab" Property="BorderBrush" Value="{StaticResource SidebarTabBorderBrushSelected}" />
<Setter TargetName="content" Property="Style" Value="{StaticResource SidebarTabForegroundStyleSelected}" />
</Trigger>
<Trigger Property="IsSelected" Value="False">
<Setter TargetName="tab" Property="Background" Value="{StaticResource SidebarTabBackgroundBrush}" />
<Setter TargetName="tab" Property="BorderBrush" Value="{StaticResource SidebarTabBorderBrush}" />
<Setter TargetName="content" Property="Style" Value="{StaticResource SidebarTabForegroundStyle}" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
내가 찾고있는 것을 성취 할 수있는 방법에 대한 아이디어가 있습니까? Zindex 트릭을 시도했지만 작동하지 않은 것 같습니다.
해결책 2
내가 찾고 있던 것을 달성하기 위해 찾은 솔루션을 사용했습니다. 여기, 내 요구에 맞게 수정했습니다. 다음은 다음과 같습니다.
<Style x:Key="SidebarTabControl" TargetType="TabControl">
<Setter Property="Background" Value="#FFC6D3DE" />
<Setter Property="Padding" Value="0,20,0,20" />
<Setter Property="TabStripPlacement" Value="Left" />
<Setter Property="IsSynchronizedWithCurrentItem" Value="True" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type TabControl}">
<Grid KeyboardNavigation.TabNavigation="Local">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="200" MinWidth="150" MaxWidth="400" />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<!-- Background of the sidebar and our clipping bounds -->
<Border Grid.Column="0"
CornerRadius="10,0,0,10"
Background="{TemplateBinding Background}"
Name="mask" />
<!-- Border necessary so that the top tab does not get clipped prematurely -->
<Border Grid.Column="0" Background="Transparent">
<!-- Add opacity mask to clip contents as they're scrolled -->
<Border.OpacityMask>
<VisualBrush Visual="{Binding ElementName=mask}"/>
</Border.OpacityMask>
<ScrollViewer
VerticalScrollBarVisibility="Visible"
HorizontalScrollBarVisibility="Disabled">
<Border Padding="{TemplateBinding Padding}">
<TabPanel
IsItemsHost="True"
KeyboardNavigation.TabIndex="1"
Background="Transparent">
</TabPanel>
</Border>
</ScrollViewer>
</Border>
<ContentPresenter
Grid.Column="1"
Margin="0"
ContentSource="SelectedContent" />
<GridSplitter Grid.Column="0"
HorizontalAlignment="Right"
VerticalAlignment="Stretch"
Background="{StaticResource SplitterBrush}"
ShowsPreview="True"
Width="1" />
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
편집하다: 첫 번째 tabitem에서 클리핑 문제에 대한 해결책을 찾았습니다. 두 번째 테두리 안에 스크롤 뷰를 중첩하고 불투명 마스크를이 테두리에 적용하고 스크롤 뷰가 문제를 해결하지 못했습니다. 또한 클립이 조기에 발생하지 않기 위해 불투명 마스크가 적용되는 경계에 배경 = "투명한"을 명시 적으로 설정해야했습니다.
다른 팁
당신은 a를 설정할 수 있습니다 Clip
국경의 개요와 일치하는 지오메트리가있는 둥근 테두리에.
<Border>
<Border.Clip>
<RectangleGeometry Rect="..." RadiusX="..." RadiusY="..."/>
</Border.Clip>
</Border>
아마 찾은대로 - ClipToBounds
에 Border
코너와 둥근 가장자리 사이의 영역이 작동하지 않습니다. ~이다 의 범위에서 Border
, 따라서 잘리지 않습니다.