Condividi tramite

WPF: Altro esempio di Navigation Pane (it-it)

  • Articolo

Introduzione

In questo articolo vedremo un altro esempio di implementazione del Navigation Pane, da includere nelle vostre applicazioni WPF.

Implementazione

Creiamo un nuovo progetto in Visual Studio 2015, ma questa volta in VB.NET.

Lo chiamiamo WpfNavigationPaneNuovo.

Come abbiamo già fatto nel precedente esempio scarichiamo i file binari da http://navigationpane.codeplex.com/downloads/get/603078#

E referenziamo il file NavigationPane.dll che si trova in Release_1.0.4764.30675\Release 1.0\Bin\NavigationPaneDemo da 278 KB.

Creiamo anche o prendiamo dal precedente esempio anche i file folderopen.ico e mail.ico, le mettiamo nella cartella principale e quindi le aggiungiamo al progetto.

A questo punto andiamo a scrivere nello XAML di MainWindow:

<Window

    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

    xmlns:s="http://www.stemasoft.com/xaml" xmlns:System="clr-namespace:System;assembly=mscorlib" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d" x:Class="MainWindow"

    Title="MainWindow" Height="478" Width="673">

  <Window.Background>

  <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">

  <GradientStop Color="#FFDEDEDE" Offset="0"/>

  <GradientStop Color="#FFB1B1B1" Offset="1"/>

   </LinearGradientBrush>

  </Window.Background>

  <DockPanel>

  <s:NavigationPane HorizontalAlignment="Left" x:Name="navigationPane1" Width="203" SelectedIndex="0" LargeItems="1">

  <s:NavigationPaneItem Header="Mailbox" IsSelected="True" Image="mail.ico">

  <s:NavigationPaneItem.Groups>

  <Button Content="dhkdjshkdsj" />

  </s:NavigationPaneItem.Groups>

  <Border BorderThickness="1">

  <Grid >

   <TextBlock HorizontalAlignment="Left" TextWrapping="Wrap" VerticalAlignment="Top" Margin="8,8,0,0" FontWeight="Bold"><Run Language="it-it" Text="Here your contents"/></TextBlock>

  <Button Content="Button me" Margin="8,32.96,0,0" VerticalAlignment="Top" HorizontalAlignment="Left" Width="75"/>

  </Grid>

  </Border>

  </s:NavigationPaneItem>

  <s:NavigationPaneItem Header="Folders" Image="folderopen.ico" >

   <Grid >

  <Ellipse Stroke="Black">

  <Ellipse.Fill>

  <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">

  <GradientStop Color="#FFC6C3C3" Offset="0"/>

  <GradientStop Color="#FFD28585" Offset="1"/>

  </LinearGradientBrush>

  </Ellipse.Fill>

  </Ellipse>

  </Grid>

  </s:NavigationPaneItem>

  </s:NavigationPane>

  <s:NavigationPaneExpander Orientation="Right" DockPanel.Dock="Right" Width="137" HorizontalAlignment="Right" Header="Expander Title">

  <Grid>

  <TextBlock TextWrapping="Wrap" RenderTransformOrigin="0.5,0.5" FontSize="13.333" FontWeight="Bold" d:LayoutOverrides="Width" VerticalAlignment="Center" HorizontalAlignment="Center">

  <TextBlock.RenderTransform>

  <TransformGroup>

  <ScaleTransform/>

  <SkewTransform/>

  <RotateTransform Angle="-26.025"/>

  <TranslateTransform/>

  </TransformGroup>

   </TextBlock.RenderTransform><Run Language="it-it" Text="Expander Contents"/></TextBlock>

  </Grid>

  </s:NavigationPaneExpander>

  <Border BorderBrush="#FFA9B2B4" BorderThickness="1" Margin="4" Background="White">

   <Border.Effect>

  <DropShadowEffect ShadowDepth="0" Opacity="0.4" BlurRadius="3"/>

  </Border.Effect>

  </Border>

  </DockPanel>

</Window>

Il code-behind lo lasciamo così com’è.

Lanciamo l’applicazione ed ecco il risultato:

Le personalizzazioni le possiamo fare sempre dal MainWindow.

Conclusioni

Abbiamo visto un altro modo, stavolta semplice, per implementare nelle nostre applicazioni WPF un Navigation Pane.