WPF单击按钮即可上/下滚动

时间:2019-06-11 06:42:12

标签: wpf vb.net

我想禁用垂直滚动条,它是ListBox的一部分,我想添加两个按钮,一个用于“向上”,一个用于“向下”。我将如何通过按钮实现功能来上下滚动列表框的内容。

这是我的列表框:

<ListBox x:Name="artikliList" ItemTemplate="{DynamicResource izabraniIzbornik}" Margin="310,105,395,10" Background="{DynamicResource gridArtikliColor}" ItemContainerStyle="{DynamicResource ListBoxItemStyle1}" ItemsPanel="{DynamicResource ItemsPanelTemplate1}" ScrollViewer.HorizontalScrollBarVisibility="Disabled" BorderBrush="{DynamicResource borderBrushColor}" ScrollViewer.VerticalScrollBarVisibility="Disabled" BorderThickness="0,0,1,0" Style="{DynamicResource ListBoxStyle1}" >
        <ListBox.Resources>
            <Style TargetType="{x:Type ListBoxItem}">
                <Setter Property="HorizontalContentAlignment"
                    Value="Stretch" />
                <Style.Triggers>
                    <Trigger Property="IsMouseOver"
                        Value="True">
                        <Trigger.EnterActions>
                            <BeginStoryboard>
                                <Storyboard>
                                    <DoubleAnimation Storyboard.TargetProperty="Opacity"
                                        To=".5"
                                        Duration="0:0:0.4" />
                                </Storyboard>
                            </BeginStoryboard>
                        </Trigger.EnterActions>
                        <Trigger.ExitActions>
                            <BeginStoryboard>
                                <Storyboard>
                                    <DoubleAnimation Storyboard.TargetProperty="Opacity"
                                        To="10"
                                        Duration="0:0:0" />
                                </Storyboard>
                            </BeginStoryboard>
                        </Trigger.ExitActions>
                        <Setter Property="Background"
                            Value="Orange" />
                        <Setter Property="BorderBrush"
                            Value="SteelBlue" />
                        <Setter Property="BorderThickness"
                            Value="1" />
                    </Trigger>
                </Style.Triggers>

            </Style>

            <DataTemplate x:Key="izabraniIzbornik">

                <DockPanel Height="182" Width="182">

                    <DockPanel.Background>
                        <ImageBrush ImageSource="{Binding sifra, Converter={StaticResource ImageSourceConverter}}"/>
                    </DockPanel.Background>
                    <StackPanel VerticalAlignment="Bottom" Height="22" Background="#CC000000">
                        <Label Content="{Binding naziv}" Foreground="White" FontWeight="Bold" FontSize="12" HorizontalAlignment="Center"/>
                    </StackPanel>
                </DockPanel>
            </DataTemplate>
        </ListBox.Resources>

    </ListBox>

2 个答案:

答案 0 :(得分:0)

如果您想全部滚动,则需要将scrollviewer保留在列表框中。

默认模板内的按钮是重复按钮,而不是按钮。当您单击并按住它们时,会反复触发单击,这样您就可以重复滚动,而无需花费手指和鼠标。如果您确实想要按钮(如乔伊建议的那样)或项目滚动和重复按钮,我建议您要么进行页面滚动操作。

这里的代码看起来可以正常工作:https://www.codeproject.com/Questions/848015/VB-NET-WPF-Listbox-scroll-by-UP-DOWN-button

如果链接断开:

    double ItemOffset=0;
    private void ButtonUp_Click(object sender, RoutedEventArgs e)
    {
        ScrollViewerTest.ScrollToVerticalOffset(ScrollViewerTest.VerticalOffset - ItemOffset);
    }

    private void ButtonDown_Click(object sender, RoutedEventArgs e)
    {
        ScrollViewerTest.ScrollToVerticalOffset(ScrollViewerTest.VerticalOffset + ItemOffset);
    }

    private void ListBoxTest_Loaded(object sender, RoutedEventArgs e)
    {
        if (ListBoxTest.Items.Count == 0) return;

        if (ItemOffset == 0)
        {
            ((ListBoxItem)ListBoxTest.Items[0]).Measure(new Size(double.PositiveInfinity, double.PositiveInfinity));
            ItemOffset = ((ListBoxItem)ListBoxTest.Items[0]).DesiredSize.Height;
        }
    }

您还希望隐藏垂直和水平滚动条。

 ScrollViewer.VerticalScrollBarVisibility="Hidden"

使用每行高度的代码有点奇怪,但是替代方法还有其他缺点。

