Estilos e modelos no WPFStyles and templates in WPF

O estilo e a modelagem do Windows Presentation Foundation (WPF) referem-se a um conjunto de recursos que permitem que desenvolvedores e designers criem efeitos visualmente atraentes e uma aparência consistente para seus produtos.Windows Presentation Foundation (WPF) styling and templating refer to a suite of features that let developers and designers create visually compelling effects and a consistent appearance for their product. Ao personalizar a aparência de um aplicativo, você deseja um modelo forte de estilo e modelagem que permite a manutenção e o compartilhamento da aparência dentro e entre os aplicativos.When customizing the appearance of an app, you want a strong styling and templating model that enables maintenance and sharing of appearance within and among apps. O WPF fornece esse modelo.WPF provides that model.

Outro recurso do modelo de estilo do WPF é a separação da apresentação e da lógica.Another feature of the WPF styling model is the separation of presentation and logic. Os designers podem trabalhar na aparência de um aplicativo usando apenas XAML ao mesmo tempo que os desenvolvedores trabalham na lógica de programação usando C# ou Visual Basic.Designers can work on the appearance of an app by using only XAML at the same time that developers work on the programming logic by using C# or Visual Basic.

Esta visão geral concentra-se nos aspectos de estilo e modelagem do aplicativo e não aborda nenhum dos conceitos de ligação de dados.This overview focuses on the styling and templating aspects of the app and doesn't discuss any data-binding concepts. Para obter informações sobre associação de dados, consulte Visão geral de vinculação de dados.For information about data binding, see Data Binding Overview.

É importante entender os recursos, que são o que permite que os estilos e modelos sejam reutilizados.It's important to understand resources, which are what enable styles and templates to be reused. Para obter mais informações sobre recursos, consulte Recursos de XAML.For more information about resources, see XAML Resources.

Importante

A documentação do guia da área de trabalho está em construção.The Desktop Guide documentation is under construction.

AmostraSample

O código de exemplo fornecido nesta visão geral é baseado em um aplicativo simples de navegação de fotos mostrado na ilustração a seguir.The sample code provided in this overview is based on a simple photo browsing application shown in the following illustration.

ListView com estiloStyled ListView

Essa amostra de foto simples usa estilo e modelagem para criar uma experiência de usuário visualmente atraente.This simple photo sample uses styling and templating to create a visually compelling user experience. O exemplo tem dois TextBlock elementos e um ListBox controle que está associado a uma lista de imagens.The sample has two TextBlock elements and a ListBox control that is bound to a list of images.

Para ver a amostra completa, consulte Introdução à amostra de estilo e modelagem.For the complete sample, see Introduction to Styling and Templating Sample.

EstilosStyles

Você pode considerar um Style como uma maneira conveniente de aplicar um conjunto de valores de propriedade a vários elementos.You can think of a Style as a convenient way to apply a set of property values to multiple elements. Você pode usar um estilo em qualquer elemento que derive de FrameworkElement ou FrameworkContentElement como um Window ou um Button.You can use a style on any element that derives from FrameworkElement or FrameworkContentElement such as a Window or a Button.

A maneira mais comum de declarar um estilo é como um recurso na Resources seção em um arquivo XAML.The most common way to declare a style is as a resource in the Resources section in a XAML file. Como os estilos são recursos, eles obedecem as mesmas regras de escopo que se aplicam a todos os recursos.Because styles are resources, they obey the same scoping rules that apply to all resources. Coloque simplesmente, em que você declara um estilo que afeta o local em que o estilo pode ser aplicado.Put simply, where you declare a style affects where the style can be applied. Por exemplo, se você declarar o estilo no elemento raiz do arquivo XAML de definição de aplicativo, o estilo poderá ser usado em qualquer lugar em seu aplicativo.For example, if you declare the style in the root element of your app definition XAML file, the style can be used anywhere in your app.

Por exemplo, o código XAML a seguir declara dois estilos para um TextBlock, um aplicado automaticamente a todos TextBlock os elementos e outro que deve ser explicitamente referenciado.For example, the following XAML code declares two styles for a TextBlock, one automatically applied to all TextBlock elements, and another that must be explicitly referenced.

