We Keep Coding

Wpf design ; multiple views in one window

Im building an application where I want to head for a design, that could remind of a dockpanel.
What I want, is having buttons in the left side (or left panel) representing different areas of the application (e.g "Milk", "Bread") and then have different "views" in the middle-panel.
What I already have tried, is making an application with a "Frontpage", and buttons changing the whole window/usercontrol - this however will not give me static areas/panels.
I do not want to use a tabcontrol with the tabtitemstrip being vertical - however it is kinda the same functionality im looking to have.
Any ideas?
Below is a picture with the wished design, to kinda give an idea of my thoughts.. Any help appreciated :)
http://s57.photobucket.com/user/RolleKn/media/wpfdesign_zps3737b014.jpg.html

If you use WPF, use ContainerControl or ContentPresenter for that.
In general, "switching Visibility On/Off" is not a good way to go. It forces the UI to create all objects, even those invisible ones, and to handle their data and events, etc.
And you need to switch it all manually.
WPF provides you with many mechanisms that can save you this. Some are smarter than others, some not.
One of the most basic mechanism in WPF is the Control and its Template property. You can replace whole your Grid+Contents+SwitchingVisibility idea with a single Control and switching its Template:
<Window.Resources>
<ControlTemplate x:Key="panel1"> ..carrots.. </ControlTemplate>
<ControlTemplate x:Key="panel2"> ..cucubers.. </ControlTemplate>
<ControlTemplate x:Key="panel3"> ..donkey.. </ControlTemplate>
...
</Window.Resources>
<Grid x:Name="LayoutRoot">
<Control x:Name="foo" />
</Grid>
Now, if you get the foo and set its .Template and set it to panel1, then the "carrots" will show up. if you set it to panel3, donkeys. And so on.
It's very powerful, but it will not be really handy due to some other things I won't cover. There are books and tutorials that explain Templates in depth. Also, this mechanism is really not designed for such task. It's the most basic one, and a good thing to know if you want to work in WPF, but there are more suitable ones here.
Second next powerful and still basic mechanism is ContentControl/ContentPresenter. They work almost in the same way (actually CC uses CP internally), so I'll skip it.
ContentControl is a smart control that knows how to automatically select a correct Template with respect to the data you are tryng to present.
So:
<Window.Resources>
<DataTemplate DataType="CarrotData"> ..carrots.. </..>
<DataTemplate DataType="CucumberData"> ..cucubers.. </..>
<DataTemplate DataType="DonkeyData"> ..donkey.. </..>
...
</Window.Resources>
<Grid x:Name="LayoutRoot">
<ContentControl x:Name="foo" Content="{Binding ..}" />
</Grid>
Note the change from 'ControlTemplate' to 'DataTemplate'.
Now, with this setting, you don't even need to switch templates manually. You just get the "foo" and set its Content to either:
a CarrotData object, that contains the carrot-related data
a CucumberData object, that contains the cucumber-related data
a DonkeyData object, that contains the donkey-related data
Once you set the data to be shown (i.e. foo.Content = carrots[5]), the ContentControl will pick the relevant template to be shown.
You can bind the Content property to just about anything. If you have some dataclass that contains carrots/donkeys and has a property CurrentThing, you can bind to it and ContentControll will switch the views automatically along with the changes to CurrentThing.
That's basics. There's much more to it, in almost any point I tried to briefly cover. For now, leave ControlTemplates. Read about DataTemplates and Bindings. Read about ContentPresenter (shows 1 template for 1 item) and ItemsControl (shows N items+templates). Then, read a little on MVVM pattern.
You will quickly see that "having everything in one Grid" and "switching Visibility" is an odd way to do it.
However, I wouldn't be fair if I didn't mention that everything has a cost included. Extensive use of templates and bindings makes your app a bit slower compared to what you could get when you do everything manually. But usually, doing it manually is just not really worth it.

Metro application directly focuses on my first field

I'm creating this test Metro application using Windows 8, VS2012, C# and XAML. There are different TextBox in the application page arranged in a StackPanel. When the application is launched the focus is on the first TextBox.
I was wondering how to "deactivate" this.
Here's a pic, as you can see the first field is focused (color changed and ToolTip displayed).

When your UI is loaded you can remove focus from the TextBox by applying a Programmatic focus state to any other control.
Imagine that you have a Button named myButton. You can:
myButton.Focus(FocusState.Programmatic);
You cannot however use FocusState.Unfocused state to remove focus from the TextBlock because it is not allowed and will throw an exception.

One simple fix for this is place something to catch it first with IsTabStop="True" with a 0 Opacity which is a bit hacky but the only way I know. So something like;
<TextBox IsTabStop="True" Opacity="0" Height="1" Width="1"/>
<!-- Then the rest of your content like your other TextBox stuff -->

How do I make clickable text

I have been trying to create buttons on Windows Phone 8, which don't look like buttons, but just look like text, however, I haven't been able to find this question answered anywhere else. I am trying to create something like what Microsoft have used below for the camera roll, albums and date buttons below. Is anybody able to explain how I can do this, or maybe link me to a tutorial or something that I may have missed while searching? Thank you.

