Compartilhar via

Demonstra Passo a passo: Estilo conteúdo WPF

  • Artigo

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

Pré-requisitos

É necessário o 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 Visual C# chamado StylingWpfContent.

Observação

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

Criar os tipos de controle WPF

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

  1. Adicione um novo projeto WPF UserControl à solução. Use o nome padrão do 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 de exibição de Design, verifique se UserControl1 está selecionado.

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

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

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

  6. Compile o projeto.

Aplicar um estilo a um controle WPF

Você pode aplicar um estilo diferente 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 em UserControl1 para criar uma instância de UserControl1 no formulário.

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

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

    UserControl1 abre no WPF Designer.

  4. Na exibição XAML, insira o seguinte XAML após a marca de abertura <UserControl>. Esse XAML cria um gradiente com uma borda gradiente de contraste. Ao clicar no controle, 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 SimpleButton estilo definido na etapa anterior ao botão Cancelar inserindo o seguinte XAML na <Button> marca 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 Depuração, selecione Iniciar Depuração para executar o aplicativo.

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

Confira também