[RaggiTech]

سنكمل الآن باقي انماط العرض لذا سنقوم بوضع DropDownList على الصفحة ونضع لها العناصر Browse و Design و catalog و Edit
كود

كود :

<asp:DropDownList ID="DropDownList1" runat="server" AutoPostBack="True">
<asp:ListItem>Browse</asp:ListItem>
<asp:ListItem>Design</asp:ListItem>
<asp:ListItem>catalog</asp:ListItem>
<asp:ListItem>Edit</asp:ListItem>
</asp:DropDownList>

[SIZE=3]

بعد ذلك نقوم بتوجية جزء التحكم WebPartManager لإظهار نمط العرض المناسب وفقاً للقيمة المختارة من DropDownList
كود
[/SIZE]

كود :

Protected Sub DropDownList1_SelectedIndexChanged(ByVal sender As Object, ByVal e As System.EventArgs) Handles DropDownList1.SelectedIndexChanged
Select Case DropDownList1.SelectedValue
Case "Browse"
WebPartManager1.DisplayMode = WebPartManager.BrowseDisplayMode
Case "Design"
WebPartManager1.DisplayMode = WebPartManager.DesignDisplayMode
Case "catalog"
WebPartManager1.DisplayMode = WebPartManager.CatalogDisplayMode
Case "Edit"
WebPartManager1.DisplayMode = WebPartManager.EditDisplayMode
Case Else
End Select
End Sub

الى هنا نستطيع اختبار صفحتنا ونلاحظ بان النمط Design يعمل الى جانب نمط Browse ويمكننا نقل أدواتنا ضمن المساحة المتوفرة ل WebPartZone.
لكي نتمكن من عرض النمط catalog نقوم بالاتي
1- نضع CatalogZone في العمود الثالث
2 - نضع بداخله DeclarativeCatalogPart ونقوم بجعله على الهيئة Edit Template
3- نقوم بسحب UserControl ووضعه بداخلة ( أو أي أداة أخرى )
كود

كود :

<asp:CatalogZone ID="CatalogZone1" runat="server">
<ZoneTemplate>
<asp:DeclarativeCatalogPart ID="DeclarativeCatalogPart1" runat="server">
<WebPartsTemplate>
<uc1:Calculator ID="Calculator1" Title="Calculator" runat="server" />


</WebPartsTemplate>
</asp:DeclarativeCatalogPart>
</ZoneTemplate>
</asp:CatalogZone>

نستطيع الآن مشاهدة نمط العرض Catalog وإضافة الأداة التي قمنا بوضعها بداخله الى أي من WebPartZone الموجودة بالصفحة