<Window.Resources>
    <!-- .... other resources .... -->

    <!--A Style that affects all TextBlocks-->
    <Style TargetType="TextBlock">
        <Setter Property="HorizontalAlignment" Value="Center" />
        <Setter Property="FontFamily" Value="Comic Sans MS"/>
        <Setter Property="FontSize" Value="14"/>
    </Style>
    
    <!--A Style that extends the previous TextBlock Style with an x:Key of TitleText-->
    <Style BasedOn="{StaticResource {x:Type TextBlock}}"
           TargetType="TextBlock"
           x:Key="TitleText">
        <Setter Property="FontSize" Value="26"/>
        <Setter Property="Foreground">
            <Setter.Value>
                <LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">
                    <LinearGradientBrush.GradientStops>
                        <GradientStop Offset="0.0" Color="#90DDDD" />
                        <GradientStop Offset="1.0" Color="#5BFFFF" />
                    </LinearGradientBrush.GradientStops>
                </LinearGradientBrush>
            </Setter.Value>
        </Setter>
    </Style>
</Window.Resources>

Aqui está um exemplo dos estilos declarados acima que estão sendo usados.Here is an example of the styles declared above being used.

<StackPanel>
    <TextBlock Style="{StaticResource TitleText}" Name="textblock1">My Pictures</TextBlock>
    <TextBlock>Check out my new pictures!</TextBlock>
</StackPanel>

Bloco de Textcom estilo

Para obter mais informações, consulte criar um estilo para um controle.For more information, see Create a style for a control.

ControlTemplatesControlTemplates

No WPF, o ControlTemplate de um controle define a aparência do controle.In WPF, the ControlTemplate of a control defines the appearance of the control. Você pode alterar a estrutura e a aparência de um controle definindo um novo ControlTemplate e atribuindo-o a um controle.You can change the structure and appearance of a control by defining a new ControlTemplate and assigning it to a control. Em muitos casos, os modelos fornecem flexibilidade suficiente para que você não precise escrever seus próprios controles personalizados.In many cases, templates give you enough flexibility so that you do not have to write your own custom controls.

Cada controle tem um modelo padrão atribuído à propriedade Control. Template .Each control has a default template assigned to the Control.Template property. O modelo conecta a apresentação visual do controle com os recursos do controle.The template connects the visual presentation of the control with the control's capabilities. Como você define um modelo em XAML, você pode alterar a aparência do controle sem escrever nenhum código.Because you define a template in XAML, you can change the control's appearance without writing any code. Cada modelo é projetado para um controle específico, como um Button.Each template is designed for a specific control, such as a Button.

Normalmente, você declara um modelo como um recurso na Resources seção de um arquivo XAML.Commonly you declare a template as a resource on the Resources section of a XAML file. Assim como acontece com todos os recursos, as regras de escopo se aplicam.As with all resources, scoping rules apply.

Os modelos de controle são muito mais envolvidos do que um estilo.Control templates are a lot more involved than a style. Isso ocorre porque o modelo de controle reescreve a aparência visual do controle inteiro, enquanto um estilo simplesmente aplica alterações de propriedade ao controle existente.This is because the control template rewrites the visual appearance of the entire control, while a style simply applies property changes to the existing control. No entanto, como o modelo de um controle é aplicado definindo a propriedade Control. Template , você pode usar um estilo para definir ou definir um modelo.However, since the template of a control is applied by setting the Control.Template property, you can use a style to define or set a template.

Os designers geralmente permitem que você crie uma cópia de um modelo existente e modifique-o.Designers generally allow you to create a copy of an existing template and modify it. Por exemplo, no designer do WPF do Visual Studio, selecione CheckBox um controle e clique com o botão direito do mouse e selecione Editar modelo > criar uma cópia.For example, in the Visual Studio WPF designer, select a CheckBox control, and then right-click and select Edit template > Create a copy. Esse comando gera um estilo que define um modelo.This command generates a style that defines a template.

