Develop Reference

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.

Is it possible to rotate a picture box without C# code on the Form Designer or change shape of picture box border?

I am very new to C# and WinForms. I am trying to create a segmented display where certain segments turn on and off (Using Microsoft Visual Studio 2015).
Right now I am placing picture boxes with segments I cropped and removed the background on in GIMP and it works fine so long as the segments are far enough away from each other, or are perfectly square.
When they overlap, with setting the picture box background transparent, the picture box is transparent straight through another picture box and just shows the background of the form window where the rectangular picture box is covering.
I tried two different things:
Changing default rectangular shape of picture box to any shape I can draw; not really sure how to do it and i don't think it is possible
Adding a bunch of picture boxes with a dark black picture and then rotating them and moving them to the correct position and turning them on when the particular segment comes on to cover up the problem. However, I don't think I can, or know how to just rotate an entire picture box when I am placing it? I have seen some code online on rotating picture boxes in C# but I am not sure how to implement it. I feel like with anything else there has to be a rotate option I am just missing.
Attached is a picture of the problem, notice how I sent the segment (line) to the back and the SMS quote image to the front. The dotted lines are the picture boxes:

You can use a WPF project to accomplish what you want. It is much more flexible than WinForms. Plus it supports true transparency. It does have a bit of a learning curve, but if you're just starting out, I think you would be better served to start with WPF.
You can rotate an Image (PictureBox) in WPF as follows:
<Window x:Class="WpfApplication.Window1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Window1" Height="467" Width="616">
<Grid>
<Image Source="C:\MyFolder\MyImage.gif">
<Image.LayoutTransform>
<RotateTransform Angle="45" />
</Image.LayoutTransform>
</Image>
</Grid>
</Window>

The winforms designer does not have features for real UX design. It's mainly targeted for designing simple UI for data oriented application. You will not find any advanced features. You can resize the controls, align them, moving between containers.
There are advanced ways, how to change the shape of controls. But it is not available in winforms designer.
The transparency in winforms is fake. Actualy the transparency means "I'll show the background color of my parent". If you want "true transparency" you must draw the other controls as the background image of target control.

Translucent windows form

The look I'm going for is like
where the sidebar is semi-transparent and the background can be seen through. However TransparencyKey only takes into account the pixels at the top, if there is another panel on top that means that together they do not fit the transparency key then it will be opaque.
I have the TransparencyKey set to Fuchsia and the grapefruit sidebar is on top and is changed to sidebar.BackColor = Color.FromArgb(128,255,255,255); on load.
As you see the TransparencyKey only works on the top.
I have also tried setting the transparency on the form with undesired results.
How would I go about making the sidebar translucent?
Solution v

You just can't do that in winforms. Period. It's an antiquated technology that doesn't support "real" transparency. Whenever you see the word "transparent", it really means your control will inherit the back color of its parent. It does not mean you can see things that are behind it.
You may be able to do it with WPF, though I'm not entirely sure.

As noted by #JeremyThompson WPF is absolutely fine at doing this.
Inside the window include WindowStyle="None" AllowsTransparency="True" Background="Transparent" and then use panels/canvases as normal.

WPF C#: Setting background color of a WPF app not setting fully

I made a WPF app (WindowStyle="None" hence no default windows buttons like exit, maximize, minimize)
It doesn't set the color (in my case, it's black) to the entire frame:
As you can see, there is a bit of white gap. (It's not a margin, I tested for this).
<Window x:Class="FancyGUI.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
WindowStyle="None"
Title="MainWindow" Height="250" Width="340"
Background="Black">
</Window>

You need ResizeMode="NoResize" in your window, otherwise there's a title bar shown (empty in your case), even if you set WindowStyle="None".
With WindowStyle="None" only:
(notice the blue "gap" as you call it on top... that's your white gap, just that my theme is blue)
With ResizeMode="NoResize":
(no gap, but can't resize the window now)
Or if you still want it to be resized (have the resize grip on it), but not show that title bar, set AllowsTransparency="True" and ResizeMode="CanResizeWithGrip":
(notice the grip for resizing on bottom right)
Note that having AllowsTransparency=true may have side effects. If any of those side effects is a problem to you, you can implement the resizing yourself by creating your own (black in your case) border and send the drag/resize messages. Expand on whether you need this or not and I'll show you how.

I'm noticing that the typical chrome is removed around the window.
I recreated the window with the code you provided and I see this:
Is there a resource file being referenced that may be affecting the window?
Also, you have Live Visual Tree running. Try clicking the middle button and then try clicking on the white bar. If you can select it, you should see it selected in the VS Live Visual Tree window.
Edit...
After seeing Jcl's post about the ResizeMode="NoResize" I gave it a try.
Sure enough, that's the secret.
Thanks Jcl!

Fading in and out a path in silverlight?

I have a path defined as such:
<Viewbox Visibility="Collapsed" x:Name="Tick" Grid.Column="1" Grid.Row="1">
<Canvas MaxWidth="100" MaxHeight="100" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Width="100" Height="100" Canvas.Left="0" Canvas.Top="0">
<Path ...Fill="#FF00B800" x:Name="MyPath" (path dimensions, lines, etc) .../>
</Canvas>
</Viewbox>
Now what I'd like to do is manipulate fill such that it will cause the path to have a fade in/fade out effect. Basically make fills alpha component either move towards opaque or transparent based on whether or not the viewbox the path is inside is Visible. So when visible the path fades in, when collapsed the path fades out.

The effect you are trying achieve is a classy one but there is a serious problem with your current plan. When the Visibility of a higher-level element, Viewbox in this case, is set to Visibility.Collapsed, the element and all sub-elements are immediately no longer visisble. It is at this point that you want the fade-out of the Path to begin.
So the Path is already not visible and starting an animation to gradually reduce its opacity will no do any good because it is already gone. In other words, by the time the visibility is set to Visiblity.Collapsed, it is too late to do anything useful with things inside the element because the user won't see them. If you could, you would want to see into the future and know that you are going to change the visibility and start an animation so that it finishes before you "close the curtain" on the element.
The same problem doesn't apply to when we make the element visible because everything is perfect: we become visible and start the fade-in animation. But since half of the effect is not going to work, we still have a big problem.
The solution to this problem is move up a level and see what we're trying to do. In the XAML we only have passive elements, Viewbox, Canvas, and Path. But maybe these are acting more like controls or assisting controls, for example being the check for a CheckBox or a checkbox-like control.
A control can have states:
Normal, MouseOver
Pressed, Disabled
Unfocused, Focused
and those states can have transition effects, thanks to the VisualStateManager.
So if the fade-in and fade-out effects are part of control behavior, then we have a whole sophisticated powerful toolset available to solve our problem. I don't know if this is the case in your situation.
Even if it is not the case, a very workable approach to transition effects on Silverlight is to transform your elements into a lookless control, solely for the purpose of utilizing the VisualStateManager, because it makes things so easy. Perhaps this alternative can work in your situation.