如何理解WPF中的样式（Style）与模板ControlTemplate

最新推荐文章于 2024-08-12 11:17:25 发布

HexCracker

最新推荐文章于 2024-08-12 11:17:25 发布

阅读量4.5k

点赞数 2

分类专栏： WPF学习文章标签： WPF

本文链接：https://blog.csdn.net/aniston_luo/article/details/89738661

版权

WPF学习专栏收录该内容

4 篇文章 0 订阅

订阅专栏

1.如何理解WPF中的Style

Style作用：
a.样式设置，用来为一组相同控件设置统一的样式
b.只能改变控件的已有属性值（比如颜色字体）

样式		作用
Style	Style.Resource	\
~	setter	设置器
~	Style.Trigger	在Trigger中添加触发后的操作

    <Style TargetType="primitives:ToolWindowTab">
        <Style.Resources>
            <SolidColorBrush x:Key="BrushSelectedBackground" Color="Yellow" />
            <SolidColorBrush x:Key="TestColor" Color="Red"/>
            <SolidColorBrush x:Key="BrushActiveText" Color="Red" />

            <LinearGradientBrush x:Key="BrushBackground" StartPoint="0,0" EndPoint="0,1">
                <GradientStop Color="#FFC8C8C8" Offset="0" />
                <GradientStop Color="#FFFFFFFF" Offset="1" />
            </LinearGradientBrush>

            <LinearGradientBrush x:Key="BrushHighlightedBackground" StartPoint="0,0" EndPoint="0,1">
                <GradientStop Color="#FFA7D9F5" Offset="0" />
                <GradientStop Color="#FFFFFFFF" Offset="1" />
            </LinearGradientBrush>

            <Style TargetType="primitives:TabBorder">
                <Setter Property="IsBottom" Value="True" />
                <Setter Property="BorderThickness" Value="1" />
            </Style

注：Style中定义的属性和值会影响到所有ToolWindowTab类型的控件


setter	设置器，设置样式、属性、触发器等的属性 ,

a.样式的继承

b.通用类型自动应用样式

c.x:Key=" xxx"到底有什么用？

1.
<Style TargetType=" Button">
xxx设置的参数标签
</Style>
2、
<Style x:Key="ButtonType" TargetType="Button">
xxxxx
</Style>

1.所有Button类型均受到Style的影响
2.只有Style=ButtonType的Button类型才会受到Style的影响

2.如何理解控件模板：ControlTemplate、DataTemplate、ItemPanelTemplate


ControlTemplate	控件模板设置，用来为一组相同控件设置统一的外形	Trigger // Visual Tree
ItemPanelTemplate
DataTemplate

3.DataTemplate

 <Window.Resources>
        <!-- 列表模板-->
        <DataTemplate x:Key="MyTemplate" DataType="{x:Type demo:People}">
            <Grid VerticalAlignment="Center" HorizontalAlignment="Center"
             Margin="4" >
             //划分为两个竖行，左侧添加图片，右侧添加文本
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="Auto"/>
                    <ColumnDefinition Width="Auto"/>
                </Grid.ColumnDefinitions>
                <Image Source="{Binding Photo}" Width="50"
           Grid.Column="0"
           Grid.RowSpan="1"/>
                <TextBlock Text="{Binding Name}"
                           Grid.Column="1"
                           Grid.RowSpan="1"
                           HorizontalAlignment="Center"
                           VerticalAlignment="Center"/>
            </Grid>
        </DataTemplate>
    </Window.Resources>

注意：demo:People在后台定义

namespace demo
{
    public class People
    {
        private string name;
        private string photo;
        public People(string name1, string photo1)
        {
            this.name = name1;
            this.photo = photo1;
        }
        public string Name
        {
            get { return this.name; }
            set => this.name = value;

        }
        public string Photo
        {
            get { return this.photo; }
            set { this.photo = value; }
        }
    }
}