我认为您也可以向滚动条发出ScrollBar.LineUpCommand,但这是一个routedcommand,它们可以很灵活地开始工作。我认为您必须将命令目标设置为列表框内的垂直滚动条。

答案 1 :(得分:0)

这可以通过XAML本身轻松实现。首先,您需要创建一种样式并将其应用于滚动条和列表框。

<Style x:Key="ScrollThumbs" TargetType="{x:Type Thumb}">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type Thumb}">
                        <Grid x:Name="Grid">
                            <Border x:Name="Rectangle1"  HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Width="Auto" Height="Auto"  Background="{StaticResource table_bg}" >
                                <Rectangle RadiusX="10" RadiusY="10" HorizontalAlignment="Center" VerticalAlignment="Center" Height="6" Width="6" Fill="{StaticResource scrolldot_bg}" />
                            </Border>
                        </Grid>
                        <ControlTemplate.Triggers>
                            <Trigger Property="Tag" Value="Horizontal">
                                <Setter TargetName="Rectangle1" Property="Width" Value="Auto" />
                                <Setter TargetName="Rectangle1" Property="Height" Value="7" />
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

        <Style TargetType="{x:Type ScrollBar}">
            <Setter Property="Stylus.IsFlicksEnabled" Value="false" />
            <Setter Property="Foreground" Value="LightGray" />
            <Setter Property="Background" Value="DarkGray" />
            <Setter Property="Width" Value="20" />
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type ScrollBar}">
                        <Border Background="White" Width="15" >
                            <Grid x:Name="GridRoot"  >
                                <Grid.RowDefinitions>
                                    <RowDefinition Height="15" />
                                    <RowDefinition Height="0.00001*" />
                                    <RowDefinition Height="15" />
                                </Grid.RowDefinitions>
                                <Button  Grid.Row="2" Height="15" VerticalAlignment="Bottom" Command="ScrollBar.PageDownCommand"/>
                                <Button  Grid.Row="0" Height="15" VerticalAlignment="Top" Command="ScrollBar.PageUpCommand"/>
                                <Track x:Name="PART_Track" Grid.Row="1" IsDirectionReversed="true" Focusable="false">
                                    <Track.Thumb>
                                        <Thumb x:Name="Thumb" Background="LightGray" Style="{DynamicResource ScrollThumbs}" />
                                    </Track.Thumb>
                                    <Track.IncreaseRepeatButton>
                                        <RepeatButton x:Name="PageUp" Command="ScrollBar.PageDownCommand" Opacity="0" Focusable="false" />
                                    </Track.IncreaseRepeatButton>
                                    <Track.DecreaseRepeatButton>
                                        <RepeatButton x:Name="PageDown" Command="ScrollBar.PageUpCommand"  Opacity="0" Focusable="false" />
                                    </Track.DecreaseRepeatButton>
                                    
                                </Track>
                            </Grid>
                        </Border>

                        <ControlTemplate.Triggers>
                            <Trigger SourceName="Thumb" Property="IsMouseOver" Value="true">
                                <Setter Value="{DynamicResource ButtonSelectBrush}" TargetName="Thumb" Property="Background" />
                            </Trigger>
                            <Trigger SourceName="Thumb" Property="IsDragging" Value="true">
                                <Setter Value="{DynamicResource DarkBrush}" TargetName="Thumb" Property="Background" />
                            </Trigger>


<Trigger Property="IsEnabled" Value="false">
                                <Setter TargetName="Thumb" Property="Visibility" Value="Collapsed" />
                            </Trigger>
                            <Trigger Property="Orientation" Value="Horizontal">
                                <Setter TargetName="GridRoot" Property="LayoutTransform">
                                    <Setter.Value>
                                        <RotateTransform Angle="-90" />
                                    </Setter.Value>
                                </Setter>
                                <Setter TargetName="PART_Track" Property="LayoutTransform">
                                    <Setter.Value>
                                        <RotateTransform Angle="-90" />
                                    </Setter.Value>
                                </Setter>
                                <Setter Property="Width" Value="Auto" />
                                <Setter Property="Height" Value="15" />
                                <Setter TargetName="Thumb" Property="Tag" Value="Horizontal" />
                                <Setter TargetName="PageDown" Property="Command" Value="ScrollBar.PageLeftCommand" />
                                <Setter TargetName="PageUp" Property="Command" Value="ScrollBar.PageRightCommand" />
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

以上样式创建带有向上和向下按钮的滚动条。 我将此应用于我自己的项目,因此您可能需要根据自己的需要对其进行自定义!