wpf開發隨筆收錄-scrollviewer滑塊太小解決方案

一、前言

在 wpf 開發過程中，scrollviewer 是一個很常使用到的控制項，在自己工作的項目中，收到一個反饋就是當 scrollviewer 裡面的內容太長時，滾動條的滑塊就會變得很小，然後導致點擊起來不太友好。一開始想著是通過在樣式裡面設置滑塊的最小值，但都沒法生效。最後換了一個思路來，通過把原有的滑塊隱藏，然後自己加一個控制項來充當滑塊來間接控制 scrollviewer 的滾動。

二、正文

1. 這裡就直接拿之前寫的那個曲線圖控制項來進行演示，當曲線圖的數據很多時，滑塊就會顯得很小個，現在實在默認樣式情況下，如果在自定義的樣式情況下很更小

2. 這裡就直接在曲線圖的頂層放置了一個 canvas，添加一個 border 來充當滑塊，注意這裡將整個 canvas 覆蓋再曲線圖上，是因為我還添加了可以直接點擊曲線圖拖拽移動的功能，然後將 scrollviewer 的滑塊隱藏，設置好滑塊的最小寬度和高度，默認隱藏

<Grid>
    <local:CruveDrawingVisual x:Name="curve" Margin="0,10,0,15" />
    <ScrollViewer
        Name="scroll"
        HorizontalScrollBarVisibility="Hidden"
        ScrollChanged="ScrollViewer_ScrollChanged"
        VerticalScrollBarVisibility="Disabled">
        <Canvas x:Name="canvas" />
    </ScrollViewer>
    <Canvas x:Name="CurvePanel" Background="Transparent">
        <Border
            x:Name="border"
            Canvas.Left="0"
            Canvas.Bottom="0"
            Height="15"
            MinWidth="80"
            Background="Green"
            PreviewMouseLeftButtonDown="Border_PreviewMouseLeftButtonDown"
            Visibility="Collapsed" />
    </Canvas>
</Grid>

3. 接著再後台添加對應的邏輯處理代碼，詳細的一些東西都已經通過備註的形式寫在代碼里，這裡就不在囉嗦了

public partial class MainWindow : Window
{
    private bool isAdd = true;
    private List<int> lists = new List<int>();

    private Point point_border;

    private double offset = -1;

    public MainWindow()
    {
        InitializeComponent();

        CurvePanel.MouseMove += delegate (object sender, MouseEventArgs e)
        {
            if (e.LeftButton == MouseButtonState.Pressed)
            {
                if (Mouse.Captured == null) Mouse.Capture(CurvePanel);

                //拖动滑块
                if (isBorder)
                {
                    Point point = e.GetPosition(this);
                    //鼠标超出控件左边缘
                    if (point.X - point_border.X <= 0)
                    {
                        scroll.ScrollToHorizontalOffset(0);
                    }
                    //鼠标超出控件右边缘
                    else if (point.X - point_border.X >= CurvePanel.ActualWidth - border.ActualWidth)
                    {
                        scroll.ScrollToHorizontalOffset(lists.Count - CurvePanel.ActualWidth);
                    }
                    //鼠标在控件区间
                    else if (point.X - point_border.X > 0 && point.X - point_border.X < CurvePanel.ActualWidth - border.ActualWidth)
                    {
                        double left = point.X - point_border.X;
                        scroll.ScrollToHorizontalOffset((lists.Count - CurvePanel.ActualWidth) / (CurvePanel.ActualWidth - border.ActualWidth) * left);
                    }
                }
                //拖动画布
                else
                {
                    if (offset >= 0 && offset <= CurvePanel.ActualWidth)
                    {
                        scroll.ScrollToHorizontalOffset(scroll.HorizontalOffset - (e.GetPosition(this).X - offset));
                    }
                    offset = e.GetPosition(this).X;
                }
            }
            else
            {
                offset = -1;
                isBorder = false;
                Mouse.Capture(null); // 释放鼠标捕获
            }
        };
    }

    private void Window_Loaded(object sender, RoutedEventArgs e)
    {
        int temp = 20;
        for (int i = 0; i < 24 * 60 * 60 * 2; i++)
        {
            if (isAdd)
            {
                lists.Add(temp);
                temp += 2;
            }
            else
            {
                lists.Add(temp);
                temp -= 2;
            }

            if (temp == 280) isAdd = false;
            if (temp == 20) isAdd = true;
        }
        canvas.Width = lists.Count;
        //判断是否显示滑块
        if (canvas.Width > CurvePanel.ActualWidth)
        {
            border.Visibility = Visibility.Visible;
            //根据ScrollViewer内容的比例计算滑块的宽度
            border.Width = CurvePanel.ActualWidth * CurvePanel.ActualWidth / canvas.Width;
        }
        else
        {
            border.Visibility = Visibility.Collapsed;
        }
        curve.SetupData(lists);
    }

    private void ScrollViewer_ScrollChanged(object sender, ScrollChangedEventArgs e)
    {
        curve.OffsetX(scroll.HorizontalOffset);

        Canvas.SetLeft(border, scroll.HorizontalOffset / ((lists.Count - CurvePanel.ActualWidth) / (CurvePanel.ActualWidth - border.ActualWidth)));
    }

    private bool isBorder = false;
    private void Border_PreviewMouseLeftButtonDown(object sender, MouseButtonEventArgs e)
    {
        isBorder = true;
        //获取鼠标点击滑块上的位置
        point_border = e.GetPosition(border);
    }
}

4. 運行效果如下