Compartilhar via

Passo a passo: Estilizando conteúdo do WPF

  • Artigo

Este artigo mostra como aplicar estilo a um controle WPF (Windows Presentation Foundation) hospedado em um Formulário do Windows.

Pré-requisitos

Você precisa do Visual Studio para concluir este passo a passo.

Criar o projeto

Abra o Visual Studio e crie um novo projeto de Aplicativo do Windows Forms no Visual Basic ou no Visual C# chamado StylingWpfContent.

Nota

Ao hospedar conteúdo do WPF, há suporte apenas para projetos C# e Visual Basic.

Criar os tipos de controle do WPF

Depois de adicionar um tipo de controle WPF ao projeto, você pode hospedá-lo em um controle ElementHost.

  1. Adicione um novo projeto de UserControl do WPF à solução. Use o nome padrão para o tipo de controle, UserControl1.xaml. Para obter mais informações, consulte Instruções passo a passo: como criar novo conteúdo WPF nos Windows Forms em tempo de design.

  2. No modo Design, verifique se UserControl1 está selecionado.

  3. Na janela de Propriedades , defina o valor das propriedades Width e Height para 200.

  4. Adicione um controle System.Windows.Controls.Button ao UserControl e defina o valor da propriedade Content para Cancelar.

  5. Adicione um segundo controle System.Windows.Controls.Button ao UserControl e defina o valor da propriedade Content para OK.

  6. Compile o projeto.

Aplicar um estilo a um controle WPF

Você pode aplicar estilos diferentes a um controle WPF para alterar sua aparência e comportamento.

  1. Abra Form1 no Designer de Formulários do Windows.

  2. Na caixa de ferramentas , clique duas vezes UserControl1 para criar uma instância de UserControl1 no formulário.

    Uma instância de UserControl1 é hospedada em um novo controle de ElementHost chamado elementHost1.

  3. No painel de smart tag para elementHost1, clique em Editar conteúdo hospedado na lista suspensa.

    O UserControl1 é aberto no Designer do WPF.

  4. Na exibição XAML, insira o XAML a seguir após a marca de abertura <UserControl>. Esse XAML cria um gradiente com uma borda de gradiente contrastante. Quando o controle é clicado, os gradientes são alterados para gerar uma aparência de botão pressionado. Para obter mais informações, consulte Estilo e modelagem.

    <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. Aplique o estilo de SimpleButton definido na etapa anterior ao botão Cancelar inserindo o XAML a seguir na marca <Button> do botão Cancelar.

    Style="{StaticResource SimpleButton}

    Sua declaração de botão será semelhante ao seguinte XAML:

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

  6. Compile o projeto.

  7. Abra Form1 no Designer de Formulários do Windows.

  8. O novo estilo é aplicado ao controle de botão.

  9. No menu Depurar, selecione Iniciar Depuração para executar o aplicativo.

  10. Clique nos botões OK e Cancelar e veja as diferenças.

Consulte também