Question

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

<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中执行此操作？

Answer 1

代码项目文章WPF Custom ListBox with Scrollbar on the Background似乎与您的代码示例类似，因此这可能是一个很好的起点。

您还可以在WPF中播放一些技巧，以获得您正在寻找的行为，并更好地了解您希望控件如何工作。我所包含的XAML的关键是，只有滚动条visibilty设置为Auto，才能在ScrollViewer的触发器中依赖ComputedHorizontalScrollBarVisibility，但这意味着滚动条出现，这不是您想要的。我的技巧/黑客是提供我隐藏的第二个ScrollViewer来触发RepeatButton可见性。

查找行：RowDefinition Height =“0”以查找隐藏的ScrollViewer 我也在这个例子中使用MVVM模式，但是我没有包含Binding细节。

<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>

Answer 2

在RadioButton上应用触发器，它检查ScrollViewer的属性“ComputeHorizontalScrollBarVisibility”以切换其可见性 -

               <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>

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

Answer 3

您可以通过在HorizontalScrollBarVisibility为Auto时重新导入ScrollViewer来删除ScrollBars。试试这个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>

自定义列表框，带有移动fwd / bwd按钮

3 个答案: