CODEWITHSUNDEEP
c#wpfscrollbar
user1358072
user1358072

Reputation: 447

wpf: vertical scrollbar works fine but horizontal one doesnt work

I am using WPF and C#. I have a small issue with a scrollbar of listbox. Vertical scrollbar is displayed when there are many ListItems. It worked fine! But Horizontal scrollbar is never displayed when necessary. Why it doesnt work? Please review my codes. I may have missed something. You can copy all my codes and test them. Hope to find a solution from you. Thanks! :)

WPF window:

       <Grid.Resources>
       <ResourceDictionary Source="/Menu\styles\test.xaml"></ResourceDictionary>
      </Grid.Resources>

    <ListBox HorizontalAlignment="Center" Width="196" Style="{DynamicResource ListBoxStyle1}" Margin="310,170,419,361">
        <ListBoxItem Content="fgfdgsdfgsdfgsdfgsdfg"/>
        <ListBoxItem Content="dfgsdfgsdfgsdfgsdfgsdfgsdfgsdfgsdfgsdfg"/>
        <ListBoxItem Content="Frafgsdfgsdfgsdfgdfgsdfgsdfgsdfgdfgdfgsnce"/>
        <ListBoxItem Content="Frafgsdfgsdfgsdfgdfgsdfgsdfgsdfgdfgdfgsnce"/>
        <ListBoxItem Content="Frafgsdfgsdfgsdfgdfgsdfgsdfgsdfgdfgdfgsnce"/>
        <ListBoxItem Content="Frafgsdfgsdfgsdfgdfgsdfgsdfgsdfgdfgdfgsnce"/>
        <ListBoxItem Content="Frafgsdfgsdfgsdfgdfgsdfgsdfgsdfgdfgdfgsnce"/>
        <ListBoxItem Content="Frafgsdfgsdfgsdfgdfgsdfgsdfgsdfgdfgdfgsnce"/>
    </ListBox>

Style: test.xaml 

<SolidColorBrush x:Key="ListBorder" Color="#828790"/>
<!--LISTBOX-->
<Style x:Key="ListBoxStyle1" TargetType="{x:Type ListBox}">
    <Setter Property="BorderBrush" Value="#FF1C93F5"/>
    <Setter Property="BorderThickness" Value="5"/>
    <Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Auto"/>
    <Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto"/>
    <Setter Property="ScrollViewer.CanContentScroll" Value="true"/>
    <Setter Property="ScrollViewer.PanningMode" Value="Both"/>
    <Setter Property="Stylus.IsFlicksEnabled" Value="False"/>
    <Setter Property="VerticalContentAlignment" Value="Center"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type ListBox}">
                <Grid>
                    <Rectangle Fill="#FF1F1E1E" RadiusX="10" RadiusY="1" Opacity="0.195" />
                    <Border CornerRadius="10" x:Name="Bd" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Padding="1" SnapsToDevicePixels="true">
                        <ScrollViewer Focusable="false" Padding="{TemplateBinding Padding}" Template="{DynamicResource ScrollViewerControlTemplate1}">
                            <ItemsPresenter SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
                        </ScrollViewer>
                    </Border>
                </Grid>
                <ControlTemplate.Triggers>
                    <Trigger Property="IsEnabled" Value="false">
                        <Setter Property="Background" TargetName="Bd" Value="{DynamicResource {x:Static SystemColors.ControlBrushKey}}"/>
                    </Trigger>
                    <Trigger Property="IsGrouping" Value="true">
                        <Setter Property="ScrollViewer.CanContentScroll" Value="false"/>
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

<!--SCROLL VIEWER-->
<ControlTemplate x:Key="ScrollViewerControlTemplate1" TargetType="{x:Type ScrollViewer}">
    <Grid x:Name="Grid" Background="{TemplateBinding Background}">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="Auto"/>
        </Grid.ColumnDefinitions>
        <ScrollContentPresenter x:Name="PART_ScrollContentPresenter" CanContentScroll="{TemplateBinding CanContentScroll}" CanHorizontallyScroll="False" CanVerticallyScroll="False" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" Grid.Column="0" Margin="{TemplateBinding Padding}" />
       <!--vertical scrollbar-->
        <ScrollBar x:Name="PART_VerticalScrollBar" AutomationProperties.AutomationId="VerticalScrollBar" Cursor="Hand"  Grid.Column="1" Maximum="{TemplateBinding ScrollableHeight}" Minimum="0" Visibility="{TemplateBinding ComputedVerticalScrollBarVisibility}" Value="{Binding VerticalOffset, Mode=OneWay, RelativeSource={RelativeSource TemplatedParent}}" ViewportSize="{TemplateBinding ViewportHeight}" Style="{DynamicResource ScrollBarStyle1}"/>
    </Grid>
