Scrollview issues

11-13-2009 11:54 AM |

I'm running into issues using the Scrollviewer.  I created an image gallery user control. A list of thumbnails is on the left and a large image is on the right.  When the user clicks on the thumbnail, the image is displayed on the right.  This works fine most of the time.  But, when the resolution of one image is different from the last, the main image is no longer centered in the viewscroll control.  But, if I click on the main image's scrollbar, it jumps to the upper left corner of the veiw scroll area.  Here is the XAML for my control.

 <UserControl x:Class="ImageViewer.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" d:DesignWidth="400" d:DesignHeight="400"  >
  <Grid x:Name="LayoutRoot" Background="#FFDADADA">
      <Grid.ColumnDefinitions>
          <ColumnDefinition Width="0.178*"/>
          <ColumnDefinition Width="0.822*"/>
      </Grid.ColumnDefinitions>
      <Grid.RowDefinitions>
      </Grid.RowDefinitions>
         <ScrollViewer Grid.Column="1" HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto" >
             <Image x:Name="imgMainImage" VerticalAlignment="Top" HorizontalAlignment="Left" d:LayoutOverrides="Height, GridBox" Grid.Column="1" Stretch="None"/>
         </ScrollViewer>
         <TextBox x:Name="txtStatus" Grid.Column="1" Width="80" Height="20" VerticalAlignment="Top" HorizontalAlignment="Left"></TextBox>
        <ScrollViewer Grid.Column="0">
            <StackPanel x:Name="spThumbnails" Grid.Column="0" />
        </ScrollViewer>
    </Grid>
</UserControl>

The spThumbnails stack panel is populated with images at runtime.

Here is the code from my MouseLeftButtonDown event.  All it does is set the source of the main image to the source of the image that was clicked.

            imgThumbNail = CType(sender, Image)
            If Not IsNothing(imgThumbNail) Then
                Me.imgMainImage.Source = imgThumbNail.Source
            End If

Is there any code that I can add to make the imgMainImage image control reposition itself?

Thanks,

Mike

Re: Scrollview issues

11-13-2009 4:29 PM |

I am not 100% sure of what you're asking.  I managed to get something working quickly using some different controls and a sample data source from blend...

I replaced the StackPanel with an ItemsControl and bound the ItemsSource property to my collection of images.  In the ItemsControl, define an ItemTemplate which will show each "item" as a button.  Add a click event to the button which will read the source of the image in the button that was pressed and assign it to the Content property of the large viewer...  In my tests here, it looks like the items are being centered vertically in the window...

<Grid x:Name="LayoutRoot" Background="#FFDADADA" DataContext="{Binding Source={StaticResource SampleDataSource}}">

<Grid.RowDefinitions>

<RowDefinition Height="1*" />

</Grid.RowDefinitions>

<Grid.ColumnDefinitions>

<ColumnDefinition Width="0.178*" />

<ColumnDefinition Width="0.822*" />

</Grid.ColumnDefinitions>

<ScrollViewer Grid.Row="0" Grid.Column="0">

<ItemsControl x:Name="icImageThumbnails" DataContext="{Binding Collection, Mode=OneWay}" ItemsSource="{Binding Mode=OneWay}">

<ItemsControl.ItemTemplate>

<DataTemplate>

<Button Click="ImageClick">

<Image Source="{Binding Property2}" Height="30" Stretch="UniformToFill" />

</Button>

</ItemsControl.ItemTemplate>

</ItemsControl>

</ScrollViewer>

<ScrollViewer Grid.Row="0" Grid.Column="1" >

<ContentPresenter x:Name="cpFullSizeImage" />

</ScrollViewer>

</Grid>

asd

asd

Re: Scrollview issues

11-13-2009 6:47 PM |

Mike7768abc:

 <ScrollViewer Grid.Column="0">
            <StackPanel x:Name="spThumbnails" Grid.Column="0" />
        </ScrollViewer>

Just wondering.  In several places you have one control in another control assigning itself to a grid column.

If the control is in another then it is automatically in that column.  What happens if you take out the multiple grid column assignments?