In realtà esistono semplici meccanismi che permettono di ottenere lo stesso risultato.

Una delle tecniche è quella di utilizzare un template per stilare una BaseWindow o un BaseControl:

Supponiamo di avere una BaseView (Window) base dalla quale facciamo derivare tutte le finestre della nostra applicazione:

Definiremo una classe BaseView che eredita da Window e avrà tutti i metodi/propriertà necessarie:

public class BaseView : Window

{

// …

}

Questa è solo una classe e non ha parte visuale.

La parte “visuale” la disegno con Expression Blend come stile della BaseView e vado a ridefinire il ControlTemplate mettendo al suo interno tutti i controlli che voglio vedere in tutte le finestre che ereditano:

<Style TargetType=”{x:Type Common:BaseView}”>

<Setter Property=”Template”>

<Setter.Value>

<ControlTemplate TargetType=”{x:Type Common:BaseView}”>

<StacckPanel>

<!– Altri controlli: toolbar? –>

<ContentPresenter/>

<!– Altri controlli: footer? –>

</StackPanel>

</ControlTemplate>

</Setter.Value>

</Setter>

</Style>

Questo stile viene poi applicato a tutte i controlli di tipo BaseView che avranno quindi tutti un aspetto comune.

Quindi per sfruttare il template è sufficiente che le finestre dell’applicazione ereditino da BaseView:

<MyApplication:BaseView>

….

</MyApplication:BaseView>

<ul id="tutorials"> 

<li id="1">ASP.NET</li> 

<li id="3">ASP.NET 3.5</li> 

<li id="4">ASP.NET 4.0</li> 

<li id="99">Silverlight</li> 

<li id="15">Entity Framework</li> 

</ul>

Probabilmente l’ordinamento scelto dall’utente dovrà poi essere gestito lato server dalla nostra applicazione. Purtroppo, però, l’elenco puntato non viene inviato in post dal browser e pertanto diventa necessario prevedere un campo hidden in cui salvare questa informazione (nell’esempio allegato è un campo di tipo text affinché sia possibile vedere come varia al variare dell’ordinamento).
L’ID associato agli elementi è in questo caso l’ID dell’elemento all’interno del database, ma è possibile adottare tecniche alternative, l’importante è poi avere una strategia unica per salvare la posizione corrispondente nel database.

A questo punto è sufficiente scrivere un piccolo pezzo di codice che attivi l’ordinamento:

<scriptcolor: darkred;" lang="EN-GB">text/javascript"><!-- 

var setSelector = "#tutorials"; 

$(function() { 

  $(setSelector).sortable({ 

    axis: "y", 

    cursor: "move", 

    update: function() { getOrder(); } 

  }); 

  getOrder(); 

}); 

function getOrder() {

  $('#order').val($(setSelector).sortable("toArray"));

}

//--></script>

La funzione getOrder si occupa di salvare l’ordine corrente all’interno di un campo nascosto: a questo punto per inviare il valore direttamente al server è sufficiente inserire un pulsante di submit della form.
Questa tecnica è facilmente implementabile con ASP.NET grazie all’uso del controllo Repeater, che consente di produrre un markup con dati prelavati da database, sostituendo solo l’ID dove serve:

<asp:Repeater id="TutorialList" runat="server">

  <HeaderTemplate>

    <ul id="tutorials">

  </HeaderTemplate>

  <ItemTemplate>

     <li id="<%#Eval("ID")%>"><%#Eval("TutorialName")</li>

   </ItemTemplate>

  <FooterTemplate>

    <ul id="tutorials">

  </FooterTemplate>

</asp:Repeater>