A megvalósítás első lépéseként telepítenünk kell a Microsoft web oldaláról ingyenesen letölthető WebControls csomagot. Ennek részleteit a TreeView kontrollal foglalkozó, alább hivatkozott cikkünkben bemutattuk.
Mivel most két különálló kontrollal van dolgunk, így nem szükségszerű, hogy együtt használjuk azokat. Nyilván ezt az adott feladat fogja majd eldönteni. Ha mégis együtt alkalmazzuk e kettőt, akkor könnyedén felépíthető velük egy TabControl-hoz hasonló vezérlő, mely persze most egy web lapon működik.
Kezdjük a MultiPage kontrollal. Miután feltettünk egyet a web lapra, váltsuk át HTML nézetre. Itt adhatjuk meg, hogy hány lapja legyen és azon milyen elemek szerepeljenek. Itt ekkor ezt láthatjuk:
<iewc:MultiPage id="MultiPage1" runat="server" style="Z-INDEX: 102; LEFT: 39px; POSITION: absolute; TOP: 60px" Width="326px">
</iewc:MultiPage>
A lapok megadásához <iewc:pageview> címkéket kell beillesztenünk. Ahány lapot szeretnénk, annyi ilyen címkét kell elhelyeznünk. A címkék között adhatjuk meg, hogy az adott lapon milyen HTML objektumok szerepeljenek.
<iewc:MultiPage id="MultiPage1" runat="server" style="Z-INDEX: 102; LEFT: 39px; POSITION: absolute; TOP: 60px" Width="326px">
<iewc:pageview>
<div class="border">
Első oldal
</div>
</iewc:pageview>
<iewc:pageview>
<div class="border">
Második oldal
</div>
</iewc:pageview>
<iewc:pageview>
<div class="border">
Harmadik oldal
</div>
</iewc:pageview>
</iewc:MultiPage>
Hogy alkalmazásunk futásakor a lapozást könnyen meg tudjuk oldani, elhelyezünk most egy TabStrip kontrolt a MultiPage kontrol fölé, ugyanolyan szélességben.
Ennek Items property-jén keresztül tudjuk felvenni az elemeit. Mivel az előbb három lapot hoztunk létre a MultiPage kontrolnál, így itt is három olyan elemet veszünk fel, mellyel a lapozást majd el tudjuk végezni. Az elemek közé felvehetünk elválasztó elemeket is (Add - Tab separator). Az egyes elemek Text property-jénél állíthatjuk be, hogy mi legyen annak felirata.
Amikor a felhasználó ezekre kattint, akkor jön létre a SelectedIndexChange eseménye a TabStrip-nek. Ekkor kell a MultiPage kontrolt is lapoznunk a megfelelő oldalra a helyes működés érdekében.
private void TabStrip1_SelectedIndexChange(object sender, System.EventArgs e)
{
MultiPage1.SelectedIndex=TabStrip1.SelectedIndex;
}
Ezzel a két kontrolt összekötöttük, úgy működik, mint a Windows-os TabControl.