I'm using Elysium in my wpf application to get a metro styled interface. However the style is not preserved when I try to use Windows forms control.
Example:
<Grid>
<RichTextBox />
</Grid>
Gives a perfect result (with the thin white border around the wpf control)
However:
xmlns:WinForms="clr-namespace:System.Windows.Forms;assembly=System.Windows.Forms"
.
.
<Grid>
<WindowsFormsHost Name="wfh">
<WinForms:RichTextBox />
</WindowsFormsHost>
</Grid>
Gives me a different look with the legacy windows form type of border.
I want the thin white border around my WindowsFormElement if possible. I'm out of ideas at the moment.
Related
I've followed some examples trying to layer a rectangle over the WebBrowser object:
Here is the MSDN example link. (I got it to work)
Layers issue using Z-Index
Here is the code I'm trying to get to work:
<Grid>
<Canvas Margin="2,4,0,-450" >
<Rectangle Height="452" Canvas.ZIndex="1000" Name="rectangle1" Stroke="Black" Width="524" Opacity=".5" Fill="#8CBABABA" Canvas.Top="-7" Canvas.Left="-3" />
<WebBrowser Name="mapBrowser" Canvas.ZIndex="999" Margin="5,5,5,5" Height="452" Width="516" Canvas.Top="-11" />
</Canvas>
</Grid>
I'm trying to make the WebBrowser appear grayed out by making the rectangle appear over top of it. I'll also disable it.
Can anybody point to what I'm doing wrong?
I solved this issue by creating a .png image which I placed in the same space as the webbrowser. It looks like a grayed-out version of what first appears in the webbrowser. Then I conditionally hid the webbrowser which makes the image visible. This is the only way I've found to make it work using .Net 4.0.
Please see the update
I have the following WPF controls.
<Grid>
<Label Content="Report Generator" Margin="0,0,0,294"/>
<TextBox Name="FilePath" Width="300" Height="25" Margin="10,30,207,264"/>
<Button Width="75" Click="Browse" Margin="335,30,0,0" VerticalAlignment="Top" HorizontalAlignment="Left" Height="25" Content="Browse" />
<Button Width="75" Height="25" Click="Extract" Margin="432,30,0,0" VerticalAlignment="Top" HorizontalAlignment="Left" Content="Extract" />
<ProgressBar x:Name="ExtractBar" Margin="10,70,107,204"/>
<Label x:Name="FirstEntityCount" Content="Number of Type1 Entities: " Margin="0,191,0,98" />
<Label x:Name="SecondEntityCount" Content="Number of Type2 Entities: " Margin="0,226,0,65" />
</Grid>
I've quickly thrown this together in Visual Studio 2012 designer. The target Framework is .Net 4.5 and this is a WPF Window. It's an addition to an existing solution.
The issue is that if I don't remove the 3rd and 4th margins (e.g. Margin="a,b,c,d", setting c and d to 0) and then specifying VerticalAlignment="Top" and HorizontalAlignment="Left" the controls are cropped.
See attached image below.
I can rectify this by setting the margins to be 0 and setting the alignments but I want to know why this happens by default? I literally have just dragged and dropped. The controls appear normal in Visual Studio 2012.
Running Windows 8 RTM.
UPDATE
My question isn't why the margins now work and why the didn't before (I get that they seem to be set so they crop the actual control itself); I'm merely asking why this complex IDE fluffs it all up... It's happened over 2 rebuilds...
From what I remember, it also happens in Expression Blend. I'll double check.
When you drag and drop from the designer, whether it be in Visual Studio or Expression blend, the designer will attempt to place the element in the exact location the control was dropped on the designer surface. When the designer places the element, margins are used to position the control relative to the containing element.
What is typically done when dragging controls onto the design surface is to reset the margins. In Blend and VS, you can reset any attribute to their default settings by clicking the little square in the properties and selecting reset.
Agreed that the setting of the margins by the designer is a bit of an annoyance; though, not really sure of how else this would be handled when using a visual designer to drag and drop.
Personally, I tend to switch between hand written XAML and the designer; lately, I've been using Blend much more since it can control the placement of nearly any element in the XAML by using the objects and timeline panel.
On a side note, to clean up the Blend XAML madness, install the XAML Styler extension for Visual Studio.
By setting the margins for top and for bottom, you are forcing the label to have a particular height. It happens that this height is not sufficient to display the height of the text that you have put in the label. I think if you reduce the bottom margin somewhat you'll find it fits OK.
On an unrelated note, wouldn't it be better to use Grid.Row and Grid.Column to position the controls on this Grid rather than having them all technically in position (0,0) and then using margins to position them?
I am building a user control in WPF and put a few buttons in a stackpanel laying inside a grid. Problem is that when I build the app and run it, the buttons "sail around" and don't stay where I put them in the designer window. Is there any attribute I'm missing(or some sort of container?)?
Thanks.
Try setting the alignment properties of your grid:
<Grid HorizontalAlignment="Left" VerticalAlignment="Top">
...
</Grid>
I am trying to override the default template for TabControl in Silverlight. Instead of having the tabs wrap around when they are full, I want to make it so the user can scroll through them, similar to a ListBox. However, Silverlight just ignores everything I put in "ItemsPanelTemplate" and renders the default. Here is the relevant code:
<swc:TabControl Grid.Row="0" Grid.Column="1" Name="Tabs">
<swc:TabControl.ItemsPanel>
<ItemsPanelTemplate>
<ScrollViewer>
<StackPanel Orientation="Horizontal" />
</ScrollViewer>
</ItemsPanelTemplate>
</swc:TabControl.ItemsPanel>
Even if I just put in a regular StackPanel, it still does nothing at all. I am using the Silverlight Toolkit for the tabs, so everything I find online is just for regular WPF and does not work for Silverlight. Thank you all very much for your advice.
The ItemsPanel needs to have a Panel in it as the root element. You have a ScrollViewer. If you want to add a ScrollViewer, you'd have to create a custom ControlTemplate that wraps the ItemsPresenter with a ScrollViewer. The ItemsPresenter will be where the ItemsPanel is shown.
You should be able to get the default Style and ControlTemplate from the Silverlight Toolkit source and tweak it to your needs. Then include your modified version in your application resources or apply it explicitly to individual TabControls.
I'm trying to figure out why the control does not honor ZIndex.
Example 1 - which works fine
<Canvas>
<Rectangle Canvas.ZIndex="1" Height="400" Width="600" Fill="Yellow"/>
<Rectangle Canvas.ZIndex="2" Height="100" Width="100" Fill="Red"/>
</Canvas>
Example 2 - which does not work
<Canvas>
<WebBrowser Canvas.ZIndex="1" Height="400" Width="600" Source="http://www.stackoverflow.com"/>
<Rectangle Canvas.ZIndex="2" Height="100" Width="100" Fill="Red"/>
</Canvas>
Thanks,
-- Ed
Unfortunately this is because the WebBrowser control is a wrapper around the Internet Explorer COM control. This means that it gets its own HWND and does not allow WPF to draw anything over it. It has the same restrictions as hosting any other Win32 or WinForms control in WPF.
MSDN has more information about WPF/Win32 interop.
You are running into a common WPF pitfall, most commonly called the "The Airspace Problem". A possible solution is to NOT use the WebBrowser control, and instead go for something a little crazier - namely an embedded WebKit browser rendering directly to WPF. There are two packages that do this; Awesomonium (commercial) and Berkelium (open-source). There's a .NET wrapper for both of these.
You could SetWindowRgn to fake the overlapping area by hiding it as shown here:
flounder.com
msdn
I solved a similar issue where I was hosting a 3rd party WinForms control in my WPF application. I created a WPF control that renders the WinForms control in memory and then paints it to a bitmap. Then I use DrawImage in the OnRender method to draw the rendered content. Finally I routed mouse events from my control to the hosted control. In the case of a web browser you would also have to route keyboard events.
My case was fairly easy - a chart with some simple mouse interaction. A web browser control may have other issues that I didn't take into consideration. Anyway I hope that helps.
I hit this issue as well. In my case I was dragging images from one panel into the WebBrowser, but of course as soon as my image moved into the browser it was hidden.
Currently working on the following solution:
When the Image drag starts, create a Bitmap of the WebBrowser using "RenderTargetBitmap"
Add your Bitmap to the canvas, using the same width/location as the webbrowser
webControl.Visibility = Visibility.Hidden.
When the drag is released, remove your bitmap and set webControl.Visibility = Visible.
This solution is very specific to my situation, but maybe it will give you some ideas.
I managed to solve this by using this structure, check out the properties configuration in each element:
<Canvas ClipToBounds="False">
<Popup AllowsTransparency="True" ClipToBounds="False" IsOpen="True">
<Expander>
<Grid x:Name="YourContent"/>
</Expander>
<Popup>
</Canvas>
You just have to manage the Expander to show or hide your content, I'm using it for a menu bar, I think that the expander is optional depending on the case.
Check out this picture with the result, you can even show your controls on top of the WebBrowser and even outside the main window: