如何在WPF（XAML）中与数据内容和滚动条在同一行添加重复按钮

Question

我想从我的 Web 应用程序到我的 WPF 桌面应用程序重新创建此设计。

在此设计中，我在侧面有这些 << and >> 重复按钮。

这是我的 WPF 应用程序中的图像，我试图在其中创建侧按钮，但没有取得任何成功。

这是我正在使用的样式代码：

<Style TargetType="ScrollViewer" x:Key="SimpleScrollViewerStyle">
    <Setter Property="Template">
        <Setter.Value>
           
            <ControlTemplate TargetType="ScrollViewer">
                <Grid>
                    <!-- Content Presenter -->
                    <Grid>
                        <ScrollContentPresenter 
                            x:Name="PART_ScrollContentPresenter"
                            CanContentScroll="False" />
                    </Grid>
                    <Grid>
                        <!-- Horizontal ScrollBar -->
                        <ScrollBar x:Name="PART_HorizontalScrollBar"
                                   Orientation="Horizontal"
                                   Height="100"
                                   Background="#d2f7ef"
                                   Foreground="#b2b4c3"
                                   Visibility="{TemplateBinding ComputedHorizontalScrollBarVisibility}" />
                    </Grid>
                    

                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

<Style TargetType="Thumb" x:Key="ScrollBarThumbStyle">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="Thumb">
                <Border Background="{TemplateBinding Background}" 
                    CornerRadius="4"  
                    BorderThickness="5"
                    OverridesDefaultStyle="True">
                    <Border.Style>
                        <Style TargetType="Border">
                            <Setter Property="Height" Value="auto"/>
                            <Setter Property="Width" Value="auto"/>
                            
                        </Style>
                    </Border.Style>

                </Border>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
    <Setter Property="Background" Value="#d2f7ef" />
    <Style.Triggers>
        <Trigger Property="IsMouseOver" Value="True">
            <Setter Property="Background" Value="#b2b4c3" />
        </Trigger>
        <Trigger Property="IsDragging" Value="True">
            <Setter Property="Background" Value="#b2b4c3" />
        </Trigger>
    </Style.Triggers>
</Style>

<!-- Style for the ScrollBar itself -->
<Style TargetType="ScrollBar">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="ScrollBar">
                <Grid>
                    <Track x:Name="PART_Track" 
                       IsDirectionReversed="False">
                        <Track.DecreaseRepeatButton>
                            <RepeatButton Command="ScrollBar.LineUpCommand"
                                      Background="Transparent"
                                      BorderBrush="Transparent"
                                      Height="10"
                                      OverridesDefaultStyle="True">
                                <RepeatButton.Style>
                                    <Style TargetType="RepeatButton">
                                        <Setter Property="Background" Value="Transparent"/>
                                        <Setter Property="BorderBrush" Value="Transparent"/>
                                        <Setter Property="Template">
                                            <Setter.Value>
                                                <ControlTemplate TargetType="RepeatButton">
                                                    <Border Background="{TemplateBinding Background}" 
                                                        BorderBrush="{TemplateBinding BorderBrush}"
                                                        BorderThickness="0">
                                                        <ContentPresenter />
                                                    </Border>
                                                </ControlTemplate>
                                            </Setter.Value>
                                        </Setter>
                                        <Style.Triggers>
                                            <Trigger Property="IsMouseOver" Value="True">
                                                <Setter Property="Background" Value="Transparent"/>
                                                <Setter Property="BorderBrush" Value="Transparent"/>
                                            </Trigger>
                                        </Style.Triggers>
                                    </Style>
                                </RepeatButton.Style>
                            </RepeatButton>
                        </Track.DecreaseRepeatButton>
                        <Track.IncreaseRepeatButton>
                            <RepeatButton Command="ScrollBar.LineDownCommand"
                                      Background="Transparent"
                                      BorderBrush="Transparent"
                                      Height="10"
                                      OverridesDefaultStyle="True">
                                <RepeatButton.Style>
                                    <Style TargetType="RepeatButton">
                                        <Setter Property="Background" Value="Transparent"/>
                                        <Setter Property="BorderBrush" Value="Transparent"/>
                                        <Setter Property="Template">
                                            <Setter.Value>
                                                <ControlTemplate TargetType="RepeatButton">
                                                    <Border Background="{TemplateBinding Background}" 
                                                        BorderBrush="{TemplateBinding BorderBrush}"
                                                        BorderThickness="0">
                                                        <ContentPresenter />
                                                    </Border>
                                                </ControlTemplate>
                                            </Setter.Value>
                                        </Setter>
                                        <Style.Triggers>
                                            <Trigger Property="IsMouseOver" Value="True">
                                                <Setter Property="Background" Value="Transparent"/>
                                                <Setter Property="BorderBrush" Value="Transparent"/>
                                            </Trigger>
                                        </Style.Triggers>
                                    </Style>
                                </RepeatButton.Style>
                            </RepeatButton>
                        </Track.IncreaseRepeatButton>
                        <Track.Thumb>
                            <Thumb Style="{StaticResource ScrollBarThumbStyle}" />
                        </Track.Thumb>
                    </Track>
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