</ControlTemplate>

<!--LISTBOX ITEM-->
<Style TargetType="{x:Type ListBoxItem}">
    <Setter Property="Foreground" Value="White" />
    <Setter Property="Background" Value="Transparent"/>
    <Setter Property="HorizontalContentAlignment" Value="{Binding HorizontalContentAlignment, RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}"/>
    <Setter Property="VerticalContentAlignment" Value="{Binding VerticalContentAlignment, RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}"/>
    <Setter Property="Padding" Value="2,0,0,0"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type ListBoxItem}">
                <Border x:Name="Bd" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" Padding="{TemplateBinding Padding}" SnapsToDevicePixels="true">
                    <ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                </Border>
                <ControlTemplate.Triggers>
                    <Trigger Property="IsSelected" Value="true">
                        <Setter Property="Background" TargetName="Bd" Value="{DynamicResource {x:Static SystemColors.HighlightBrushKey}}"/>
                        <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.HighlightTextBrushKey}}"/>
                    </Trigger>
                    <MultiTrigger>
                        <MultiTrigger.Conditions>
                            <Condition Property="IsSelected" Value="true"/>
                            <Condition Property="Selector.IsSelectionActive" Value="false"/>
                        </MultiTrigger.Conditions>
                        <Setter Property="Background" TargetName="Bd" Value="{DynamicResource {x:Static SystemColors.ControlBrushKey}}"/>
                        <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>
                    </MultiTrigger>
                    <Trigger Property="IsEnabled" Value="false">
                        <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}"/>
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

<!--SCROLLBAR BUTTON-->
<Style x:Key="ScrollBarButton" TargetType="{x:Type RepeatButton}">
    <Setter Property="OverridesDefaultStyle" Value="true"/>
    <Setter Property="Focusable" Value="false"/>
    <Setter Property="IsTabStop" Value="false"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type RepeatButton}">
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>


<!--SCROLL BAR THUMB-->
<Style x:Key="ScrollBarThumb" TargetType="{x:Type Thumb}">
    <Setter Property="OverridesDefaultStyle" Value="true"/>
    <Setter Property="IsTabStop" Value="false"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type Thumb}">
                <Rectangle Width="8" Fill="White" RadiusX="5" RadiusY="5">
                    <Rectangle.Effect>
                        <DropShadowEffect ShadowDepth="0" BlurRadius="10" Color="White" />
                    </Rectangle.Effect>
                </Rectangle>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>



<!--VERTICAL SCROLLBAR BACKGROUND-->
<LinearGradientBrush x:Key="VerticalScrollBarBackground" EndPoint="1,0" StartPoint="0,0">
    <GradientStop Color="#E1E1E1" Offset="0"/>
    <GradientStop Color="#EDEDED" Offset="0.20"/>
    <GradientStop Color="#EDEDED" Offset="0.80"/>
    <GradientStop Color="#E3E3E3" Offset="1"/>
</LinearGradientBrush>
<SolidColorBrush x:Key="ScrollBarDisabledBackground" Color="#F4F4F4"/>

<!--VERTICAL SCROLLBAR PAGE BUTTON-->
<Style x:Key="VerticalScrollBarPageButton" TargetType="{x:Type RepeatButton}">
    <Setter Property="OverridesDefaultStyle" Value="true"/>
    <Setter Property="Background" Value="Transparent"/>
    <Setter Property="Focusable" Value="false"/>
    <Setter Property="IsTabStop" Value="false"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type RepeatButton}">
                <Rectangle Fill="{TemplateBinding Background}" Height="{TemplateBinding Height}" Width="{TemplateBinding Width}"/>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

