I have a WPF control that I would like to overlay onto a WinForms application. So I have dutifully created a Element Host that can show the following WPF object:
<UserControl x:Class="LightBoxTest.LightBox"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Height="300" Width="300" Background="Transparent">
<Grid Name="dialogHolder" Background="Transparent" Opacity="1">
<Rectangle Name="rectangle1" Stroke="White" Fill="Black" RadiusX="10" RadiusY="10" Opacity="0.5" />
<StackPanel Name="stackPanel1" Background="Transparent" Height="300" VerticalAlignment="Top">
<Rectangle Name="spacer" Opacity="0" Stroke="Gray" Fill="White" RadiusX="10" RadiusY="10" Height="100" Width="300" />
<Grid Height="100" Name="contentHolder" Width="250">
<Rectangle Name="dialog" Stroke="Gray" Fill="White" RadiusX="10" RadiusY="10" Height="100" Width="250" />
</Grid>
</StackPanel>
</Grid>
</UserControl>
The trouble is that the Controls on the WinForm Form do not render and the WPF just obliterates them on the screen.
The element host is created like:
dialogHost = new ElementHost();
dialogHost.Child = dialog;
dialogHost.BackColorTransparent = true;
dialogHost.BringToFront();
dialogHost.Show();
Is there something I should be doing and Im not?
Are there known issues about showing transparent WPF controls over Winforms?
Any articals that may help?
Note: This question is related to this question
I think you're running into an airspace issue. AFAIK, you can't mix WPF transparency and ElementHost transparency since the ElementHost owns the airspace.
There's a short blurb in the link about creating non-rectangular hwnds to host WPF content, and that may get you farther.
Perhaps you can consider migrating more of the WinForms app to WPF?
You should read this :Black background before loading a wpf controll when using ElementHost
Just hide & show it (not cool but works)
That seems like the interop airspace problem.
You probably already tried this, but how about setting the Opacity on the User Control?
Related
I am trying to make a smooth transition from a closed panel to an open panel and vice versa.
But I don't know how to do it ((
I have an element
<SplitView Style="{StaticResource SplitViewEditMusicTraskStyle}"
CompactPaneLength="0"
PaneBackground="Transparent"
DisplayMode="CompactInline"
IsPaneOpen="{Binding EditPanelIsOpen, Mode=TwoWay}"
OpenPaneLength="308"
Background="Transparent"
PanePlacement="Right">
I could not attach the standard element template because stackoverflov has a limit on the number of characters per stack
How to make a smooth transition from one state to another SplitView UWP
During the testing, if set PanePlacement right, for making SplitView panel open smoothly, please set DisplyMode as Overlay or CompactOverlay.
<SplitView x:Name="splitView" PaneBackground="{ThemeResource SystemControlBackgroundChromeMediumLowBrush}"
IsPaneOpen="False" OpenPaneLength="328" CompactPaneLength="56" DisplayMode="CompactOverlay">
For your requirement, you could also make pop control and set ChildTransitions as PaneThemeTransition to archive smooth transition from a closed panel to an open panel. For more please refer following code.
Xaml code
<Popup
x:Name="RightMeun"
Width="200"
Height="{Binding ElementName=RootGrid, Path=ActualHeight}"
HorizontalAlignment="Right"
IsOpen="False">
<Popup.ChildTransitions>
<TransitionCollection>
<PaneThemeTransition Edge="Right" />
</TransitionCollection>
</Popup.ChildTransitions>
<Grid
Width="200"
Height="{Binding ElementName=RightMeun, Path=Height}"
Background="LightBlue">
<TextBlock
HorizontalAlignment="Center"
VerticalAlignment="Center"
Text="Hello" />
</Grid>
</Popup>
I'm building an app in Universal Windows Platform and I have put a TextBox at the bottom of screen but I don't want it to shift the whole UI upwards, and I don't want to reorder everything to be fit above the keyboard.
I just wanna do something like Cortana that the keyboard can be above all layers.
What the app looks like itself:
What the app looks like after opening keyboard:
What Cortana looks like (which I want my app to be like this):
<Page
x:Class="Pi.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:Pi"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d" Loaded="Page_Loaded">
<Page.Resources>
<FontFamily x:Key="Dekar">/Assets/Fonts/Dekar.otf#Dekar</FontFamily>
<FontFamily x:Key="Consolas">/Assets/Fonts/SFThin.otf#SF UI Display</FontFamily>
</Page.Resources>
<Grid Background="Black">
<Rectangle Margin="0">
<Rectangle.Fill>
<ImageBrush ImageSource="Assets/MainBG2.jpg" Stretch="UniformToFill" Opacity="0.35"/>
</Rectangle.Fill>
</Rectangle>
<TextBlock x:Name="TitleText" Height="21" Margin="10,18,10,0" TextWrapping="Wrap" Text="ADMIN ACCESS" VerticalAlignment="Top" Foreground="#FF00AEFF" FontSize="20" FontFamily="{StaticResource Dekar}" TextAlignment="Center" DoubleTapped="TitleText_DoubleTapped"/>
<TextBox x:Name="CommandBox" Margin="0,0,0,0" TextWrapping="Wrap" Text="" VerticalAlignment="Bottom" FontFamily="{StaticResource Consolas}" Foreground="#FF8D8D8D" Background="#BF111E23" BorderThickness="0,1,0,0" FontSize="17" Height="50" PlaceholderText="Type here..." Padding="10,12,0,0" RequestedTheme="Dark" BorderBrush="#FF00AEFF" KeyUp="KeyPressed"/>
<ScrollViewer Margin="10,65,10,60" VerticalScrollBarVisibility="Auto" HorizontalScrollBarVisibility="Disabled">
<TextBlock x:Name="ResultText" TextWrapping="Wrap" Text="What are your commands?" VerticalAlignment="Top" Foreground="#FFDEDEDE" FontSize="19" FontFamily="{StaticResource Consolas}" TextAlignment="Left"/>
</Grid>
By default the InputPane slides the page so that the focused element isn't covered by the keyboard. Your page has the focused TextBox at the bottom, so that has to slide up so the user can see what she types.
You can override this behavior by handling the InputPane.Showing event and setting the EnsuredFocusedElementInView property to let the InputPane know that you handled this and it doesn't need to slide.
You can move the TextBox to just above the InputPane's OccludedRect but leave the rest of the Page alone, then move the TextBox back in InoutPane.Hiding.
See
https://learn.microsoft.com/en-us/uwp/api/Windows.UI.ViewManagement.InputPane#events_
https://learn.microsoft.com/en-us/windows/uwp/input-and-devices/respond-to-the-presence-of-the-touch-keyboard#handling-the-showing-and-hiding-events
https://code.msdn.microsoft.com/windowsapps/keyboard-events-sample-866ba41c
I am making a windows phone 8.1 application using C# and XAML and I want to implement an Image map.
I know how to do it in HTML using img tag's usemap attribute, but how using C# and XAML?
You want to do something like this:
<Canvas xmlns="http://schemas.microsoft.com/client/2007"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Width="500" Height="500">
<Canvas.Background>
<ImageBrush ImageSource="yourBackgroundImage.jpg" Stretch="Fill"/>
</Canvas.Background>
<Rectangle Width="50" Height="25" Canvas.Top="100" Canvas.Left="100" />
<Rectangle Width="100" Height="20" Canvas.Top="200" Canvas.Left="300" />
<!-- etc -->
</Canvas>
The Canvas with a background image is analogous to your <img> and the set of Rectangle elements are similar to your <area> tags inside your <map>. You can add events to the Rectangle for things like Tap, you could give them a Fill property to make them a given color, etc.
I'm struggling to get something similiar to what I painted in Photoshop (took over 9000 hours).
Basically our Windows app for tablets needs a control that shows an onscreen grid when clicked. The data genesis and grid preparation occurs in codebehind of the control and I don't know how to draw the grid outside of my control. Even simple popup control would be fine if I could get it outside the parent boundaries.
You could use a flyout:
<Button Width="100" Height="100" Background="Black">
<Button.Flyout>
<Flyout Placement="Bottom">
<Grid Width="200" Height="200">
<StackPanel>
<Rectangle Fill="Red" Width="100" Height="100" />
<Rectangle Fill="Green" Width="100" Height="100" />
</StackPanel>
</Grid>
</Flyout>
</Button.Flyout>
</Button>
also you can prepare your own popup:
How to center a popup in window (Windows store apps)
I have the following user control
<UserControl x:Class="Kimect.Controls.ElementControl"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:local="clr-namespace:Kimect"
mc:Ignorable="d" Width="50" Height="50" SizeChanged="UserControl_SizeChanged">
<Grid Name="mainGrid" MouseLeftButtonUp="element_MouseLeftButtonUp" Style="{StaticResource elementGrid}" >
<TextBlock Name="Number" Text="1" FontSize="15" Margin="0 0 2 0"
HorizontalAlignment="Right" VerticalAlignment="Top" />
<TextBlock Name="symbol" Text="H" FontSize="20"
HorizontalAlignment="Center" VerticalAlignment="Center" />
</Grid>
</UserControl>
Now I want to click on it with Kinect. I've researched and found KinectHoverButton.cs, but I have no clue how to associate the user control to the HoverButton. I'm on Kinect SDK 1.7.
First a side note, Kinect SDK 1.8 is the latest version and does support many new features. If it is possible for you to update to the latest SDK I would suggest looking into it. Among the changes is how you interact with buttons -- replacing the "hover" with a much more intuitive "press" action.
For your KinectHoverButton, I'm assuming you are using the one in the "ControlBasics-WPF" example.
The KinectHoverButton is a subclass of KinectButtonBase, which is turn is a subclass of a regular ButtonBase class. Here is link to the ButtonBase class on MSDN:
http://msdn.microsoft.com/en-us/library/system.windows.controls.primitives.buttonbase(v=vs.95).aspx
Finally, from the above link you'll notice that ButtonBase is a subclass of ContentControl:
public abstract class ButtonBase : ContentControl
... and you can put (just about) anything inside a ContentControl.
You will not want to ram your UserControl into a KinectHoverButton. Instead you want to create a KinectHoverButton that looks like your UserControl, and behaves as it should when using a gesture environment. You can create a UserControl that contains just a single KinectHoverButton if you want to reuse it.
As a simple example:
<KinectHoverButton>
<Grid>
<TextBlock Name="Number" Text="1" FontSize="15" Margin="0 0 2 0"
HorizontalAlignment="Right" VerticalAlignment="Top" />
<TextBlock Name="symbol" Text="H" FontSize="20"
HorizontalAlignment="Center" VerticalAlignment="Center" />
</Grid>
</KinectHoverButton>
... will create a Kinect enabled button that looks very close (you'll have to play with styling a little bit) to your existing UserControl.