WPF资源系统

文件资源

程序集资源

例如一些图片、音频、字体等，将这些文件导入到项目中，就可以在代码中使用这些资源

图片资源

将资源复制到项目中。
右键设计文件属性的生成操作为资源
在xaml中使用图片资源

<Window x:Class="wpf_study.MainWindow"
        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:wpf_study"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <Grid>
        <Grid.RowDefinitions >
            <RowDefinition  Height="auto"/>
            <RowDefinition  Height="1*"/>
            <RowDefinition  Height="1*"/>
            <RowDefinition  Height="3*"/>
        </Grid.RowDefinitions>

        <Grid.ColumnDefinitions >
            <ColumnDefinition />
            <ColumnDefinition />
            <ColumnDefinition />
            <ColumnDefinition />
        </Grid.ColumnDefinitions>

        <Image Source="/Asserts/107119287_p0_master1200 (1).jpg" />

    </Grid>
</Window>

启动发现图片可以在应用程序中显示了

还有一种方式直接使用pack url来引入资源
pack url的格式如下所示:
pack://application:,,,/[程序集名称;component/][文件夹/]文件名
如下代码所示图片也可以引用进来

<Grid>
    <Grid.RowDefinitions >
        <RowDefinition  Height="auto"/>
        <RowDefinition  Height="1*"/>
        <RowDefinition  Height="1*"/>
        <RowDefinition  Height="3*"/>
    </Grid.RowDefinitions>

    <Grid.ColumnDefinitions >
        <ColumnDefinition />
        <ColumnDefinition />
        <ColumnDefinition />
        <ColumnDefinition />
    </Grid.ColumnDefinitions>

    <Image Source="pack://application:,,,/Asserts/107119287_p0_master1200 (1).jpg" />

</Grid>

当把资源文件设置成resource类型时，资源文件会被编译进exe或dll内部，这时候没有路径，所以无法直接使用路径来访问，所以需要pack url。

对象资源

可以在窗口资源中抽出一些通用的变量来共其他元素服用，如下所示，定义了四张图片，如果按之前的配置来，需要给每张图片都要设置宽和高，如果后期宽和高变了，维护起来可能不太方便。

        <Image Grid.Column="1" Source="pack://application:,,,/Asserts/107119287_p0_master1200 (1).jpg" />
        <Image Grid.Column="0" Source="pack://application:,,,/Asserts/107119287_p0_master1200 (1).jpg" />
        <Image Grid.Column="2" Source="pack://application:,,,/Asserts/107119287_p0_master1200 (1).jpg" />
        <Image Grid.Column="3" Source="pack://application:,,,/Asserts/107119287_p0_master1200 (1).jpg" />

如果使用窗口资源的话就可以完美解决这个问题，只需要在窗口资源中定义了宽和高的值，然后在元素中进行引用，即便是后期值变了，也只需要在窗口资源中进行修改，不需要修改多个地方，后期维护起来也方便。
定义窗口资源需要Window.resouces标签，如果想要在xaml中使用数字类型的变量还需要引入xmlns:System="clr-namespace:System;assembly=mscorlib"命名空间。
如下所示定义了一个窗口资源，它的值为Double类型的200，定义完成后{StaticResource }关键字引入，staticResouce后面跟着我们定义的key即可，如下所示

<Window x:Class="wpf_study.MainWindow"
        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:wpf_study"
        xmlns:System="clr-namespace:System;assembly=mscorlib"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">

    <Window.Resources>
        <!--定义一个double类型的窗口元素 key为wid 值为200-->
        <System:Double x:Key="wid">200</System:Double>
    </Window.Resources>
    <Grid>
        <Grid.RowDefinitions >
            <RowDefinition  Height="auto"/>
            <RowDefinition  Height="1*"/>
            <RowDefinition  Height="1*"/>
            <RowDefinition  Height="3*"/>
        </Grid.RowDefinitions>

        <Grid.ColumnDefinitions >
            <ColumnDefinition />
            <ColumnDefinition />
            <ColumnDefinition />
            <ColumnDefinition />
        </Grid.ColumnDefinitions>

        <!-- 使用窗口元素wid -->
        <Image Grid.Column="1" Width="{StaticResource wid}" Height="{StaticResource wid}" Source="pack://application:,,,/Asserts/107119287_p0_master1200 (1).jpg" />
        <Image Grid.Column="0" Width="{StaticResource wid}" Height="{StaticResource wid}" Source="pack://application:,,,/Asserts/107119287_p0_master1200 (1).jpg" />
        <Image Grid.Column="2" Width="{StaticResource wid}" Height="{StaticResource wid}" Source="pack://application:,,,/Asserts/107119287_p0_master1200 (1).jpg" />
        <Image Grid.Column="3" Width="{StaticResource wid}" Height="{StaticResource wid}" Source="pack://application:,,,/Asserts/107119287_p0_master1200 (1).jpg" />

    </Grid>