<Style x:Key="CheckBoxStyle1" TargetType="{x:Type CheckBox}">
    <Setter Property="FocusVisualStyle" Value="{StaticResource FocusVisual1}"/>
    <Setter Property="Background" Value="{StaticResource OptionMark.Static.Background1}"/>
    <Setter Property="BorderBrush" Value="{StaticResource OptionMark.Static.Border1}"/>
    <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>
    <Setter Property="BorderThickness" Value="1"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type CheckBox}">
                <Grid x:Name="templateRoot" Background="Transparent" SnapsToDevicePixels="True">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="Auto"/>
                        <ColumnDefinition Width="*"/>
                    </Grid.ColumnDefinitions>
                    <Border x:Name="checkBoxBorder" Background="{TemplateBinding Background}" BorderThickness="{TemplateBinding BorderThickness}" BorderBrush="{TemplateBinding BorderBrush}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="1" VerticalAlignment="{TemplateBinding VerticalContentAlignment}">
                        <Grid x:Name="markGrid">
                            <Path x:Name="optionMark" Data="F1 M 9.97498,1.22334L 4.6983,9.09834L 4.52164,9.09834L 0,5.19331L 1.27664,3.52165L 4.255,6.08833L 8.33331,1.52588e-005L 9.97498,1.22334 Z " Fill="{StaticResource OptionMark.Static.Glyph1}" Margin="1" Opacity="0" Stretch="None"/>
                            <Rectangle x:Name="indeterminateMark" Fill="{StaticResource OptionMark.Static.Glyph1}" Margin="2" Opacity="0"/>
                        </Grid>
                    </Border>
                    <ContentPresenter x:Name="contentPresenter" Grid.Column="1" Focusable="False" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                </Grid>
                <ControlTemplate.Triggers>
                    <Trigger Property="HasContent" Value="true">
                        <Setter Property="FocusVisualStyle" Value="{StaticResource OptionMarkFocusVisual1}"/>
                        <Setter Property="Padding" Value="4,-1,0,0"/>

... content removed to save space ...

Editar uma cópia de um modelo é uma ótima maneira de aprender como os modelos funcionam.Editing a copy of a template is a great way to learn how templates work. Em vez de criar um novo modelo em branco, é mais fácil editar uma cópia e alterar alguns aspectos da apresentação visual.Instead of creating a new blank template, it's easier to edit a copy and change a few aspects of the visual presentation.

Para obter um exemplo, consulte criar um modelo para um controle.For an example, see Create a template for a control.

TemplateBindingTemplateBinding

Talvez você tenha notado que o recurso de modelo definido na seção anterior usa a extensão de marcação TemplateBinding.You may have noticed that the template resource defined in the previous section uses the TemplateBinding Markup Extension. Uma TemplateBinding é uma forma otimizada de uma associação para cenários de modelo, análoga a uma associação {Binding RelativeSource={RelativeSource TemplatedParent}}construída com.A TemplateBinding is an optimized form of a binding for template scenarios, analogous to a binding constructed with {Binding RelativeSource={RelativeSource TemplatedParent}}. TemplateBindingé útil para associar partes do modelo a propriedades do controle.TemplateBinding is useful for binding parts of the template to properties of the control. Por exemplo, cada controle tem uma BorderThickness propriedade.For example, each control has a BorderThickness property. Use um TemplateBinding para gerenciar qual elemento no modelo é afetado por essa configuração de controle.Use a TemplateBinding to manage which element in the template is affected by this control setting.

ContentControl e ItemsControlContentControl and ItemsControl

Se um ContentPresenter ControlTemplate for declarado no de ContentControla, o ContentPresenter se associará automaticamente às propriedades ContentTemplate e Content .If a ContentPresenter is declared in the ControlTemplate of a ContentControl, the ContentPresenter will automatically bind to the ContentTemplate and Content properties. Da mesma forma ItemsPresenter , um que está ControlTemplate no de ItemsControl um será automaticamente associado às ItemTemplate propriedades Items e.Likewise, an ItemsPresenter that is in the ControlTemplate of an ItemsControl will automatically bind to the ItemTemplate and Items properties.

DataTemplatesDataTemplates

Neste aplicativo de exemplo, há um ListBox controle associado a uma lista de fotos.In this sample app, there is a ListBox control that is bound to a list of photos.

<ListBox ItemsSource="{Binding Source={StaticResource MyPhotos}}"
         Background="Silver" Width="600" Margin="10" SelectedIndex="0"/>

Atualmente ListBox , isso é semelhante ao seguinte.This ListBox currently looks like the following.

ListBox antes de aplicar o modeloListBox before applying template

