Freigeben über

Exemplarische Vorgehensweise: Formatieren von WPF-Inhalt

  • Artikel

In dieser exemplarischen Vorgehensweise wird veranschaulicht, wie Sie ein auf einem Windows Form gehostetes Windows Presentation Foundation (WPF)-Steuerelement formatieren.

Im Verlauf dieser exemplarischen Vorgehensweise führen Sie folgende Aufgaben aus:

  • Erstellen des Projekts

  • Erstellen des WPF-Steuerelementtyps

  • Übernehmen eines Formats für das WPF-Steuerelement

Tipp

Je nach den aktiven Einstellungen oder der Version unterscheiden sich die Dialogfelder und Menübefehle auf Ihrem Bildschirm möglicherweise von den in der Hilfe beschriebenen. Klicken Sie im Menü Extras auf Einstellungen importieren und exportieren, um die Einstellungen zu ändern. Weitere Informationen finden Sie unter Arbeiten mit Einstellungen.

Vorbereitungsmaßnahmen

Zum Durchführen dieser exemplarischen Vorgehensweise benötigen Sie die folgenden Komponenten:

  • Visual Studio 2010.

Erstellen des Projekts

Zunächst muss das Windows Forms-Projekt erstellt werden.

Tipp

Beim Hosten von WPF-Inhalt werden nur C#- und Visual Basic-Projekte unterstützt.

So erstellen Sie das Projekt

Erstellen der WPF-Steuerelementtypen

Nachdem Sie dem Projekt einen WPF-Steuerelementtyp hinzugefügt haben, können Sie ihn in einem ElementHost-Steuerelement hosten.

So erstellen Sie WPF-Steuerelementtypen

  1. Fügen Sie der Projektmappe ein neues WPF-UserControl-Projekt hinzu. Verwenden Sie den Standardnamen UserControl1.xaml für den Steuerelementtyp. Weitere Informationen finden Sie unter Exemplarische Vorgehensweise: Erstellen neuen WPF-Inhalts in Windows Forms zur Entwurfszeit.

  2. Stellen Sie in der Entwurfsansicht sicher, dass UserControl1 ausgewählt ist. Weitere Informationen finden Sie unter Gewusst wie: Auswählen und Verschieben von Elementen auf der Entwurfsoberfläche.

  3. Legen Sie im Eigenschaftenfenster den Wert der Width-Eigenschaft und der Height-Eigenschaft auf 200 fest.

  4. Fügen Sie UserControl ein System.Windows.Controls.Button-Steuerelement hinzu, und legen Sie den Wert der Content-Eigenschaft auf Cancel fest.

  5. Fügen Sie UserControl ein zweites System.Windows.Controls.Button-Steuerelement hinzu, und legen Sie den Wert der Content-Eigenschaft auf OK fest.

  6. Erstellen Sie das Projekt.

Übernehmen eines Formats für ein WPF-Steuerelement

Sie können verschiedene Formate für ein WPF-Steuerelement übernehmen, um sein Erscheinungsbild und Verhalten zu ändern.

So übernehmen Sie ein Format für ein WPF-Steuerelement

  1. Öffnen Sie Form1 im Windows Forms-Designer.

  2. Doppelklicken Sie in der Toolbox auf UserControl1, um eine Instanz von UserControl1 auf dem Formular zu erstellen.

    Eine Instanz von UserControl1 wird in einem neuen ElementHost-Steuerelement mit dem Namen elementHost1 gehostet.

  3. Klicken Sie im Smarttagbereich für elementHost1 in der Dropdownliste auf Gehosteten Inhalt bearbeiten.

    UserControl1 wird in WPF-Designer geöffnet.

  4. Fügen Sie in der XAML-Ansicht nach dem <UserControl>-Starttag den folgenden XAML-Code ein.

    Diese XAML erstellt einen Farbverlauf mit kontrastreicher Farbverlaufsgrenze. Wenn auf das Steuerelement geklickt wird, werden die Farbverläufe geändert, so dass der Eindruck einer aktivierten Schaltfläche entsteht. Weitere Informationen finden Sie unter Erstellen von Formaten und Vorlagen.

    <UserControl.Resources>
        <LinearGradientBrush x:Key="NormalBrush" EndPoint="0,1" StartPoint="0,0">
            <GradientStop Color="#FFF" Offset="0.0"/>
            <GradientStop Color="#CCC" Offset="1.0"/>
        </LinearGradientBrush>
        <LinearGradientBrush x:Key="PressedBrush" EndPoint="0,1" StartPoint="0,0">
            <GradientStop Color="#BBB" Offset="0.0"/>
            <GradientStop Color="#EEE" Offset="0.1"/>
            <GradientStop Color="#EEE" Offset="0.9"/>
            <GradientStop Color="#FFF" Offset="1.0"/>
        </LinearGradientBrush>
        <LinearGradientBrush x:Key="NormalBorderBrush" EndPoint="0,1" StartPoint="0,0">
            <GradientStop Color="#CCC" Offset="0.0"/>
            <GradientStop Color="#444" Offset="1.0"/>
        </LinearGradientBrush>
        <LinearGradientBrush x:Key="BorderBrush" EndPoint="0,1" StartPoint="0,0">
            <GradientStop Color="#CCC" Offset="0.0"/>
            <GradientStop Color="#444" Offset="1.0"/>
        </LinearGradientBrush>
        <LinearGradientBrush x:Key="PressedBorderBrush" EndPoint="0,1" StartPoint="0,0">
            <GradientStop Color="#444" Offset="0.0"/>
            <GradientStop Color="#888" Offset="1.0"/>
        </LinearGradientBrush>
        
        <Style x:Key="SimpleButton" TargetType="{x:Type Button}" BasedOn="{x:Null}">
            <Setter Property="Background" Value="{StaticResource NormalBrush}"/>
            <Setter Property="BorderBrush" Value="{StaticResource NormalBorderBrush}"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type Button}">
                        <Grid x:Name="Grid">
                            <Border x:Name="Border" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Padding="{TemplateBinding Padding}"/>
                            <ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" RecognizesAccessKey="True"/>
                        </Grid>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsPressed" Value="true">
                                <Setter Property="Background" Value="{StaticResource PressedBrush}" TargetName="Border"/>
                                <Setter Property="BorderBrush" Value="{StaticResource PressedBorderBrush}" TargetName="Border"/>
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </UserControl.Resources>

  1. Übernehmen Sie den im vorherigen Schritt definierten SimpleButton-Stil für die Schaltfläche Abbrechen, indem Sie folgendes XAML im <Button>-Tag der Schaltfläche Abbrechen einfügen.

    Style="{StaticResource SimpleButton}

    Die Schaltflächendeklaration sollte folgendem XAML entsprechen.

<Button Height="23" Margin="41,52,98,0" Name="button1" VerticalAlignment="Top"
                Style="{StaticResource SimpleButton}">Cancel</Button>

  1. Erstellen Sie das Projekt.

  2. Öffnen Sie Form1 im Windows Forms-Designer.

  3. Der neue Stil wird auf das Schaltflächensteuerelement angewendet.

  4. Wählen Sie im Menü Debuggen die Option Debugging starten aus, um die Anwendung auszuführen.

  5. Klicken Sie auf die Schaltflächen OK und Abbrechen, und überprüfen Sie die Unterschiede.

Siehe auch

Referenz

ElementHost

WindowsFormsHost

Konzepte

Übersicht über XAML (WPF)

Erstellen von Formaten und Vorlagen

Weitere Ressourcen

Migration und Interoperabilität

Verwenden von WPF-Steuerelementen

WPF-Designer