TabControlExample.html

<div *ngIf="model">
    <wm-window [model]="model" id="Form1" class="UserControlTabControl_Form1">
        <ng-template let-model>
            <div class="Form1">
                <wm-tabcontrol #tabControl1 [id]="'tabControl1'" [windowModel]="model" class="tabControl1" tabindex="1">
</wm-tabcontrol>
            </div>
        </ng-template>
    </wm-window>
</div>

TabControlExample.css

@import "../../../../../assets/style/live-demos.css";

.UserControlTabControl_Form1 {
    left: -1px;
    top: -1px;
}
.UserControlTabControl_Form1 .Form1 {
    width: 601px;
    height: 324px;
    overflow: hidden;
}
.UserControlTabControl_Form1 .tabControl1 {
    left: 0px;
    width: 593px;
    height: 293px;
    position: absolute;
}

TabPage1Example.html

<wm-tabpage #Form1tabPage1 id="tabPage1" [model]="model.tabPage1" class="UserControlTabControl_Form1tabPage1" tabindex="0">
<user-control-tab-control-user-control2 #userControl2 id="userControl2" [model]="model.userControl2" class="userControl2" tabindex="1"></user-control-tab-control-user-control2>
</wm-tabpage>

TabPage1Example.css

.UserControlTabControl_Form1tabPage1 .Form1tabPage1 {
    left: 4px;
    top: 24px;
    width: 593px;
    height: 293px;
    position: absolute;
}
.UserControlTabControl_Form1tabPage1 wm-usercontrol .userControl2 {
    left: 3px;
    top: 3px;
    width: 593px;
    height: 293px;
    position: absolute;
}

UserControlDataGridViewExample.html

<wm-usercontrol [model]="model"><div *ngIf="model && model.Visible" class="UserControlTabControl_UserControl2">
    <div class="UserControl2" [ngStyle]="setMyStyle()" [ngClass]="class" name="UserControl2">
        <wm-panel #panel1 id="panel1" [model]="model.panel1" class="panel1" tabindex="6">
<wm-label #label1 id="label1" [model]="model.label1" class="label1" tabindex="2">This is a UserControl Example</wm-label>
<wm-picturebox #pictureBox1 id="pictureBox1" [model]="model.pictureBox1" class="pictureBox1" tabindex="3">
</wm-picturebox>
</wm-panel>
        <wm-datagridview #dataGridView1 id="dataGridView1" [model]="model.dataGridView1" class="dataGridView1" tabindex="8"></wm-datagridview>
    </div>
</div></wm-usercontrol>

UserControlDataGridViewExample.css

.UserControlTabControl_UserControl2 .UserControl2 {
    width: 588px;
    height: 293px;
    position: absolute;
}
.UserControlTabControl_UserControl2 .panel1 {
    background-color: #000040;
    left: 0px;
    top: 0px;
    width: 588px;
    height: 54px;
    position: absolute;
}
.UserControlTabControl_UserControl2 .label1 {
    width: auto;
    font-weight: bold;
    font-size: 12pt;
    color: rgba(255, 255, 255, 1);
    left: 182px;
    top: 17px;
    height: auto;
    position: absolute;
    white-space: nowrap;
    overflow: hidden;
}
.UserControlTabControl_UserControl2 .pictureBox1 {
    left: 0px;
    top: 0px;
    width: 54px;
    height: 54px;
    position: absolute;
}
.UserControlTabControl_UserControl2 .dataGridView1 {
    left: 0px;
    top: 54px;
    width: 588px;
    height: 239px;
    position: absolute;
}

TabPage2Example.html

<wm-tabpage #Form1tabPage2 id="tabPage2" [model]="model.tabPage2" class="UserControlTabControl_Form1tabPage2" tabindex="0">
<user-control-tab-control-user-control1 #userControl1 id="userControl1" [model]="model.userControl1" class="userControl1" tabindex="1"></user-control-tab-control-user-control1>
</wm-tabpage>

TabPage2Example.css

.UserControlTabControl_Form1tabPage2 .Form1tabPage2 {
    left: 4px;
    top: 24px;
    width: 588px;
    height: 293px;
    position: absolute;
}
.UserControlTabControl_Form1tabPage2 wm-usercontrol .userControl1 {
    left: 3px;
    top: 3px;
    width: 588px;
    height: 293px;
    position: absolute;
}

UserControlTreeViewExample.html

<wm-usercontrol [model]="model"><div *ngIf="model && model.Visible" class="UserControlTabControl_UserControl1">
    <div class="UserControl1" [ngStyle]="setMyStyle()" [ngClass]="class" name="UserControl1">
        <wm-panel #panel1 id="panel1" [model]="model.panel1" class="panel1" tabindex="3">
<wm-label #label1 id="label1" [model]="model.label1" class="label1" tabindex="2">This is a UserControl Example</wm-label>
<wm-picturebox #pictureBox1 id="pictureBox1" [model]="model.pictureBox1" class="pictureBox1" tabindex="3">
</wm-picturebox>
</wm-panel>
        <wm-treeview #treeView1 id="treeView1" [model]="model.treeView1" class="treeView1" tabindex="4"></wm-treeview>
    </div>
</div></wm-usercontrol>

UserControlTreeViewExample.css

.UserControlTabControl_UserControl1 .UserControl1 {
    width: 588px;
    height: 293px;
    position: absolute;
}
.UserControlTabControl_UserControl1 .panel1 {
    background-color: #000040;
    left: 0px;
    top: 0px;
    width: 588px;
    height: 54px;
    position: absolute;
}
.UserControlTabControl_UserControl1 .label1 {
    width: auto;
    font-weight: bold;
    font-size: 12pt;
    color: rgba(255, 255, 255, 1);
    left: 182px;
    top: 17px;
    height: auto;
    position: absolute;
    white-space: nowrap;
    overflow: hidden;
}
.UserControlTabControl_UserControl1 .pictureBox1 {
    left: 0px;
    top: 0px;
    width: 54px;
    height: 54px;
    position: absolute;
}
.UserControlTabControl_UserControl1 .treeView1 {
    left: 0px;
    top: 54px;
    width: 588px;
    height: 239px;
    position: absolute;
}

.k-treeview .k-in.k-state-selected{
    background-color: var(--primary-color-demos);
}