Windows phone uses XAML code to create UIElements. Very similar to WPF, you can use almost any UIElement as a button. This is because each element has a large amount of events that can be tracked. Think of it as a layered cake. If you have a textblock inside of a listbox inside of a grid, similar to what you see above. Then when someone clicks on the textblock it will try to handle the event. If it isn't set to handle it then the listbox tries. If the listbox cant then the grid tries and so on. What you are looking for is the tap event in the textblock. Google textblock tap event.
<Grid x:Name="LayoutRoot" Background="Transparent">
<ListBox>
<StackPanel>
<TextBlock Tap="title_Tap_1" Name="title">title</TextBlock>
private void title_Tap_1(object sender, System.Windows.Input.GestureEventArgs e)
{
//Your code here
}

I tend to use a ListBoxItem to wrap a TextBlock. It allows you to use the TiltEffect from the wpToolkit to show interaction and also exposes a Tap event for the ListBoxItem
<ListBoxItem toolkit:TiltEffect.IsTiltEnabled="True" Tap="On_Tap">
<TextBlock>Hello World</TextBlock>
</ListBoxItem>

I don't know for Windows Phone 8 because I haven't written any app yet. I think that this is like Windows Phone 7 , 7.1 that I used to write code. This control that you see is a ListBox and inside there are ListBoxItems. ListBoxItem can be anything (it can be used as a container to insert anything inside it.). Hope it helps.

The easiest way is to use HyperlinkButton instead of classic Button. In that print screen I doubt there's a list for only like... 3 buttons (hyperlinkbuttons).

Controls in the xaml world are look-less: use a button in your ItemTemplate and turn the border off. Then you can use the command property of the button for binding to your VM, or if you are not using MVVM use the Click event of the button and handle it in the code behind.

Build Custom Theme or Use Standard Theme in WPF

Soon to be a professional .NET developer (I hope) I start to dig into Windows Presentation Foundation (WPF). Looking into several video tutorials, I find design of GUI a daunting task. Having to specify every color, on every element, in every situation, to every platform seems a bit too much. How can you make this process simpler, and more generic when it comes to design? Is there any templates to start from, or is one expected to specify a couple of hundred rows of XAML before the design is looking appealing?
Considering the code-block below...
<Style TargetType="{x:Type Button}">
<Setter Property="Background" Value="LightGreen" />
<Setter Property="Foreground" Value="DarkGreen" />
</Style>
... where properties for hover and pushed-button style is left out which need additional rows of XAML to do what the developer wants.
Might there be a simple XAML-editor around to increase productivity? If there isn't, its just to dig dip into XAML and start building styles too keep for later projects.

Designing your own theme is great but it requires a lot of expertise and time. From my point of view its not a great idea to invest in designing your own theme, provided you already have so many themes availabe online. You can take one which suits you and modify it as per your needs.
I genrally refer these links for themes -
WPF Themes -
http://wpfthemes.codeplex.com/
http://wpf.codeplex.com/wikipage?title=WPF%20Themes&ProjectName=wpf
WPF Theme Selector
http://wpfthemeselector.codeplex.com/
Wpf Project With 21 Theme
https://marketplace.visualstudio.com/items?itemName=AliAlikhani.SahaWpfTheme2012
In case you need more options you can buy one here -
http://www.xamltemplates.net/wpf-themes/

There is no requirement to create a Style. You can just use the default style. Consider this simple messagebox style window:
<Window x:Class="MyProject.Test"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Test" Height="217" Width="298">
<StackPanel Orientation="Vertical">
<Label>Here is the Message.</Label>
<StackPanel Orientation="Horizontal">
<Button>OK</Button>
<Button>Cancel</Button>
</StackPanel>
</StackPanel>
</Window>
If you really need to re-style controls, I would pick and choose which ones to do. Otherwise, yes I think creating a custom style is a pretty big task.

Creating a custom style is a very large task, however, should you decide this is neccesary (it's not required). You can use Expression Blend to speed up the process.

Reuxables have a couple of free themes you can try. We've just bought one of their non-free ones and it's dead easy, you just throw in a reference in your app.xaml and it transforms your app. Easy to tailor, too.

Wrapping Controls from System.Windows.Forms in System.Windows.UIElement

Is it possible to wrap the old System.Windows.Forms controls in System.Windows.UIElement? I know that the Browser Control is somehow wrapped and the base is from System.Windows.Forms.
If this is possible, would the implementation cause any consequences?

You can host a Windows forms control in your WPF forms. Just wrap it inside a WindowsFormsHost element. This shows how to host a windows forms masked test box in side a WPF window.
<Window x:Class="Window1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:wf="clr-namespace:System.Windows.Forms;assembly=System.Windows.Forms"
Title="HostingWfInWpf"
>
<Grid>
<WindowsFormsHost>
<wf:MaskedTextBox x:Name="mtbDate" Mask="00/00/0000"/>
</WindowsFormsHost>
</Grid>
</Window>

There is the WindowsFormsHost class, though I would add a note of caution. If you're using all your old controls from winforms, mixed with WPF, it won't be a nice experience for the user. I assume you've been told you can't, or don't have time, but really you should look to replacing your existing controls with WPF controls. Unless you have lots of seriously complicated owner-drawn stuff, this shouldn't be too much effort.
So my recommendation would be to start creating WPF versions of your existing controls (or buy a set from someone like Telerik for any non-domain-specific controls you've created, like toolbars etc), and only keep Winforms controls for extra-complicated bespoke controls you've created. Even then, you should be planning for a "phase 2" to replace those as well. Your users will thank you for it.