[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つ目のボタン
はみ出ている” 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

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

コメント

タイトルとURLをコピーしました