2011年8月9日 星期二

Expression Blend(37)-ItemsControl Template-ListBox

本範例使用WPF專案
本練習介紹設計ItemsControl,ListBox的ItemTemplate與ItemsPanelTemplate
  • 放入ListBox
  • ListBox->Add ListBoxItem
  • image
  • ListBox –>Edit Template->Create Empty 使用預設名稱即可
image
  • 進入Template設計狀態,Grid->Change Layout Type –>Border
     image
  • 使用Gradient Tools設Background
    image
  • 放入ScrollViewer, 放入ItemsPresenter, Width, Height為Auto image
  • ListBox->Edit Additional Templates->Edit Layout of Items-> Edit a Copy
  • 設VirtualizingStackPanel的Effect
    image
  • 選DropShadowEffectimage
  • 完成
image
  • 參考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>

沒有留言:

總瀏覽量