</Window>

除了窗口资源外，其他元素也有资源，例如border.resource等，用起来也和窗口资源一样

        <Border>
            <Border.Resources>
            </Border.Resources>
        </Border>

资源字典

类似css一样，可以将资源信息都封装到一个文件里，使用时直接引用文件即可，这样集中维护的话，后期维护起来也很方便。
可以右键新建资源字典

然后将配置设置到文件里

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:System="clr-namespace:System;assembly=mscorlib"
                    >

    <System:Double x:Key="hw">100</System:Double>

</ResourceDictionary>

在xaml中如果引用单个的话直接在使用source属性引用数据字典即可，和引用图片音频类似，直接使用pack url也可以的。

    <Window.Resources>
        <ResourceDictionary Source="/res.xaml">

        </ResourceDictionary>
    </Window.Resources>

如果要引用多个数据字典的话需要添加ResourceDictionary.MergedDictionaries，然后在标签中定义每个资源字典即可，如下所示:

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

静态资源与动态资源

静态资源: 程序编译时已经确定了。
动态资源: 在程序运行的过程中资源会发生改变，修改后的资源会自动刷新到组件中。

样式

类似web前端的css配置，可以直接通过style标签来设置指定组件的样式。TargetType参数用于设置这个样式应用于什么组件，key则是唯一id。


        <ResourceDictionary>
            <Style TargetType="Border" x:Key="sty1" >
                <Setter Property="Margin" Value="10" />
                <Setter Property="BorderBrush" Value="Red" />
                <Setter Property="BorderThickness" Value="10" />
            </Style>
        </ResourceDictionary>

之后在组件上直接根据key来进行绑定即可，入下代码所示


        <Border Height="200" Width="200" Style="{StaticResource sty1}">
        </Border>

有些需求是通过一些事件来进行触发指定样式的，例如鼠标滑过按钮以及单选框被选中等等，这时候就可以利用Trigger来实现这个功能。
如下代码所示，当鼠标滑过按钮，border颜色就会变绿。


                <Style.Triggers>
                    <Trigger Property="IsMouseOver" Value="True" >
                        <Setter Property="BorderBrush" Value="Green" />
                    </Trigger>
                </Style.Triggers>

但有事样式触发条件是多个而不是一个，那这种情况下MultiTrigger和MultiTrigger.Conditions来解决这个问题，当条件都满足时触发样式修改，如下代码所示：
当宽等于200时且鼠标划过去，那么就修改border颜色为蓝色

   <ResourceDictionary>
       <Style TargetType="Border" x:Key="sty" >
           <Setter Property="Margin" Value="10" />
           <Setter Property="BorderBrush" Value="Red" />
           <Setter Property="BorderThickness" Value="10" />
           <Setter Property="Width" Value="200" />

           <Style.Triggers>


               <MultiTrigger>
                   <MultiTrigger.Conditions>
                       <Condition Property="IsMouseOver" Value="True" />
                       <Condition Property="Width" Value="200" />
                   </MultiTrigger.Conditions>
                   <MultiTrigger.Setters>
                       <Setter Property="BorderBrush" Value="Blue" />
                   </MultiTrigger.Setters>
               </MultiTrigger>
           </Style.Triggers>
       </Style>
   </ResourceDictionary>

posted @ 2026-01-18 18:28 RainbowMagic 阅读(2) 评论(0) 收藏举报

刷新页面返回顶部

Lyra