A maioria dos controles tem algum tipo de conteúdo, que, frequentemente, vem dos dados aos quais você está se associando.Most controls have some type of content, and that content often comes from data that you are binding to. Neste exemplo, os dados estão na lista de fotos.In this sample, the data is the list of photos. No WPF, você usa um DataTemplate para definir a representação visual dos dados.In WPF, you use a DataTemplate to define the visual representation of data. Basicamente, o que você coloca em DataTemplate um determina a aparência dos dados no aplicativo renderizado.Basically, what you put into a DataTemplate determines what the data looks like in the rendered app.

Em nosso aplicativo de exemplo, cada Photo objeto personalizado tem Source uma propriedade do tipo cadeia de caracteres que especifica o caminho do arquivo da imagem.In our sample app, each custom Photo object has a Source property of type string that specifies the file path of the image. Atualmente, os objetos de fotos aparecem como caminhos de arquivo.Currently, the photo objects appear as file paths.

public class Photo
{
    public Photo(string path)
    {
        Source = path;
    }

    public string Source { get; }

    public override string ToString() => Source;
}
Public Class Photo
    Sub New(ByVal path As String)
        Source = path
    End Sub

    Public ReadOnly Property Source As String

    Public Overrides Function ToString() As String
        Return Source
    End Function
End Class

Para que as fotos apareçam como imagens, você cria DataTemplate um como um recurso.For the photos to appear as images, you create a DataTemplate as a resource.

<Window.Resources>
    <!-- .... other resources .... -->

    <!--DataTemplate to display Photos as images
    instead of text strings of Paths-->
    <DataTemplate DataType="{x:Type local:Photo}">
        <Border Margin="3">
            <Image Source="{Binding Source}"/>
        </Border>
    </DataTemplate>
</Window.Resources>

Observe que a DataType propriedade é semelhante à TargetType Propriedade do. StyleNotice that the DataType property is similar to the TargetType property of the Style. Se o DataTemplate estiver na seção de recursos, quando você especificar a DataType propriedade para um tipo e omitir x:Keyum, DataTemplate o será aplicado sempre que esse tipo for exibido.If your DataTemplate is in the resources section, when you specify the DataType property to a type and omit an x:Key, the DataTemplate is applied whenever that type appears. Você sempre tem a opção de atribuir o DataTemplate com um x:Key e, em seguida, defini StaticResource -lo como um DataTemplate para propriedades que usam tipos ItemTemplate , como a ContentTemplate propriedade ou a propriedade.You always have the option to assign the DataTemplate with an x:Key and then set it as a StaticResource for properties that take DataTemplate types, such as the ItemTemplate property or the ContentTemplate property.

Essencialmente, o DataTemplate no exemplo acima define que sempre que houver um Photo objeto, ele deve aparecer como um Image dentro de um Border.Essentially, the DataTemplate in the above example defines that whenever there is a Photo object, it should appear as an Image within a Border. Com isso DataTemplate, nosso aplicativo agora tem esta aparência.With this DataTemplate, our app now looks like this.

Imagem de fotoPhoto image

O modelo de modelagem de dados fornece outros recursos.The data templating model provides other features. Por exemplo, se você estiver exibindo dados de coleção que contêm outras coleções HeaderedItemsControl usando um tipo como Menu ou TreeView, há o HierarchicalDataTemplate.For example, if you are displaying collection data that contains other collections using a HeaderedItemsControl type such as a Menu or a TreeView, there is the HierarchicalDataTemplate. Outro recurso de modelagem de dados DataTemplateSelectoré o, que permite que você DataTemplate escolha um para usar com base na lógica personalizada.Another data templating feature is the DataTemplateSelector, which allows you to choose a DataTemplate to use based on custom logic. Para obter mais informações, consulte Visão geral de modelagem dos dados, que oferece uma discussão mais detalhada sobre os diferentes recursos de modelagem de dados.For more information, see Data Templating Overview, which provides a more in-depth discussion of the different data templating features.

GatilhosTriggers

Um gatilho define propriedades ou inicia ações, como uma animação, quando um valor da propriedade for alterado ou quando um evento for gerado.A trigger sets properties or starts actions, such as an animation, when a property value changes or when an event is raised. Style, ControlTemplatee DataTemplate All têm uma Triggers propriedade que pode conter um conjunto de gatilhos.Style, ControlTemplate, and DataTemplate all have a Triggers property that can contain a set of triggers. Há vários tipos de gatilhos.There are several types of triggers.

