WPF ScrollViewer without “bars”, just the buttons on the left and right
Question
How can I achieve to have a TabControl where my tabs are scrollable in a ScrollViewer , but without having the "bar" of the scrollviewer, and the navigation buttons surrounding the tabs. Like an internet browser does
I added the tabs in scrollviewer as shown below, but I don't know if it is achievable to customize the scrollviewer to my needs.
<ScrollViewer
HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Disabled"
Grid.Row="0" Grid.Column="1">
<TabPanel
Panel.ZIndex ="1"
KeyboardNavigation.TabIndex="1"
Margin="2,2,2,0"
IsItemsHost="true"/>
1 answers
solution1
1 ACCPTED 2018-10-04 14:07:33
You can try this or the code below. The code is not mine, I just copied it from here , but i think that's the code you are looking for.
<TabControl x:Name="myTab" >
<TabControl.Resources>
<LinearGradientBrush x:Key="TabItemDefaultBackgroundBrush" StartPoint="0,0" EndPoint="0,1">
<GradientBrush.GradientStops>
<GradientStopCollection>
<GradientStop Offset="0.0" Color="#FFF" />
<GradientStop Offset="1.0" Color="#EEE" />
</GradientStopCollection>
</GradientBrush.GradientStops>
</LinearGradientBrush>
<SolidColorBrush x:Key="SolidBorderBrush" Color="#888" />
<SolidColorBrush x:Key="TabItemSelectBackgroundBrush" Color="#AAA" />
<SolidColorBrush x:Key="TabItemMouseoverBrush" Color="#BBB" />
<SolidColorBrush x:Key="CloseButtenBackgroundBrush" Color="#169" />
<SolidColorBrush x:Key="CloseButtenMouseoverBrush" Color="#E5E" />
<SolidColorBrush x:Key="CloseButtenPressBrush" Color="#E0E" />
<Style TargetType="{x:Type TabItem}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type TabItem}">
<Grid>
<Border
Name="tabBorder"
MinWidth="100"
MinHeight="30"
Margin="0,0,20,0"
Background="{StaticResource TabItemDefaultBackgroundBrush}"
BorderBrush="{StaticResource SolidBorderBrush}"
BorderThickness="1"
CornerRadius="3,15,0,0">
<Grid>
<Button
x:Name="tabButton"
Width="15"
Height="15"
Margin="90,10,0,0"
Click="tabButton_Click"
Visibility="Hidden">
<Button.Template>
<ControlTemplate TargetType="{x:Type Button}">
<Grid>
<Grid.Background>
<VisualBrush Viewbox="0,0,1024,1024" ViewboxUnits="Absolute">
<VisualBrush.Visual>
<Path
x:Name="mypath"
Data="M509.953388 63.243393c-246.709915 0-446.708971 200.00008-446.708971 446.708971 0 246.711961 200.00008 446.708971 446.708971 446.708971 246.711961 0 446.708971-199.998033 446.708971-446.708971C956.662359 263.243473 756.664326 63.243393 509.953388 63.243393zM735.3683 670.450778c17.933441 17.933441 17.933441 46.984081 0 64.917522-8.965186 8.965186-20.712741 13.44829-32.456203 13.44829-11.746532 0-23.493064-4.483104-32.459273-13.44829L509.953388 574.868863 349.455997 735.3683c-8.968256 8.965186-20.712741 13.44829-32.459273 13.44829s-23.493064-4.483104-32.459273-13.44829c-17.933441-17.933441-17.933441-46.984081 0-64.917522l160.499437-160.497391L284.537452 349.452927c-17.933441-17.933441-17.933441-46.984081 0-64.917522 17.933441-17.931395 46.984081-17.931395 64.917522 0l160.497391 160.499437 160.499437-160.499437c17.931395-17.931395 46.984081-17.931395 64.915475 0 17.933441 17.933441 17.933441 46.984081 0 64.917522L574.87091 509.953388 735.3683 670.450778z"
Fill="{StaticResource CloseButtenBackgroundBrush}" />
</VisualBrush.Visual>
</VisualBrush>
</Grid.Background>
<ContentPresenter
Margin="{TemplateBinding Padding}"
HorizontalAlignment="Center"
VerticalAlignment="Center" />
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="true">
<Setter TargetName="mypath" Property="Fill" Value="{StaticResource CloseButtenMouseoverBrush}" />
</Trigger>
<Trigger Property="IsPressed" Value="true">
<Setter TargetName="mypath" Property="Fill" Value="{StaticResource CloseButtenPressBrush}" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Button.Template>
</Button>
<ContentPresenter
x:Name="ContentSite"
Margin="12,2,12,2"
HorizontalAlignment="Center"
VerticalAlignment="Center"
ContentSource="Header"
RecognizesAccessKey="True" />
</Grid>
</Border>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsSelected" Value="True">
<Setter TargetName="tabBorder" Property="Background" Value="{StaticResource TabItemSelectBackgroundBrush}" />
<Setter TargetName="tabBorder" Property="BorderThickness" Value="2" />
<Setter TargetName="tabButton" Property="Visibility" Value="Visible" />
</Trigger>
<Trigger Property="IsMouseOver" Value="True">
<Setter TargetName="tabBorder" Property="Background" Value="{StaticResource TabItemMouseoverBrush}" />
<Setter TargetName="tabBorder" Property="BorderThickness" Value="2" />
<Setter TargetName="tabButton" Property="Visibility" Value="Visible" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="ScrolltoLeft" TargetType="{x:Type RepeatButton}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type RepeatButton}">
<Border
x:Name="border"
Background="Transparent"
BorderBrush="Gray"
BorderThickness="0"
CornerRadius="0"
TextBlock.Foreground="White">
<Grid>
<Viewbox Margin="-5,-2,0,0">
<Path
x:Name="BPath"
Data="M269.6 535.8l462.9 319.3c30.6 21.1 72.3-0.8 72.3-38V177.5c0-34.1-38.2-54.2-66.3-34.8L269.6 466.2c-24.3 16.8-24.3 52.8 0 69.6z"
Fill="Gray" />
</Viewbox>
<ContentPresenter
Margin="{TemplateBinding Padding}"
HorizontalAlignment="Center"
VerticalAlignment="Center" />
</Grid>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="true">
<Setter TargetName="BPath" Property="Fill" Value="Green" />
</Trigger>
<Trigger Property="IsPressed" Value="true">
<Setter TargetName="BPath" Property="Fill" Value="{StaticResource CloseButtenPressBrush}" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="ScrolltoRight" TargetType="{x:Type RepeatButton}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type RepeatButton}">
<Border
x:Name="border"
Background="Transparent"
BorderBrush="Gray"
BorderThickness="0"
CornerRadius="0"
TextBlock.Foreground="White">
<Grid>
<Viewbox Margin="-5,-2,0,0">
<Path
x:Name="BPath"
Data="M767.6 547.8L304.7 867.1c-30.6 21.1-72.3-0.8-72.3-38V189.5c0-34.1 38.2-54.2 66.3-34.8l468.9 323.5c24.3 16.8 24.3 52.8 0 69.6z"
Fill="Gray" />
</Viewbox>
<ContentPresenter
Margin="{TemplateBinding Padding}"
HorizontalAlignment="Center"
VerticalAlignment="Center" />
</Grid>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="true">
<Setter TargetName="BPath" Property="Fill" Value="Green" />
</Trigger>
<Trigger Property="IsPressed" Value="true">
<Setter TargetName="BPath" Property="Fill" Value="{StaticResource CloseButtenPressBrush}" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</TabControl.Resources>
<TabControl.Template>
<ControlTemplate TargetType="TabControl">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="30" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="30" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="30" />
<RowDefinition />
</Grid.RowDefinitions>
<RepeatButton
x:Name="ScrolltoLeft_Btn"
Grid.Row="0"
Grid.Column="0"
VerticalAlignment="Top"
Command="{x:Static ScrollBar.LineLeftCommand}"
CommandTarget="{Binding ElementName=sv}"
Style="{StaticResource ScrolltoLeft}" />
<ScrollViewer
x:Name="sv"
Grid.Row="0"
Grid.Column="1"
HorizontalScrollBarVisibility="Hidden"
PreviewMouseWheel="ScrollViewer_PreviewMouseWheel"
VerticalScrollBarVisibility="Disabled">
<TabPanel
x:Name="HeaderPanel"
Panel.ZIndex="1"
IsItemsHost="true"
KeyboardNavigation.TabIndex="1" />
</ScrollViewer>
<ContentPresenter
x:Name="PART_SelectedContentHost"
Grid.Row="1"
Grid.ColumnSpan="2"
Grid.Column="0"
Margin="{TemplateBinding Padding}"
ContentSource="SelectedContent"
SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" />
<RepeatButton
x:Name="ScrolltoRight_Btn"
Grid.Row="0"
Grid.Column="2"
VerticalAlignment="Top"
Command="{x:Static ScrollBar.LineRightCommand}"
CommandTarget="{Binding ElementName=sv}"
Style="{StaticResource ScrolltoRight}" />
</Grid>
</ControlTemplate>
</TabControl.Template>
<TabItem Background="AliceBlue" Header="test1" >
<Label Content="test1 Content goes here..." />
</TabItem>
<TabItem Background="AliceBlue" Header="test2" >
<Label Content="test2 Content goes here..." />
</TabItem>
<TabItem Background="AliceBlue" Header="test3" >
<Label Content="test3 Content goes here..." />
</TabItem>
<TabItem Header="test4" />
<TabItem Header="test5" />
<TabItem Header="test6" />
<TabItem Header="test7" />
<TabItem Header="test8" />
<TabItem Header="test9" />
<TabItem Header="test10" />
<TabItem Header="test11" />
<TabItem Header="test12" />
<TabItem Header="test13" />
<TabItem Header="test14" />
private void tabButton_Click(object sender, RoutedEventArgs e)
{
Button b = sender as Button;
TabItem item = FindParent<TabItem>(b);
myTab.Items.Remove(item);
}
public T FindParent<T>(DependencyObject child) where T : DependencyObject
{
//get parent item
DependencyObject parentObject = VisualTreeHelper.GetParent(child);
//we've reached the end of the tree
if (parentObject == null) return null;
//check if the parent matches the type we're looking for
T parent = parentObject as T;
if (parent != null)
return parent;
else
return FindParent<T>(parentObject);
}
private void ScrollViewer_PreviewMouseWheel(object sender, MouseWheelEventArgs e)
{
ScrollViewer scrollviewer = sender as ScrollViewer;
if (e.Delta > 0)
scrollviewer.LineLeft();
else
scrollviewer.LineRight();
e.Handled = true;
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
Make scrollviewer not capture control left and control right in WPF
WPF ScrollViewer horizontal scrolling with buttons
WPF ScrollViewer control buttons visibility
WPF:ScrollViewer content not aligning left
WPF ScrollViewer scroll-bars not changing size
Change Content Of Right Panel Using buttons in Left Panel WPF
WPF C# Scrollviewer is disabling toolbar buttons
WPF ScrollViewer
Scroll left/right with Buttons in Blazor
Scroll two WPF(!) Richtextboxes synchronously without WPF Scrollviewer
Related Tags