So on one side, I have an Image that should resize automatically to the row size which I managed by just giving the row a height of 1*
<Grid.RowDefinitions>
<RowDefinition Name="row1" Height="Auto"></RowDefinition>
<RowDefinition Name="row2" Height="*"></RowDefinition>
<RowDefinition Name="row3" MinHeight="200" Height="*"></RowDefinition>
</Grid.RowDefinitions>
...
<Image x:Name="WideScreenImage" Grid.Column="1" Grid.Row="1" StretchDirection="DownOnly" Margin="5,5,5,4">
<Image.Source>
<BitmapImage UriSource=""></BitmapImage>
</Image.Source>
</Image>
On the other side, I have a Zoom script that needs a ScrollViewer to navigate after zoom in which also works.
<ScrollViewer Name="scrollViewer" Grid.Column="1" VerticalScrollBarVisibility="Visible" HorizontalScrollBarVisibility="Visible">
<Grid Name="grid" RenderTransformOrigin="0.5,0.5" VerticalAlignment="Stretch" HorizontalAlignment="Stretch">
<Grid.LayoutTransform>
<TransformGroup>
<ScaleTransform x:Name="scaleTransform"/>
</TransformGroup>
</Grid.LayoutTransform>
<Viewbox Grid.Column="0" Grid.Row="0">
<Image Source="Z:\tmp\img\1\d68epc1-022b407d-89e4-4128-a32d-17286dae21b4.png" StretchDirection="DownOnly"></Image>
</Viewbox>
</Grid>
</ScrollViewer>
My problem now is that the ScrollViewer takes 100% of the row, but because the image is bigger then the ScrollViewer, the ScrollViewer does his job and shows the image in its original size but with a scrollbar to look at it.
So basicly i need a way to resize the image to the row size but only show the scrollbar when the grid too his LayoutTransform exceeds the size of the scrollviewer.
CodePudding user response:
So, I found a solution in the meantime. I am not completely happy with it, but it has to work for now.
Basically I created a invis rectangle that I put into the row so it automatically resized like the image in the ScrollViwer should.
<Rectangle x:Name="recPosition" Grid.Column="1" Grid.Row="1" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Visibility="Hidden"/>
<ScrollViewer Name="scrollViewer" Grid.Column="1" Grid.Row="1" VerticalScrollBarVisibility="Visible" Visibility="Collapsed" HorizontalScrollBarVisibility="Visible">
<Grid Name="grid" RenderTransformOrigin="0.5,0.5" VerticalAlignment="Stretch" HorizontalAlignment="Stretch">
<Grid.LayoutTransform>
<TransformGroup>
<ScaleTransform x:Name="scaleTransform"/>
</TransformGroup>
</Grid.LayoutTransform>
<Viewbox>
<Image x:Name="WideScreenImage" StretchDirection="DownOnly" Margin="5,5,5,4">
<Image.Source>
<BitmapImage UriSource=""></BitmapImage>
</Image.Source>
</Image>
</Viewbox>
</Grid>
</ScrollViewer>
Then I used a size changed event to Update the Image size to the rectangle.
private void Window_SizeChanged(object sender, SizeChangedEventArgs e)
{
WideScreenImage.Height = recPosition.ActualHeight;
WideScreenImage.Width = recPosition.ActualWidth;
}
But i am pretty sure there are other ways that perform better.