526互联

WPF样式学习-资源字典（一）

发布时间 2023-08-01 22:55:42作者: damibing

1.在资源字典里面编写样式

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">

    
    <!--设置button样式-->
    <Style  TargetType="Button" x:Key="btnStyle">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate  TargetType="Button">
                    <Border BorderBrush="{TemplateBinding  BorderBrush}"  BorderThickness="0"  CornerRadius="8,8,8,8"  Background="{TemplateBinding Background}" >
                        <ContentPresenter  HorizontalAlignment="Center"  VerticalAlignment="Center"  Content="{TemplateBinding ContentControl.Content}" ></ContentPresenter>
                    </Border>


                    <ControlTemplate.Triggers>
                        <Trigger Property="IsMouseOver" Value="True">
                            <Setter  Property="Opacity" Value="0.5"/>
                        </Trigger>
                        <Trigger Property="IsPressed" Value="True">
                            <Setter  Property="Opacity" Value="0.5"/>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

    
    <!--设置textbox样式-->
    <Style  TargetType="TextBox">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate  TargetType="TextBox">
                    <Border BorderBrush="{TemplateBinding  BorderBrush}"  BorderThickness="{TemplateBinding BorderThickness}"  CornerRadius="8,8,8,8"  Background="{TemplateBinding Background}" >
                        <ScrollViewer x:Name="PART_ContentHost" VerticalAlignment="Center"  HorizontalAlignment="Center" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"></ScrollViewer>
                    </Border>
                    
                    
                </ControlTemplate>
            </Setter.Value>
        </Setter>
        
    </Style>

    <!--设置PasswordBox 样式-->
    <Style  TargetType="PasswordBox">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate  TargetType="PasswordBox">
                    <Border BorderBrush="{TemplateBinding  BorderBrush}"  BorderThickness="{TemplateBinding BorderThickness}"  CornerRadius="8,8,8,8"  Background="{TemplateBinding Background}" >
                        <ScrollViewer x:Name="PART_ContentHost" VerticalAlignment="Center"  HorizontalAlignment="Center" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"></ScrollViewer>
                    </Border>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</ResourceDictionary>

如上  这是一个资源字典文件后缀名依旧是.xmal,这个资源字典分别设置了Button,TextBox,PasswordBox的样式

2.引入资源字典文件

<Window x:Class="BusinessInformationManagementPlatform.View.Login"
        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:BusinessInformationManagementPlatform.View"
        mc:Ignorable="d"
        Title="Login" Height="450" Width="800">
    
    <Window.Resources>
        <!--第一种-->
        <!--<ResourceDictionary Source="pack://application:,,,/BusinessInformationManagementPlatform;component/Style/Style.xaml"/>-->

        <!--第二种-->
        <ResourceDictionary x:Key="buto">
            <!--合并资源字典-->
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary Source="Dictionary1.xaml"/>
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
    </Window.Resources>
   
     <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition/>
            <ColumnDefinition/>
        </Grid.ColumnDefinitions>

        <Grid Grid.Column="0"  Background="#409eff">
        </Grid>
        
        <!--登录窗口表单-->
        <Grid Grid.Column="1" Background="#ffffff">
            <TextBlock  Margin="20" FontSize="25">用户登录</TextBlock>
            <StackPanel Orientation="Vertical" VerticalAlignment="Center">
                <TextBox  Height="40"   Margin="20,10,20,10"  ></TextBox>
                <!--<TextBox Height="40" Margin="20,10,20,10"></TextBox>-->
                <PasswordBox Height="40" Margin="20,10,20,10"></PasswordBox>
                
                <!--验证码-->
                <StackPanel Orientation="Horizontal"  Margin="20,10,20,10"   Height="50">
                    <TextBox Width="150" Height="40" ></TextBox>
                    <Image Height="40" Width="100"></Image>
                </StackPanel>

                <Button Height="40" Margin="20,10,20,10" Foreground="White" Background="#409eff" Style="{StaticResource btnStyle}">登录</Button>
            </StackPanel>
        </Grid>
    </Grid>
</Window>

如上 ,我们看到资源字典可以单个的引入 ,也可以使用资源字典合并的标签将所有的资源字典合并，资源字典的标签在 <Window.Resources> 下是只允许又一个的所以我们在有多个资源字典文件的时候需要合并这些标签

3.使用资源字典

资源字典的使用非常简单 当页面引入资源字典时样式会直接生效，也可以使用绑定，只需要在button上绑定资源字典里面设置的样式key即可  Style="{StaticResource btnStyle}"