I have the following layout in C# where WindowsFormHost host a OpenGL window. I would like to add a transparent canvas over it where I could draw 2D stuff. However this code doesn't work. Please help.
mc:Ignorable="d">
<Grid>
<DockPanel>
<WindowsFormsHost Grid.Column="0" x:Name="ScannerViewPanel"/>
<Canvas Background="Transparent"/>
Edit: after I add the canvas, the OpenGL content is not shown, but only the opaque canvas. I tried to make the canvas transparent, to set Opacity to 0, it's still Opaque.
From MSDN:
In a WPF user interface, you can change the z-order of elements to
control overlapping behavior. A hosted Windows Forms control is drawn
in a separate HWND, so it is always drawn on top of WPF elements.
You can't do that.
You most likely have an "Airspace" problem. This is exacerbated by the fact that you're using OpenGL - an API that has no solution to this problem. If you were using DirectX, you could do this.
Related
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.
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.
I've been working on an application in Visual Studio and I've stumbled on a problem for an annotation feature I wish to implement. Basically, I would like to be able to use my mouse to draw on the screen. I checked some other questions here initially and thought to make a transparent window to draw on, but making the window fully transparent caused my mouse clicks to trigger other windows, which won't work.
I then tried to set an extremely low opacity for the window with a white background, which caused the screen to be slightly shaded, which was fine. However, doing this for the whole window caused the line I drew to also have an extremely low opacity and thus remain basically invisible.
Is there a way to solve this problem using the transparent window, or will I have to do something like take a screenshot and make a window-sized picture for the user to draw on? This seems less elegant of a solution and for other features in my application, I would like to avoid this if possible, but if that appears to be the only way, some help in the implementation would be really appreciated.
Thank you!
Kevin
Don't set the Window's Opacity but instead use a Background with low opacity, e.g. #01FFFFFF:
<Window ... Background="#01FFFFFF">
...
</Window>
Alternatively you could explicitly create a SolidColorBrush as Background and set its Opacity to a small value:
<Window ...>
<Window.Background>
<SolidColorBrush Color="White" Opacity="0.01"/>
</Window.Background>
...
</Window>
I am developing Windows store apps. In one of the apps, instead of having image controls, I would like to have container controls that display single animated images from within (Similar to the News Bento app welcome screen on Windows 8). The closest I have come to that is AnimatingContainer control from WinRT XAML toolkit, but it doesn't seem to work with images (At least in my case). Any help on how to use this control to animate an image or any other solution will be grateful. Below is my XAML code. If I uncomment the text block and comment the image, the text block is displayed animated. But the reverse isn't true.
<Controls1:AnimatingContainer HorizontalAlignment="Left" Height="311" Margin="163,23,0,0" RadiusX="25"
RadiusY="10"
Duration="0:0:10"
VerticalAlignment="Top" Width="461">
<!--<TextBlock Text="Sume Rossini" FontSize="66"/>-->
<Image Source="Assets/Davy_Jones.jpg" Width="300" Height="500"/>
</Controls1:AnimatingContainer>
There likely isn't any. You would need to write one yourself to fit your specific requirements. Use Blend to create the animation. Ask more specific questions and you may get help implementing it.
I'm working on a Microsoft Surface and attaching a round image object to a ScatterViewItem. I'm having an issue hiding the background of the square ScatterViewItem. If I go in and set the background to transparent, it's not transparent, it's more like gray translucent. So what I end up with is a round image in the middle sitting on a square with gray translucent edges. How do I hide this? I'm doing this programmatically through C#.
What you're seeing isn't really the svi background, but the shadow that is part of the default template. If you want to get rid of the shadow, you need to redefine the control template.
So like this:
<s:ScatterView>
<s:ScatterViewItem Background="Transparent">
<s:ScatterViewItem.Template>
<ControlTemplate>
<TextBlock>Hello World</TextBlock>
</ControlTemplate>
</s:ScatterViewItem.Template>
</s:ScatterViewItem>
</s:ScatterView>
Be aware that if you replace it like that, you lose all the other little visual flare like the 'pick up' effect and the shimmer. If you want to keep those, just use blend to edit a copy of the existing template and remove the shadow.