<!--HORIZONTAL SCROLLBAR BACKGROUND-->
<LinearGradientBrush x:Key="HorizontalScrollBarBackground" EndPoint="0,1" StartPoint="0,0">
    <GradientStop Color="#E1E1E1" Offset="0"/>
    <GradientStop Color="#EDEDED" Offset="0.20"/>
    <GradientStop Color="#EDEDED" Offset="0.80"/>
    <GradientStop Color="#E3E3E3" Offset="1"/>
</LinearGradientBrush>

<!--HORIZONTAL SCROLLBAR PAGE BUTTON-->
<Style x:Key="HorizontalScrollBarPageButton" TargetType="{x:Type RepeatButton}">
    <Setter Property="OverridesDefaultStyle" Value="true"/>
    <Setter Property="Background" Value="Transparent"/>
    <Setter Property="Focusable" Value="false"/>
    <Setter Property="IsTabStop" Value="false"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type RepeatButton}">
                <Rectangle Fill="{TemplateBinding Background}" Height="{TemplateBinding Height}" Width="{TemplateBinding Width}"/>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

<!--SCROLLBAR STYLE-->
<Style x:Key="ScrollBarStyle1" TargetType="{x:Type ScrollBar}">
    <!--STYLE FOR VERTICAL-->
    <Setter Property="Background" Value="Transparent"/>
    <Setter Property="Stylus.IsPressAndHoldEnabled" Value="false"/>
    <Setter Property="Stylus.IsFlicksEnabled" Value="false"/>
    <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>
    <Setter Property="Width" Value="{DynamicResource {x:Static SystemParameters.VerticalScrollBarWidthKey}}"/>
    <Setter Property="MinWidth" Value="{DynamicResource {x:Static SystemParameters.VerticalScrollBarWidthKey}}"/>


    <!--TEMPLATE FOR VERTICAL-->
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type ScrollBar}">
                <Grid x:Name="Bg" Background="{TemplateBinding Background}" SnapsToDevicePixels="true">
                    <Border Width="1" Background="#FFFFFF" HorizontalAlignment="Center"/>
                    <Track x:Name="PART_Track" IsDirectionReversed="true" IsEnabled="{TemplateBinding IsMouseOver}">

                        <Track.Thumb>
                            <Thumb Style="{StaticResource ScrollBarThumb}"/>
                        </Track.Thumb>
                    </Track>
                </Grid>
                <ControlTemplate.Triggers>
                    <Trigger Property="IsEnabled" Value="false">
                        <Setter Property="Background" TargetName="Bg" Value="{StaticResource ScrollBarDisabledBackground}"/>
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
    <Style.Triggers>

        <!--ORIENTATION = HORIZONTAL-->
        <Trigger Property="Orientation" Value="Horizontal">
            <Setter Property="Width" Value="Auto"/>
            <Setter Property="MinWidth" Value="0"/>
            <Setter Property="Height" Value="{DynamicResource {x:Static SystemParameters.HorizontalScrollBarHeightKey}}"/>
            <Setter Property="MinHeight" Value="{DynamicResource {x:Static SystemParameters.HorizontalScrollBarHeightKey}}"/>
            <Setter Property="Background" Value="{StaticResource HorizontalScrollBarBackground}"/>
            <Setter Property="Template">
                <Setter.Value>
                    <!--FOR HORIZONTAL-->
                    <ControlTemplate TargetType="{x:Type ScrollBar}">
                        <Grid x:Name="Bg" Background="{TemplateBinding Background}" SnapsToDevicePixels="true">
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition MaxWidth="{DynamicResource {x:Static SystemParameters.HorizontalScrollBarButtonWidthKey}}"/>
                                <ColumnDefinition Width="0.00001*"/>
                                <ColumnDefinition MaxWidth="{DynamicResource {x:Static SystemParameters.HorizontalScrollBarButtonWidthKey}}"/>
                            </Grid.ColumnDefinitions>
                            <RepeatButton Command="{x:Static ScrollBar.LineLeftCommand}" IsEnabled="{TemplateBinding IsMouseOver}" Style="{StaticResource ScrollBarButton}" />
                            <Track x:Name="PART_Track" Grid.Column="1" IsEnabled="{TemplateBinding IsMouseOver}">
                                <Track.DecreaseRepeatButton>
                                    <RepeatButton Command="{x:Static ScrollBar.PageLeftCommand}" Style="{StaticResource HorizontalScrollBarPageButton}"/>
                                </Track.DecreaseRepeatButton>
                                <Track.IncreaseRepeatButton>
                                    <RepeatButton Command="{x:Static ScrollBar.PageRightCommand}" Style="{StaticResource HorizontalScrollBarPageButton}"/>
                                </Track.IncreaseRepeatButton>
                                <Track.Thumb>
                                    <Thumb Style="{StaticResource ScrollBarThumb}"/>
                                </Track.Thumb>
                            </Track>
                            <RepeatButton Grid.Column="2" Command="{x:Static ScrollBar.LineRightCommand}" IsEnabled="{TemplateBinding IsMouseOver}" Style="{StaticResource ScrollBarButton}"/>
                        </Grid>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsEnabled" Value="false">
                                <Setter Property="Background" TargetName="Bg" Value="{StaticResource ScrollBarDisabledBackground}"/>
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Trigger>
    </Style.Triggers>
