Scrolling Tabs in TabControl, Better horizontal scrolling

This commit is contained in:
Montilla Kryštof committed 2019-05-07 19:06:32 +02:00
1 parent 8f9fe6df49
commit 53c9bd7836
3 files changed
+138 -24

No files matched your search

@@ -91,23 +91,78 @@
<RowDefinition x:Name="RowDefinition0" Height="Auto"/>
<RowDefinition x:Name="RowDefinition1" Height="*"/>
</Grid.RowDefinitions>
<Border Background="{TemplateBinding Background}" BorderThickness="0,0,0,1" BorderBrush="{DynamicResource BorderBrush}">
<controls:TabPanel MinHeight="{TemplateBinding TabItemHeight}" TabItemHeight="{TemplateBinding TabItemHeight}" TabItemWidth="{TemplateBinding TabItemWidth}" IsEnableTabFill="{TemplateBinding IsEnableTabFill}" Margin="0,0,-1,-1" x:Name="PART_HeaderPanel" HorizontalAlignment="Left" Background="{DynamicResource SecondaryTextBrush}" IsItemsHost="true" KeyboardNavigation.TabIndex="1" Panel.ZIndex="1">
<interactivity:Interaction.Behaviors>
<interactivity:FluidMoveBehavior AppliesTo="Children" Duration="{Binding FluidMoveDuration,ElementName=PART_HeaderPanel}">
<interactivity:FluidMoveBehavior.EaseX>
<CubicEase EasingMode="EaseOut"/>
</interactivity:FluidMoveBehavior.EaseX>
</interactivity:FluidMoveBehavior>
</interactivity:Interaction.Behaviors>
</controls:TabPanel>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Border Visibility="{Binding Visibility,ElementName=PART_OverflowButton}" Margin="0,-1,0,0" Grid.Row="0" Grid.Column="0"
BorderThickness="0,0,1,0" BorderBrush="{DynamicResource BorderBrush}"
Background="{DynamicResource RegionBrush}" HorizontalAlignment="Left"
Panel.ZIndex="2">
<Border.CacheMode>
<BitmapCache SnapsToDevicePixels="True"/>
</Border.CacheMode>
<Border.Effect>
<DropShadowEffect Direction="-45" BlurRadius="25"
ShadowDepth="8" Opacity="0.5"
Color="{DynamicResource EffectShadowColor}"/>
</Border.Effect>
<Button Style="{DynamicResource ButtonIcon}"
controls:IconElement.Geometry="{StaticResource LeftGeometry}"
Grid.Column="0"
Foreground="{DynamicResource PrimaryTextBrush}"
x:Name="PART_OverflowButtonLeft"
/>
</Border>
<controls:ScrollViewer HorizontalScrollBarVisibility="Hidden"
CanMouseWheel="True" Orientation="Horizontal"
IsEnableInertia="True"
Grid.Column="1"
IsDeferredScrollingEnabled="True"
x:Name="PART_OverflowScrollviewer">
<Border Background="{TemplateBinding Background}" BorderThickness="0,0,0,1" BorderBrush="{DynamicResource BorderBrush}" >
<controls:TabPanel MinHeight="{TemplateBinding TabItemHeight}" TabItemHeight="{TemplateBinding TabItemHeight}" TabItemWidth="{TemplateBinding TabItemWidth}" IsEnableTabFill="{TemplateBinding IsEnableTabFill}" Margin="0,0,-1,-1" x:Name="PART_HeaderPanel" HorizontalAlignment="Left" Background="{DynamicResource SecondaryTextBrush}" IsItemsHost="true" KeyboardNavigation.TabIndex="1" Panel.ZIndex="1">
<interactivity:Interaction.Behaviors>
<interactivity:FluidMoveBehavior AppliesTo="Children" Duration="{Binding FluidMoveDuration,ElementName=PART_HeaderPanel}">
<interactivity:FluidMoveBehavior.EaseX>
<CubicEase EasingMode="EaseOut"/>
</interactivity:FluidMoveBehavior.EaseX>
</interactivity:FluidMoveBehavior>
</interactivity:Interaction.Behaviors>
</controls:TabPanel>
</Border>
</controls:ScrollViewer>
</Grid>
<Border Visibility="{Binding Visibility,ElementName=PART_OverflowButton}"
Margin="0,-1,0,0" Grid.Row="0" Grid.Column="0" BorderThickness="1,0,0,1" BorderBrush="{DynamicResource BorderBrush}"
Background="{DynamicResource RegionBrush}" HorizontalAlignment="Right">
<Border.Effect>
<DropShadowEffect Direction="-135" BlurRadius="25"
ShadowDepth="8" Opacity="0.5"
Color="{DynamicResource EffectShadowColor}"/>
</Border.Effect>
<Border.CacheMode>
<BitmapCache SnapsToDevicePixels="True"/>
</Border.CacheMode>
<StackPanel Orientation="Horizontal">
<Button Style="{DynamicResource ButtonIcon}"
controls:IconElement.Geometry="{StaticResource RightGeometry}"
Foreground="{DynamicResource PrimaryTextBrush}"
x:Name="PART_OverflowButtonRight"/>
<controls:ContextMenuToggleButton x:Name="PART_OverflowButton" Visibility="Collapsed" Style="{StaticResource ToggleButtonIconTransparent}" controls:IconSwitchElement.Geometry="{StaticResource DownGeometry}" controls:IconSwitchElement.GeometrySelected="{StaticResource UpGeometry}"/>
</StackPanel>
</Border>
<Border x:Name="contentPanel" Background="{DynamicResource SecondaryRegionBrush}" Grid.Column="0" KeyboardNavigation.DirectionalNavigation="Contained" Grid.Row="1" KeyboardNavigation.TabIndex="2" KeyboardNavigation.TabNavigation="Local">
<Border x:Name="contentPanel" Background="{DynamicResource SecondaryRegionBrush}"
Grid.Column="0" KeyboardNavigation.DirectionalNavigation="Contained" Grid.Row="1" KeyboardNavigation.TabIndex="2" KeyboardNavigation.TabNavigation="Local"
>
<ContentPresenter x:Name="PART_SelectedContentHost" ContentSource="SelectedContent" Margin="{TemplateBinding Padding}" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
</Border>
<Border Visibility="{Binding Visibility,ElementName=PART_OverflowButton}" Margin="0,-1,0,0" Grid.Row="0" Grid.Column="0" BorderThickness="1,0,0,1" BorderBrush="{DynamicResource BorderBrush}" Background="{DynamicResource RegionBrush}" HorizontalAlignment="Right">
<controls:ContextMenuToggleButton x:Name="PART_OverflowButton" Visibility="Collapsed" Style="{StaticResource ToggleButtonIconTransparent}" controls:IconSwitchElement.Geometry="{StaticResource DownGeometry}" controls:IconSwitchElement.GeometrySelected="{StaticResource UpGeometry}"/>
</Border>
</Grid>
</Border>
</ControlTemplate>