WPF custom sliding ScrollViewer, wpfscrollviewer

WPF custom sliding ScrollViewer, wpfscrollviewer

Custom sliding scroll bar

Expected target: horizontal scroll bar, which can slide left and right. Press and hold (touch) with the mouse and then release it to achieve fast sliding.

We have several solutions:

1. ScrollViewer. Modify the horizontal scroll bar and set the background to transparent.

However, the problem is that there is no quick sliding effect.

2. In ListBox, modify the Panel to WrapPanel, or directly fill in the content as ItemSource.

This can achieve switching between multiple child elements, but it is a little useless for the content of a single or a region.

3. Use the LayoutControl and ScrollBox controls in DevExpress. After trying, they are very good.

1. Add the LayoutControl control or ScrollBox. If the Dev control is not installed, download Dev

2. Modify the horizontal scroll bar template in ScrollBox and Set Properties

<Dxlc: ScrollBox x: Name = "MyScrollBox" HorizontalScrollBarStyle = "{StaticResource ScrollBarStyle1}" verticalignment = "Center"> <StackPanel Orientation = "Horizontal"> <! -- Place content --> </StackPanel> </dxlc: ScrollBox>

Style:

<Style x:Key="ScrollBarStyle1" TargetType="{x:Type ScrollBar}">            <Setter Property="Template">                <Setter.Value>                    <ControlTemplate TargetType="{x:Type ScrollBar}">                        <Grid Height="0"></Grid>                    </ControlTemplate>                </Setter.Value>            </Setter></Style>

3. add content to ScrollBox. Here, the sliding effect is ready.

Case:

<Dxlc: ScrollBox x: Name = "MyScrollBox" HorizontalScrollBarStyle = "{StaticResource ScrollBarStyle1}" verticalignment = "Center"> <StackPanel Orientation = "Horizontal"> <! -- Place content --> <TextBlock Text = "1" Width = "100" Height = "200" Background = "Red"> </TextBlock> <TextBlock Text = "2" Width = "100" Height = "200" Background = "CornflowerBlue"> </TextBlock> <TextBlock Text = "3" Width = "100" Height = "200" Background = "Brown "> </TextBlock> <TextBlock Text =" 4 "Width =" 100 "Height =" 200 "Background =" Aqua "> </TextBlock> <TextBlock Text =" 5" width = "100" Height = "200" Background = "DarkCyan"> </TextBlock> <TextBlock Text = "6" Width = "100" Height = "200" Background =" red "> </TextBlock> <TextBlock Text =" 7 "Width =" 100 "Height =" 200 "Background =" Salmon "> </TextBlock> <TextBlock Text =" 8 "Width =" 100 "Height =" 200 "Background =" Silver "> </TextBlock> <TextBlock Text =" 2 "Width =" 100 "Height =" 200 "Background = ""CornflowerBlue"> </TextBlock> <TextBlock Text = "3" Width = "100" Height = "200" Background = "Brown"> </TextBlock> <TextBlock Text =" 4 "Width =" 100 "Height =" 200 "Background =" Aqua "> </TextBlock> <TextBlock Text =" 5 "Width =" 100 "Height =" 200 "Background = "DarkCyan"> </TextBlock> </StackPanel> </dxlc: scrollBox>

4. If you want to slightly adjust the sliding between the left and right, you can add two other buttons to click the sliding button.

<Button x: Name = "BtnLeft" Height = "28" Click = "BtnLeft_OnClick" Background = "Transparent" Content = "Slide Left" HorizontalAlignment = "Left"> <Button. template> <ControlTemplate TargetType = "Button"> <Grid> <Path Stroke = "DodgerBlue" StrokeThickness = "5" Data = "M10, 14 25, 0 "> </Path> <Path Stroke =" DodgerBlue "StrokeThickness =" 5 "Data =" M10, 11, 25 "> </Path> </Grid> </ControlTemplate> </Button. template> </Button> <Button x: name = "BtnRight" Height = "28" Click = "BtnRight_OnClick" Background = "Transparent" Content = "slide Right" HorizontalAlignment = "Right"> <Button. template> <ControlTemplate TargetType = "Button"> <Grid> <Path Stroke = "DodgerBlue" StrokeThickness = "5" Data = "M15, 14, 0 "> </Path> <Path Stroke =" DodgerBlue "StrokeThickness =" 5 "Data =" M15, 11, "> </Path> </Grid> </ControlTemplate> </Button. template> </Button>

Event processing in the background:

    private void BtnLeft_OnClick(object sender, RoutedEventArgs e)    {        MyScrollBox.HorizontalOffset += 100;    }    private void BtnRight_OnClick(object sender, RoutedEventArgs e)    {        MyScrollBox.HorizontalOffset -= 100;    }

GitHub: https://github.com/Kybs0/ScrollBoxStyle