Condividi tramite

Guida per stilizzare il contenuto WPF

  • Articolo

Questo articolo illustra come applicare stili a un controllo Windows Presentation Foundation (WPF) ospitato in un Windows Form.

Prerequisiti

Per completare questa procedura dettagliata, è necessario Visual Studio.

Creare il progetto

Aprire Visual Studio e creare un nuovo progetto di applicazione Windows Form in Visual Basic o Visual C# denominato StylingWpfContent.

Nota

Quando si ospita contenuto WPF, sono supportati solo i progetti C# e Visual Basic.

Creare i tipi di controllo WPF

Dopo aver aggiunto un tipo di controllo WPF al progetto, è possibile ospitarlo in un controllo ElementHost.

  1. Aggiungere un nuovo progetto UserControl WPF alla soluzione. Usare il nome predefinito per il tipo di controllo UserControl1.xaml. Per ulteriori informazioni, vedere Procedura dettagliata: Creazione di nuovo contenuto WPF su Windows Forms in fase di progettazione.

  2. In Visualizzazione struttura, assicurarsi che sia selezionato UserControl1.

  3. Nella finestra Proprietà, impostare i valori delle proprietà Width e Height a 200.

  4. Aggiungere un controllo System.Windows.Controls.Button al UserControl e impostare il valore della proprietà Content su Cancel.

  5. Aggiungere un secondo controllo System.Windows.Controls.Button al UserControl e impostare il valore della proprietà Content su OK.

  6. Costruire il progetto.

Applicare uno stile a un controllo WPF

È possibile applicare stili diversi a un controllo WPF per modificarne l'aspetto e il comportamento.

  1. Apri Form1 nel Designer di Windows Form.

  2. Nella casella degli strumenti fare doppio clic su UserControl1 per creare un'istanza di UserControl1 nel modulo.

    Un'istanza di UserControl1 è ospitata in un nuovo controllo ElementHost denominato elementHost1.

  3. Nel pannello smart tag per elementHost1fare clic su Modifica contenuto ospitato dall'elenco a discesa.

    UserControl1 si apre nel WPF Designer.

  4. Nella visualizzazione XAML inserire il codice XAML seguente dopo il tag di apertura <UserControl>. Questo codice XAML crea una sfumatura con un bordo sfumato a contrasto. Quando si fa clic sul controllo, le sfumature vengono modificate per generare un'apparenza di pulsante pressato. Per ulteriori informazioni, vedere Styling e Templating.

    <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. Applicare lo stile SimpleButton definito nel passaggio precedente al pulsante Annulla inserendo il codice XAML seguente nel tag <Button> del pulsante Annulla.

    Style="{StaticResource SimpleButton}

    La dichiarazione del pulsante sarà simile al codice XAML seguente:

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

  6. Costruire il progetto.

  7. Apri Form1 in Progettazione di Windows Forms.

  8. Il nuovo stile viene applicato al controllo pulsante.

  9. Dal menu Debug selezionare Avvia Debugging per eseguire l'applicazione.

  10. Fare clic sui pulsanti OK e Annulla e visualizzare le differenze.

Vedere anche