Verzeichnis Auswahl Dialog (FolderBrowserDialog) in WPF mit Ookii.Dialogs

Dieser Artikel beschreibt, wie in Microsoft WPF ein FileSelectionDialog im "Vista Style" benutzt wird. Es wird die eine Quelloffene Bibliothe Ookii.Dialogs benutzt. Die Anleitugn erfolgt für VisualStudio Community 2015.

Schritt 1: neues Projekt mit dem Namen FolderBrowserBsp anlegen. (siehe hierzu das Hello World Beispiel)

Schritt 2: Ookii.Dialogs mit NuGet installieren

• im Projektmappen Explorer Rechtsklick auf Verweise 
• im Kontext Menü auf 'NuGet Pakete verwalten...' 
• im geöffneten NuGet Tab Durchsuchen auswählen 
• ookii.dialogs im Suchfeld eingeben und mit [Enter] bestätigen 
• Ookii.Dialogs auswählen (!Achtung nicht Okii.Dialogs.WindowsForms!)
• mit dem Button Installieren und anschließendem Bestätigen des Dialogs wird die Bibliothek installiert 

Schritt 3: XAML Code anpassen

<Window x:Class="FolderBrowserBsp.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:FolderBrowserBsp"
        mc:Ignorable="d"
        Title="MainWindow" Height="100" Width="450">
    <Canvas>
        <Button Canvas.Top="10"  Canvas.Left="10" x:Name="Btn2" Click="ButtonClick" Content="Verz. auswählen"/>
        <TextBlock Canvas.Top="40" Canvas.Left="10" Name="pfadTextBox">...</TextBlock>
    </Canvas>
</Window>

Die Höhe und Breite des Fensters wurde für Screenshots für diesn Blog angepasst. Der restliche XAML Code im Canvas zeichnet ein Button der den Dialog aufruft und ein Textfeld in das der ausgelesene Pfad geschrieben wird.

Schritt 4: C# Code anpassen

using Ookii.Dialogs.Wpf;
using System.Windows;

namespace FolderBrowserBsp
{
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
        }

        private void ButtonClick(object sender, RoutedEventArgs e)
        {
            VistaFolderBrowserDialog dlg = new VistaFolderBrowserDialog();
            dlg.SelectedPath = @"C:\";
            dlg.ShowNewFolderButton = true;
            bool? ret = dlg.ShowDialog();

            if (ret.Equals(true))
            {
                pfadTextBox.Text = dlg.SelectedPath;
            }
        }
    }
}

Die Methode ButtonClick enthält den Code, der den Dialog aufruft und den Pfad anschließend in die Textbox schribt.

Ergebnis: Das unten gezeigte Bild zeigt den VistaFolderBrowserDialog  und die Beispielanwendung nach der Auswahl des Windwos/System32 Verzeichnisses.

Menüs in Microsoft WPF anlegen

Ziel: In diesem Artikel wird gezeigt wie ein einfaches Menü mit WPF erzeugt wird.

Schritt 1: Erzeuge ein neues WPF Projekt mit dem Namen WpfMenue1 mit einem leeren Fenster (siehe Hello world Beispiel).

Schritt 2: In der Datei MainWindow.xaml ergänze folgende Zeile XML Code:

<Window x:Class="WpfMenue1.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:WpfMenue1"
        mc:Ignorable="d"
        Title="MainWindow" Height="350" Width="525">
    <Canvas>
        <Menu Canvas.Top="0">
            <MenuItem Header="_Datei">
                <MenuItem Header="Sage '_Hallo'" Click="SageHallo"/>
                <MenuItem Header="Sage '_Welt!'" Click="SageWelt"/>
                <Separator />
                <MenuItem Header="Zurücksetzen" Click="Zuruecksetzen"/>
            </MenuItem>
        </Menu>
        <TextBox Name="MeinText" Canvas.Top="50" Canvas.Left="50">
           hier steht noch nichts
        </TextBox>
    </Canvas>
</Window>

In diesen XAML Code wird ein Menü mit drei Menüpunkten und einer Textbox erzeugt. Durch das Menü kann mit Hilfe von Tastenkürzeln navigiert werden, z.B. [Alt]+[D] und anschließend [Alt]+[H] um den Menüpunkt Hallo auszuwählen. 

Schritt 3: C# Code in der Datei MainWindow.xaml.cs anpassen: 

Tip: Mit Visual Studio (VS) können die Methodensignaturen automatisiert angelgt werden. Dazu muss der Wert in der Click Eigenschaft eines MenuItem ausgewählt werden und F12 gedrück werden. VS springt in den C# Code und legt eine Methode mit dem Namen der Eigenschaft an. 

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;

