Expression Blend(37)-ItemsControl Template-ListBox

本範例使用WPF專案
本練習介紹設計ItemsControl，ListBox的ItemTemplate與ItemsPanelTemplate

• 放入ListBox
• ListBox->Add ListBoxItem

• ListBox –>Edit Template->Create Empty 使用預設名稱即可

• 進入Template設計狀態，Grid->Change Layout Type –>Border
   
• 使用Gradient Tools設Background
  
• 放入ScrollViewer, 放入ItemsPresenter, Width, Height為Auto
• ListBox->Edit Additional Templates->Edit Layout of Items-> Edit a Copy
• 設VirtualizingStackPanel的Effect
  
• 選DropShadowEffect

• 完成

• 參考XAML如下

<Window
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    x:Class="WpfApplication12.Window1"
    x:Name="Window"
    Title="Window1"
    Width="640" Height="480">
    <Window.Resources>
        <ControlTemplate x:Key="ListBoxControlTemplate1" TargetType="{x:Type ListBox}">
            <ListBox x:Name="listBox" Margin="0,0,32,-24"/>
        </ControlTemplate>
        <ItemsPanelTemplate x:Key="ItemsPanelTemplate1">
            <VirtualizingStackPanel IsItemsHost="True" HorizontalAlignment="Left">
                <VirtualizingStackPanel.Effect>
                    <DropShadowEffect/>
                </VirtualizingStackPanel.Effect>
            </VirtualizingStackPanel>
        </ItemsPanelTemplate>
    </Window.Resources>
    <Grid x:Name="LayoutRoot">
        <ListBox x:Name="listBox" Height="112" Margin="256,88,248,0" VerticalAlignment="Top" Template="{DynamicResource ListBoxControlTemplate1}" ItemsPanel="{DynamicResource ItemsPanelTemplate1}">
            <ListBoxItem Content="ListBoxItem"/>
            <ListBoxItem Content="ListBoxItem"/>
        </ListBox>       
    </Grid>
</Window>