WPF中使用ItemsControl嵌套綁定，在ItemsControl中嵌套一個ItemsControl，然后使用綁定(2)

為了能夠適應不同分辨率的顯示器，所以把第一層 DataTemplate 的 Width 屬性和 SystemParameters.PrimaryScreenWidth 綁定了，實際上是通過一個 Converter 實現的(見 Source)。

 

第二層 ItemsControl 的 DataTemplate 的 width 屬性也想綁定到 SystemParameters.PrimaryScreenWidth，於是也自定義了一個 Converter。並且通過<local:MyConverter2 x:Key="C2ItemW"/> 引入。

 

需要說明的是，如果兩層 DataTemplate 聲明稱一個 Resource，這時第二層 DataTemplate 的綁定總是不起作用（可能是我方法不對）。如果把第二層的提出來，單獨作為一個 Resource聲明。然后在第一層 DataTemplate 中通過 ItemTemplate指定就可以了。

 

下面上Source：

主ItemsControl：

<ItemsControl Background="Green" ItemTemplate="{StaticResource xItemTemplate}">
                <ItemsControl.ItemsPanel>
                    <ItemsPanelTemplate>
                        <StackPanel Orientation="Horizontal" VerticalAlignment="Center"/>
                    </ItemsPanelTemplate>
                </ItemsControl.ItemsPanel>                
            </ItemsControl>

 

第一層DataTemplate的Resource：

<DataTemplate x:Key="xItemTemplate" DataType="{x:Type local:Items}">

　　　　　　　　<!-- 就是這里指定第二層DataTemplate -->
　　<ItemsControl ItemsSource="{Binding SubItems}" 
　　　　ItemTemplate="{StaticResource xItemsBase}" 
　　　　HorizontalContentAlignment="Center" 
　　　　ScrollViewer.HorizontalScrollBarVisibility="Hidden">
　　　　<ItemsControl.ItemsPanel>
　　　　　　<ItemsPanelTemplate>
　　　　　　　　<StackPanel Orientation="Horizontal" VerticalAlignment="Center" 
　　　　　　　　　　　　HorizontalAlignment="Center"
　　　　　　　　　　　　Width="{Binding Converter={StaticResource Convert2BasePanelWidth}}"
　　　　　　　　       Margin="133,0"/>
　　　　　　</ItemsPanelTemplate>
　　　　</ItemsControl.ItemsPanel>
　　</ItemsControl>
</DataTemplate>

 

第二層DataTemplate：

<local:MyConverter1 x:Key="Convert2BasePanelWidth"/>
<local:MyConverter2 x:Key="Convert2ItemWidth"/>
<DataTemplate x:Key="xItemsBase">
    <DataTemplate.Resources>
        <Style TargetType="{x:Type Border}">
            <Setter Property="BorderBrush" Value="Orange"/>
            <Style.Triggers>
                <Trigger Property="IsMouseOver" Value="True">
                    <Trigger.EnterActions>
                        <BeginStoryboard>
                            <Storyboard>
                                <ThicknessAnimation Storyboard.TargetProperty="Margin" To="0" Duration="0:0:.2"/>
                                <ThicknessAnimation Storyboard.TargetProperty="BorderThickness" To="1.5" Duration="0:0:.15"/>
                            </Storyboard>
                        </BeginStoryboard>
                    </Trigger.EnterActions>
                    <Trigger.ExitActions>
                        <BeginStoryboard>
                            <Storyboard>
                                <ThicknessAnimation Storyboard.TargetProperty="Margin" To="4" Duration="0:0:.2"/>
                                <ThicknessAnimation Storyboard.TargetProperty="BorderThickness" To="3" Duration="0:0:.15"/>
                            </Storyboard>
                        </BeginStoryboard>
                    </Trigger.ExitActions>
                </Trigger>
            </Style.Triggers>
        </Style>
    </DataTemplate.Resources>
    <StackPanel Orientation="Vertical" Width="{Binding Converter={StaticResource Convert2ItemWidth}}"  VerticalAlignment="Center" HorizontalAlignment="Center">
        <Border BorderThickness="3" CornerRadius="7"  Margin="4,0">
            <Image Source="{Binding Image}" Stretch="Uniform" MouseEnter="Image_MouseEnter" MouseLeave="Image_MouseLeave"/>
        </Border>
        <TextBlock Text="{Binding Name}" Margin="4,0" FontSize="16" HorizontalAlignment="Center" VerticalAlignment="Top" FontFamily="Segoe UI"/>
    </StackPanel>
</DataTemplate>

做成后的效果圖：

可以左右翻頁，每頁中得項目數根據自己定義的列表顯示。