scroll

<Window x:Class="WpfApplication4.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:WpfApplication4"
        mc:Ignorable="d"
        Title="MainWindow" Height="350" Width="525">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="1*"></RowDefinition>
            <RowDefinition Height="1*"></RowDefinition>
            <RowDefinition Height="1*"></RowDefinition>
        </Grid.RowDefinitions>
        <Canvas x:Name="canvas" Grid.Row="0" ClipToBounds="True">
            <Button x:Name="main" Height="40" Width="80" Canvas.Top="10" Canvas.Left="30" Click="main_Click"/>
            <StackPanel x:Name="sub" Orientation="Horizontal" Canvas.Left="110" Canvas.Top="{Binding (Canvas.Top),ElementName=main}" Visibility="Hidden">
                <Button x:Name="yello" Height="40" Width="80" Background="LightYellow" Click="yello_Click"/>
                <Button x:Name="blue" Height="40" Width="80" Background="LightBlue" Click="blue_Click"/>
            </StackPanel>
        </Canvas>
        <StackPanel x:Name="control_panel" Orientation="Horizontal" Grid.Row="1" Height="20" VerticalAlignment="Top">
            <Grid Width="{Binding ActualWidth, ElementName=control_panel}">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="1*"></ColumnDefinition>
                    <ColumnDefinition Width="9*"></ColumnDefinition>
                </Grid.ColumnDefinitions>
                <Button Grid.Column="0"></Button>
                <DockPanel x:Name="ctrl_panel" Grid.Column="1" Background="#808080">
                    <Button x:Name="toLeft" DockPanel.Dock="Left" Height="{Binding ActualHeight, ElementName=ctrl_panel}" FontFamily="Segoe UI Symbol" Foreground="White" Background="Transparent" Content="" Click="toLeft_Click"></Button>
                    <Button x:Name="toRight" DockPanel.Dock="Right" Height="{Binding ActualHeight, ElementName=ctrl_panel}" FontFamily="Segoe UI Symbol" Foreground="White" Background="Transparent" Content="" Click="toRight_Click"></Button>
                    <Canvas x:Name="control" ClipToBounds="True" Background="Transparent">
                        <StackPanel x:Name="button_panel" Canvas.Left="0" Orientation="Horizontal">
                            <StackPanel x:Name="button_panel1" Orientation="Horizontal" Height="{Binding ActualHeight, ElementName=control}" Width="{Binding ActualWidth, ElementName=control}">
                                <Grid Height="{Binding ActualHeight, ElementName=button_panel1}" Width="{Binding ActualWidth, ElementName=button_panel1}">
                                    <Grid.ColumnDefinitions>
                                        <ColumnDefinition Width="1*"/>
                                        <ColumnDefinition Width="1*"/>
                                        <ColumnDefinition Width="1*"/>
                                        <ColumnDefinition Width="1*"/>
                                    </Grid.ColumnDefinitions>
                                    <Button Grid.Column="0" Background="LightYellow" Content="1"></Button>
                                    <Button Grid.Column="1" Background="LightBlue" Content="2"></Button>
                                    <Button Grid.Column="2" Background="Pink" Content="3"></Button>
                                    <Button Grid.Column="3" Background="LightGreen" Content="4"></Button>
                                </Grid>
                            </StackPanel>
                            <StackPanel x:Name="button_panel2" Orientation="Horizontal" Height="{Binding ActualHeight, ElementName=control}" Width="{Binding ActualWidth, ElementName=control}">
                                <Grid Height="{Binding ActualHeight, ElementName=button_panel2}" Width="{Binding ActualWidth, ElementName=button_panel2}">
                                    <Grid.ColumnDefinitions>
                                        <ColumnDefinition Width="1*"/>
                                        <ColumnDefinition Width="1*"/>
                                        <ColumnDefinition Width="1*"/>
                                        <ColumnDefinition Width="1*"/>
                                    </Grid.ColumnDefinitions>
                                    <Button Grid.Column="0" Background="LightGreen" Content="5"></Button>
                                    <Button Grid.Column="1" Background="Pink" Content="6"></Button>
                                    <Button Grid.Column="2" Background="LightBlue" Content="7"></Button>
                                    <Button Grid.Column="3" Background="LightYellow" Content="8"></Button>
                                </Grid>
                            </StackPanel>
                        </StackPanel>
                        
                    </Canvas>
                </DockPanel>
            </Grid>
            
        </StackPanel>

        <StackPanel x:Name="control_panel2" Orientation="Horizontal" Grid.Row="2" Height="20" VerticalAlignment="Top">
            <Grid Width="{Binding ActualWidth, ElementName=control_panel2}">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="1*"></ColumnDefinition>
                    <ColumnDefinition Width="9*"></ColumnDefinition>
                </Grid.ColumnDefinitions>
                <Button Grid.Column="0"></Button>
                <DockPanel x:Name="ctrl_panel2" Grid.Column="1" Background="#808080">
                    <Button x:Name="toLeft2" DockPanel.Dock="Left" Height="{Binding ActualHeight, ElementName=ctrl_panel2}" FontFamily="Segoe UI Symbol" Foreground="White" Background="Transparent" Content="" Click="toLeft2_Click"></Button>
                    <Button x:Name="toRight2" DockPanel.Dock="Right" Height="{Binding ActualHeight, ElementName=ctrl_panel2}" FontFamily="Segoe UI Symbol" Foreground="White" Background="Transparent" Content="" Click="toRight2_Click"></Button>
                    <Canvas x:Name="control2" ClipToBounds="True" Background="Transparent">
                        <ScrollViewer x:Name="scrollviewer" PreviewMouseLeftButtonDown="scrollViewer_PreviewMouseLeftButtonDown" PreviewMouseLeftButtonUp="scrollViewer_PreviewMouseLeftButtonUp" PreviewMouseMove="scrollViewer_PreviewMouseMove" PreviewMouseWheel="ucDepartmentView_PreviewMouseWheel" PanningMode="Both" Height="{Binding ActualHeight, ElementName=control2}"  Width="{Binding ActualWidth, ElementName=control2}" VerticalScrollBarVisibility="Hidden" HorizontalScrollBarVisibility="Hidden">
                            <StackPanel Orientation="Horizontal">
                                <StackPanel x:Name="button_panel1_2" Orientation="Horizontal" Height="{Binding ActualHeight, ElementName=control2}" Width="{Binding ActualWidth, ElementName=control2}">
                                    <Grid Height="{Binding ActualHeight, ElementName=button_panel1_2}" Width="{Binding ActualWidth, ElementName=button_panel1_2}">
                                        <Grid.ColumnDefinitions>
                                            <ColumnDefinition Width="1*"/>
                                            <ColumnDefinition Width="1*"/>
                                            <ColumnDefinition Width="1*"/>
                                            <ColumnDefinition Width="1*"/>
                                        </Grid.ColumnDefinitions>
                                        <Button Grid.Column="0" Background="LightYellow" Content="1"></Button>
                                        <Button Grid.Column="1" Background="LightBlue" Content="2"></Button>
                                        <Button Grid.Column="2" Background="Pink" Content="3"></Button>
                                        <Button Grid.Column="3" Background="LightGreen" Content="4"></Button>
                                    </Grid>
                                </StackPanel>
                                <StackPanel x:Name="button_panel2_2" Orientation="Horizontal" Height="{Binding ActualHeight, ElementName=control2}" Width="{Binding ActualWidth, ElementName=control2}">
                                    <Grid Height="{Binding ActualHeight, ElementName=button_panel2_2}" Width="{Binding ActualWidth, ElementName=button_panel2_2}">
                                        <Grid.ColumnDefinitions>
                                            <ColumnDefinition Width="1*"/>
                                            <ColumnDefinition Width="1*"/>
                                            <ColumnDefinition Width="1*"/>
                                            <ColumnDefinition Width="1*"/>
                                        </Grid.ColumnDefinitions>
                                        <Button Grid.Column="0" Background="LightGreen" Content="5"></Button>
                                        <Button Grid.Column="1" Background="Pink" Content="6"></Button>
                                        <Button Grid.Column="2" Background="LightBlue" Content="7"></Button>
                                        <Button Grid.Column="3" Background="LightYellow" Content="8"></Button>
                                    </Grid>
                                </StackPanel>
                            </StackPanel>
                        </ScrollViewer>

                    </Canvas>
                </DockPanel>
            </Grid>

        </StackPanel>
    </Grid>
