Develop Reference

WPF Scrolling AutoSizing Panel

I have a WPF application in which the main window holds a DockPanel with two children. The top child is another DockPanel which holds the menu and is of a fixed size. The lower child is the main work area, which should fill the remaining space and be resizable along with the window. (Hence the DockPanel parent.) Draggable objects get placed in this work area and might appear anywhere inside it.
I'm trying to figure out how to make scroll bars appear if an object is dragged outside the visible area.
The approximate XAML structure currently goes
<Window>
<DockPanel>
<DockPanel with fixed-size content ... >
<ScrollViewer HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto">
<Grid ClipToBounds="True" VerticalAlignment="Stretch"
HorizontalAlignment="Stretch"/>
</ScrollViewer>
</DockPanel>
</Window>
So far I've tried a Grid and a Canvas. Both have built-in scroll bars, but they won't appear unless dimensions are specified--but if I apply dimensions, then the panel won't automatically resize to fill the work area.
Then I tried surrounding the panel with a ScrollViewer. The unconstrained panel now successfully auto-resizes to fill the space, but the ScrollViewer has the same problem as the panel--it will only display scroll bars if it's constrained to hard dimensions.
I'm thinking that this would work if I could dynamically constrain the ScrollViewer. So far, I haven't found any reliable way to dynamically apply size values to the ScrollViewer.
Is there a way to create a Binding between the ScrollViewer dimensions and the ActualHeight and ActualWidth of the Grid? Or, is there a way I can define the ActualHeight/ActualWidth of the grid as a DynamicResource that can be applied to the ScrollViewer? Or is there some other panel or method or resource that can be used so that all three criteria (panel fills available space, panel auto-resizes with window, anything dragged outside visible area triggers scroll bars) are met?
Thanks in advance for any help.

The problem was that I did not have a DockPanel.Dock setting on the bottom child of the containing DockPanel. Relying on the DockPanel's LastChildFill wasn't enough to do the job. Once I set DockPanel.Dock = Bottom on the bottom child, the scroll bars started working.

Avalonia UI Pop-Up Overlay

My question is pretty straight forward:
How do I achieve an Overlay Pop-Up effect using avalonia?
What I mean by this is I want to darken the whole Panel that contains my UI elements a little bit (tried the opacity attribute, but it didn't look good and the OpacityMask only seems to support "Transparent" as a color, but I want semi-transparency or even blur if that's possible). Then I want to display a little popup box. If this were CSS I'd be able to do a position: absolute;, however I couldn't figure out how to do this using avalonia.
To visualize what I mean here are some screenshots of a Windows Forms Application where I was able to achieve the desired effect:
My UI without overlay effect:
My UI with overlay effect:
As you can see the whole UI has been darkened a bit while the background is still visible (when using the avalonia Opacity property the effect is not the same and quite inconsistent, as the more panels are on top of each other on a given position the less the background seems to be affected by the Opacity and it just doesn't look good. I can add screenshots of how bad it would look later if you want.)
To sum it up:
1. How do I slightly and consistently darken (or even blur?) a panel with all of its contents, so that stacked panels with the same background color don't become visible, just because the transparency is acting weird?
2. What is the avalonia equivalent to the CSS position: absolute; so I can put my Pop-Up in the middle of the screen and on top of everything else?

You can use the same technique as in WPF:
<Window>
<Grid>
<DockPanel x:Name="YourMainContentGoesHere"/>
<Border IsVisible="{Binding IsPopupVisible}" Background="#40000000">
<YourPopupControlHere Width="200" Height="200"/>
</Border>
</Grid>
</Window>
Unconfigured Grid will display elements on top of each other, semi-transparent Border's background will darken the rest of the content.

Popup dimensions on screen

I thought I understood the WPF content scaling system but ran into an issue that's mysterious to me. I have a very simple popup that is supposed to be used as a loupe that opens on top of an image when the user clicks the image. The XAML is this:
<Popup Name="LoupePopup" AllowsTransparency="True" IsOpen="False" StaysOpen="True">
<Border BorderThickness="2" BorderBrush="Azure" />
</Popup>
In code behind, I then tie the popup's placement to an image that is already showing when the popup is opened. I set the loupe size to half the size of the image with this code:
LoupePopup.PlacementTarget = FullImg;
LoupePopup.Placement = PlacementMode.Relative;
LoupePopup.Width = FullImg.ActualWidth / 2;
LoupePopup.Height = FullImg.ActualHeight / 2;
Further code then moves the loupe along with MouseMove, but that does not really relate to the issue here: I'd expect the loupe to be exactly half the width/height of the image, but it is not - it is quite a bit larger (by about 18%). I verified the actual image size and the actual size of the window on which it is displayed, as well as the mouse coordinates. Those dimensions/point coordinates all made perfect sense, but why would the popup not use the same width/height scaling as the other elements here?
For clarification: The image covers 80% or so of the screen, so this is not just an issue of a few pixels. The window is a child window created in code, and the popup is defined in the XAML of the main window, but both windows are set to full screen size.
Appreciate your thoughts!

Maybe it is so because border thickness is not taking into account when calculating LoupePopup size
or default margin and padding of popup or image

I'm not sure, but I think you should have a look at the Stretch property of the image. If you have a width and a height defined on the image the ActualWidth/-Height are influenced by the Stretch property. Setting it to Fill makes the ActualWidth/-Height equal to the defined Width and Height.

After trying more options I had to realize that the child-versus main window aspect caused the issue. The image was showing in a child window; the popup was defined in the main window. After moving the popup XAML to the child window, the popup dimensions were correct.
Not sure I understand why (both windows have the full screen dimensions and should use the same scaling, but at least this solves my issue. Thanks for trying to help!

Pinch to zoom and pan to move

I have figured out, that I can use ScrollViewer in iOS and in Android I can use this ScaleImageView from XamarinAndroidToolkit.
But what can I use for UWP?

You should be able to use ScrollViewer for this purpose as well. You will however need to enable zooming and both scroll bars for the control. Vertical scroll bar should be set to Auto by default, but horizontal is by default disabled. The same goes for the zoom mode.
If you want to hide the scroll bars, you can do so after explicitly enabling the scrolling.
<ScrollViewer ZoomMode="Enabled"
HorizontalScrollMode="Auto"
VerticalScrollMode="Auto"
VerticalScrollBarVisibility="Hidden"
HorizontalScrollBarVisibility="Hidden"
>
...
</ScrollViewer>

How to stop ScrollViewer from scrolling down

I need to make the ScrollViewer to only scroll down.
I have created a scrollviewer in Xaml and have populated it with a stackpanel full of rectangles in code. I then start the user at the bottom and want them to use a "walking" motion with their fingers (like a bass player) to scroll to the top but do not want them to be able to scroll back to the bottom.
My Xaml looks like this:
<ScrollViewer Height="730" HorizontalAlignment="Left" Margin="6,6,0,0" Name="scrollViewer1" VerticalAlignment="Bottom" Width="462">
<StackPanel Name="TrackStackPanel">
</StackPanel>
</ScrollViewer>
But since it is filled in code, need to accomplish as much as I can in code.

I would try disabling vertical scrolling via VerticalScrollBarVisibility="disabled" - handle the gestures, then scroll accordingly by setting [ScrollToVerticalOffset].
If this does not work, try placing a layer (a Grid for example) above your ScrollViewer, so that it will receive all the gestures, then do as above, scroll via ScrollToVerticalOffset.