2015-02-09 17 views
1

我有一個用戶控件與項目控件,我希望它有2個完全不同的項目模板樣式取決於替代索引。我看過很多關於如何根據索引更改背景顏色但不更改每個索引樣式的教程。這是迄今爲止我所擁有的。ItemsControl使用兩個DataTemplates使用AlternationIndex觸發器,XAML

定義的模板:

<UserControl.Resources> 
    <DataTemplate x:Key="ItemLeft" > 
     <Border Background="Blue" Height="10"> 
      <!-- Define Left Style --> 

     </Border> 
    </DataTemplate> 
    <DataTemplate x:Key="ItemRight"> 
     <Border Background="Red" Height="10"> 
      <!-- Define Right Style --> 

     </Border> 
    </DataTemplate> 
</UserControl.Resources> 

我已經刪除了數據模板代碼,使其更易於閱讀。這比邊框顏色要多得多。

項的控制:

 <ItemsControl Name="ItemControl" AlternationCount="2"> 
      <ItemsControl.ItemsPanel> 
       <ItemsPanelTemplate> 
        <VirtualizingStackPanel IsItemsHost="True"/> 
       </ItemsPanelTemplate> 
      </ItemsControl.ItemsPanel> 
      <ItemsControl.Style> 
       <Style> 
        <Style.Triggers> 
         <Trigger Property="ItemsControl.AlternationIndex" Value="0"> 
          <Setter Property="ItemsControl.ItemTemplate" Value="{StaticResource ItemRight}"/> 
         </Trigger> 
         <Trigger Property="ItemsControl.AlternationIndex" Value="1"> 
          <Setter Property="ItemsControl.ItemTemplate" Value="{StaticResource ItemLeft}"/> 
         </Trigger> 
        </Style.Triggers> 
       </Style> 
      </ItemsControl.Style> 
     </ItemsControl> 

我敢肯定,我不應該做這種類型的觸發器的風格,但我不知道怎麼回事做到這一點。我是使用WPF的新手,我發現它大部分非常直觀,但我迷失在這裏。我想嘗試將其包含到XAML代碼中。

感謝

+0

你打算只改變背景顏色還是控件的佈局也會改變? – dkozl 2015-02-09 16:37:51

+0

我需要更改佈局。索引0的內容將左對齊,索引1的內容將右對齊。 – 2015-02-09 16:46:56

回答

3

ItemTemplate適用於所有項目。你可以做的是使用ContentControl作爲ItemTemplate基於ItemsControl.AlternationIndex

<ItemsControl Name="ItemControl" AlternationCount="2"> 
    <ItemsControl.ItemsPanel> 
     <ItemsPanelTemplate> 
      <VirtualizingStackPanel IsItemsHost="True"/> 
     </ItemsPanelTemplate> 
    </ItemsControl.ItemsPanel> 
    <ItemsControl.ItemTemplate> 
     <DataTemplate> 
      <ContentControl Content="{Binding}"> 
       <ContentControl.Style> 
        <Style TargetType="{x:Type ContentControl}"> 
         <Setter Property="ContentTemplate" Value="{StaticResource ItemLeft}"/> 
         <Style.Triggers> 
          <DataTrigger Binding="{Binding RelativeSource={RelativeSource Mode=FindAncestor,AncestorType={x:Type ContentPresenter}}, Path=(ItemsControl.AlternationIndex)}" Value="1"> 
           <Setter Property="ContentTemplate" Value="{StaticResource ItemRight}"/>          
          </DataTrigger> 
         </Style.Triggers> 
        </Style> 
       </ContentControl.Style> 
      </ContentControl> 
     </DataTemplate> 
    </ItemsControl.ItemTemplate> 
</ItemsControl> 
+1

看起來我還有很多東西需要學習。感謝解釋以及代碼。奇蹟般有效。 – 2015-02-09 17:05:23

1

是選擇ContentTemplate自定義樣式更簡單的解決辦法是設置ItemContainerStyle,並使用觸發器,而不是一個DataTrigger爲AlternationIndex:

<ItemsControl ... AlternationCount="2"> 
    <ItemsControl.ItemContainerStyle> 
     <Style TargetType="ContentPresenter"> 
      <Setter Property="ContentTemplate" Value="{StaticResource ItemLeft}"/> 
      <Style.Triggers> 
       <Trigger Property="ItemsControl.AlternationIndex" Value="1"> 
        <Setter Property="ContentTemplate" 
          Value="{StaticResource ItemRight}"/> 
       </Trigger> 
      </Style.Triggers> 
     </Style> 
    </ItemsControl.ItemContainerStyle> 
    ... 
</ItemsControl>