Wpf 带有移动前进/前进按钮的自定义列表框

我有一个带有左/右重复按钮的自定义列表框，可以使用内容模板滚动其内容，如下所示：

<ControlTemplate x:Key="ListBoxTemplate" TargetType="{x:Type ListBox}">
    <DockPanel>
        <RepeatButton x:Name="LineLeftButton" DockPanel.Dock="Left" Width="20" 
              Content="&lt;"      
              Command="{x:Static ScrollBar.LineLeftCommand}"      
              CommandTarget="{Binding ElementName=scrollviewer}"/>
        <RepeatButton x:Name="LineRightButton" DockPanel.Dock="Right" Width="20" 
              Content="&gt;" 
              Command="{x:Static ScrollBar.LineRightCommand}"      
              CommandTarget="{Binding ElementName=scrollviewer}"/>
        <Border BorderThickness="1" BorderBrush="Gray" Background="White">
            <ScrollViewer x:Name="scrollviewer">
                <ItemsPresenter/>
            </ScrollViewer>
        </Border>
    </DockPanel>
</ControlTemplate>
    <ListBox Height="25" x:Name="listBox" Template="{StaticResource ListBoxTemplate}" 
         VerticalAlignment="Stretch"   
         ScrollViewer.HorizontalScrollBarVisibility="Hidden" 
         ScrollViewer.VerticalScrollBarVisibility="Disabled">
        <ListBox.ItemsPanel>
            <ItemsPanelTemplate>
                <VirtualizingStackPanel Orientation="Horizontal"/>
            </ItemsPanelTemplate>
        </ListBox.ItemsPanel> 
    </ListBox>

---

它很好用。我希望按钮仅在内容可滚动时显示，我将如何在xaml中实现这一点

在选中ScrollViewer属性“ComputeHorizontalScrollBarVisibility”的RadioButton上应用触发器，以如下方式切换其可见性-

               <RepeatButton.Style>
                        <Style TargetType="{x:Type RepeatButton}">
                            <Setter Property="Visibility"
                                    Value="Collapsed" />
                            <Style.Triggers>
                                <DataTrigger Binding="{Binding ElementName=scrollviewer,Path=ComputeHorizontalScrollBarVisibility}" Value="true">
                                    <Setter Property="Visibility"
                                            Value="Visible" />
                                </DataTrigger>
                            </Style.Triggers>
                        </Style>
                    </RepeatButton.Style>

您可以将此样式添加到资源中，并将其重新用于其他重复按钮。

代码项目文章似乎与您的代码示例类似，因此这可能是一个很好的起点

您还可以在WPF本身中玩一些小把戏，以获得您想要的行为，并更好地了解您可能希望您的控件如何工作。我所介绍的XAML的关键在于，只有当滚动条Visibility设置为Auto时，ScrollViewer触发器中ComputedHorizontalScrollBarVisibility的依赖性才有效，但这意味着滚动条会出现，这不是您想要的。我的技巧/技巧是提供第二个ScrollViewer，我隐藏它以触发RepeatButton可见性

查找行：RowDefinition Height=“0”以查找隐藏的ScrollViewer。
在本例中，我还使用了MVVM模式，但没有包括绑定细节

<Window x:Class="ListboxRepeatButtons.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="MainWindow" Height="250" Width="400">
  <Window.Resources>
    <Style TargetType="{x:Type RepeatButton}"  x:Key="repeatStyle">
        <Setter Property="Visibility" Value="Visible" />
        <Style.Triggers>
            <DataTrigger Binding="{Binding ElementName=scrollViewerInactive,Path=ComputedHorizontalScrollBarVisibility }" Value="Collapsed">
                <Setter Property="Visibility" Value="Collapsed" />
            </DataTrigger>
            <DataTrigger Binding="{Binding ElementName=scrollViewerInactive,Path=ComputedHorizontalScrollBarVisibility }" Value="Hidden">
                <Setter Property="Visibility" Value="Hidden" />
            </DataTrigger>
        </Style.Triggers>
    </Style>
    <DataTemplate x:Key="listBoxItemTemplate">
        <TextBlock Text="{Binding LastName}"/>
    </DataTemplate>
    <ItemsPanelTemplate x:Key="itemsPanelTemplate">
        <VirtualizingStackPanel Orientation="Horizontal"/>
    </ItemsPanelTemplate>
  </Window.Resources>
   <Grid>
     <Grid.ColumnDefinitions>
       <ColumnDefinition Width="Auto"/>
       <ColumnDefinition Width="*"/>
       <ColumnDefinition Width="Auto"/>
     </Grid.ColumnDefinitions>
     <Grid.RowDefinitions>
       <RowDefinition Height="0"/>
       <RowDefinition/>
    </Grid.RowDefinitions>
    <RepeatButton x:Name="LineLeftButton" 
                    Grid.Column="0"
                    Grid.Row="1"
                    Style="{StaticResource ResourceKey=repeatStyle}"
                    Content="&lt;"      
                    Command="{x:Static ScrollBar.LineLeftCommand}"      
                    CommandTarget="{Binding ElementName=scrollViewerActive}"/>
    <RepeatButton x:Name="LineRightButton" 
                    Grid.Column="2"
                    Grid.Row="1"
                    Style="{StaticResource ResourceKey=repeatStyle}"
                    Content="&gt;" 
                    Command="{x:Static ScrollBar.LineRightCommand}"      
                    CommandTarget="{Binding ElementName=scrollViewerActive}"/>
    <ScrollViewer Grid.Column="1" Grid.Row="0" x:Name="scrollViewerInactive" VerticalScrollBarVisibility="Auto"  HorizontalScrollBarVisibility="Auto" >
        <ListBox 
            VerticalAlignment="Stretch"   
            ItemsSource="{Binding Path=Customers}"
            ScrollViewer.HorizontalScrollBarVisibility="Hidden"
            ScrollViewer.VerticalScrollBarVisibility="Hidden"
            ItemsPanel="{StaticResource itemsPanelTemplate}"
            ItemTemplate="{StaticResource listBoxItemTemplate}"/>
    </ScrollViewer>
    <ScrollViewer Grid.Column="1" Grid.Row="1"  x:Name="scrollViewerActive" VerticalScrollBarVisibility="Hidden"  HorizontalScrollBarVisibility="Hidden" >
        <ListBox 
            Margin="0,0,0,0"
            VerticalAlignment="Stretch"   
            ItemsSource="{Binding Path=Customers}"
            ScrollViewer.HorizontalScrollBarVisibility="Hidden"
            ScrollViewer.VerticalScrollBarVisibility="Hidden"
            ItemsPanel="{StaticResource itemsPanelTemplate}"
            ItemTemplate="{StaticResource listBoxItemTemplate}"/>
    </ScrollViewer>
</Grid>            
</Window>

---

当水平滚动条可见性为自动时，通过重新放置滚动条，可以从ScrollViewer中删除滚动条。 试试这个XAML：

<ScrollViewer x:Name="scrollviewer" 
              HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Disabled">
    <ScrollViewer.Template>
        <ControlTemplate TargetType="{x:Type ScrollViewer}">
            <ScrollContentPresenter CanContentScroll="{TemplateBinding CanContentScroll}"/>
        </ControlTemplate>
    </ScrollViewer.Template>

    <ItemsPresenter/>
</ScrollViewer>

---

这正是我想要的！一个警告-确保ItemsSource属性不属于UIElement。相反，请使用DataTemplate来模板化内容的呈现方式。我最初绑定到一个ObservableCollection，在任何给定的时间，我都无法获得多个StackPanel来渲染按钮。通过DataTemplate切换到渲染修复了我的问题。