locked
ScrollViewerのスクロールバー表示のタイミングについて RRS feed

  • 質問

  • イメージファイルを読み込んで、イメージ上にRectangle等のオブジェクトを配置する
    アプリケーションを作成しています。

    画像サイズは固定(Stretch="None")とし、ブラウザのサイズに収まりきらない場合はスクロールバーを
    表示するようにしているのですが、起動時のブラウザサイズが画像サイズより小さい場合、
    画像がすべて表示しきれていないにも関わらず、スクロールバーが表示されず困っています。

    以下コード

    <UserControl x:Class="ScrollViewerSample.MainPage"
        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"
        mc:Ignorable="d" xmlns:my="clr-namespace:ScrollViewerSample" d:DesignHeight="400" d:DesignWidth="800" >

        <Grid x:Name="LayoutRoot" Background="White" VerticalAlignment="Stretch" HorizontalAlignment="Stretch">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*"/>
                <ColumnDefinition Width="200"/>
            </Grid.ColumnDefinitions>
            <ScrollViewer Name="ImegeBase" Grid.Column="0" BorderThickness="1"
                          HorizontalScrollBarVisibility="Visible" VerticalScrollBarVisibility="Visible"
                          VerticalAlignment="Stretch" HorizontalAlignment="Stretch">
                <Canvas Name="ImegeArea"  VerticalAlignment="Top" HorizontalAlignment="Left"
                        Width="{Binding ElementName=ImegeBase, Path=ActualWidth, Mode=OneWay}"
                        Height="{Binding ElementName=ImegeBase, Path=ActualHeight, Mode=OneWay}" >

                    <Image Name="Image1" Canvas.Top="0" Canvas.Left="0" Stretch="None"
                           VerticalAlignment="Top" HorizontalAlignment="Left"
                               Source="/ScrollViewerSample;component/Images/Tulips.jpg" />
                </Canvas>
            </ScrollViewer>

            <Grid Grid.Column="1" Margin="10" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
                <Grid.RowDefinitions>
                    <RowDefinition Height="*"/>
                </Grid.RowDefinitions>

                <StackPanel Grid.Row="0" VerticalAlignment="Top">
                    <Button Content="Button1" Height="33" HorizontalAlignment="Center" Margin="5" Name="Button1"  Width="150"  />
                    <Button Content="Button2" Height="33" HorizontalAlignment="Center" Margin="5" Name="Button2"  Width="150"  />
                </StackPanel>         
            </Grid>
        </Grid>
    </UserControl>


    Canvas内にイメージを配置しているのは、イメージ上にオブジェクトを配置するためです。
    また、Canvasのサイズが固定でないとスクロールバーが表示されないとの情報がありましたので
    ScrollViewerのサイズに合わせてCanvasのサイズを変更するようにしています。
    ちなみに、Canvasがなければうまく動作します。
    Canvasがある場合でもうまく動作する方法を教えてください。

    2011年6月1日 7:16

回答

  • すみません。自己レスです。

    ScrollViewerのサイズに合わせてCanvasのサイズを変更していましたが、
    Canvasのサイズは画像のサイズに設定する必要がありました。


    以下ソース

    <UserControl x:Class="ScrollViewerSample.MainPage"
        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"
        mc:Ignorable="d" xmlns:my="clr-namespace:ScrollViewerSample" d:DesignHeight="400" d:DesignWidth="800" >

        <Grid x:Name="LayoutRoot" Background="White" VerticalAlignment="Stretch" HorizontalAlignment="Stretch">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*"/>
                <ColumnDefinition Width="200"/>
            </Grid.ColumnDefinitions>
            <ScrollViewer Name="ImegeBase" Grid.Column="0" BorderThickness="1"
                          HorizontalScrollBarVisibility="Visible" VerticalScrollBarVisibility="Visible"
                          VerticalAlignment="Stretch" HorizontalAlignment="Stretch">
                <Canvas Name="ImageArea"  VerticalAlignment="Top" HorizontalAlignment="Left">

                    <Image Name="Image1" Canvas.Top="0" Canvas.Left="0" Stretch="None"
                           VerticalAlignment="Top" HorizontalAlignment="Left" />
                </Canvas>
            </ScrollViewer>

            <Grid Grid.Column="1" Margin="10" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
                <Grid.RowDefinitions>
                    <RowDefinition Height="*"/>
                </Grid.RowDefinitions>

                <StackPanel Grid.Row="0" VerticalAlignment="Top">
                    <Button Content="Button1" Height="33" HorizontalAlignment="Center" Margin="5" Name="Button1"  Width="150"  />
                    <Button Content="Button2" Height="33" HorizontalAlignment="Center" Margin="5" Name="Button2"  Width="150"  />
                </StackPanel>
            </Grid>
        </Grid>
    </UserControl>


    Imports System.Windows.Media.Imaging

    Partial Public Class MainPage
        Inherits UserControl

        Public Sub New()
            InitializeComponent()
        End Sub
        Private Sub Button1_Click(sender As System.Object, e As System.Windows.RoutedEventArgs) Handles Button1.Click
            Dim image As BitmapImage

            image = New BitmapImage(New Uri("/ScrollViewerSample;component/Images/Tulips.jpg", UriKind.Relative))

            Image1.Source = image

            'Imageコントロールのをイメージのサイズにリサイズ
            ImageArea.Width = image.PixelWidth
            ImageArea.Height = image.PixelHeight
        End Sub
    End Class

    お騒がせしてもうしわけありませんでした。
    今後ともよろしくお願いいたします。

    • 回答としてマーク 梅紀香 2011年6月1日 13:07
    2011年6月1日 13:06

