WPF常见控件(包含materialDesign)与属性

materialDesign:ColorZone: 用于在应用界面中创建有色区域,增加层级感和视觉吸引力。
materialDesign:DrawerHost:用于实现从屏幕一侧滑出的抽屉控件,经常与materialDesign:DrawerHost.LeftDrawerContent配套使用(这里的例子是设置左抽屉)。
DockPanel:布局控件,用于将其子元素排列在特定的方向上(顶部、底部、左侧、右侧或填充其余空间)。
StackPanel:堆叠控价(上下、左右)。
ToggleButton:用于表示一个按钮,它可以在两种状态之间切换(选中和未选中)。ToggleButton 是常规 Button 的扩展,它的 IsChecked 属性表示当前选中状态。
ListBox:显示列表数据,经常绑定数据上下文列表类型的数据。ListBox.ItemTemplate:用于定义每个项应该如何显示。ListBox.ItemsPanel:定义了列表中的项是如何布局的。
TextBlock:TextBlock 是一个用于显示文本的控件,TextBlock 是只读的。
TextBox:TextBox是一个用于显示文本的控件,TextBox可用于接受用户输入。
Grid:布局控件。
Border:用于在其子控件(只能有一个子元素)周围创建一个边框。Border 控件不仅可以设置边框的颜色、厚度和圆角,还可以设置背景颜色。这使得它成为一个非常有用的布局工具,用来增强视觉效果或分隔 UI 元素。
Canvas:根据绝对坐标定位子元素。

AllowsTransparency="True": 使得这个窗口可以有透明的效果并且没有传统的窗口边框。
WindowStyle="None": 这个属性定义了窗口边框的样式。设置为 None 表示窗口将没有标题栏和边框。经常与AllowsTransparency="True"配套使用,实现真正的无边框无内容窗口,假如WindowStyle="None"单独使用,生成的窗口上面还是有一条白色的线条。
WindowStartupLocation="CenterScreen": 设置窗口居中
HorizontalAlignment="Center":水平居中
VerticalAlignment="Center":垂直居中

TemplateBinding和Binding

TemplateBinding

TemplateBinding 是一种简化版的数据绑定,通常用于 ControlTemplate 内部。TemplateBinding 是一种优化的、高性能的绑定方式,但是它具有一定的限制。它只能用于父控件的属性和它在控件模板内部的子元素之间的绑定,并且是单向的从父控件到子元素。

<ControlTemplate TargetType="Button">
    <Border Background="{TemplateBinding Background}">
        <!-- ... -->
    </Border>
</ControlTemplate>

在这个例子中,Border 控件的 Background 属性通过 TemplateBinding 绑定到它所在模板的目标 Button 控件的 Background 属性。这意味着当按钮的背景改变时,模板中对应的边框背景也会改变。

Binding

Binding 是一种更通用、功能更为强大的绑定机制。它允许从任何类型的数据源绑定到任意属性,并且支持双向绑定、转换器、路径导航、数据源更新触发器等高级功能。

<TextBox Text="{Binding Path=UserName, UpdateSourceTrigger=PropertyChanged}" />

在这个例子中,TextBox 控件的 Text 属性与绑定上下文(例如视图模型)中的 UserName 属性相关联。当用户输入时,UserName 属性会随之更新,反之亦然。

总结

  • 当你需要在控件模板中快速绑定到拥有该模板的控件的属性,并且不需要高级绑定功能时,使用 TemplateBinding
  • 当你需要从各种数据源进行绑定、需要使用数据转换或者需要数据绑定的更丰富特性时,使用 Binding

注意

TemplateBinding 只能在 ControlTemplateDataTemplate 中使用,而 Binding 可以在模板内外使用,是一个更通用的绑定手段。

ControlTemplate(一般在定义样式中使用)和DataTemplate(一般在ItemTemplate中使用):

DataTemplate(一般在ItemTemplate中使用):

  • DataTemplate用于定义如何显示数据对象当你绑定一个数据对象到某个控件时,DataTemplate决定了这个对象应该如何呈现在UI中。
  • 通常,DataTemplate用在像ListBoxListViewItemsControl这样的项控件中。这样,每当集合中有新项时,DataTemplate就会被应用到这些新的数据项上。
  • 你可以使用DataTemplate来定义一组控件,比如TextBlock, Button等,来展示绑定数据的不同属性。

例子: 自定义显示人员信息的DataTemplate

<ListBox x:Name="PeopleListBox">
    <ListBox.ItemTemplate>
        <DataTemplate>
            <StackPanel Orientation="Horizontal">
                <TextBlock Text="{Binding Name}" FontWeight="Bold" />
                <TextBlock Text=" (" />
                <TextBlock Text="{Binding Age}" Foreground="Blue" />
                <TextBlock Text=" years old)" />
            </StackPanel>
        </DataTemplate>
    </ListBox.ItemTemplate>
</ListBox>

在这个例子中,ListBox中的每个列表项都由一个StackPanel表示,其中展示了人员的姓名(Name)和年龄(Age),数据来自于绑定到ListBox的数据源。

ControlTemplate:

  • ControlTemplate定义了一个控件的整个视觉外观和行为。通过使用ControlTemplate,你可以彻底改变控件的外观,而不用改变它的功能
  • ControlTemplate可提供对控件的细粒度控制,甚至可以重新定义控件的结构。
  • ControlTemplate通常用于自定义标准WPF控件的外观,如ButtonCheckBoxSlider等。

例子: 自定义按钮的ControlTemplate

<Button Content="Click me">
    <Button.Template>
        <ControlTemplate TargetType="Button">
            <Border Background="SkyBlue" CornerRadius="5">
                <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" />
            </Border>
        </ControlTemplate>
    </Button.Template>
</Button>

在这个例子中,按钮的外观被自定义为带有圆角和天蓝色背景的样式,而按钮的基本功能和行为(如点击响应)保持不变。

结论

  • ControlTemplate 更多关注于控件本身的结构和外观,允许开发者重构整个控件的布局和样式。
  • DataTemplate 关注于数据的具体呈现方式,通常用于列表等集合控件中,定义集合内每个项的展示模板。

以上两者可以组合使用,实现复杂和高度自定义的UI表现。

posted @ 2024-07-07 16:45  乐le`  阅读(119)  评论(0编辑  收藏  举报