Freigeben über

Exemplarische Vorgehensweise: Formatieren von WPF-Inhalt

  • Artikel

In diesem Artikel wird veranschaulicht, wie eine Formatvorlage auf ein WPF-Steuerelement (Windows Presentation Foundation) angewendet wird, das in einem Windows Form-Objekt gehostet wird.

Voraussetzungen

Sie benötigen Visual Studio, um diese Anleitung abzuschließen.

Erstellen Sie das Projekt

Öffnen Sie Visual Studio, und erstellen Sie ein neues Windows Forms Application-Projekt in Visual Basic oder Visual C# mit dem Namen StylingWpfContent.

Anmerkung

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

Erstellen Sie die WPF-Steuerelementtypen

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

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

  2. Stellen Sie in der Entwurfsansicht sicher, dass UserControl1 ausgewählt ist.

  3. Legen Sie im Fenster Eigenschaften den Wert der eigenschaften Width und Height auf 200fest.

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

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

  6. Kompilieren Sie das Projekt.

Anwenden einer Formatvorlage auf ein WPF-Steuerelement

Sie können unterschiedliche Formatierungen auf ein WPF-Steuerelement anwenden, um das Aussehen und Verhalten zu ändern.

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

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

    Eine Instanz von UserControl1 wird in einem neuen ElementHost-Steuerelement namens elementHost1 gehostet.

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

    UserControl1 wird im WPF-Designer geöffnet.

  4. Fügen Sie den folgenden XAML-Code in der XAML-Ansicht hinter dem <UserControl>-Starttag ein. Dieser XAML-Code erstellt einen Farbverlauf mit kontrastreichem Farbverlaufsrand. Wenn das Steuerelement angeklickt wird, werden die Farbverläufe geändert, um den Eindruck einer gedrückten Schaltfläche zu generieren. 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>

  5. Wenden Sie die im vorherigen Schritt definierte SimpleButton-Formatvorlage auf die „Cancel“-Schaltfläche an, indem Sie den folgenden XAML-Code im <Button>-Tag der Cancel-Schaltfläche einfügen.

    Style="{StaticResource SimpleButton}

    Ihre Schaltflächendeklaration wird in etwa so aussehen wie das folgende XAML:

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

  6. Kompilieren Sie das Projekt.

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

  8. Die neue Formatvorlage wird auf das Schaltflächensteuerelement angewendet.

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

  10. Klicken Sie auf die Schaltflächen OK und Cancel (Abbrechen), und beobachten Sie die Unterschiede.

Weitere Informationen