Hello, in its own style formed a white square, which in any way can not be removed, after adding Horizontal ScrollBar . How to replace it with a specific color or picture? I read that it is possible to remove it and the window style will be used at that place, but this can lead to irreparable errors.

ScrollBarWhiteRectangle

Perhaps something was missing in the code:

 <Style TargetType="{x:Type ScrollBar}"> <Setter Property="SnapsToDevicePixels" Value="True"/> <Setter Property="OverridesDefaultStyle" Value="True"/> <Setter Property="Background" Value="Transparent"/> <Setter Property="Stylus.IsFlicksEnabled" Value="False"/> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="{x:Type ScrollBar}"> <Border CornerRadius="4" BorderBrush="Black" BorderThickness="0.25"> <Border.Background> <SolidColorBrush Color="Black" Opacity="0.1"/> </Border.Background> <Grid x:Name="GridScrollBar" Width="8" Background="{TemplateBinding Background}"> <Grid.RowDefinitions> <RowDefinition/> </Grid.RowDefinitions> <Track x:Name="PART_Track" Grid.Row="1" Orientation="Vertical" IsDirectionReversed="True"> <Track.Thumb> <Thumb Style="{DynamicResource ThumbScrollBar}"/> </Track.Thumb> <Track.DecreaseRepeatButton> <RepeatButton x:Name="DecreaseRepeatButton" Command="ScrollBar.PageUpCommand" Style="{DynamicResource RepeatButtonPageScrollBar}"/> </Track.DecreaseRepeatButton> <Track.IncreaseRepeatButton> <RepeatButton x:Name="IncreaseRepeatButton" Command="ScrollBar.PageDownCommand" Style="{DynamicResource RepeatButtonPageScrollBar}"/> </Track.IncreaseRepeatButton> </Track> </Grid> </Border> <ControlTemplate.Triggers> <Trigger Property="Orientation" Value="Horizontal"> <Setter Property="LayoutTransform" TargetName="GridScrollBar"> <Setter.Value> <RotateTransform Angle="-90"/> </Setter.Value> </Setter> <Setter TargetName="PART_Track" Property="Orientation" Value="Vertical"/> <Setter Property="Command" Value="ScrollBar.LineRightCommand" TargetName="IncreaseRepeatButton"/> <Setter Property="Command" Value="ScrollBar.LineLeftCommand" TargetName="DecreaseRepeatButton"/> </Trigger> </ControlTemplate.Triggers> </ControlTemplate> </Setter.Value> </Setter> </Style>

TreeViewItem

  <Border Style="{StaticResource dialog_open_file_border_treeview}"> <TreeView x:Name="treeview_directories" Style="{StaticResource dialog_open_file_treeview}" SelectedItemChanged="treeview_directories_SelectedItemChanged"> <TreeView.Resources> <Style TargetType="{x:Type TreeViewItem}"> <Style.Setters> <Setter Property="Margin" Value="3"/> <Setter Property="Background" Value="Transparent"/> <Setter Property="BorderBrush" Value="Transparent"/> <Setter Property="Foreground" Value="White"/> <Setter Property="HeaderTemplate"> <Setter.Value> <DataTemplate> <StackPanel Orientation="Horizontal"> <Image Name="img" Width="20" Height="20" Stretch="Fill" Source="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type TreeViewItem}}, Path=Header, Converter={x:Static local:HeaderToImageConverter.Instance}}"/> <TextBlock Text="{Binding}" Margin="5 2 0 0"/> </StackPanel> </DataTemplate> </Setter.Value> </Setter> </Style.Setters> </Style> </TreeView.Resources> </TreeView> </Border>

TreeView

  <Style x:Key="dialog_open_file_treeview" TargetType="{x:Type TreeView}"> <Style.Setters> <Setter Property="Margin" Value="4"/> <Setter Property="Background" Value="Transparent"/> <Setter Property="BorderBrush" Value="Transparent"/> <Setter Property="Foreground" Value="Transparent"/> </Style.Setters> </Style>
  • The problem is not in this code. White square does not belong to any of the scrollbars. The problem is in the control that contains scrollbars (TreeView?). Did you stylize it? Give it a ControlTemplate. - VladD
  • Updated and added TreeViewItem - Glayder
  • No, you don't need a TreeViewItem , but the TreeView itself ( StaticResource dialog_open_file_treeview ). By the way, did you know that you can put the style for TreeView in the style resources for TreeView ? - VladD
  • I added the same TreeView ( StaticResource dialog_open_file_treeview ), as I understood it, it is not stylized, what do I need to supplement this file with? Yes, but how to do it? - Glayder
  • Maybe it is just to set the Background? - VladD

1 answer 1

Using the above-mentioned TreeViewItem you need to add the line <ScrollViewer HorizontalScrollBarVisibility="Auto"> after Border . You also need to add the following code, which will be in combination with the ScrollBar :

 <Style TargetType="{x:Type ScrollViewer}" BasedOn="{x:Null}"> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="{x:Type ScrollViewer}"> <Grid Background="{TemplateBinding Background}"> <Grid.ColumnDefinitions> <ColumnDefinition Width="*"/> <ColumnDefinition Width="Auto"/> </Grid.ColumnDefinitions> <Grid.RowDefinitions> <RowDefinition Height="*"/> <RowDefinition Height="Auto"/> </Grid.RowDefinitions> <ScrollContentPresenter Grid.Column="0" Grid.Row="0" Margin="{TemplateBinding Padding}" Content="{TemplateBinding Content}" ContentTemplate="{TemplateBinding ContentTemplate}" CanContentScroll="{TemplateBinding CanContentScroll}"/> <ScrollBar Visibility="{TemplateBinding ComputedHorizontalScrollBarVisibility}" Grid.Column="0" Grid.Row="1" x:Name="PART_HorizontalScrollBar" Orientation="Horizontal" Value="{Binding Path=HorizontalOffset, Mode=OneWay, RelativeSource={RelativeSource TemplatedParent}}" ViewportSize="{TemplateBinding ViewportWidth}" Minimum="0" Maximum="{TemplateBinding ScrollableWidth}" AutomationProperties.AutomationId="HorizontalScrollBar"/> <ScrollBar Visibility="{TemplateBinding ComputedVerticalScrollBarVisibility}" Grid.Column="1" Grid.Row="0" x:Name="PART_VerticalScrollBar" Orientation="Vertical" Value="{Binding Path=VerticalOffset, Mode=OneWay, RelativeSource={RelativeSource TemplatedParent}}" ViewportSize="{TemplateBinding ViewportHeight}" Minimum="0" Maximum="{TemplateBinding ScrollableHeight}" AutomationProperties.AutomationId="VerticalScrollBar"/> <Border Grid.Column="1" Grid.Row="1" Background="Transparent"/> </Grid> </ControlTemplate> </Setter.Value> </Setter> </Style>
  • Oh, class! But are you sure about the Border Background="Transparent" ? - VladD
  • In my case, you can delete this line altogether, everything remains the same. If someone already takes this code cleanly, like a ScrollViewer , then this line will probably help. - Glayder
  • And, I understood: the background is set in the external grid. Very good. - VladD