wpf - WPF在按钮单击时向上/向下滚动

Question

我想禁用作为 ListBox 一部分的垂直滚动条，我想添加两个按钮，一个用于“向上”，一个用于“向下”。我将如何实现这些按钮的功能以向上/向下滚动我的 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>

标签： wpfvb.net

Answer 1

这可以通过 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>

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