如果有人帮助我在不影响现有功能的情况下实现这一点，那将会很有帮助

Answer 1

您可以添加

RepeatButton

并让它们调用ScrollViewer.LineRight方法的ScrollViewer.LineLeft。

以下是使用 Microsoft.Xaml.Behaviors.Wpf 的示例。

<Style x:Key="ScrollViewerStyle" TargetType="{x:Type ScrollViewer}">
    <Setter Property="CanContentScroll" Value="True"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type ScrollViewer}">
                <Grid Background="{TemplateBinding Background}">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="Auto"/>
                        <ColumnDefinition Width="*"/>
                        <ColumnDefinition Width="Auto"/>
                    </Grid.ColumnDefinitions>
                    <Grid.RowDefinitions>
                        <RowDefinition Height="*"/>
                        <RowDefinition Height="Auto"/>
                    </Grid.RowDefinitions>

                    <RepeatButton Grid.Column="0" Grid.Row="0"
                                  Content="&lt;&lt;">
                        <i:Interaction.Triggers>
                            <i:EventTrigger EventName="Click">
                                <i:CallMethodAction TargetObject="{Binding RelativeSource={RelativeSource AncestorType={x:Type ScrollViewer}}}" MethodName="LineLeft"/>
                            </i:EventTrigger>
                        </i:Interaction.Triggers>
                    </RepeatButton>
                    <RepeatButton Grid.Column="2" Grid.Row="0"
                                  Content="&gt;&gt;">
                        <i:Interaction.Triggers>
                            <i:EventTrigger EventName="Click">
                                <i:CallMethodAction TargetObject="{Binding RelativeSource={RelativeSource AncestorType={x:Type ScrollViewer}}}" MethodName="LineRight"/>
                            </i:EventTrigger>
                        </i:Interaction.Triggers>
                    </RepeatButton>

                    <ScrollContentPresenter x:Name="PART_ScrollContentPresenter"
                                            Grid.Column="1" Grid.Row="0"
                                            Margin="{TemplateBinding Padding}"
                                            ContentTemplate="{TemplateBinding ContentTemplate}"
                                            CanContentScroll="{TemplateBinding CanContentScroll}"
                                            Content="{TemplateBinding Content}"/>

                    <ScrollBar x:Name="PART_HorizontalScrollBar"
                               Grid.Row="1" Grid.Column="1"
                               Orientation="Horizontal"
                               Maximum="{TemplateBinding ScrollableWidth}" Minimum="0"
                               Value="{Binding HorizontalOffset, Mode=OneWay, RelativeSource={RelativeSource Mode=TemplatedParent}}"
                               ViewportSize="{TemplateBinding ViewportWidth}"
                               Visibility="{TemplateBinding ComputedHorizontalScrollBarVisibility}"/>
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>