トップ回答者
ScrollViewerのスクロールバー表示のタイミングについて

質問
-
イメージファイルを読み込んで、イメージ上に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.ImagingPartial Public Class MainPage
Inherits UserControlPublic Sub New()
InitializeComponent()
End Sub
Private Sub Button1_Click(sender As System.Object, e As System.Windows.RoutedEventArgs) Handles Button1.Click
Dim image As BitmapImageimage = 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.Oumi2011年6月1日 8:46 -
すみません。自己レスです。
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.ImagingPartial Public Class MainPage
Inherits UserControlPublic Sub New()
InitializeComponent()
End Sub
Private Sub Button1_Click(sender As System.Object, e As System.Windows.RoutedEventArgs) Handles Button1.Click
Dim image As BitmapImageimage = 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