根據數據的功能/內容將數據綁定到不同的元素

Question

在閱讀關於我注意到的數據模板時，您可以根據數據類型選擇不同的模板。 - 但是，也可以這樣做，針對不同的內容的數據？

我的模型視圖提供了一個數據列表，原則上它只是一個元組列表（綁定在自定義類中以便於打字）與Tuple<ImageData, AltText>。 類型的模型視圖的屬性是：

ReadOnlyObservableCollection<ThumbDispData> 

隨着ThumbDispData：

public class ThumbDispData 
{ 
    public ImageData Idhl { get; set; } 
    public string AltText { get; set; } 
} 

現在我想顯示Image如果它能夠（ImageData.Source爲非null） - 否則它應該顯示的ALT文本。

的XAML或用戶控件：

<UserControl x:Class="test.ThumbPanel" 
      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
      xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
      xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
      xmlns:test="clr-namespace:test" 
      mc:Ignorable="d" 
      d:DesignHeight="300" d:DesignWidth="300"> 
    <UserControl.Resources> 
     <DataTemplate DataType="{x:Type test:ThumbDispData}"> 
      <TextBlock Text="{Binding AltText}"></TextBlock> 
     </DataTemplate> 
    </UserControl.Resources> 
    <Grid Background="Transparent"> 
     <ItemsControl ItemsSource="{Binding}"> 
      <ItemsControl.ItemsPanel> 
       <ItemsPanelTemplate> 
        <WrapPanel IsItemsHost="True" /> 
       </ItemsPanelTemplate> 
      </ItemsControl.ItemsPanel> 
     </ItemsControl> 
    </Grid> 
</UserControl> 

遠高於只顯示ALT文本（工作）：我將如何創建一個基於ThumbDispData內容的選擇。

Answer 1

你可以使用一個DataTemplateSelector：

<UserControl.Resources> 
    <DataTemplate x:Key="tt" DataType="{x:Type test:ThumbDispData}"> 
     <TextBlock Text="{Binding AltText}"></TextBlock> 
    </DataTemplate> 
    <DataTemplate x:Key="img" DataType="{x:Type test:ThumbDispData}"> 
     <Image Source="{Binding Idhl}" /> 
    </DataTemplate> 
    <local:Selector x:Key="selector" TextTemplate="{StaticResource tt}" ImageTemplate="{StaticResource img}" /> 
</UserControl.Resources> 
<Grid Background="Transparent"> 
    <ItemsControl ItemsSource="{Binding}" ItemTemplateSelector="{StaticResource selector}"> 
     <ItemsControl.ItemsPanel> 
      <ItemsPanelTemplate> 
       <WrapPanel IsItemsHost="True" /> 
      </ItemsPanelTemplate> 
     </ItemsControl.ItemsPanel> 
    </ItemsControl> 
</Grid> 

---

public class Selector : DataTemplateSelector 
{ 
    public DataTemplate ImageTemplate { get; set; } 
    public DataTemplate TextTemplate { get; set; } 

    public override DataTemplate SelectTemplate(object item, DependencyObject container) 
    { 
     ThumbDispData data = item as ThumbDispData; 
     if (data != null && data.Idhl != null) 
      return ImageTemplate; 


     return TextTemplate; 
    } 
} 

Answer 2

我會根據ThumbDispData的內容創建一個選擇器。

你通常會寫的DataTemplateSelector一個子類，在您檢查Idhl財產，並返回取決於它是否是空或不是一個不同的模板對象。通常，模板將是一個資源，您可以在選擇器中動態加載。

但是您的場景很簡單，我會使用樣式代替。例如：

<DataTemplate DataType="{x:Type test:ThumbDispData}" 
    xmlns:p="http://schemas.microsoft.com/winfx/2006/xaml/presentation"> 
    <Grid> 
    <TextBlock Text="{Binding AltText}"> 
     <TextBlock.Style> 
     <p:Style TargetType="TextBlock"> 
      <Setter Visibility="Visible"/> 
      <p:Style.Triggers> 
      <DataTrigger Binding="{Binding Idhl}" Value="{x:Null}"> 
       <Setter Visibility="Collapsed"/> 
      </DataTrigger> 
      </p:Style> 
     </p:Style> 
     </TextBlock.Style> 
    </TextBlock> 
    <Image Source="{Binding Idhl}"> 
     <Image.Style> 
     <p:Style TargetType="Image"> 
      <Setter Visibility="Collapsed"/> 
      <p:Style.Triggers> 
      <DataTrigger Binding="{Binding Idhl}" Value="{x:Null}"> 
       <Setter Visibility="Visible"/> 
      </DataTrigger> 
      </p:Style> 
     </p:Style> 
     </Image.Style> 
    </Image> 
    </Grid> 
</DataTemplate> 

注：

• 嚴格地說，你不需要在TextBlock風格<Setter Visibility="Visible"/>，因爲這是默認值。我把它放在那裏，因爲它有助於記錄兩個元素的風格之間的對稱性。
• xmlns:p聲明僅作爲堆棧溢出解決方法，因爲XML格式化程序在其他情況下不會正確處理XAML Style元素。在真正的XAML中，您可以將其保留，直接使用Style名稱而不是p:Style。