Reference layer above and below support

src/PixiEditor.AvaloniaUI/Views/Main/ViewportControls/Viewport.axaml

@@ -200,28 +200,69 @@
                         </ImageBrush>
                     </Border.Background>
                     <Grid>
-                        <Canvas
-                            ZIndex="{Binding Document.ReferenceLayerViewModel.ShowHighest, Converter={converters:BoolToIntConverter}}"
-                            IsHitTestVisible="{Binding Document.ReferenceLayerViewModel.IsTransforming}"
-                            ui1:RenderOptionsBindable.BitmapInterpolationMode="{Binding ReferenceLayerScale, Converter={converters:ScaleToBitmapScalingModeConverter}}">
-                            <visuals:SurfaceControl
-                                Focusable="False"
-                                Width="{Binding Document.ReferenceLayerViewModel.ReferenceBitmap.Size.X}"
-                                Height="{Binding Document.ReferenceLayerViewModel.ReferenceBitmap.Size.Y}"
-                                Surface="{Binding Document.ReferenceLayerViewModel.ReferenceBitmap, Mode=OneWay}"
-                                IsVisible="{Binding Document.ReferenceLayerViewModel.IsVisibleBindable}"
-                                RenderTransformOrigin="0, 0"
-                                SizeChanged="OnReferenceImageSizeChanged"
-                                FlowDirection="LeftToRight">
-                                <visuals:SurfaceControl.RenderTransform>
-                                    <TransformGroup>
-                                        <MatrixTransform
-                                            Matrix="{Binding Document.ReferenceLayerViewModel.ReferenceTransformMatrix}" />
-                                    </TransformGroup>
-                                </visuals:SurfaceControl.RenderTransform>
-                                <visuals:SurfaceControl.Styles>
-                                    <!--TODO: Implement this-->
-                                    <!--<Style>
+                        <Panel Width="{Binding Document.Width}" Height="{Binding Document.Height}" />
+                        <Grid IsHitTestVisible="False"
+                              ShowGridLines="True" Width="{Binding Document.Width}" Height="{Binding Document.Height}"
+                              Panel.ZIndex="10"
+                              IsVisible="{Binding GridLinesVisible, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=viewportControls:Viewport}}">
+                            <Grid.Resources>
+                                <converters:ThresholdVisibilityConverter Threshold="10"
+                                                                         x:Key="ThresholdVisibilityConverter" />
+                            </Grid.Resources>
+                            <visuals:GridLines Scale="{Binding Zoombox.Scale}"
+                                               IsVisible="{Binding Zoombox.Scale, Converter={StaticResource ThresholdVisibilityConverter}}"
+                                               Rows="{Binding Document.Width}" Columns="{Binding Document.Height}" />
+                        </Grid>
+                        <Rectangle Stroke="{DynamicResource ThemeBackgroundBrush1}" Opacity=".8" ZIndex="2"
+                                   IsVisible="{Binding Document.ReferenceLayerViewModel.IsVisibleBindable}">
+                            <Rectangle.StrokeThickness>
+                                <Binding Converter="{converters:ReciprocalConverter}">
+                                    <Binding.Path>Zoombox.Scale</Binding.Path>
+                                    <Binding.ConverterParameter>
+                                        <sys:Double>
+                                            3
+                                        </sys:Double>
+                                    </Binding.ConverterParameter>
+                                </Binding>
+                            </Rectangle.StrokeThickness>
+                            <Rectangle.Margin>
+                                <Binding Converter="{converters:ReciprocalConverter}">
+                                    <Binding.Path>Zoombox.Scale</Binding.Path>
+                                    <Binding.ConverterParameter>
+                                        <sys:Double>
+                                            -3
+                                        </sys:Double>
+                                    </Binding.ConverterParameter>
+                                </Binding>
+                            </Rectangle.Margin>
+                        </Rectangle>
+                    </Grid>
+                </Border>
+            </zoombox:Zoombox.AdditionalContent>
+        </zoombox:Zoombox>
+        <Canvas RenderTransformOrigin="0, 0" RenderTransform="{Binding #zoombox.CanvasTransform}"
+                DataContext="{Binding ElementName=vpUc}"
+                ZIndex="{Binding Document.ReferenceLayerViewModel.ShowHighest, Converter={converters:BoolToIntConverter}}"
+                IsHitTestVisible="{Binding Document.ReferenceLayerViewModel.IsTransforming}"
+                ui1:RenderOptionsBindable.BitmapInterpolationMode="{Binding ReferenceLayerScale, Converter={converters:ScaleToBitmapScalingModeConverter}}">
+                <visuals:SurfaceControl
+                    Focusable="False"
+                    Width="{Binding Document.ReferenceLayerViewModel.ReferenceBitmap.Size.X}"
+                    Height="{Binding Document.ReferenceLayerViewModel.ReferenceBitmap.Size.Y}"
+                    Surface="{Binding Document.ReferenceLayerViewModel.ReferenceBitmap, Mode=OneWay}"
+                    IsVisible="{Binding Document.ReferenceLayerViewModel.IsVisibleBindable}"
+                    RenderTransformOrigin="0, 0"
+                    SizeChanged="OnReferenceImageSizeChanged"
+                    FlowDirection="LeftToRight">
+                    <visuals:SurfaceControl.RenderTransform>
+                        <TransformGroup>
+                            <MatrixTransform
+                                Matrix="{Binding Document.ReferenceLayerViewModel.ReferenceTransformMatrix}" />
+                        </TransformGroup>
+                    </visuals:SurfaceControl.RenderTransform>
+                    <visuals:SurfaceControl.Styles>
+                        <!--TODO: Implement this-->
+                        <!--<Style>
                                     <Style.Triggers>
                                         <DataTrigger Binding="{Binding Document.ReferenceLayerViewModel.ShowHighest, Mode=OneWay}" Value="True">
                                             <DataTrigger.EnterActions>
