Develop Reference

Most simple FrameworkElement to handle HorizontalAlignment and VerticalAlignment?

This is Silverlight.
Initial goal is to display a random element in a Popup with some VerticalAlignment and HorizontalAlignment. I do not want to use VerticalOffset or HorizontalOffset, because there is more to what I really want to do, including some complex bindings.
First attempt was:
<Popup>
<Button
Height="135"
HorizontalAlignment="Stretch"
VerticalAlignment="Bottom" />
</Popup>
Second attempt was:
<Popup
Height="135"
HorizontalAlignment="Stretch"
VerticalAlignment="Bottom">
<Button />
</Popup>
Both were a failure: the Button was always on Top and not Stretch (HorizontalAlignment and VerticalAlignment didn't work).
So I had the idea to encapsulate the element in a simple FrameworkElement:
<Popup>
<Border>
<Button
Height="135"
HorizontalAlignment="Stretch"
VerticalAlignment="Bottom" />
</Border>
</Popup>
And it is working.
But I had to use Border in this example, when I could have done it with Grid and many other FrameworkElement (but not with Canvas or Viewbox or Popup). I'd like to know what is the most simple, efficient and processor-friendly transparent FrameworkElement to encapsulate another element with working HorizontalAlignment and VerticalAlignment? Is it:
Border? (like the above example)
UserControl?
ContentControl?
ContentContainer?
some custom and basic MyFrameworkElement? (might need help for most basic implementation)
something else like Grid?

WPF controls come in two flavors: Ones that interact with users (like accept user clicks like a button, or display text like a text block) and containers that control placement and layout of the previous ones.
Container controls are usually designed to lay out their children in a specific manner. For example, Canvases lay out children by X, Y, Width & Height values. Each one has a specific use, so you must read the documentation or tutorials for these container controls and understand how each works in order to select the appropriate one for a task.
In your case, you want the button to fill all available space in the popup (it seems, it isn't that clear). I know that the Grid does this by default. So I would do the following:
<Popup><Grid><Button /></Grid></Popup>

Disable scrolling phone:webbrowser windows phone 8 / 8.1

I am trying to disable the scroll functionality in the phone:webbrowser in my windows phone 8 application. The reason i wan't to do this is that I want to place a stackpanel with items underneath the webview, but still show the whole webpage.
To accomplish this I get the total height of the webpage and set the height of the webbrowser to the webpage height. This will be done through adding javascript to the webbrowser. The webview will now have the total webpage and the items underneath it and both of those items are in a ScrollViewer so you can scroll through the page.
The only problem i have right now is that you can scroll the webbrowser so you cant scroll the scrollviewer. anyone got an idea how to fix this?
<ScrollViewer
Grid.Row="1"
Margin="0,0,0,0">
<StackPanel
x:Name="ContentPanel"
Margin="0,0,0,0">
<phone:WebBrowser
x:Name="webView"
Navigating="WebBrowserNavigating"
LoadCompleted="WebBrowserLoadCompleted"
ScriptNotify="browser_ScriptNotify"
IsScriptEnabled="True"/>
<StackPanel
x:Name="CouponHolder"
Margin="0,5,0,0">
</StackPanel>
</StackPanel>
</ScrollViewer>
I also looked at other questions, but they didnt work out for me:
http://www.codeproject.com/Tips/718671/Disable-WebView-scrolling-in-Windows-Store-Apps
And I see allot of people give awnsers like VerticalScrollBarVisibility="Disabled" but this doesnt work, like the suggests it will only hide the visibility...

you can disable all manipulation with WebBrowser control by setting IsHitTestVisible="false". The disadvantage is that you can't press Links, Navigate and so on.
If you want just to disable scrolling than take a look at this blog post:http://www.scottlogic.com/blog/2011/11/17/suppressing-zoom-and-scroll-interactions-in-the-windows-phone-7-browser-control.html
You can Find that the VisualTree of WebBrowser control looks like:
\-WebBrowser
\-Border
\-Border
\WebBrowserInteropCanvas (New in Windows Phone 8, missing in WP7)
\-PanZoomContainer
\-Grid
\-Border (you need access this one)
\-ContentPresenter
\-TileHost
You can get the last Border in VisualTree, and subscribe to ManipulationDelta, ManipulationStarted and ManipulationCompletedEvents. And set e.Handled = true; In event handlers. Be careful with that. For example where is no equialent for this code in Windows 8.1 and Windows Phone 8.1 (Runtime).
This hack will cancel scrolling of webbrowser while user can interract with entire web page, but you won't be able to suppress manipulation to put webbrowser in scrollviewer.
In general I don't think that you could achive ideal user experience if you put WebBrowser inside ScrollViewer

After hours of searching this project finally solved all our webview problems in Windows Phone 8.1 (bounce, touch, auto height etc.):
https://github.com/romshiri/sizeable-webview

Adding elements to a panel in c#!

quick question, in a c# Windows Presentation Foundation How can i add some elements to a Panel so i can easily hide all the elements (Text, Labels...) by just hiding the panel it self?
I have already tried to just put panels over the elements to hide them but i don't think that would be a neat solution because i would also hide all the other elements under it.
I need this because i am trying to have different forms in the same place and on the base of what the user types the items should appear. I don't want it to open a new window.
Thanks!

Assuming all your elements are in the same container, just set the Visibility property of the container to "Collapsed". Ideally, this would be by binding to a bool and using the BoolToVisibility converter provided in WPF.
If they are NOT in the same container, you are a bit out of luck. You will need to set/bind each of the element's visibility properties separately, but using the same techniques as above.

If you place all of the elements you want on that panel you can tell that panel to be invisible or visible and all of the elements on that panel will hide or show accordingly. For ease of use when you are programming you can right click on the panel and choose send back or bring forward and this will help you navigate your form while programming.

Panel is a base class and has a Visibility property
Panel Properties
<StackPanel x:Name="pnl1" Grid.Row=0 Visibility="Collapsed">
<TextBlock x:Name="tbTime" />
<TextBlock x:Name="tbDate" />
</StackPanel>
<StackPanel x:Name="pnl2" Grid.Row=2 Visibility="Visible">
<TextBlock x:Name="tbTime2" />
<TextBlock x:Name="tbDate2" />
</StackPanel>

Make WPF control over the web browser

I have a WPF application in which I have an embedded web browser control. I want to show an animation over the web browser at a certain time, but the problem is that the WPF controls, when kept over the web browser are not visible.
Is there any way to show my user control over the web browser?

Please answer me this first,
Is this Web Browser control the WPF Web Browser Control or Winform webbrowser control hosted in WinFormHost?
For any WPF control to show animation over it, did you explore ...
Placing your control in Grid or Canvas and then placing an stretched Border (which has running animation in it) as the last child of the grid/canvas?
Adorner with constantly changing drawing context to simulate animations?
Transparent Popup with animation, whose static placement is done (bound to control's absolute left, top positions and actual height & width properties) over the control?
Try the transparent popup approach for web browser control ...
<Grid>
<WebBrowser x:Name="WebBrowser1"/>
<Popup IsOpen="{Binding StartAninmation}"
AllowsTransparency="True"
Grid.RowSpan="99"
Grid.ColumnSpan="99"
Placement="Center"
Width="{Binding ActualWidth,
ElementName=WebBrowser1,
Mode=OneWay}"
Height="{Binding ActualHeight,
ElementName=WebBrowser1,
Mode=OneWay}"
PlacementTarget="{Binding ElementName=WebBrowser1}"
Opacity="0.5"
Margin="3">
<TextBlock Text="Loading ..."/>
</Popup>
</Grid>
One of these will surely work in your case.

Unfortunately thats not possible with the WPF Webbrowser Control (which is basically a wrapped WinForms WebBrowser control), due to the order the OS renders WinForms and WPF content.
See also:
Is there a way to render WPF controls on top of the wpf WebBrowser control?
There's a third party app Awsomium that should make it possible.
Edit: Another possibility would be to render a frameless window above the WebBrowser Control. But it's a bit tricky to keep it in the correct position/z-order.

CefSharp provides a pure WPF browser contorl based on Chromium/V8 that isn't subject to the airspace issues of the Microsoft WebBrowser control (disclaimer: I am the maintainer of CefSharp).

How can I pop a control out of it's container to make it full screen when clicked in Silverlight/Wp7?

So I have a Panorama control and the PanoramaItems are programmatically added to the control using the following template.
<UserControl>
<Grid x:Name="LayoutRoot">
<controls:PanoramaItem Name="sitePanoramaItem" Header="{Binding Name}">
<Controls:DockPanel VerticalAlignment="Stretch">
<StackPanel Orientation="Horizontal" Margin="0,10,0,0" Controls:DockPanel.Dock="Top">
<Image Source="../Images/action.png" Width="64" />
<TextBlock Text="{Binding Stats, Mode=TwoWay}" FontSize="45" Margin="15,0,0,0" />
</StackPanel>
<Grid x:Name="graphCanvas" HorizontalAlignment="Stretch" Margin="10,10,10,10"> </Grid>
</Controls:DockPanel>
</controls:PanoramaItem>
</Grid>
</UserControl>
When I click on graphCanvas what I'd like to do is sorta pop the graphCanvas out and display that fullscreen then when I click again restore it to where it was. I've been all over this site and Google and can't find anything similar to what I'm looking for.
I would still like to maintain the Panorama control functionality so that the graphCanvas is still the only one visible but you can cycle through them. Currently I have it sorta working in that I remove the Grid from the DockPanel and put it directly in the LayoutRoot while making the sitePanoramaItem collapsed. However, it's not fullscreen as the Panorama name is still visible (I guess I could hide that as well...) When I put the graphCanvas back int he DockPanel the size of the canvas is all screwed up.
I was hoping there was a simpler way.
Is it even possible?

It is possible to create the UI you describe but it's not going to be simple. You're on the right track with removing it in code and adding it the LayoutRoot and making the Panorama hidden. However you would have to code the scrolling behavior yourself and that is going to be quite tricky - especially making it feel the way to panorama does.
One trick you could try is actually layer a PivotControl on top of your Panorama and have it be collapsed by default. Also edit it's template to remove all default content eg: remove the header control, set margins to 0, etc). Then when you want to go full screen you can remove all the graphCanvases from the Panorama items and and add them to new PivotItems in the PivotControl. Then hide the Panorama and show the Pivot. This will give you scrolling capability for free and the illusion of full screen.
Having said all that I'm not sure I would recommend this. The more common approach would be to simply be to navigate to another page when the user selects an item and handle the full screen aspects there (possibly using the Pivot control again for scrolling). And when you want to leave "fullscreen" mode simply navigate back to the first page. Handling Tombstoning of the fullscreen state will be much easier with this approach for one thing.

You can try making the graphCanvas a Page and putting it in a different XAML. Then add a frame (name it InnerFrame for example) in the same place where you have the graphCanvas right now and navigate to that page with InnerFrame. When the frame is clicked, you navigate with the RootFrame of the app to your graphCanvas page. When you decide to close it, just navigate back with the RootFrame.
Hope it's clear enough :)
Edit:
Navigation in WP7 works very similar as the standard navigation in Silverlight 4, but it's a bit more restrictive. Just throw a PhoneApplicationFrame in your XAML like this:
<phone:PhoneApplicationFrame x:Name="Frame" />
This is basically the same as a Silverlight frame. All the pages you create inherit from PhoneApplicationPage by default, so they can be showed in a frame without any changes.
Your whole application actually runs on a PhoneApplicationFrame. If you take a look at your App class you will see this:
public PhoneApplicationFrame RootFrame { get; private set; }
Here's the MSDN documentation for the navigation system on WP7