namespace WpfMenue1
{
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
        }

        private void SageHallo(object sender, RoutedEventArgs e)
        {
            MeinText.Text = "Hallo ...";
        }

        private void SageWelt(object sender, RoutedEventArgs e)
        {
            MeinText.Text = "... Welt!";
        }

        private void Zuruecksetzen(object sender, RoutedEventArgs e)
        {
            MeinText.Text = "leer";
        }
    }
} 

Der Code wird um drei Methoden ergänzt. Eine Methode für den jeweiligen Menüpunkt. Über die Click Eigenschaft der jeweiligen Menüpunkte wird festgelegt welche Methode aufgerufen wird. 

Ergebnis: Die recht unspektakuläre Applikation sieht wie Folgt aus. 

Microsoft WPF Canvas Beispiel

Ziel: Dieses Beispiel zeigt wie ein Canvas Element in WPF benutzt wird. Canvads ist ein Layout Container bei dem die Elemente an einer definierten Position angeordnet werden.

Schritt 1: Ein Projekt mit dem Namen "CanvasBsp" erzeugen. (siehe Hello World)

Schritt 2: Im XAML Code das Grid durch Canvas ersetzen. Um die Ausgabe in diesem Blogeintrag etwas einfach zu gestalten wird auch die Height und Width eigenschaft des Fensters auf 300 gesetzt.

<Window x:Class="CanvasBsp.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:CanvasBsp"
        mc:Ignorable="d"
        Title="MainWindow" Height="300" Width="300">
    <!-- <Grid> -->
    <Canvas>
    </Canvas>
    <!-- </Grid> -->
</Window>

Schritt 3: Hintergrundfarbe des Canvas ändern und einige TextBlock Elemente mit expilziter Position hinzufügen.

<Canvas Background="Blue">
  <TextBlock Canvas.Left="10" Canvas.Top="10" >Canvas.Left=10 <LineBreak /> Canvas.Top=10</TextBlock>
  <TextBlock Canvas.Right="10" Canvas.Top="10" >Canvas.Right=10 <LineBreak /> Canvas.Top=10</TextBlock>
   <TextBlock Canvas.Left="10" Canvas.Bottom="10" >Canvas.Left=10 <LineBreak /> Canvas.Bottom=10</TextBlock>
   <TextBlock Canvas.Right="10" Canvas.Bottom="10" >Canvas.Right=10 <LineBreak /> Canvas.Bottom=10</TextBlock>
</Canvas>

Ergebnis: Beim vergößern/verkleinern des Fensters wird die ralative Positionsangabe deutlich. Die Textblöcke bleiben immer in den jeweiligen Ecken.

Ein einfaches "Hello World" mit Microsoft WPF

Ziel: Eine erste Applikation mit WPF (Windows Presentation Foundation). Ausgabe von "Hello World!"

Voraussetzungen: VisualStudio Community 2017

Schritt 1: "Neuese Projekt erstellen ..."

 Schritt 2: WPF Projekt auswählen und den Projektnamen "HelloWorld" vergeben. 

Schritt 3: Einen Button und eine Textbox in das leere MainWindow ziehen. Falls die Toolbox nicht eingeblendet ist kan sie mit einem Klick eingeblendet werden.

Schritt 4: 
Beim ziehen des Buttons und der TextBox fügt VisualStudio XAML Definitionen automatisch hinzu. Bei dem Button müssen das Click Event ergänzt werden.

<Window x:Class="HelloWorld.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:HelloWorld"
        mc:Ignorable="d"
        Title="MainWindow" Height="350" Width="525">
    <Grid>
        <Button x:Name="button" Content="Button" HorizontalAlignment="Left" Margin="221,219,0,0" VerticalAlignment="Top" Width="75" Click="ClickButton"/>
        <TextBox x:Name="textBox" HorizontalAlignment="Left" Height="23" Margin="221,135,0,0" TextWrapping="Wrap" Text="TextBox" VerticalAlignment="Top" Width="120"/>

    </Grid>
</Window>

Schritt 5: Ist das Click Event im Editor ausgewählt gelangt man mit der F12 Taste (Gehe zur Definition im Kontextmenü) direkt zur Methode ClickButton der partialen Klasse MainWindow. 

Schritt 6: In der Methode ClickButton per Code den Text ändern. 

private void ClickButton(object sender, RoutedEventArgs e)
{
   textBox.Text = "Hello World!";
} 

Die Klasse sollte anschließend wie folgt aussehen: 

Schritt 7: Applikation ausführen

Ergebnis: Beim klicken auf den Button ändert sich der Text in der Textbox in "Hello World!"