Résumé de la conception des styles WPF

style en ligne

Nous créons un style simple

    <Grid>
        <TextBox  Text="我是样式" FontSize="100" />
    </Grid>

Cet attribut est écrit directement à l'intérieur, qui est le style en ligne.

style d'encart

Mais je veux réutiliser des fonctions pour un tas de contrôles, et contrairement à l'écriture répétée de styles en ligne, vous pouvez utiliser des styles dans la page.

<Window x:Class="Test1.Views.MainView"
        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:Test1.Views"
        mc:Ignorable="d"
        Title="MainView" Height="450" Width="800">

    
    <Grid>
        <StackPanel>
            <TextBox  Text="我是样式"
                      FontSize="80" />
            <TextBox  Text="我是样式"
                      FontSize="80" />
            <TextBox  Text="我是样式"
                      FontSize="80" />
            <TextBox  Text="我是样式"
                      FontSize="80" />
        </StackPanel>

    </Grid>
</Window>

Nous pouvons utiliser des styles de page pour extraire les contrôles en double

<Window x:Class="Test1.Views.MainView"
        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:Test1.Views"
        mc:Ignorable="d"
        Title="MainView"
        Height="450"
        Width="800">
    <Window.Resources>
        <Style x:Key="TextBox1" TargetType="TextBox">
            <Style.Setters>
                <Setter Property="Text" Value="我是局部样式"/>
                <Setter Property="FontSize" Value="80"/>
            </Style.Setters>
        </Style>
    </Window.Resources>

    <Grid>
        <StackPanel>
            <TextBox  Style="{ 
        StaticResource TextBox1}" />
            <!--行内样式优先级大于局部样式-->
            <TextBox Text="我是行内样式" Style="{ 
        StaticResource TextBox1}" />
            <TextBox  Style="{ 
        StaticResource TextBox1}" />
            <TextBox  Style="{ 
        StaticResource TextBox1}" />
        </StackPanel>

    </Grid>
</Window>

héritage de style

Si nous devons définir des styles avec plus d'attributs, qui sont à peu près les mêmes mais légèrement différents.

Nous avons deux façons :

1. Remplacer par le style en ligne
est le plus simple, mais il n'est pas propice au réglage par lots

2. Héritage de style

<Window x:Class="Test1.Views.MainView"
        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:Test1.Views"
        mc:Ignorable="d"
        Title="MainView"
        Height="450"
        Width="800">
    <Window.Resources>
        <Style x:Key="TextBox1" TargetType="TextBox">
            <Style.Setters>
                <Setter Property="Text"
                        Value="我是局部样式" />
                <Setter Property="FontSize"
                        Value="80" />
            </Style.Setters>
        </Style>
        <!--使用继承样式继续修改-->
        <Style x:Key="TextBox2" TargetType="TextBox" BasedOn="{StaticResource TextBox1}">
            <Style.Setters>
                <Setter Property="Text" Value="我是继承后修改的样式"/>
            </Style.Setters>
        </Style>
    </Window.Resources>

    <Grid>
        <StackPanel>
            <TextBox  Style="{ 
        StaticResource TextBox1}" />
            <!--行内样式优先级大于局部样式-->
            <TextBox Text="我是行内样式" Style="{ 
        StaticResource TextBox1}" />
            <!--使用继承后的样式-->
            <TextBox  Style="{ 
        StaticResource TextBox2}" />
            <TextBox  Style="{ 
        StaticResource TextBox2}" />
        </StackPanel>

    </Grid>
</Window>

Le style de contrôle ne peut hériter que d'un

Les contrôles WPF ne peuvent hériter que d'un style, pas de plusieurs styles

exemple d'erreur

<TextBox  Style="{ 
        StaticResource TextBox1 TextBox2}"  />
<TextBox  Style="{ 
        StaticResource TextBox1}"
          Style="{ 
        StaticResource TextBox2}" />

style partiel

Remarque : Les styles partiels ne peuvent être utilisés que dans les contrôles utilisateur

Différence entre le contrôle de la fenêtre et le contrôle de l'utilisateur

Le contrôle de fenêtre consiste à déclarer la fenêtre principale et le contrôle de fenêtre peut être empilé au-dessus du contrôle de fenêtre.
Les contrôles utilisateur sont utilisés pour superposer des fenêtres au-dessus des contrôles de fenêtre.

utiliser le code

référence de contrôle utilisateur

Dictionary2.xaml

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <Style x:Key="TestColor5"
           TargetType="TextBox">
        <Setter Property="FontSize" Value="50"/>
        <Setter Property="Text"
                Value="我是被引用的样式" />
    </Style>
</ResourceDictionary>

Référence UserControl1.xaml

<UserControl x:Class="Test1.Views.UserControl1"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             xmlns:local="clr-namespace:Test1.Views"
             mc:Ignorable="d" 
             d:DesignHeight="450" d:DesignWidth="800">
    <UserControl.Resources>
        <!--用户控件才能引用局部样式-->
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary Source="/Test1;component/Resource/Dictionary2.xaml"/>
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
    </UserControl.Resources>
    <Grid>
        <TextBox  Style="{ 
        StaticResource TestColor5}" />
    </Grid>
</UserControl>

REMARQUE : les chemins de code de référence sont des références absolues

Source="/(nom du projet);composant/(chemin du dossier)/(nom du fichier).xaml"
est le chemin absolu

style global

On a parfois envie d'unifier le style de l'ensemble du projet, on peut définir le style global

Dictionary1.xaml

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" x:Name="Dictionary1">
    <Style x:Key="TestColor4"
           TargetType="TextBox">
        <Setter Property="Text"
                Value="我是全局样式" />
        <Setter Property="FontSize" Value="50"/>
    </Style>
</ResourceDictionary>

App.xaml

<Application x:Class="Test1.App"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:local="clr-namespace:Test1"
             xmlns:local2="clr-namespace:Test1.Views"
             StartupUri="Views/MainView.xaml">
    <Application.Resources>
        <!--添加全局引用路径-->
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary  Source="Resource/Dictionary1.xaml" />
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
    </Application.Resources>
</Application>

Référencé en xaml

<Window x:Class="Test1.Views.MainView"
        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:Test1.Views"
        mc:Ignorable="d"
        Title="MainView"
        Height="450"
        Width="800">
    <Window.Resources>


        
        <Style x:Key="TextBox1" TargetType="TextBox">
            <Style.Setters>
                <Setter Property="Text"
                        Value="我是局部样式" />
                <Setter Property="FontSize"
                        Value="80" />
            </Style.Setters>
        </Style>
        <!--使用继承样式继续修改-->
        <Style x:Key="TextBox2" TargetType="TextBox" BasedOn="{StaticResource TextBox1}">
            <Style.Setters>
                <Setter Property="Text" Value="我是继承后修改的样式"/>
            </Style.Setters>
        </Style>
    </Window.Resources>

    <Grid>
        <StackPanel>
            <!--使用全局样式-->
            <TextBox  Style="{ 
        StaticResource TestColor4}" />
            <!--行内样式优先级大于局部样式-->
            <TextBox Text="我是行内样式" Style="{ 
        StaticResource TextBox1}" />
            <!--使用继承后的样式-->
            <TextBox  Style="{ 
        StaticResource TextBox2}" />
            <!--使用用户控件-->
            <local:UserControl1 />
        </StackPanel>

    </Grid>
</Window>