程序師世界是廣大編程愛好者互助、分享、學習的平台,程序師世界有你更精彩!
首頁
編程語言
C語言|JAVA編程
Python編程
網頁編程
ASP編程|PHP編程
JSP編程
數據庫知識
MYSQL數據庫|SqlServer數據庫
Oracle數據庫|DB2數據庫
 程式師世界 >> 編程語言 >> .NET網頁編程 >> 關於.NET >> WPF的模板選擇

WPF的模板選擇

編輯:關於.NET

典型的,把模板關聯到一塊特定的數據上,不過通常希望動態的確定使用哪個模板---既可以基於一個屬 性值,也可以是一個全局狀態。當真正需要大規模替換模板時,也可以使用DataTemplateSelector。

DataTemplateSelector提供了一個單一的方法----SelectTemplate,以允許通過執行任何邏輯來決定 使用哪個模板。可以在被包含的元素中查找模板,並返回一些硬編碼的模板,甚至動態的為每個條目創建模板 。

首先,創建一個繼承自DataTemplateSelector的類,並完成一些在幾個模板中進行旋轉的邏輯。在 這個例子中,將找到XmlElement的LocalName,並從容器中獲取具有該名稱的資源,代碼如下:

public class LocalNameTemplateSelector : DataTemplateSelector
    
   {
    
       public override DataTemplate SelectTemplate (object item,DependencyObject container)

       {
    
           XmlElement data = item as XmlElement;

           if (data != null)
    
           {
    
               return ((FrameworkElement)container).FindResource(data.LocalName) as DataTemplate;
    
           }
    
           return null;
    
       }
    
   }

為了初始化所有的模板,將構建三個模板:用於書籍的棕色矩形,用於CD的銀色圓形以及用於 DVD的藍色圓形。由於模板選擇器將查找XmlElement的本地名稱,所以需要為每個模板設置X:Key,代碼如下:

<DataTemplate x:Key="Book" DataType="{x:Type sx:XmlElement}">
           <StackPanel Orientation="Horizontal">
           <Rectangle Margin="2" Width="14" Height="14" Fill="Brown"/>
           <TextBlock  VerticalAlignment="Center" Text="{Binding XPath=@Title}"></TextBlock>
           </StackPanel>
       </DataTemplate>
    
       <DataTemplate x:Key="CD" DataType="{x:Type sx:XmlElement}">
           <StackPanel Orientation="Horizontal">
               <Ellipse Margin="2" Width="14" Height="14" Fill="Silver"/>
               <TextBlock  VerticalAlignment="Center" Text="{Binding XPath=@Title}"></TextBlock>
           </StackPanel>
       </DataTemplate>
    
       <DataTemplate x:Key="DVD" DataType="{x:Type sx:XmlElement}">
           <StackPanel Orientation="Horizontal">
               <Ellipse Margin="2" Width="14" Height="14" Fill="Blue"/>
               <TextBlock  VerticalAlignment="Center" Text="{Binding XPath=@Title}"></TextBlock>
           </StackPanel>
       </DataTemplate>

余下的就是把模板選擇器和ListBox進行關聯,而不是設置靜態模板 ,代碼如下:

<ListBox ItemsSource="{Binding XPath=/Media/*}">
           <ListBox.ItemTemplateSelector>
               <l:LocalNameTemplateSelector xmlns:l="clr-namespace:WpfProgressBarDemo"/>
           </ListBox.ItemTemplateSelector>
       </ListBox>

前台完整代碼如下:

<Window x:Class="WpfProgressBarDemo.DataTemplateSelectorDemo"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:sx="clr-namespace:System.Xml;assembly=System.Xml"
           
        Title="DataTemplateSelector" Height="300" Width="300"
            
        DataContext="{DynamicResource dataSource}"
        >
        
    <Window.Resources>
        <!--數據源-->
        <XmlDataProvider x:Key="dataSource">
            <x:XData>
                <Media xmlns="">
                    <Book Author="Aretch" Title="WCF全面解析"/>
                    <Book Author="ByVoid" Title="Node.js開發指南"/>
                    <Book Author="Rogers Cardenhead" Title="21天學通Java"/>
                    <CD  Title="沒有CD了"/>
                    <DVD  Title="《十面埋伏》"/>
                </Media>
            </x:XData>
        </XmlDataProvider>
        <DataTemplate x:Key="Book" DataType="{x:Type sx:XmlElement}">
            <StackPanel Orientation="Horizontal">
            <Rectangle Margin="2" Width="14" Height="14" Fill="Brown"/>
            <TextBlock  VerticalAlignment="Center" Text="{Binding XPath=@Title}"></TextBlock>
            </StackPanel>
        </DataTemplate>
    
        <DataTemplate x:Key="CD" DataType="{x:Type sx:XmlElement}">
            <StackPanel Orientation="Horizontal">
                <Ellipse Margin="2" Width="14" Height="14" Fill="Silver"/>
                <TextBlock  VerticalAlignment="Center" Text="{Binding XPath=@Title}"></TextBlock>
            </StackPanel>
        </DataTemplate>
    
        <DataTemplate x:Key="DVD" DataType="{x:Type sx:XmlElement}">
            <StackPanel Orientation="Horizontal">
                <Ellipse Margin="2" Width="14" Height="14" Fill="Blue"/>
                <TextBlock  VerticalAlignment="Center" Text="{Binding XPath=@Title}"></TextBlock>
            </StackPanel>
        </DataTemplate>
    </Window.Resources>
    <Grid>
        <ListBox ItemsSource="{Binding XPath=/Media/*}">
            <ListBox.ItemTemplateSelector>
                <l:LocalNameTemplateSelector xmlns:l="clr-namespace:WpfProgressBarDemo"/>
            </ListBox.ItemTemplateSelector>
        </ListBox>
    </Grid>