</Style>

Upvotes: 0

Views: 2189

Answers (1)

Viv
Viv

Reputation: 17380

It's cos you don't have a PART_HorizontalScrollBar in your ControlTemplate for ScrollViewer

your ScrollViewer ControlTemplate should look like:

<!--  SCROLL VIEWER  -->
<ControlTemplate x:Key="ScrollViewerControlTemplate1"
                  TargetType="{x:Type ScrollViewer}">
  <Grid x:Name="Grid"
        Background="{TemplateBinding Background}">
    <Grid.ColumnDefinitions>
      <ColumnDefinition Width="*" />
      <ColumnDefinition Width="Auto" />
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
      <RowDefinition Height="*" />
      <RowDefinition Height="Auto" />
    </Grid.RowDefinitions>
    <ScrollContentPresenter x:Name="PART_ScrollContentPresenter"
                            Grid.Column="0"
                            Margin="{TemplateBinding Padding}"
                            CanContentScroll="{TemplateBinding CanContentScroll}"
                            CanHorizontallyScroll="False"
                            CanVerticallyScroll="False"
                            Content="{TemplateBinding Content}"
                            ContentTemplate="{TemplateBinding ContentTemplate}" />
    <!--  vertical scrollbar  -->
    <ScrollBar x:Name="PART_VerticalScrollBar"
                Grid.Column="1"
                AutomationProperties.AutomationId="VerticalScrollBar"
                Cursor="Hand"
                Maximum="{TemplateBinding ScrollableHeight}"
                Minimum="0"
                Style="{DynamicResource ScrollBarStyle1}"
                ViewportSize="{TemplateBinding ViewportHeight}"
                Visibility="{TemplateBinding ComputedVerticalScrollBarVisibility}"
                Value="{Binding VerticalOffset,
                                Mode=OneWay,
                                RelativeSource={RelativeSource TemplatedParent}}" />
    <!-- NEW BIT -->
    <ScrollBar x:Name="PART_HorizontalScrollBar"
                Grid.Row="1"
                Grid.Column="0"
                AutomationProperties.AutomationId="HorizontalScrollBar"
                Cursor="Hand"
                Maximum="{TemplateBinding ScrollableWidth}"
                Minimum="0"
                Orientation="Horizontal"
                Style="{DynamicResource ScrollBarStyle1}"
                ViewportSize="{TemplateBinding ViewportWidth}"
                Visibility="{TemplateBinding ComputedHorizontalScrollBarVisibility}"
                Value="{Binding HorizontalOffset,
                                Mode=OneWay,
                                RelativeSource={RelativeSource TemplatedParent}}" />
  </Grid>
</ControlTemplate>

I also added Grid.RowDefinitions ^^ to give the horizontal ScrollBar some space.

Note:

With this, your horizontal ScrollBar will be visible and responsive, however it would not have your Style applied right as you've currently only updated the vertical ScrollBar's template in ScrollBarStyle1 . So you're gonna have to update the horizontal one accordingly as well.

Upvotes: 4

Related Questions