VB のたまご

作成日: 2017/03/05, 更新日: 2017/03/05



ScrollViewer

    イメージ
  •  ScrollViewer は、内部に配置したコントロールの表示サイズが ScrollViewer サイズよりも大きくなる場合に、スクロール領域を提供するコントロールです。 とりあえずどういう風に動くのか見てみましょう。 以下サンプルです。「ScrollViewerWindow1」という画面で作成していますが、「MainWindow」に書いても構いません。

  • スポンサーリンク


    <Window x:Class="ScrollViewerWindow1"
            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:w03_ContainerControls"
            mc:Ignorable="d"
            Title="ScrollViewerWindow1" Height="300" Width="400">
        
        <Grid>
    
            <Grid.ColumnDefinitions>
                <ColumnDefinition />
                <ColumnDefinition />
            </Grid.ColumnDefinitions>
    
            <WrapPanel Margin="50" Grid.Column="0">
                <Button Content="button1" Margin="10" />
                <Button Content="button2" Margin="10" />
                <Button Content="button3" Margin="10" />
                <Button Content="button4" Margin="10" />
                <Button Content="button5" Margin="10" />
                <Button Content="button6" Margin="10" />
                <Button Content="button7" Margin="10" />
            </WrapPanel>
    
            <ScrollViewer Margin="50" Grid.Column="1">
                <WrapPanel>
                    <Button Content="button1" Margin="10" />
                    <Button Content="button2" Margin="10" />
                    <Button Content="button3" Margin="10" />
                    <Button Content="button4" Margin="10" />
                    <Button Content="button5" Margin="10" />
                    <Button Content="button6" Margin="10" />
                    <Button Content="button7" Margin="10" />
                </WrapPanel>
            </ScrollViewer>
            
        </Grid>
        
    </Window>
    

  •  左側に表示している WrapPanel 内には7つのボタンを配置していますが全て表示されておらず、スクロール領域が無いため、リサイズしないと全てのボタンを見ることができません。 対して右側に表示している WrapPanel の外側に ScrollViewer を配置しているおかげで、表示されていないボタン部分もスクロールすることで見ることが可能になります。