[etasigma]

I am using the ZoomPanel inside of a WPF UserControl. Following is my code:

Code:

<UserControl x:Class="Views.ZoomPanelViewer"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
             xmlns:ab2d="clr-namespace:Ab2d.Controls;assembly=Ab2d.Controls.ZoomPanel"
             xmlns:local="clr-namespace:Base.Converters"
             mc:Ignorable="d"
             Height="auto" Width="auto">
    <UserControl.Resources>
        <local:ByteArrayToBitmapConverter x:Key="ByteArrayToBitmapConverter"/>
    </UserControl.Resources>
    <Grid>
        <DockPanel LastChildFill="True" Width="auto" Margin="2">
            <GroupBox Header="Crash Report Pages" DockPanel.Dock="Top" >
                <DockPanel>
                    <ListView ItemsSource="{Binding Path=ListOfPages}" SelectedItem="{Binding Path=SelectedPage}">
                        <ListView.ItemsPanel>
                            <ItemsPanelTemplate>
                                <VirtualizingStackPanel Orientation="Horizontal">
                                </VirtualizingStackPanel>
                            </ItemsPanelTemplate>
                        </ListView.ItemsPanel>
                        <ListView.ItemTemplate>
                            <DataTemplate>
                                <Border BorderThickness="1" CornerRadius="10" BorderBrush="Black">
                                    <Image Source="{Binding Path=ThumbnailPage}" Margin="2"></Image>
                                </Border>
                            </DataTemplate>
                        </ListView.ItemTemplate>
                    </ListView>
                </DockPanel>
            </GroupBox>
            <GroupBox  Header="Image Control" DockPanel.Dock="Top">
                <Grid>
                    <Grid.RowDefinitions>
                        <RowDefinition Height="Auto"/>
                        <RowDefinition/>
                    </Grid.RowDefinitions>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="Auto"></ColumnDefinition>
                    </Grid.ColumnDefinitions>
                    <StackPanel Orientation="Horizontal"  VerticalAlignment="Top" HorizontalAlignment="Right">
                        <StackPanel Margin="10,0,0,0" VerticalAlignment="Top">
                            <Label Content="Rotation" />
                            <Slider Name="RotationSlider" Minimum="-180" Maximum="180" Width="200"
                                    TickPlacement="BottomRight"
                                    Ticks="-180, -90, 0, 90, 180"
                                    Orientation="Horizontal"
                                    IsSnapToTickEnabled="True" />
                        </StackPanel>
                        <StackPanel Orientation="Horizontal">
                            <ab2d:ZoomController Name="ZoomController1"  TargetZoomPanel="{Binding ElementName=ZoomPanel1}"/>
                            <TextBlock Name="testtb"/>
                        </StackPanel>
                    </StackPanel>
                </Grid>
            </GroupBox>
            <GroupBox Header="Selected Page" DataContext="{Binding Path=SelectedPage}" Width="auto" DockPanel.Dock="Left" Name="gbImage">
                <ab2d:ZoomPanel Name="ZoomPanel1"
                    IsMouseWheelZoomEnabled="True"
                    IsAnimated="True"  IsPanningAnimated="False" VerticalAlignment="Top">
                    <Image x:Name="myImage" Source="{Binding Path=Page}" VerticalAlignment="Top"
                           HorizontalAlignment="Center"
                           RenderOptions.BitmapScalingMode="HighQuality">
                        <Image.LayoutTransform>
                            <RotateTransform Angle="{Binding ElementName=RotationSlider, Path=Value}"></RotateTransform>
                        </Image.LayoutTransform>
                    </Image>
                </ab2d:ZoomPanel>
            </GroupBox>
            
        </DockPanel>
        
    </Grid>
</UserControl>

The issue I am having is with the GroupBox that has the ZoomPanel in it. As the code is above, when I open my application, the displayed image in the GroupBox has a lot of space between the top of the image and the GroupBox line. When I maximize the application the space goes away and the top of the image bumps up against the GroupBox line as desired. If I take the ZoomPanel out and leave the Image control and reopen the application, the top of the image bumps up against the GroupBox line when in a minimized and maximized mode. Any ideas what may be happening?

[abenedik]

I do not have the images that are binded to your source code, but anyway I think I understand your problem.

The white space above and below the images is created when the aspect ration of the image is not the same as the aspect ration of the ZoomPanel.
For example if you are showing 300 x 100 image in a 300 x 300 ZoomPanel, the image will be shown in the center and above and below the image there would be for 100pt empty space (in case the default (0,0,1,1) Viewbox is used).

Unfortunately it is not possible to somehow set that the content of the ZoomPanel would be Top aligned - it is always centered.

I also find this very usual - for example in the drawing applications the image is usually centered to the center of the application and put to the top just below the toolbox.