</Window>

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;

namespace WpfApplication4
{
    /// <summary>
    /// MainWindow.xaml 的交互邏輯
    /// </summary>
    public partial class MainWindow : Window
    {
        Point scrollMousePoint = new Point();
        double hOff = 1;

        public MainWindow()
        {
            InitializeComponent();
        }

        private void main_Click(object sender, RoutedEventArgs e)
        {
            sub.Visibility = Visibility.Visible;
        }

        private void yello_Click(object sender, RoutedEventArgs e)
        {
            canvas.Background = Brushes.LightYellow;
            sub.Visibility = Visibility.Hidden;
        }

        private void blue_Click(object sender, RoutedEventArgs e)
        {
            canvas.Background = Brushes.LightBlue;
            sub.Visibility = Visibility.Hidden;
        }

        private void toLeft_Click(object sender, RoutedEventArgs e)
        {
            if(Canvas.GetLeft(button_panel) != 0)
            {
                Canvas.SetLeft(button_panel, 0);
            }

        }

        private void toRight_Click(object sender, RoutedEventArgs e)
        {
            if (Canvas.GetLeft(button_panel) == 0)
            {
                Canvas.SetLeft(button_panel, control.ActualWidth *-1);
            }
        }

        private void toLeft2_Click(object sender, RoutedEventArgs e)
        {

        }

