Develop Reference

Let user resize control (textbox, specifically) in Canvas UWP

I have a canvas with a button that the user can press to add a new textbox to the canvas. How can I make it so the user can resize the text box by clicking and dragging on any of the corners of the textbox. Because the textbox is created in the C# code (not XAML), I would prefer code in C# not XAML.
Thanks
EDIT: My question is different than the one referenced because it is in UWP not WPF. These have very different controls. I would appreciate if you could translate the UWP information into UWP C#

You can use Thumb control instead of a textbox. The thumb control provides the functionality for you to write code to customize the drag and drop behavior. A simple code would be:
<Canvas x:Name="test">
<Thumb Width="100" Height="100">
<Thumb.Template>
<ControlTemplate>
<TextBlock HorizontalAlignment="Center" Text="12345"/>
</ControlTemplate>
</Thumb.Template>
</Thumb>
</Canvas>
A more complex sample could be found from this SO thread from Jay's answer. But please notice you need to customize the logic yourself in order to make it resize like what you need. The reference is just a direction.

Popup with Caliburn Micro in Windows Phone

Could anyone explain how to use the XAML popups with Caliburn Micro.
Thanks
Edit:(Made my code more releavent to what I want to achieve)
When I define a popup in xaml like this:
<Button x:Name="ShowPopup" Content="Popup"/>
<Popup x:Name="my_popup_xaml" Grid.Row="2">
<Border BorderThickness="2" Margin="10" BorderBrush="Green">
<StackPanel Background="LightBlue">
<TextBlock Text="Select Option" FontSize="21" Margin="10,0" />
<StackPanel Orientation="Horizontal" Margin="0,10">
<Button x:Name="SelectPhoto" Content="Select photo From Library" Width="215"/>
<Button x:Name="CapturePhoto" Content="Use Camera" Width="215"/>
</StackPanel>
</StackPanel>
</Border>
</Popup>
How do I display this popup using the WindowManager?
Should I create new View Model for this because I just need to use PhotoChooser task and the Camera Capture task here?
How do I bind Popup to my View Model.
Edit:
#Charleh, Your Suggestion for using with windowmanager with a separate ViewModel worked, with a minor tweak.
I removed the <Popup> tag and used the window manager to display the popup.
But now I cannot close the popup and the popup is cropped as it's displayed at the top of the screen. How do I fix this?
Edit: I was able to close the dialog using the the Screen's TryClose() Method.
When I used the ShowDialog method instead the of the ShowPopupmethod and the alignment of the window was a bit better but it is still stuck at the top and wont align in the center.
Edit: I have created a new PhoneApplicationPage(Windows Phone 8 equivalent of window) and displayed it as a dialog. The problem with this approach is that the PhoneApplicationPage is not stretching automatically to fill the screen space(Which it does when not displayed as a dialog). It's just stretching to accommodate the content inside it. Setting `VerticalAlignment="Stretch" has no effect.
Giving the Height property a particular value is not suitable because of it does not adjust to well to different phone resolutions.
#Charleh I tried specifying height and width like this:
Dictionary<string, object> properies = new Dictionary<string, object>();
properies.Add("Height", 768);
properies.Add("Width", 480);
windowManager.ShowDialog(new ImageSelectorPopupViewModel(),null,properies);
This Code has no effect (although specifying the height in Xaml works but I cannot use that as I have to accommodate for different screen resolutions on the phone)

