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>

做成后的效果图：

可以左右翻页，每页中得项目数根据自己定义的列表显示。