        private void toRight2_Click(object sender, RoutedEventArgs e)
        {

        }

        void ucDepartmentView_PreviewMouseWheel(object sender, MouseWheelEventArgs e)
        {
            ScrollViewer viewer = scrollviewer;  //scrollview 爲Scrollview的名字，在Xaml文件中定義。
            if (viewer == null)
                return;

            double num = Math.Abs((int)(e.Delta / 2));
            double offset = 0.0;

            if (e.Delta > 0)
            {
                offset = Math.Max((double)0.0, (double)(viewer.HorizontalOffset - num));
            }
            else
            {
                offset = Math.Min(viewer.ScrollableWidth, viewer.HorizontalOffset + num);
            }

            if (offset != viewer.HorizontalOffset)
            {
                viewer.ScrollToHorizontalOffset(offset);
                e.Handled = true;
            }
        }

        //private void scrollviewer_ManipulationDelta(object sender, ManipulationDeltaEventArgs e)
        //{
        //    ScrollViewer viewer = scrollviewer;  //scrollview 爲Scrollview的名字，在Xaml文件中定義。
        //    if (viewer == null)
        //        return;

        //    double num = Math.Abs((int)(e.DeltaManipulation.Translation.X / 2));
        //    double offset = 0.0;

        //    if (e.DeltaManipulation.Translation.X > 0)
        //    {
        //        offset = Math.Max((double)0.0, (double)(viewer.HorizontalOffset - num));
        //    }
        //    else
        //    {
        //        offset = Math.Min(viewer.ScrollableWidth, viewer.HorizontalOffset + num);
        //    }

        //    if (offset != viewer.HorizontalOffset)
        //    {
        //        viewer.ScrollToHorizontalOffset(offset);
        //        e.Handled = true;
        //    }
        //}

        private void scrollViewer_PreviewMouseLeftButtonDown(object sender, MouseButtonEventArgs e)
        {
            scrollMousePoint = e.GetPosition(scrollviewer);
            hOff = scrollviewer.HorizontalOffset;
            scrollviewer.CaptureMouse();
        }

        private void scrollViewer_PreviewMouseMove(object sender, MouseEventArgs e)
        {
            if (scrollviewer.IsMouseCaptured)
            {
                scrollviewer.ScrollToHorizontalOffset(hOff + (scrollMousePoint.X - e.GetPosition(scrollviewer).X));
            }
        }

        private void scrollViewer_PreviewMouseLeftButtonUp(object sender, MouseButtonEventArgs e)
        {
            scrollviewer.ReleaseMouseCapture();
        }

    }
}