すべての返信

  • こんにちは。

    >起動時のブラウザサイズが画像サイズより小さい場合

    起動時のサイズをコントロールできれば良いと考えてもよいのでしょうか?

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" >

    <head>
        <title>SilverlightApplication1</title>
        <script type="text/javascript">
     window.onload = SetMaxSize;

     function SetMaxSize()
     { 
      window.moveTo(0,0);
      if (document.all)
      {
        top.window.resizeTo(screen.availWidth,screen.availHeight);
      }

      else if (document.layers||document.getElementById)
      {
        if (top.window.outerHeight<screen.availHeight||top.window.outerWidth<screen.availWidth)
        {
          top.window.outerHeight = screen.availHeight;
          top.window.outerWidth = screen.availWidth;
        }
      }
     }

        </script>
    </head>
    <body>
    TEST TEST TEST
    </body>
    </html>


    K.Oumi
    2011年6月1日 8:46
  • こんにちわ

    返信ありがとうございます。

    起動時のサイズをコントロールできれば良いと考えてもよいのでしょうか?

    画面上に収まりきらないサイズのイメージの場合、この方法では回避できないと思います。

    画像がすべて参照できるようスクロールバーの制御を行いたいのですが、よい方法はないでしょうか?

    2011年6月1日 9:14
  • すみません。自己レスです。

    ScrollViewerのサイズに合わせてCanvasのサイズを変更していましたが、
    Canvasのサイズは画像のサイズに設定する必要がありました。


    以下ソース

    <UserControl x:Class="ScrollViewerSample.MainPage"
        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"
        mc:Ignorable="d" xmlns:my="clr-namespace:ScrollViewerSample" d:DesignHeight="400" d:DesignWidth="800" >

        <Grid x:Name="LayoutRoot" Background="White" VerticalAlignment="Stretch" HorizontalAlignment="Stretch">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*"/>
                <ColumnDefinition Width="200"/>
            </Grid.ColumnDefinitions>
            <ScrollViewer Name="ImegeBase" Grid.Column="0" BorderThickness="1"
                          HorizontalScrollBarVisibility="Visible" VerticalScrollBarVisibility="Visible"
                          VerticalAlignment="Stretch" HorizontalAlignment="Stretch">
                <Canvas Name="ImageArea"  VerticalAlignment="Top" HorizontalAlignment="Left">

                    <Image Name="Image1" Canvas.Top="0" Canvas.Left="0" Stretch="None"
                           VerticalAlignment="Top" HorizontalAlignment="Left" />
                </Canvas>
            </ScrollViewer>

            <Grid Grid.Column="1" Margin="10" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
                <Grid.RowDefinitions>
                    <RowDefinition Height="*"/>
                </Grid.RowDefinitions>

                <StackPanel Grid.Row="0" VerticalAlignment="Top">
                    <Button Content="Button1" Height="33" HorizontalAlignment="Center" Margin="5" Name="Button1"  Width="150"  />
                    <Button Content="Button2" Height="33" HorizontalAlignment="Center" Margin="5" Name="Button2"  Width="150"  />
                </StackPanel>
            </Grid>
        </Grid>
    </UserControl>


    Imports System.Windows.Media.Imaging

    Partial Public Class MainPage
        Inherits UserControl

        Public Sub New()
            InitializeComponent()
        End Sub
        Private Sub Button1_Click(sender As System.Object, e As System.Windows.RoutedEventArgs) Handles Button1.Click
            Dim image As BitmapImage

            image = New BitmapImage(New Uri("/ScrollViewerSample;component/Images/Tulips.jpg", UriKind.Relative))

            Image1.Source = image

            'Imageコントロールのをイメージのサイズにリサイズ
            ImageArea.Width = image.PixelWidth
            ImageArea.Height = image.PixelHeight
        End Sub
    End Class

    お騒がせしてもうしわけありませんでした。
    今後ともよろしくお願いいたします。

    • 回答としてマーク 梅紀香 2011年6月1日 13:07
    2011年6月1日 13:06