Procedura dettagliata: Stile contenuto WPF

  • Articolo

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

Prerequisiti

Per completare la procedura dettagliata, è necessario Visual Studio.

Creare il progetto

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

Nota

Con il contenuto WPF sono supportati solo progetti C# e Visual Basic.

Creare i tipi di controllo WPF

Dopo avere aggiunto un tipo di controllo WPF al progetto, è possibile inserirlo in un controllo ElementHost.

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

  2. In visualizzazione Progettazione verificare che UserControl1 sia selezionato.

  3. Nella finestra Proprietà impostare il valore delle Width proprietà e Height su 200.

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

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

  6. Compilare il progetto.

Applicare uno stile a un controllo WPF

È possibile applicare uno stile diverso a un controllo WPF per modificarne l'aspetto e il comportamento.

  1. Aprire Form1 in Progettazione Windows Form.

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

    L'istanza di UserControl1 viene inclusa in un nuovo controllo ElementHost denominato elementHost1.

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

    UserControl1 viene aperto in Wpf Designer.

  4. Nella visualizzazione XAML inserire il seguente codice XAML 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 l'aspetto di un pulsante premuto. Per altre informazioni, vedere Applicazione di stili e modelli.

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

  7. Aprire Form1 in Progettazione Windows Form.

  8. Il nuovo stile viene applicato al pulsante.

  9. Scegliere Avvia debug dal menu Debug per eseguire l'applicazione.

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

Vedi anche