Scorrimento contenuto all'interno un bordo con CornerRadius
-
21-08-2019 - |
Domanda
Sto cercando aiuto con un problema WPF sono stato alle prese con un po '. Ho Styled vista scheda, spostando le linguette sulla sinistra e la visualizzazione verticalmente. Queste schede sedersi all'interno di un bordo con angoli arrotondati in alto e in basso a sinistra.
Io corro in un problema quando le schede vengono fatti scorrere. Invece degli angoli arrotondati di ritaglio il contenuto scorrimento, il contenuto cavalca in realtà in cima degli angoli, come si vede qui:
Ecco il codice 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>
Tutte le idee su un modo ho potuto realizzare quello che sto cercando? Ho provato alcuni trucchi ZIndex, ma che non sembrano lavorare.
Soluzione 2
Per realizzare quello che cercavo, ho usato la soluzione trovata qui , e modificato per adattarlo alle mie esigenze. Ecco quello che ho finito con:
<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>
Modifica Ho trovato la soluzione al problema di clipping con il primo TabItem. Nesting la ScrollView all'interno di una seconda sponda e applicando l'OpacityMask a questo confine, e non lo ScrollView risolto il problema. Inoltre, ho dovuto impostare in modo esplicito sfondo = "trasparente" al confine dove l'OpacityMask è stata applicata in modo che il clip non accada prematuramente.
Altri suggerimenti
È possibile impostare un Clip
al confine arrotondato con una geometria corrispondente contorno del confine.
<Border>
<Border.Clip>
<RectangleGeometry Rect="..." RadiusX="..." RadiusY="..."/>
</Border.Clip>
</Border>
Si noti che - come probabilmente hai trovato - ClipToBounds
sul Border
non funzionerà perché l'area compresa tra l'angolo e il bordo arrotondato è nei limiti del <= >, quindi non sarà tagliato.