You really need to read up on Caliburn Micro before you post - there are literally tons of articles showing how to bind commands on your view to methods on your VM
To do so in this case either:
Bind using convention by giving your button the same name as the method
<Button x:Name="ShowPopup" />
Bind using action message syntax:
<Button cal:Message.Attach="[ShowPopup]" />
All the answers are here: http://caliburnmicro.codeplex.com/documentation
(specifically: http://caliburnmicro.codeplex.com/wikipage?title=All%20About%20Actions&referringTitle=Documentation)
You do the same thing with your button, so you can do the same thing with your popup
(have you also considered using Caliburns WindowManager which has a ShowPopup method?)
Edit:
On re-reading it looks like you want to use the same ViewModel for your current View and Popup - is this the case or do you want a new ViewModel for your Popup? I'd suggest using WindowManager, and creating a ViewModel for the popup - it will be more in-line with what CM already does

Create a tabbed WPF menu, "ESET Antivirus" - Style

I'm looking for a way to create an application layout for a little tool that looks like the ESET Antivirus UI:
I thought, that I take a TabControl and do a complete Restyling on this whole thing. I created a basic tab layout:
<Grid Background="White" Grid.Row="1" >
<TabControl TabStripPlacement="Left">
<TabItem Header="Dashboard">
<Grid>
</Grid>
</TabItem>
<TabItem Header="Projects">
<Grid>
</Grid>
</TabItem>
<TabItem Header="Settings">
<Grid>
</Grid>
</TabItem>
<TabItem Header="Help & Info">
<Grid>
</Grid>
</TabItem>
</TabControl>
</Grid>
However, I don't have the slightest clue how to get the tabs the way I'd like them to be. I tried a lot with Blend to get the Tabs look the image above, but I don't get it. The triangle would be a nice to have, but the highlighting should be adapted.
Any advice?

Whenever you are having trouble with trying to make WPF UI elements look exactly the way you want, you should go find the default <style> XAML from microsoft and try modifying that directly in your project until you get the desired result.
In case that wasn't clear, you you need to do is follow the links below, copy the style from the pages and put them into the Resources section of your window (or App.xaml, its really up to you). Then fiddle with them until you get it to look the way you want.
The two styles you'll need to play with are TabControl and TabItem

I'd think to a MVVM approach, instead.
Before all, shape the model of the data, as well as the business layer (commands, functions, etc.).
Then, you can "wear" your model (by leveraging a ViewModel) with a ListBox, for the left selector, and a simple ContentControl for the main part.
The selected item of the ListBox should be fed into the content of the body, and a DataTemplateSelector (for instance) will choose the proper visual fragment.
It's just a suggestion. Personally, I've found a bit tricky the TabControl and I seldom use it.
Cheers

An old trick is to have 2 different sets of images - one for clicked and one for passive (maybe one for mouseover) but clicked image will have the triangle in it.
This uses static images for buttons, which is very easy to use, but hard to modify on the fly.

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

Bing Maps (Silverlight) maps - specifying canvas to be at foreground through XAML

Below is the XAML code i have for a Bing Maps Silverlight weather related implementation.
Here is what i am trying to do:
Have a bing maps with several (over 100) pushpins- on mouseover - show a contentpopup (canvas=myPopup) below. Simple enough.
Everything works fine - however, when mypopup displays on mouseover, it is not on the foreground (the other pins appear on top of the contentpopup) - hence making it not very readable.
Question:
How do i specifiy the myPopup canvas specified in XAML below to always appear in the foreground, i.e. top most of the Bing Maps silverlight control when a user views it on mouseover.
Thanks!
<Grid x:Name="LayoutRoot" Background="White">
<m:Map x:Name="GlobalMap" Mode="Road" Center="15,7" ZoomLevel="2" CredentialsProvider="{StaticResource MyCredentials}" Margin="-70,-40,-100,-72">
<m:MapLayer x:Name="myLayer">
<Canvas x:Name="myPopup" Visibility="Collapsed" Opacity="1">
<Rectangle x:Name="myPopupRectangle" Fill="White" Canvas.Left="0" Canvas.Top="0" Height="100"
Width="100" RadiusX="15" RadiusY="15"/>
<StackPanel Canvas.Left="8" Canvas.Top="8">
<TextBlock x:Name="myPopupTexts" FontSize="5" Width="100">
</TextBlock>
</StackPanel>
</Canvas>
</m:MapLayer>
</m:Map>
</Grid>

Try adding Canvas.ZIndex to the MapLayer element, give it a large value like 200 or add your push pins to another MapLayer (rather than adding the pins directly to the map) that appears ahead of this popup layer in document order.

I did something similar to this, but took a different approach. What I did was create a custom pushpin template and create a PopUp within the template.
When the user hovers over the pushpin, the popup is displayed. Using the PopUp will solve your problem, since the control will automatically position it on top of everything. Try wrapping the Canvas in a PopPup and see if that works.
hth