Made togglableflyout work

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

@@ -20,9 +20,8 @@
     d:DesignHeight="450"
     d:DesignWidth="800">
     <Grid 
-        x:Name="mainGrid"
-        PointerPressed="Image_MouseDown"
-        PointerReleased="Image_MouseUp">
+        x:Name="viewportGrid"
+        PointerPressed="Image_MouseDown">
         <Interaction.Behaviors>
             <!--TODO: Implement stylus support-->
             <!--<EventTriggerBehavior EventName="StylusButtonDown">

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

@@ -307,12 +307,15 @@ internal partial class Viewport : UserControl, INotifyPropertyChanged
         MainImage!.Loaded += OnImageLoaded;
         Loaded += OnLoad;
         Unloaded += OnUnload;
+
+        //TODO: It's weird that I had to do it this way, right click didn't raise Image_MouseUp otherwise.
+        this.AddHandler(PointerReleasedEvent, Image_MouseUp, RoutingStrategies.Tunnel);
         
         mouseUpdateController = new MouseUpdateController(this, Image_MouseMove);
     }
 
     public Image? MainImage => (Image?)((Grid?)((Border?)zoombox.AdditionalContent)?.Child)?.Children[1];
-    public Grid BackgroundGrid => mainGrid;
+    public Grid BackgroundGrid => viewportGrid;
 
     private void ForceRefreshFinalImage()
     {

src/PixiEditor.AvaloniaUI/Views/Overlays/TogglableFlyout.axaml

@@ -8,12 +8,12 @@
     <Border Background="Transparent">
         <StackPanel Orientation="Vertical">
             <Border HorizontalAlignment="Right" Background="#C8202020" CornerRadius="5" Padding="5" x:Name="btnBorder">
-                <ToggleButton Padding="0" Margin="0" ToolTip.Tip="{Binding ElementName=togglableFlyout, Path=ToolTip}"
+                <ToggleButton Padding="0" Margin="0" ToolTip.Tip="{Binding ElementName=togglableFlyout, Path=ToolTip.Tip}"
                               x:Name="toggleButton" BorderThickness="0" Width="24" Height="24" Background="Transparent">
                     <ToggleButton.Template>
-                        <ControlTemplate TargetType="{x:Type ToggleButton}">
+                        <!--<ControlTemplate TargetType="{x:Type ToggleButton}">
                             <Grid>
-                                <Image Focusable="False" Width="24" Cursor="Hand" x:Name="btnBg" 
+                                <Image Focusable="False" Width="24" Cursor="Hand" x:Name="btnBg"
                                        Source="{Binding ElementName=togglableFlyout, Path=IconPath}">
                                     <Image.RenderTransform>
                                         <RotateTransform Angle="0" CenterX="12" CenterY="12"/>
@@ -21,7 +21,7 @@
                                 </Image>
                                 <ContentPresenter/>
                             </Grid>
-                            <!--<ControlTemplate.Triggers>
+                            ~1~<ControlTemplate.Triggers>
                                 <Trigger Property="IsChecked" Value="True">
                                     <Trigger.EnterActions>
                                         <BeginStoryboard x:Name="Rotate90Animation">
@@ -44,8 +44,8 @@
                                         </BeginStoryboard>
                                     </Trigger.ExitActions>
                                 </Trigger>
-                            </ControlTemplate.Triggers>-->
-                        </ControlTemplate>
+                            </ControlTemplate.Triggers>@1@
+                        </ControlTemplate>-->
                     </ToggleButton.Template>
                 </ToggleButton>
             </Border>

src/PixiEditor.AvaloniaUI/Views/Overlays/TogglableFlyout.axaml.cs

@@ -9,8 +9,6 @@ public partial class TogglableFlyout : UserControl
     public static readonly StyledProperty<AvaloniaObject> ChildProperty =
         AvaloniaProperty.Register<TogglableFlyout, AvaloniaObject>(nameof(Child));
 
-    [Bindable(true)]
-    [Category("Content")]
     public AvaloniaObject Child
     {
         get { return GetValue(ChildProperty); }