十分鐘帶你搞懂WPF模板Template

三類模板(ControlTemplate,DataTemplate,ItemsPanelTemplate )

ControlTemplate(所有控件的顯示渲染)

是用來重寫現有控件的可視結構的,一般和依賴屬性和附加屬性結合,加上綁定,控件可以獲得很好的擴展。

demo

以下是一個簡單的WPF ControlTemplate樣式示例。這個示例是爲一個Button控件定義的樣式。

<Window.Resources>  
    <Style TargetType="Button">  
        <Setter Property="Template">  
            <Setter.Value>  
                <ControlTemplate TargetType="Button">  
                    <Border Name="Border"   
                           BorderBrush="Black"   
                           BorderThickness="1"   
                           Background="{TemplateBinding Background}"   
                           Padding="5">  
                        <ContentPresenter Content="{TemplateBinding Content}"   
                                          ContentTemplate="{TemplateBinding ContentTemplate}"   
                                          HorizontalAlignment="Center"   
                                          VerticalAlignment="Center"/>  
                    </Border>  
                </ControlTemplate>  
            </Setter.Value>  
        </Setter>  
    </Style>  
</Window.Resources>  
  
<Grid>  
    <Button Content="Hello, World!" />  
</Grid>

這個樣式中,我們創建了一個新的ControlTemplate,爲Button控件定義了一個新的外觀。這個模板包含一個Border,我們設置了一些其屬性,如背景色、邊框顏色和邊框寬度。然後,我們添加了一個ContentPresenter,用於顯示Button的Content。

在XAML中使用這個樣式,只需要將樣式應用到任何Button控件即可。在這個例子中,我們直接在Grid中創建了一個Button,它會自動應用這個樣式。

DataTemplate(數據集合呈現控制)ListBox

概念:用於定義數據對象的可視化結構的。將數據集合綁定給控件
用途:用於數據集合控件:ItemsControl,ListBox,ListView,DataGrid

demo

以下是一個簡單的WPF DataTemplate示例。這個示例是爲一個具有自定義數據對象(例如名爲“Person”)的控件定義的樣式。

<Window.Resources>  
    <DataTemplate x:Key="PersonDataTemplate">  
        <StackPanel>  
            <TextBlock Text="{Binding Name}" FontWeight="Bold" />  
            <TextBlock Text=" (" />  
            <TextBlock Text="{Binding Age}" FontSize="smaller" />  
            <TextBlock Text=")" />  
        </StackPanel>  
    </DataTemplate>  
</Window.Resources>  
  
<Grid>  
    <ListBox ItemsSource="{Binding Persons}" ItemTemplate="{StaticResource PersonDataTemplate}" />  
</Grid>

在ListBox控件中,我們通過設置“ItemsSource”屬性來綁定一個Persons集合,並通過設置“ItemTemplate”屬性來應用我們之前定義的“PersonDataTemplate”。這樣,ListBox將會自動根據PersonDataTemplate展示每個Person對象的數據。

ItemsPanelTemplate 容器模板(數據集合排列控件)

ItemsPanelTemplate可以用來定義集合控件的容器外觀。ListBox的每一項的排列方式是遵循StackPanel的
原則,也就是從上到下的排列方式。如果要實現從左到右排列.ComboBox默認是豎直排列的,我們要橫着排列,只需要定義ItemsPanel爲WrapPanel,就可以了。

關注我,WPF FlyUI框架作者
github地址:https://github.com/AatroxBot/FlyUI.Demo.git
碼雲地址:https://gitee.com/Aatrox1/fly-ui-demo.git

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章