Como criar um estilo para um controle (WPF .NET)
Com o Windows Presentation Foundation (WPF), você pode personalizar a aparência de um controle existente com seu próprio estilo reutilizável. Os estilos podem ser aplicados globalmente ao seu aplicativo, janelas e páginas ou diretamente aos controles.
Criar um estilo
Você pode pensar em a Style como uma maneira conveniente de aplicar um conjunto de valores de propriedade a um ou mais elementos. Você pode usar um estilo em qualquer elemento que derive de FrameworkElement ou FrameworkContentElement como um Window ou um Button.
A maneira mais comum de declarar um estilo é como um recurso na Resources
seção em um arquivo XAML. Como os estilos são recursos, eles obedecem às mesmas regras de escopo que se aplicam a todos os recursos. Simplificando, onde você declara um estilo afeta onde o estilo pode ser aplicado. Por exemplo, se você declarar o estilo no elemento raiz do arquivo XAML de definição do aplicativo, o estilo poderá ser usado em qualquer lugar do aplicativo.
<Application x:Class="IntroToStylingAndTemplating.App"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:IntroToStylingAndTemplating"
StartupUri="WindowExplicitStyle.xaml">
<Application.Resources>
<ResourceDictionary>
<Style x:Key="Header1" TargetType="TextBlock">
<Setter Property="FontSize" Value="15" />
<Setter Property="FontWeight" Value="ExtraBold" />
</Style>
</ResourceDictionary>
</Application.Resources>
</Application>
Se você declarar o estilo em um dos arquivos XAML do aplicativo, o estilo poderá ser usado somente nesse arquivo XAML. Para obter mais informações sobre regras de escopo para recursos, consulte Visão geral dos recursos XAML.
<Window x:Class="IntroToStylingAndTemplating.WindowSingleResource"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:IntroToStylingAndTemplating"
mc:Ignorable="d"
Title="WindowSingleResource" Height="450" Width="800">
<Window.Resources>
<Style x:Key="Header1" TargetType="TextBlock">
<Setter Property="FontSize" Value="15" />
<Setter Property="FontWeight" Value="ExtraBold" />
</Style>
</Window.Resources>
<Grid />
</Window>
Um estilo é composto de <Setter>
elementos filho que definem propriedades nos elementos aos quais o estilo é aplicado. No exemplo acima, observe que o estilo está definido para ser aplicado a TextBlock
tipos por meio do TargetType
atributo. O estilo definirá o FontSize para 15
e o FontWeight para ExtraBold
. Adicione um <Setter>
para cada propriedade que o estilo muda.
Aplicar um estilo implicitamente
A Style é uma maneira conveniente de aplicar um conjunto de valores de propriedade a mais de um elemento. Por exemplo, considere os elementos a seguir TextBlock e sua aparência padrão em uma janela.
<StackPanel>
<TextBlock>My Pictures</TextBlock>
<TextBlock>Check out my new pictures!</TextBlock>
</StackPanel>
Você pode alterar a aparência padrão definindo propriedades, como FontSize e FontFamily, em cada TextBlock elemento diretamente. No entanto, se você quiser que seus TextBlock elementos compartilhem algumas propriedades, poderá criar um Style na Resources
seção do arquivo XAML, conforme mostrado aqui.
<Window.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>
</Window.Resources>
Quando você define o TargetType estilo como o TextBlock tipo e omite o x:Key
atributo, o estilo é aplicado a todos os TextBlock elementos com escopo para o estilo, que geralmente é o próprio arquivo XAML.
Agora os TextBlock elementos aparecem da seguinte forma.
Aplicar um estilo explicitamente
Se você adicionar um x:Key
atributo com valor ao estilo, o estilo não será mais aplicado implicitamente a todos os elementos do TargetType. Somente os elementos que fazem referência explícita ao estilo terão o estilo aplicado a eles.
Aqui está o estilo da seção anterior, mas declarado com o x:Key
atributo.
<Window.Resources>
<Style x:Key="TitleText" TargetType="TextBlock">
<Setter Property="HorizontalAlignment" Value="Center" />
<Setter Property="FontFamily" Value="Comic Sans MS"/>
<Setter Property="FontSize" Value="14"/>
</Style>
</Window.Resources>
Para aplicar o estilo, defina a Style propriedade no elemento como o x:Key
valor, usando uma extensão de marcação StaticResource, conforme mostrado aqui.
<StackPanel>
<TextBlock Style="{StaticResource TitleText}">My Pictures</TextBlock>
<TextBlock>Check out my new pictures!</TextBlock>
</StackPanel>
Observe que o primeiro TextBlock elemento tem o estilo aplicado a ele, enquanto o segundo elemento TextBlock permanece inalterado. O estilo implícito da seção anterior foi alterado para um estilo que declarava o x:Key
atributo, ou seja, o único elemento afetado pelo estilo é aquele que fazia referência direta ao estilo.
Depois que um estilo é aplicado, explícita ou implicitamente, ele se torna selado e não pode ser alterado. Se você quiser alterar um estilo que foi aplicado, crie um novo estilo para substituir o existente. Para obter mais informações, consulte a propriedade IsSealed.
É possível criar um objeto que escolhe um estilo para aplicar com base na lógica personalizada. Para obter um exemplo, consulte o exemplo fornecido para a StyleSelector classe.
Aplicar um estilo programaticamente
Para atribuir um estilo nomeado a um elemento programaticamente, obtenha o estilo da coleção de recursos e atribua-o à propriedade do Style elemento. Os itens em uma coleção de recursos são do tipo Object. Portanto, você deve converter o estilo recuperado em um System.Windows.Style antes de atribuí-lo à Style
propriedade. Por exemplo, o código a seguir define o estilo de um TextBlock
nomeado textblock1
para o estilo TitleText
definido .
textblock1.Style = (Style)Resources["TitleText"];
textblock1.Style = CType(Resources("TitleText"), Windows.Style)
Estender um estilo
Talvez você queira que seus dois TextBlock elementos compartilhem alguns valores de propriedade, como o e o FontFamily centralizado HorizontalAlignment. Mas você também deseja que o texto Minhas Imagens tenha algumas propriedades adicionais. Você pode fazer isso criando um novo estilo baseado no primeiro estilo, conforme mostrado aqui.
<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>
Em seguida, aplique o estilo a um TextBlock
arquivo .
<StackPanel>
<TextBlock Style="{StaticResource TitleText}" Name="textblock1">My Pictures</TextBlock>
<TextBlock>Check out my new pictures!</TextBlock>
</StackPanel>
Esse TextBlock
estilo agora está centralizado, usa uma Comic Sans MS
fonte com um tamanho de e a cor do primeiro plano definida como 26
mostrada LinearGradientBrushno exemplo. Observe que ele substitui o FontSize valor do estilo base. Se houver mais de um Setter apontando para a mesma propriedade em um Style, o que é declarado Setter
por último tem precedência.
O seguinte mostra como os TextBlock elementos agora se parecem:
Esse TitleText
estilo estende o estilo que foi criado para o tipo, referenciado TextBlock com BasedOn="{StaticResource {x:Type TextBlock}}"
. Você também pode estender um estilo que tenha um x:Key
usando o x:Key
do estilo. Por exemplo, se houvesse um estilo nomeado Header1
e você quisesse estender esse estilo, usaria BasedOn="{StaticResource Header1}"
.
Relação da propriedade TargetType e do atributo x:Key
Como mostrado anteriormente, definir a TargetType propriedade como TextBlock
sem atribuir o estilo an x:Key
faz com que o estilo seja aplicado a todos os TextBlock elementos. Nesse caso, o x:Key
é definido implicitamente como {x:Type TextBlock}
. Isso significa que, se você definir explicitamente o x:Key
valor como algo diferente de {x:Type TextBlock}
, o Style não será aplicado a todos os TextBlock
elementos automaticamente. Em vez disso, você deve aplicar o estilo (usando o x:Key
valor) aos TextBlock
elementos explicitamente. Se o seu estilo estiver na seção de recursos e você não definir a TargetType
propriedade em seu estilo, deverá definir o x:Key
atributo.
Além de fornecer um valor padrão para o , a x:Key
propriedade especifica o tipo ao qual as TargetType
propriedades do setter se aplicam. Se você não especificar um TargetType
, deverá qualificar as propriedades em seus Setter objetos com um nome de classe usando a sintaxe Property="ClassName.Property"
. Por exemplo, em vez de definir Property="FontSize"
, você deve definir Property como "TextBlock.FontSize"
ou "Control.FontSize"
.
Observe também que muitos controles do WPF consistem em uma combinação de outros controles do WPF. Caso você crie um estilo que se aplica a todos os controles de um tipo, pode obter resultados inesperados. Por exemplo, se você criar um estilo direcionado ao TextBlock tipo em um Window, o estilo será aplicado a todos os TextBlock
controles na janela, mesmo que faça TextBlock
parte de outro controle, como um ListBox.
Confira também
.NET Desktop feedback