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>

做成后的效果图：

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