</Window>

效果如下:

好了完成了,本實例除了可以 學怎樣動態進行模板選擇,哪還將學會怎樣使用XML數據綁定。另外為了使讀者能更好的理解,現提供另一個 我項目中的例子供大家參考

後台:

public class LocalNameTemplateSelector : 

DataTemplateSelector
  {
      public override DataTemplate SelectTemplate(object item, DependencyObject container)
      {
          if (item != null && item is DeviceCheckInfo)
          {
              DeviceCheckInfo device = item as DeviceCheckInfo;
    
              Window2 win = new Window2();
              if (device.CheckResult)
                  return win.FindResource("dui") as DataTemplate;
              else
                  return win.FindResource("cuo") as DataTemplate;
          }
          return null;
      }
  }
    
public class DeviceCheckInfo
  {
      //設備名稱
      public string Name { get; set; }
      //檢測內容
      public string CheckContent { get; set; }
      //檢測結果
      public bool CheckResult { get; set; }
  }

Xaml部分:

<Window x:Class="WpfProgressBarDemo.Window2"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="clr-namespace:WpfProgressBarDemo"
        Title="Window2" Height="433" Width="500" Loaded="Window_Loaded">
    <Window.Resources>
        <local:IShowTrueOrFalse x:Key="convetToImage"></local:IShowTrueOrFalse>
    
        <Style TargetType="TextBlock" >
            <Setter Property="HorizontalAlignment" Value="Center"/>
            <Setter Property="VerticalAlignment" Value="Center"/>
            <Setter Property="Margin" Value="30"/>
            <Setter Property="FontSize" Value="20"/>
        </Style>
    
        <DataTemplate x:Key="dui" DataType="{x:Type local:DeviceCheckInfo}" >
            <StackPanel Orientation="Horizontal" CheckBox.Checked="StackPanel_Checked">
                <TextBlock Text="{Binding Path=Name}" Margin="10"  VerticalAlignment="Center" FontSize="20"/>
                <TextBlock Text="{Binding Path=CheckContent}" Margin="10" 

VerticalAlignment="Center" FontSize="20"/>
                <Path x:Name="dui" Data="M43,5 L20,40 20,40 0,20 6,15 18,26 37,7 43,5 z" Fill="Green" Margin="5"  Stretch="Fill"/>
                <CheckBox Name="checkbox" Checked="checkbox_Checked"/>
            </StackPanel>
        </DataTemplate>
    
        <DataTemplate x:Key="cuo" DataType="{x:Type local:DeviceCheckInfo}">
            <StackPanel Orientation="Horizontal">
                <TextBlock Text="{Binding Path=Name}" Margin="10" VerticalAlignment="Center" FontSize="20"/>
                <TextBlock Text="{Binding Path=CheckContent}" Margin="10" 

VerticalAlignment="Center" FontSize="20"/>
    
                <Path Margin="5" Data="M50,25 L25,50 M25,25 50,50" Fill="#FFF4F4F5"  

Height="40" Stretch="Fill" Stroke="Red"  Width="40" StrokeThickness="8"/>
                <CheckBox Name="checkbox" Checked="checkbox_Checked"/>
            </StackPanel>
        </DataTemplate>
        <local:LocalNameTemplateSelector x:Key="myDataTemplateSelector"/>
    </Window.Resources>
    
    <Grid>
        <ListBox Name="lbtest" ItemTemplateSelector="{StaticResource myDataTemplateSelector}" 

SelectionChanged="lbtest_SelectionChanged" />
           
           </Grid>
</Window>

效果如下:

這個是自己畫了對勾和叉叉然後當模板了。

  1. 上一頁:
  2. 下一頁:
Copyright © 程式師世界 All Rights Reserved