Develop Reference

How can I set multiple backgrounds for a grid in WPF?

I have a grid, which has 2 rows and 3 columns.
I need 2 background images for my grid - one will be on the top of the other. (ZIndex of one background should be bigger than other background has). How can I achieve this?
I will need to swap these 2 backgrounds frequently, which means the top background will become lower background and lower background will become top background. Apart from that, images of these two backgrounds are gonna change a lot too.
This example has grid, which contains text switcher at the bottom. As a background, it has a picture of room. When I click 'next' button in the text switcher, I want the top background picture to gradually disappear (doubleAnimation updates opacity) and show lower background under it. Maybe I can achieve gradual switching of backgrounds in a better way, but I honestly dont know how to do it.

You can draw them as two images on a Canvas inside a VisualBrush and use that as your background:
<Grid>
<Grid.Background>
<VisualBrush>
<VisualBrush.Visual>
<Canvas Width="256" Height="256">
<Image Source="image1.png" Panel.ZIndex="1" /> <!-- This will appear over top of the other one -->
<Image Source="image2.png" Panel.ZIndex="0" />
</Canvas>
</VisualBrush.Visual>
</VisualBrush>
</Grid.Background>
</Grid>
Source and Panel.ZIndex can then be set either directly in code-behind or via data binding.
This is a bit of an unsual way of going about this though, there's almost certainly a better way of doing whatever it is you're actually trying to do.

In this case I would use databinding to bind to a property in the view model that stores the background image. When the condition changes and the view model property is changed the UI will reflect those changes.

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.

WPF Custom Transparent Button

I would like create a button with text and image inside in, but this button should be transparent without loose behavior as cursors hand on mouse over and so on..
Also, it doesn't change its background color on mouse over. It's Always should appear transparent showing only my text and my image.
Is it possibile?

I think a very simple ControlTemplate will produce the desired output :
<ControlTemplate x:Key="TransparentButton" TargetType="Button">
<ContentPresenter Cursor={TemplateBinding Cursor}/>
</ControlTemplate>
Then simply apply if to the Templateproperty of your button.
Just add a {TemplateBinding Property} for the any properties you want to inherit. You should have a look at the default ControlTemplates on MSDN for your specific target (it may vary if targeting WP8, Silverlight or desktop)

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.