WPF 之 Resource Dictionary

最新推荐文章于 2024-05-21 10:27:33 发布

天涯海角

最新推荐文章于 2024-05-21 10:27:33 发布

阅读量1.4w

点赞数 2

分类专栏： WPF .net 文章标签： dictionary wpf setter button application action

本文链接：https://blog.csdn.net/abrahamcheng/article/details/7061509

版权

.net 同时被 2 个专栏收录

55 篇文章 0 订阅

订阅专栏

WPF

21 篇文章 0 订阅

订阅专栏

WPF 之 Resource Dictionary

众所周知WPF能实现真正的代码于设计界面分离，如果说这是WPF的一个亮点的话，那么这就要归功于 Resource Dictionary 。

下面我们看看如何在 WPF中使用Resource Dictionary：

1. 使用VS2010 新建一个WPF控件工程，命名为WPFResourceDemo

2. 删除默认新建的 usercontrol1 控件的文件

3. 添加 ResourceDictionary 文件，命名为WPFResourceDemo.xaml

4. 在 ResourceDictionary标签中加入style,下面的style功能为一个圆球button的样式

<Style x:Key="CircleButtonStyle" TargetType="{x:Type Button}">    
        <Setter Property="Border.BorderThickness" Value="1,1,1,1" />
        <Setter Property="Border.CornerRadius" Value="3" />
        <Setter Property="Height" Value="36" />
        <Setter Property="Width" Value="36" />
        <Setter Property="Content" Value="" />
        <Setter Property="Background">
            <Setter.Value>
                <ImageBrush ImageSource="pack://siteoforigin:,,,./Image/Buttons/Btn_normal.png"/>
            </Setter.Value>
        </Setter>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="Button">
                    <Grid>
                        <Ellipse Fill="{TemplateBinding Background}"/>
                        <Ellipse>
                            <Ellipse.Fill>
                                <RadialGradientBrush>
                                    <GradientStop Offset="0" Color="#00000000"/>
                                    <GradientStop Offset="0.88" Color="#00000000"/>
                                    <GradientStop Offset="1" Color="#80000000"/>
                                </RadialGradientBrush>
                            </Ellipse.Fill>
                        </Ellipse>
                        <Ellipse Margin="10" x:Name="highlightCircle" >
                            <Ellipse.Fill >
                                <LinearGradientBrush >
                                    <GradientStop Offset="0" Color="#50FFFFFF"/>
                                    <GradientStop Offset="0.5" Color="#00FFFFFF"/>
                                    <GradientStop Offset="1" Color="#50FFFFFF"/>
                                </LinearGradientBrush>
                            </Ellipse.Fill>
                        </Ellipse>
                        <ContentPresenter x:Name="content" HorizontalAlignment="Center" VerticalAlignment="Center"/>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
        <Style.Triggers>
            <Trigger Property="IsMouseOver" Value="True">
                <Setter Property="Background" >
                    <Setter.Value>
                        <ImageBrush ImageSource="pack://siteoforigin:,,,./Image/Buttons/Btn_rollover.png">
                        </ImageBrush>
                    </Setter.Value>
                </Setter>
            </Trigger>
            <Trigger Property="IsFocused" Value="True">
                <Setter Property="Background" >
                    <Setter.Value>
                        <ImageBrush ImageSource="pack://siteoforigin:,,,./Image/Buttons/Btn_rollover.png">
                        </ImageBrush>
                    </Setter.Value>
                </Setter>
            </Trigger>
            <Trigger Property="IsPressed" Value="True">
                <Setter Property="Background" >
                    <Setter.Value>
                        <ImageBrush ImageSource="pack://siteoforigin:,,,./Image/Buttons/Btn_pressed.png">
                        </ImageBrush>
                    </Setter.Value>
                </Setter>
            </Trigger>
            <Trigger Property="IsEnabled" Value="False">
                <Setter Property="Background" >
                    <Setter.Value>
                        <ImageBrush ImageSource="pack://siteoforigin:,,,./Image/Buttons/Btn_disabled.png">
                        </ImageBrush>
                    </Setter.Value>
                </Setter>
            </Trigger>
        </Style.Triggers>
</Style>

注：1. pack://siteoforigin:,,,./Image/Buttons/Btn_normal.png表示在当前程序的相对路径下搜索:./Image/Buttons/Btn_normal.png

2. 图片要添加到项目相应的目录Image/Buttons下，将其类型设置为content, build action 选择总是copy

5. 编译该项目，显示编译成功

6. 添加一个WPF 应用程序的工程（用于测试WPFResourceDemo），命名为TestWPFResourceDemo

7. 找到TestWPFResourceDemo下面的App.xaml,在Application下添加引用WPFResourceDemo.xaml的节点

  <Application.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary Source="pack://application:,,,/ WPFResourceDemo;component/WPFResourceDemo.xaml" />
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
    </Application.Resources>

8. 添加WPFResourceDemo项目为TestWPFResourceDemo项目的引用

9. 在TestWPFResourceDemo的 Window1.xaml 加入一个button（从工具箱中拖拽到Gird）

10. 选中button，并点击它的style属性（在属性窗口中），选择CircleButtonStyle（Static中）