[FIXED] How to set the image hight to the a grid row hight, but ignore a parent ScrollViewers

Issue

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>

enter image description here

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.

enter image description here

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.

Solution

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.

Answered By - Crestfallen Vulpes

Answer Checked By - Pedro (PHPFixing Volunteer)