PropertyTriggersPropertyTriggers

Um Trigger que define valores de propriedade ou inicia ações com base no valor de uma propriedade é chamado de gatilho de propriedade.A Trigger that sets property values or starts actions based on the value of a property is called a property trigger.

Para demonstrar como usar gatilhos de propriedade, você pode fazer ListBoxItem cada um parcialmente transparente, a menos que esteja selecionado.To demonstrate how to use property triggers, you can make each ListBoxItem partially transparent unless it is selected. O estilo a seguir define Opacity o valor de ListBoxItem a 0.5para.The following style sets the Opacity value of a ListBoxItem to 0.5. No entanto IsSelected , true Opacity quando a propriedade é definida como 1.0.When the IsSelected property is true, however, the Opacity is set to 1.0.

<Window.Resources>
    <!-- .... other resources .... -->

    <Style TargetType="ListBoxItem">
        <Setter Property="Opacity" Value="0.5" />
        <Setter Property="MaxHeight" Value="75" />
        <Style.Triggers>
            <Trigger Property="IsSelected" Value="True">
                <Trigger.Setters>
                    <Setter Property="Opacity" Value="1.0" />
                </Trigger.Setters>
            </Trigger>
        </Style.Triggers>
    </Style>
</Window.Resources>

Este exemplo usa um Trigger para definir um valor de propriedade, mas observe que Trigger a classe também tem EnterActions as ExitActions Propriedades e que permitem que um gatilho execute ações.This example uses a Trigger to set a property value, but note that the Trigger class also has the EnterActions and ExitActions properties that enable a trigger to perform actions.

Observe que a MaxHeight propriedade de ListBoxItem é definida como 75.Notice that the MaxHeight property of the ListBoxItem is set to 75. Na ilustração a seguir, o terceiro item é o item selecionado.In the following illustration, the third item is the selected item.

ListView com estiloStyled ListView

EventTriggers e storyboardsEventTriggers and Storyboards

Outro tipo de gatilho é o EventTrigger, que inicia um conjunto de ações com base na ocorrência de um evento.Another type of trigger is the EventTrigger, which starts a set of actions based on the occurrence of an event. Por exemplo, os objetos EventTrigger a seguir especificam que quando o ponteiro do ListBoxItemmouse entra MaxHeight no, a propriedade é animada para 90 um valor 0.2 de um segundo período.For example, the following EventTrigger objects specify that when the mouse pointer enters the ListBoxItem, the MaxHeight property animates to a value of 90 over a 0.2 second period. Quando o mouse se afasta do item, a propriedade retorna para o valor original durante um período de 1 segundos.When the mouse moves away from the item, the property returns to the original value over a period of 1 second. Observe como não é necessário especificar um To valor para a MouseLeave animação.Note how it is not necessary to specify a To value for the MouseLeave animation. Isso ocorre porque a animação é capaz de controlar o valor original.This is because the animation is able to keep track of the original value.

<Style.Triggers>
    <Trigger Property="IsSelected" Value="True">
        <Trigger.Setters>
            <Setter Property="Opacity" Value="1.0" />
        </Trigger.Setters>
    </Trigger>
    <EventTrigger RoutedEvent="Mouse.MouseEnter">
        <EventTrigger.Actions>
            <BeginStoryboard>
                <Storyboard>
                    <DoubleAnimation
                        Duration="0:0:0.2"
                        Storyboard.TargetProperty="MaxHeight"
                        To="90"  />
                </Storyboard>
            </BeginStoryboard>
        </EventTrigger.Actions>
    </EventTrigger>
    <EventTrigger RoutedEvent="Mouse.MouseLeave">
        <EventTrigger.Actions>
            <BeginStoryboard>
                <Storyboard>
                    <DoubleAnimation
                        Duration="0:0:1"
                        Storyboard.TargetProperty="MaxHeight"  />
                </Storyboard>
            </BeginStoryboard>
        </EventTrigger.Actions>
    </EventTrigger>
</Style.Triggers>

Para obter mais informações, consulte a visão geral dos storyboards.For more information, see the Storyboards overview.

Na ilustração a seguir, o mouse está apontando para o terceiro item.In the following illustration, the mouse is pointing to the third item.

Captura de tela de exemplo de estiloStyling sample screenshot

