Windows 8 Store Apps 開發實戰（9）：ScrollViewer 基礎應用 — 核心屬性、ScrollBar 與 ScrollContentPresenter

前言

ScrollViewer 是所有捲動容器的基石（ListView、GridView、TextBox、RichEditBox 內部皆內建）。掌握其核心屬性、內部元件（ScrollBar、ScrollContentPresenter）與程式碼控制捲動，是開發複雜捲動介面的關鍵。本文將從基礎應用切入，層層深入。

一、ScrollViewer 基礎應用與核心屬性

關鍵屬性速查

唯讀資訊屬性（ViewChanged 事件中常用）

程式碼控制捲動

• ScrollToHorizontalOffset(double offset)
• ScrollToVerticalOffset(double offset)

完整範例：即時顯示捲動資訊 + 居中按鈕

<Page x:Class="XamlDemo.Controls.ScrollViewer.Demo" ...>
    <Grid Background="Transparent">
        <StackPanel Margin="120 0 0 0">
            <TextBlock x:Name="lblMsg"/>
            <ScrollViewer x:Name="scrollViewer" Width="400" Height="400"
                          Margin="0 10 0 0" HorizontalAlignment="Left"
                          IsDeferredScrollingEnabled="False"
                          ViewChanged="scrollViewer_ViewChanged"
                          HorizontalScrollMode="Enabled" VerticalScrollMode="Enabled"
                          HorizontalScrollBarVisibility="Visible"
                          VerticalScrollBarVisibility="Visible">
                <ScrollViewer.Content>
                    <Image Source="/Assets/Logo.png" Width="1000"/>
                </ScrollViewer.Content>
            </ScrollViewer>
            <StackPanel Orientation="Horizontal">
                <Button Content="居中" Click="Button_Click"/>
            </StackPanel>
        </StackPanel>
    </Grid>
</Page>

後台邏輯

public sealed partial class Demo : Page
{
    public Demo() { this.InitializeComponent(); }

    private void scrollViewer_ViewChanged(object sender, ScrollViewerViewChangedEventArgs e)
    {
        lblMsg.Text = "";
        lblMsg.Text += "ComputedHorizontalScrollBarVisibility: " + scrollViewer.ComputedHorizontalScrollBarVisibility + "\n";
        lblMsg.Text += "ComputedVerticalScrollBarVisibility: " + scrollViewer.ComputedVerticalScrollBarVisibility + "\n";
        lblMsg.Text += "ExtentWidth: " + scrollViewer.ExtentWidth + "\n";
        lblMsg.Text += "ExtentHeight: " + scrollViewer.ExtentHeight + "\n";
        lblMsg.Text += "ViewportWidth: " + scrollViewer.ViewportWidth + "\n";
        lblMsg.Text += "ViewportHeight: " + scrollViewer.ViewportHeight + "\n";
        lblMsg.Text += "HorizontalOffset: " + scrollViewer.HorizontalOffset + "\n";
        lblMsg.Text += "VerticalOffset: " + scrollViewer.VerticalOffset + "\n";
        lblMsg.Text += "ScrollableWidth: " + scrollViewer.ScrollableWidth + "\n";
        lblMsg.Text += "ScrollableHeight: " + scrollViewer.ScrollableHeight + "\n";
    }

    private void Button_Click(object sender, RoutedEventArgs e)
    {
        scrollViewer.ScrollToHorizontalOffset(scrollViewer.ScrollableWidth / 2);
        scrollViewer.ScrollToVerticalOffset(scrollViewer.ScrollableHeight / 2);
    }
}

二、ScrollBar — 獨立使用與存取內建捲動條

ScrollBar 繼承自 RangeBase，核心屬性：Value、Minimum、Maximum、ViewportSize、Orientation。事件：ValueChanged。

範例：存取 ScrollViewer 內建垂直捲動條並顯示值