@@ -245,11 +286,11 @@
                                         </DataTrigger>
                                     </Style.Triggers>
                                 </Style>-->
-                                </visuals:SurfaceControl.Styles>
-                            </visuals:SurfaceControl>
-                            <Canvas.Styles>
-                                <!--TODO: Implement this-->
-                                <!--<Style>
+                    </visuals:SurfaceControl.Styles>
+                </visuals:SurfaceControl>
+                <Canvas.Styles>
+                    <!--TODO: Implement this-->
+                    <!--<Style>
                                 <Style.Triggers>
                                     <DataTrigger Binding="{Binding Source={vm:ToolVM ColorPickerToolViewModel}, Path=PickFromReferenceLayer, Mode=OneWay}" Value="False">
                                         <DataTrigger.EnterActions>
@@ -273,48 +314,8 @@
                                     </DataTrigger>
                                 </Style.Triggers>
                             </Style>-->
-                            </Canvas.Styles>
-                        </Canvas>
-                        <Panel Width="{Binding Document.Width}" Height="{Binding Document.Height}" />
-                        <Grid IsHitTestVisible="False"
-                              ShowGridLines="True" Width="{Binding Document.Width}" Height="{Binding Document.Height}"
-                              Panel.ZIndex="10"
-                              IsVisible="{Binding GridLinesVisible, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=viewportControls:Viewport}}">
-                            <Grid.Resources>
-                                <converters:ThresholdVisibilityConverter Threshold="10"
-                                                                         x:Key="ThresholdVisibilityConverter" />
-                            </Grid.Resources>
-                            <visuals:GridLines Scale="{Binding Zoombox.Scale}"
-                                               IsVisible="{Binding Zoombox.Scale, Converter={StaticResource ThresholdVisibilityConverter}}"
-                                               Rows="{Binding Document.Width}" Columns="{Binding Document.Height}" />
-                        </Grid>
-                        <Rectangle Stroke="{DynamicResource ThemeBackgroundBrush1}" Opacity=".8" ZIndex="2"
-                                   IsVisible="{Binding Document.ReferenceLayerViewModel.IsVisibleBindable}">
-                            <Rectangle.StrokeThickness>
-                                <Binding Converter="{converters:ReciprocalConverter}">
-                                    <Binding.Path>Zoombox.Scale</Binding.Path>
-                                    <Binding.ConverterParameter>
-                                        <sys:Double>
-                                            3
-                                        </sys:Double>
-                                    </Binding.ConverterParameter>
-                                </Binding>
-                            </Rectangle.StrokeThickness>
-                            <Rectangle.Margin>
-                                <Binding Converter="{converters:ReciprocalConverter}">
-                                    <Binding.Path>Zoombox.Scale</Binding.Path>
-                                    <Binding.ConverterParameter>
-                                        <sys:Double>
-                                            -3
-                                        </sys:Double>
-                                    </Binding.ConverterParameter>
-                                </Binding>
-                            </Rectangle.Margin>
-                        </Rectangle>
-                    </Grid>
-                </Border>
-            </zoombox:Zoombox.AdditionalContent>
-        </zoombox:Zoombox>
+                </Canvas.Styles>
+            </Canvas>
         <Grid ZIndex="5" DataContext="{Binding ElementName=vpUc}"
               RenderTransformOrigin="0, 0" RenderTransform="{Binding #zoombox.CanvasTransform}">
             <symmetryOverlay:SymmetryOverlay

src/PixiEditor.AvaloniaUI/Views/Main/ViewportControls/Viewport.axaml.cs

@@ -182,7 +182,7 @@ internal partial class Viewport : UserControl, INotifyPropertyChanged
 
     public double ZoomboxScale
     {
-        get => zoombox.Scale;
+        get => zoombox?.Scale ?? 1;
         // ReSharper disable once ValueParameterNotUsed
         set
         {