Silverlight Toolkit: Expander per sobre d’un Grid

Un dels problemes més comuns quan estem maquetant webs és que una capa (div) estigui per sobre o per sota d’una altre element de la pàgina en el moment que la fem visible. Per solucionar-ho utilitzem z-index per marcar quin element va per sobre d’un altre.

A Silverlight no tenim aquesta propietat en tots els elements, si que hi és al Canvas. Quan utilitzem el control Expander que hi ha al Silverlight Toolkit el més comú és que la capa que s’obre no es pugui visualitzar correctament tota ja que sobrepassa els límits marcats per les files del Grid.

Per aconseguir que els elements que es visualitzen quan es desplega l’expander estiguin per sobre dels altres elements hem d’utilitzar el control Popup. Capturant els events Collapsed i Expanded del control Expander fem la feina d’obrir i tancar el popup.

<toolkit:Expander Name="expander1" Width="209" Header="Benvingut {0}" Expanded="expander1_Expanded" Collapsed="expander1_Collapsed">
<Popup Name="pop" >

   <StackPanel Width="209" x:Name="LinksStackPanelVertical" Orientation="Vertical" HorizontalAlignment="Right" >
<HyperlinkButton x:Name="perfilLink" Style="{StaticResource LinkStyle}"
NavigateUri="/account/perfil.aspx" TargetName="" Content="Perfil"/>
<HyperlinkButton x:Name="sortirLink" Style="{StaticResource LinkStyle}"
NavigateUri="/account/perfil.aspx" TargetName="" Content="Sortir"/>
</StackPanel>

  </Popup>
</toolkit:Expander>

private void expander1_Expanded(object sender, RoutedEventArgs e)
{
pop.IsOpen = true;
}


private void expander1_Collapsed(object sender, RoutedEventArgs e)
{
pop.IsOpen = false;
}

Anuncis

Deixa un comentari

Fill in your details below or click an icon to log in:

WordPress.com Logo

Esteu comentant fent servir el compte WordPress.com. Log Out / Canvia )

Twitter picture

Esteu comentant fent servir el compte Twitter. Log Out / Canvia )

Facebook photo

Esteu comentant fent servir el compte Facebook. Log Out / Canvia )

Google+ photo

Esteu comentant fent servir el compte Google+. Log Out / Canvia )

Connecting to %s