Remove From My Forums

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

質問
0

サインインして投票

イメージファイルを読み込んで、イメージ上に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

回答

0

サインインして投票
すみません。自己レスです。

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

すべての返信

0

サインインして投票

こんにちは。

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

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

<!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
0

サインインして投票

こんにちわ

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

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

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

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

2011年6月1日 9:14
0

サインインして投票
すみません。自己レスです。

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

トップ回答者

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

質問

回答

すべての返信