Is there a designable multi page control? Or can it be done?

Question

I'm new to WPF and I wonder if I can use the same approach as I'm using in WinForms.

I want to have a switchable content in a UserControl (like a Wizard) and I want to be able to design all of the pages in this control (in the VS designer, the xaml editor). I want to see the content (every page) in its real container.

I don't want to have every page on a separate UserControl file and I don't want them to share the same space (of the UserControl's client area), which is the case when you're making them all invisible except for the one that is currently displayed (at run-time).

In the WinForms I'm able to switch the page by a button INSIDE the VS form designer. I was even able to create such control myself (with buttons working in design-time). Is there a way to do the same in WPF? I just can't accept the idea that I have to create a new file for every page of the same control...

Thanks!

Forget the designer and learn XAML. And no, WPF doesn't "make things hard". You're approaching WPF with a winforms mentality and that is *your* problem, not WPF's problem. — Federico Berasategui, Aug 05 '14 at 15:21
@HighCore: I'm USING the XAML! I don't even use the Toolbox! I just want to SEE the results of what I write in xaml inside the control I'm designing! (as a whole). — P.W., Aug 05 '14 at 15:24
how is a `TabControl` not suitable for you? and why do think WPF "makes things hard"? — Federico Berasategui, Aug 05 '14 at 15:25
@HighCore: Its adding the stupid headers and also they are NOT WORKING in design-mode. PS: By giving me the -1 you just prevented me from getting the correct answer from someone more friendly. No one will even read the question now. Thanks a lot. — P.W., Aug 05 '14 at 15:31
how is it "not working"? that's not a proper problem statement. See [Screenshot](http://imgur.com/9Ny16Jx,uI8Fl97#0) I just took where you click on the TabItems (or place the keyboard cursor at their respective locations in XAML) and the designer switches tabs. If you don't want header, simply override the TabControl's `ControlTemplate` and remove the TabPanel. I don't see what the big deal is. — Federico Berasategui, Aug 05 '14 at 15:40
BTW, the downvote has nothing to do with "preventing you from getting a correct answer", but with the fact that your question is not in a proper format for StackOverflow, because it does not include screenshots, or the necessary code to reproduce the problem. See ["How To Ask"](http://stackoverflow.com/help/how-to-ask) before posting questions in StackOverflow. — Federico Berasategui, Aug 05 '14 at 15:42
Ok, it's working - my bad (WPF have let me insert wrong controls and didn't complain about it - maybe I SHOULD use the ToolBox... while I'm learning). Now I just need to get info on how to do this headers removing template thing if you say it's possible. If you would write this from the beginning (as an answer) everyone would be satisfied and happy (and also would gain rep instead of losing it). There are no stupid questions, there are only stupid answers. Especially if someone is learning. — P.W., Aug 05 '14 at 15:55
There were no screenshots nor xaml needed for this. It was a theoretical question. — P.W., Aug 05 '14 at 15:56
Also, an answer for my question would be an example of how to create such control as TabControl, which HAS clickable buttons in the design-time. — P.W., Aug 05 '14 at 15:59
`WPF have let me insert wrong controls and didn't complain about it` - What "wrong" controls? there is no such thing. The WPF content model allows you to compose the UI in whatever manner you like, as opposed to the horrible restrictions you find in archaic technologies. What's "wrong" and what's not depends on what you really need, as opposed to a fictional framework-level imposed restriction from a useless framework like winforms which doesn't support anything... You really need to change your mindset to understand WPF... — Federico Berasategui, Aug 05 '14 at 15:59
I know what is the WPF model about. 'Wrong control' is a control that doesn't have any sense in the given context (and there should be used a different control, dedicated to it). In my case, a TabPage should only accept TabItems as its children - if you want to have anything different than TabItems in it, you should'n use the TabControl AT ALL! You should use a different kind of panel. — P.W., Aug 05 '14 at 16:14
And also I think you're just a big enemy of WinForms and you downvote everyone who writes something positive about it or something negative about WPF. I'm trying to see the positives AND the negatives of a technology. I'm having fun with WPF now, doing easily some really powerfull stuff and I'm losing hours to do the simple things like some more complex layout or this problem or finding why some things normally working fine are throwing exceptions when they are invoked from bindings at *improper* time... (Long story, many hours lost.) — P.W., Aug 05 '14 at 16:15
BTW, I'm not an "enemy" of anything. I simply point out the *fact* that some technologies are decent and usable, while others are archaic retarded dinosaurs. — Federico Berasategui, Aug 05 '14 at 16:29
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/58714/discussion-between-p-w-and-highcore). — P.W., Aug 05 '14 at 17:12

score 3 · Accepted Answer · answered Aug 05 '14 at 16:29

As stated in the comments above, a TabControl is perfectly suitable for your needs.

The Visual Studio WPF Designer allows you to visualize each TabItem's content at design time:

enter image description here

By simply clicking on the TabItem's header, or focusing their respective XAML tags in the XAML editor:

<TabControl>
    <TabItem Header="Tab Item #1">  <!-- Placing the keyboard cursor here  will show Tab Item 1-->
        <Border Background="Red"/>
    </TabItem>

    <TabItem Header="Tab Item #2">  <!-- Placing the keyboard cursor here will show Tab Item 2-->
        <Border Background="Green"/>
    </TabItem>
</TabControl>

If you don't want to show the tab headers, simply customize the TabControl's Template to only show the SelectedContent, like this:

<TabControl>
    <TabControl.Template>
        <ControlTemplate TargetType="TabControl">
            <ContentPresenter Content="{TemplateBinding SelectedContent}"/>
        </ControlTemplate>
    </TabControl.Template>

    <!-- TabItems here -->
</TabControl>

This simple customization preserves the design time preview ability via the keyboard cursor in the XAML editor, while only showing the selected TabItem's content in the UI, with no headers whatsoever.

All this said, and as a side comment, you really need to leave behind the archaic winforms mentality.

First of all, there is no such thing as a "wrong control" in any context in WPF. The WPF Content Model allows for the composition of rich content in almost any situation for almost any parent container, enabling a much greater customizability than archaic technologies.

And no, a TabControl (there is no such thing as a TabPage in WPF) does NOT "only accept TabItems", because, just like any other ItemsControl, the TabControl wraps each of it's items in an Item Container, provided that the item itself is not an item container.

This means that if you place for example, a <Checkbox/> as an item of the TabControl, WPF will automatically wrap the Checkbox with a TabItem. This behavior supports a great range of scenarios and allows for high levels of customizability and complex uses (such as DataBinding and Data Templating) without the need to introduce custom code. In contrast to some archaic technologies such as winforms which literally doesn't support anything except the default horrible stuff and have no support for DataBinding whatsoever.

If you have problems understanding WPF layout, See This Tutorial. Complex, resolution independent layouts are much more easily achieved in WPF (in comparison to useless winforms) due to WPF's pixel independent nature.

I didn't knew the headers can be removed, thanks. This solves my problem, but I'm curious... How do you create such control as the TabControl in which you can click on headers to change its content? What is the trick to make a button (control) working at design time? — P.W., Aug 06 '14 at 08:36

Is there a designable multi page control? Or can it be done?

1 Answers1