带有移动向前/向后按钮的自定义列表框

2024-05-29

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

<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 中做到这一点?


代码项目文章背景上带有滚动条的 WPF 自定义列表框 http://www.codeproject.com/KB/WPF/AutoScrollListBox.aspx看起来与您的代码示例类似,因此这可能是一个不错的起点。

您还可以在 WPF 本身中发挥一些技巧来获得您正在寻找的行为,并更好地了解您希望控件如何工作。我所包含的 XAML 的关键是,仅当滚动条可见性设置为“自动”时,ScrollViewer 触发器中的 ComputedHorizo​​ntalScrollBarVisibility 的依赖才有效,但这意味着滚动条会出现,这不是您想要的。我的技巧/技巧是提供第二个 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>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

带有移动向前/向后按钮的自定义列表框 的相关文章

随机推荐