<Page x:Class="XamlDemo.Controls.ScrollViewer.ScrollBarDemo" ...>
    <Grid Background="Transparent">
        <StackPanel Margin="120,0,0,0">
            <TextBlock x:Name="lblMsg" FontSize="14.667" HorizontalAlignment="Left"/>
            <ScrollViewer x:Name="scrollViewer" Width="400" Height="200"
                          HorizontalAlignment="Left">
                <Image Source="/Assets/Logo.png" Width="1000"/>
            </ScrollViewer>
        </StackPanel>
    </Grid>
</Page>

後台：透過視覺樹尋找名為 "VerticalScrollBar" 的 ScrollBar

public sealed partial class ScrollBarDemo : Page
{
    public ScrollBarDemo()
    {
        this.InitializeComponent();
        this.Loaded += ScrollBarDemo_Loaded;
    }

    void ScrollBarDemo_Loaded(object sender, RoutedEventArgs e)
    {
        // Helper.GetVisualChild 為通用視覺樹搜尋方法
        var scrollBar = Helper.GetVisualChild<ScrollBar>(scrollViewer, "VerticalScrollBar");
        scrollBar.ValueChanged += scrollBar_ValueChanged;
    }

    void scrollBar_ValueChanged(object sender, RangeBaseValueChangedEventArgs e)
    {
        lblMsg.Text = e.NewValue.ToString();
    }
}

Helper.GetVisualChild 實作參考

public static T GetVisualChild<T>(DependencyObject parent, string name = null) where T : DependencyObject
{
    int count = VisualTreeHelper.GetChildrenCount(parent);
    for (int i = 0; i < count; i++)
    {
        var child = VisualTreeHelper.GetChild(parent, i);
        if (child is T t && (name == null || (child as FrameworkElement).Name == name))
            return t;
        var result = GetVisualChild<T>(child, name);
        if (result != null) return result;
    }
    return null;
}

三、ScrollContentPresenter — ScrollViewer 內容呈現器

ScrollContentPresenter 專責呈現 ScrollViewer.Content，類似 ContentPresenter（ContentControl）、ItemsPresenter（ItemsControl）。可透過視覺樹存取並調整其 Margin、RenderTransform 等屬性，實現進階捲動視差、固定標題等效果。

範例：為內容添加邊距

<Page x:Class="XamlDemo.Controls.ScrollViewer.ScrollContentPresenterDemo" ...>
    <Grid Background="Transparent">
        <StackPanel Margin="120 0 0 0">
            <ScrollViewer x:Name="scrollViewer" Width="400" Height="400"
                          Background="Blue" HorizontalAlignment="Left"
                          HorizontalScrollMode="Enabled" VerticalScrollMode="Enabled"
                          HorizontalScrollBarVisibility="Visible"
                          VerticalScrollBarVisibility="Visible">
                <ScrollViewer.Content>
                    <Image Source="/Assets/Logo.png" Width="1000"/>
                </ScrollViewer.Content>
            </ScrollViewer>
        </StackPanel>
    </Grid>
</Page>

後台調整 Margin

public sealed partial class ScrollContentPresenterDemo : Page
{
    public ScrollContentPresenterDemo()
    {
        this.InitializeComponent();
        this.Loaded += ScrollContentPresenterDemo_Loaded;
    }

    void ScrollContentPresenterDemo_Loaded(object sender, RoutedEventArgs e)
    {
        var presenter = Helper.GetVisualChild<ScrollContentPresenter>(scrollViewer, "ScrollContentPresenter");
        presenter.Margin = new Thickness(100); // 內容整體偏移 100 像素
    }
}

四、小結

1. ScrollViewer：掌握 Extent/Viewport/Offset/Scrollable 四組尺寸屬性，善用 ScrollToHorizontal/VerticalOffset 程式碼控制捲動
2. ScrollBar：可獨立使用，亦可透過視覺樹存取內建捲動條監聽 ValueChanged
3. ScrollContentPresenter：內容呈現器，調整其屬性可實現視差、固定標題等進階效果