[WPF] スクロールバーがスクロールできない ScrollViewerの正しい使い方

WPFやってると画面の表示がうまくいかないって時が往々にしてあります。
そういう時ってコードを見直してもどこが原因が分からなくて時間をくってしまうんですよね。

今回はスクロールバーが機能しなかった時の話です。

ScrollViewerを使ってスクロールバーを表示させたのですが
画面と一緒にバーが伸びてしまってスクロールさせることができませんでした。

こんな感じ。

右側にバーは出ていますが、ボタンと一緒に伸びてしまっていて機能しません。

この時のコードはこちらです。

<Window x:Class="WpfApplication1.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:WpfApplication1"
        mc:Ignorable="d"
        Title="MainWindow" Height="350" Width="525">
    <StackPanel>
        <ScrollViewer>
            <local:OriginalButton/>
        </ScrollViewer>
    </StackPanel>
</Window>

↑MainWindow.xaml

<UserControl x:Class="WpfApplication1.OriginalButton"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             xmlns:local="clr-namespace:WpfApplication1"
             mc:Ignorable="d" 
             d:DesignHeight="300" d:DesignWidth="300">
    <StackPanel>
        <Button Height="200" Background="AliceBlue">
            <TextBlock Text="1つ目のボタン" FontSize="30"/>
        </Button>
        <Button Height="180" Background="Plum">
            <TextBlock Text="2つ目のボタン&#xA;はみ出ている" FontSize="30"/>
        </Button>
    </StackPanel>
</UserControl>

↑OriginalButton.xaml

「なんでなんだー！！」ってなりましたが、
ScrollViewerとOriginalButtonをStackPanelに入れていることが原因だったようです。

StackPanelからGridに置き換えてあげるだけでスクロールできるようになりました。

<Window x:Class="WpfApplication1.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:WpfApplication1"
        mc:Ignorable="d"
        Title="MainWindow" Height="350" Width="525">
    <Grid>
        <ScrollViewer>
            <local:OriginalButton/>
        </ScrollViewer>
    </Grid>
</Window>

↑修正したMainWindow.xaml

↑スクロールできるようになった画面

分かってしまえば簡単でした。