MultiTriggers, DataTriggers e MultiDataTriggersMultiTriggers, DataTriggers, and MultiDataTriggers

Além de Trigger e EventTrigger, há outros tipos de gatilhos.In addition to Trigger and EventTrigger, there are other types of triggers. MultiTriggerpermite que você defina valores de propriedade com base em várias condições.MultiTrigger allows you to set property values based on multiple conditions. Você usa DataTrigger e MultiDataTrigger quando a propriedade da condição é associada a dados.You use DataTrigger and MultiDataTrigger when the property of your condition is data-bound.

Estados visuaisVisual States

Os controles estão sempre em um estadoespecífico.Controls are always in a specific state. Por exemplo, quando o mouse se move sobre a superfície de um controle, o controle é considerado em um Estado comum de MouseOver.For example, when the mouse moves over the surface of a control, the control is considered to be in a common state of MouseOver. Um controle sem um estado específico é considerado no estado comum Normal .A control without a specific state is considered to be in the common Normal state. Os Estados são divididos em grupos e os Estados mencionados anteriormente fazem parte do grupo CommonStatesde Estados.States are broken into groups, and the previously mentioned states are part of the state group CommonStates. A maioria dos controles tem dois grupos CommonStates de FocusStatesEstado: e.Most controls have two state groups: CommonStates and FocusStates. De cada grupo de Estados aplicado a um controle, um controle sempre está em um estado de cada grupo, como CommonStates.MouseOver e FocusStates.Unfocused.Of each state group applied to a control, a control is always in one state of each group, such as CommonStates.MouseOver and FocusStates.Unfocused. No entanto, um controle não pode estar em dois Estados diferentes dentro do mesmo grupo CommonStates.Normal , CommonStates.Disabledcomo e.However, a control can't be in two different states within the same group, such as CommonStates.Normal and CommonStates.Disabled. Aqui está uma tabela de Estados que a maioria dos controles reconhece e usa.Here is a table of states most controls recognize and use.

Nome do VisualStateVisualState Name Nome do VisualStateGroupVisualStateGroup Name DescriçãoDescription
NormalNormal CommonStatesCommonStates O estado padrão.The default state.
MouseOverMouseOver CommonStatesCommonStates O ponteiro do mouse é posicionado sobre o controle.The mouse pointer is positioned over the control.
PressionadoPressed CommonStatesCommonStates O controle é pressionado.The control is pressed.
DesabilitadoDisabled CommonStatesCommonStates O controle está desabilitado.The control is disabled.
FocalizadoFocused FocusStatesFocusStates O controle tem foco.The control has focus.
Sem focoUnfocused FocusStatesFocusStates O controle não tem foco.The control does not have focus.

Ao definir um System.Windows.VisualStateManager no elemento raiz de um modelo de controle, você pode disparar animações quando um controle entra em um estado específico.By defining a System.Windows.VisualStateManager on the root element of a control template, you can trigger animations when a control enters a specific state. O VisualStateManager declara quais combinações de VisualStateGroup e VisualState observar.The VisualStateManager declares which combinations of VisualStateGroup and VisualState to watch. Quando o controle entra em um estado observado, a animação definida pelo VisaulStateManager é iniciada.When the control enters a watched state, the animation defined by the VisaulStateManager is started.

Por exemplo, o código XAML a seguir observa CommonStates.MouseOver o estado para animar a cor de preenchimento do backgroundElementelemento chamado.For example, the following XAML code watches the CommonStates.MouseOver state to animate the fill color of the element named backgroundElement. Quando o controle retorna para o CommonStates.Normal estado, a cor de preenchimento do elemento chamado backgroundElement é restaurada.When the control returns to the CommonStates.Normal state, the fill color of the element named backgroundElement is restored.

<ControlTemplate x:Key="roundbutton" TargetType="Button">
    <Grid>
        <VisualStateManager.VisualStateGroups>
            <VisualStateGroup Name="CommonStates">
                <VisualState Name="Normal">
                    <ColorAnimation Storyboard.TargetName="backgroundElement"
                                    Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)"
                                    To="{TemplateBinding Background}"
                                    Duration="0:0:0.3"/>
                </VisualState>
                <VisualState Name="MouseOver">
                    <ColorAnimation Storyboard.TargetName="backgroundElement"
                                    Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)"
                                    To="Yellow"
                                    Duration="0:0:0.3"/>
                </VisualState>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>

        ...

