带有移动 fwd/bwd 按钮的自定义列表框 [英] Custom listbox with move fwd/bwd buttons

问题描述

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

I have a custom list box with left/right repeat buttons to scroll its content with content template as below:

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

it works fine. I would like the buttons to appear only when the content is scrollable, how would I do that in xaml ?

推荐答案

代码项目文章 背景上带有滚动条的 WPF 自定义列表框 似乎与您的代码示例类似，因此这可能是一个不错的起点.

The code project article WPF Custom ListBox with Scrollbar on the Background seems similar to your code example so this might be a good place to start.

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

You can also play some tricks within WPF itself to get the behaviour your are looking for, and to get a better understanding of how you might want your control to work. The key to XAML I've included is that relying of the ComputedHorizontalScrollBarVisibility in the trigger for the ScrollViewer only works if the scroll bar visibilty is set to Auto, but that means the scroll bar appears, which is not what you want. My trick/hack is to provide a second ScrollViewer that I hide to trigger the RepeatButton visibility.

查找行:RowDefinition Height="0" 以找到隐藏的 ScrollViewer.
我也在这个例子中使用了 MVVM 模式，但我没有包括绑定细节.

Look for the line: RowDefinition Height="0" to find the hidden ScrollViewer.
I am also using the MVVM pattern in this example, but I did not include the Binding details.

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

这篇关于带有移动 fwd/bwd 按钮的自定义列表框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！