How to TabControl
properly organize the work of the tabs and elements inside the tabs? For example 1 tab (tabitem1
) works with the port RS232
and has its own settings, control and properties. 2 Tab (tabitem2
) Works with the USB
port and has its own items of settings, control and properties. When adding a tab, select from the list with what port to work and, accordingly, a tab must be added and in this tab must be those settings, control and properties, Which belong to the selected port. Here is a link to drawing https://www.dropbox.com/s/2widu5i5uvqtrxv/tabcontrol.jpg
Answer 1, Authority 100%
I advise you to use the MVVM approach. To do this, you will need to create tabs of the tabs:
public abstract class tabvm: notificationObject
{
Public String Header {Get; }
Public Tabvm (String Header)
{
Header = Header;
}
}
Public Class Tab1vm: TabVM
{
Public Tab1vm ()
: Base ("Tab 1")
{
}
}
Public Class Tab2VM: TabVM
{
Public Tab2VM ()
: Base ("Tab 2")
{
}
}
notificationObject is a class that implements IncotifyPropertyChanged . TABVM is a basic presentation model for all tabs. Tab1VM and TAB2VM – Specific tabs.
Next, define a presentation model that will manage tabs:
public class mainvm: notificationObject
{
Public ObservableCollection & LT; TabVM & GT; Tabs.
{
Get {return _tabs ?? (_Tabs = New ObservableCollection & LT; TabVM & GT; ()); }
}
Private ObservableCollection & LT; TabVM & GT; _Tabs;
Public Tabvm SelectedTab.
{
get {return _selectedtab; }
set {setProperty (Ref _SelectedTab, Value); }
}
Private TabVM _selectedTab;
Public Mainvm ()
{
Tabs.add (New Tab1vm ());
Tabs.add (New Tab2VM ());
Selectedtab = tabs.firstordefault ();
}
}
This implementation does not control anything, but simply forms a list of tabs. Dale you can wind any logic.
Well, finally, define the presentation:
& lt; window ... & gt;
& lt; window.datactexte & gt;
& lt; vm: mainvm / & gt;
& lt; /window.datactext>
& lt; window.resources & gt;
& lt; ResourceDictionary & GT;
& lt; datatemplate datatype = "{x: Type VM: TAB1VM}" & gt;
& lt; TextBlock Text = "Tab 1 Content" / & GT;
& lt; / datatemplate & gt;
& lt; datatemplate datatype = "{x: Type VM: TAB2VM}" & gt;
& lt; TextBlock Text = "Tab 2 CONTENT" / & GT;
& lt; / datatemplate & gt;
& lt; / ResourceDictionary & gt;
& lt; /window.resources>
& lt; grid & gt;
& lt; tabcontrol itemssource = "{Binding Tabs}" selecteditem = "{binding selectedtab}" & gt;
& lt; tabcontrol.resources & gt;
& lt; Style targettype = "TabItem" & gt;
& lt; setter Property = "HeaderTemplate" & gt;
& lt; setter.value & gt;
& lt; datatemplate datatype = "{x: Type Tabitem}" & gt;
& lt; TextBlock Text = "{Binding Header}" / & gt;
& lt; / datatemplate & gt;
& lt; /setter.value>
& lt; / setter & gt;
& lt; / style & gt;
& lt; /tabcontrol.resources>
& lt; / Tabcontrol & gt;
& lt; / grid & gt;
& lt; / window & gt;
I defined tab templates directly inside the window. You can make them in separate files, or define your datatemplateselector and use them.
can also use tape instead Tabcontrol’a.