Para obter mais informações sobre storyboards, consulte visão geral de storyboards.For more information about storyboards, see Storyboards Overview.

Temas e recursos compartilhadosShared resources and themes

Um aplicativo WPF típico pode ter vários recursos de interface do usuário que são aplicados em todo o aplicativo.A typical WPF app might have multiple UI resources that are applied throughout the app. Coletivamente, esse conjunto de recursos pode ser considerado o tema para o aplicativo.Collectively, this set of resources can be considered the theme for the app. O WPF dá suporte para empacotamento de recursos de interface do usuário como um tema usando um dicionário de recursos ResourceDictionary que é encapsulado como a classe.WPF provides support for packaging UI resources as a theme by using a resource dictionary that is encapsulated as the ResourceDictionary class.

Os temas do WPF são definidos usando o mecanismo de modelagem e estilo que o WPF expõe para personalizar os elementos visuais de qualquer elemento.WPF themes are defined by using the styling and templating mechanism that WPF exposes for customizing the visuals of any element.

Os recursos de tema do WPF são armazenados em dicionários de recursos inseridos.WPF theme resources are stored in embedded resource dictionaries. Esses dicionários de recursos devem ser inseridos em um assembly assinado; podem ser inseridos no mesmo assembly, como o próprio código, ou em um assembly lado a lado.These resource dictionaries must be embedded within a signed assembly, and can either be embedded in the same assembly as the code itself or in a side-by-side assembly. Para PresentationFramework. dll, o assembly que contém controles WPF, recursos de tema estão em uma série de assemblies lado a lado.For PresentationFramework.dll, the assembly that contains WPF controls, theme resources are in a series of side-by-side assemblies.

O tema torna-se o último local para procurar o estilo de um elemento.The theme becomes the last place to look when searching for the style of an element. Normalmente, a pesquisa começará orientando a árvore de elementos procurando um recurso apropriado e, em seguida, examinará a coleção de recursos de aplicativo e, finalmente, consultará o sistema.Typically, the search will begin by walking up the element tree searching for an appropriate resource, then look in the app resource collection and finally query the system. Isso dá aos desenvolvedores de aplicativos a oportunidade de redefinir o estilo de qualquer objeto no nível da árvore ou do aplicativo antes de alcançar o tema.This gives app developers a chance to redefine the style for any object at the tree or app level before reaching the theme.

Você pode definir dicionários de recursos como arquivos individuais que permitem reutilizar um tema em vários aplicativos.You can define resource dictionaries as individual files that enable you to reuse a theme across multiple apps. Você também pode criar temas permutáveis definindo vários dicionários de recursos que fornecem os mesmos tipos de recursos, mas com valores diferentes.You can also create swappable themes by defining multiple resource dictionaries that provide the same types of resources but with different values. A redefinição desses estilos ou de outros recursos no nível do aplicativo é a abordagem recomendada para a capa de um aplicativo.Redefining these styles or other resources at the app level is the recommended approach for skinning an app.

Para compartilhar um conjunto de recursos, incluindo estilos e modelos, entre aplicativos, você pode criar um arquivo XAML e definir um ResourceDictionary que inclua referência a um shared.xaml arquivo.To share a set of resources, including styles and templates, across apps, you can create a XAML file and define a ResourceDictionary that includes reference to a shared.xaml file.

<ResourceDictionary.MergedDictionaries>
  <ResourceDictionary Source="Shared.xaml" />
</ResourceDictionary.MergedDictionaries>

É o compartilhamento de shared.xaml, que, por sua vez ResourceDictionary , define um que contém um conjunto de recursos de estilo e pincel, que permite que os controles em um aplicativo tenham uma aparência consistente.It is the sharing of shared.xaml, which itself defines a ResourceDictionary that contains a set of style and brush resources, that enables the controls in an app to have a consistent look.

Para obter mais informações, consulte dicionários de Recursos mesclados.For more information, see Merged resource dictionaries.

Se você estiver criando um tema para seu controle personalizado, consulte a seção definindo recursos no nível do tema da visão geral de criação de controles.If you are creating a theme for your custom control, see the Defining resources at the theme level section of the Control authoring overview.

Confira tambémSee also