UWP开发入门（十八）——使用ContentControl减少页面元素数量

　　我们今天学习一下ContentControl，主要介绍如何使用ContentControl搭配DataTemplate来进行界面的复用，以及通过ContentTemplateSelector进一步减少页面元素数量，提高性能。

　　假设我们的UWP APP为左右分开两列，左边为ListView显示集合，右边为ListView中选中项的明细页面。左侧ListView会列出每一项的Avatar，共分三种：1.有图像的显示图像。2.没图像有名字显示首字母，3.图像名字都没有，显示两个圈圈。同时在ListView被选中某项时，就在右侧显示大号的Avatar。

　　是不是挺眼熟的，一看又是把生产上的东西简化出来做Demo了……

　　可以拿来复用的就是Avatar这块了，我们先尝试着用ContentControl和DataTemplate来绘制这块内容：

        <DataTemplate x:Key="AvatarWithVisibility">
            <Grid >
                <Grid Visibility="{Binding Converter={StaticResource RoomTypeConverter},ConverterParameter=Name}">
                    <Ellipse Fill="Green"></Ellipse>
                    <TextBlock Text="{Binding Index}" TextAlignment="Center" VerticalAlignment="Center"></TextBlock>
                </Grid>
                <Grid Visibility="{Binding Converter={StaticResource RoomTypeConverter},ConverterParameter=Image}">
                    <Ellipse >
                        <Ellipse.Fill>
                            <ImageBrush ImageSource="{Binding ImageUri}"></ImageBrush>
                        </Ellipse.Fill>
                    </Ellipse>
                </Grid>
                <Grid CacheMode="BitmapCache" Visibility="{Binding Converter={StaticResource RoomTypeConverter},ConverterParameter=Default}">
                    <Grid.RowDefinitions>
                        <RowDefinition></RowDefinition>
                        <RowDefinition Height="2*"></RowDefinition>
                        <RowDefinition></RowDefinition>
                    </Grid.RowDefinitions>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition></ColumnDefinition>
                        <ColumnDefinition Width="2*"></ColumnDefinition>
                        <ColumnDefinition></ColumnDefinition>
                    </Grid.ColumnDefinitions>

                    <Ellipse Grid.Row="0" Grid.Column="0" Grid.RowSpan="2" Grid.ColumnSpan="2" Fill="Green">
                    </Ellipse>
                    <Ellipse Grid.Row="1" Grid.Column="1" Grid.RowSpan="2" Grid.ColumnSpan="2" Fill="Orange">
                    </Ellipse>
                </Grid>
            </Grid>
        </DataTemplate>

　　很常规的写法，三个重叠的Grid通过RoomTypeConverter来确定Visibility的值，以便确定具体显示哪一个。该DataTemplate的使用页面如下：

    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <Grid.ColumnDefinitions>
            <ColumnDefinition></ColumnDefinition>
            <ColumnDefinition></ColumnDefinition>
        </Grid.ColumnDefinitions>
        <ListView x:Name="listViewAvatar" Grid.Column="0" ItemsSource="{Binding Rooms}">
            <ListView.ItemTemplate>
                <DataTemplate>
                    <Grid>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition ></ColumnDefinition>
                            <ColumnDefinition></ColumnDefinition>

                        </Grid.ColumnDefinitions>

                        <ContentControl Grid.Column="0" HorizontalContentAlignment="Stretch" VerticalContentAlignment="Stretch" Width="50" Height="50"
                                        ContentTemplate="{StaticResource AvatarWithVisibility}"></ContentControl>

                        <StackPanel Grid.Column="1" >
                            <TextBlock  Text="{Binding Name}"></TextBlock>
                            <TextBlock  Text="{Binding ImageUri}"></TextBlock>
                        </StackPanel>
                    </Grid>
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>

        <ContentControl Grid.Column="1" HorizontalContentAlignment="Stretch" VerticalContentAlignment="Stretch"
                        Content="{Binding SelectedItem,ElementName=listViewAvatar}" Width="150" Height="150"
                        ContentTemplate="{StaticResource AvatarWithVisibility}"></ContentControl>
    </Grid>

　　可以看到页面分成了左右两块，左边ListView的ItemTemplate以及右半边各自使用了ContentControl，其中右半边的ContentControl把Content属性Binding到了ListView的SelectedItem上。通过上述例子可以明显地看到ContentControl复用了DataTemplate的内容，那有没有更进一步的优化呢？

　　原则上我们希望尽最大可能的减少页面上显示的UIElement的数量，这样能够使布局设置和呈现的速度更快。下面我们尝试用ContentTemplateSelector来优化一下当前的页面。

　　首先不再通过Visibility区分显示的Grid，而是将三个不同的Grid拆分开来，通过ContentTemplateSelector每次选择正确的样式来显示。因为Visibility即时为Collapsed，在可视化树上仍然会作为UIElement存在。

        <DataTemplate x:Key="Name">
            <Grid>
                <Ellipse Fill="Green"></Ellipse>
                <TextBlock Text="{Binding Index}" TextAlignment="Center" VerticalAlignment="Center"></TextBlock>
            </Grid>

        </DataTemplate>

        <DataTemplate x:Key="Image">
            <Grid>
            <Ellipse >
                <Ellipse.Fill>
                    <ImageBrush ImageSource="{Binding ImageUri}"></ImageBrush>
                </Ellipse.Fill>
            </Ellipse>
            </Grid>
        </DataTemplate>

        <DataTemplate x:Key="Default">
            <Grid CacheMode="BitmapCache">
                <Grid.RowDefinitions>
                    <RowDefinition></RowDefinition>
                    <RowDefinition Height="2*"></RowDefinition>
                    <RowDefinition></RowDefinition>
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition></ColumnDefinition>
                    <ColumnDefinition Width="2*"></ColumnDefinition>
                    <ColumnDefinition></ColumnDefinition>
                </Grid.ColumnDefinitions>

                <Ellipse Grid.Row="0" Grid.Column="0" Grid.RowSpan="2" Grid.ColumnSpan="2" Fill="Green">
                </Ellipse>
                <Ellipse Grid.Row="1" Grid.Column="1" Grid.RowSpan="2" Grid.ColumnSpan="2" Fill="Orange">
                </Ellipse>
            </Grid>
        </DataTemplate>

　　之前的DataTemplate被拆成三个，并通过CustomTemplateSelector来使用，同一时间可视化树上将只会显示其中一个Grid的内容。

    public class CustomTemplateSelector : DataTemplateSelector
    {
        protected override DataTemplate SelectTemplateCore(object item, DependencyObject container)
        {
            var room = item as Room;
            if (item == null)
            {
                return base.SelectTemplateCore(item, container);
            }
            if (room.ImageUri == null)
            {
                if (string.IsNullOrEmpty(room.Name))
                {
                    return App.Current.Resources["Default"] as DataTemplate;
                }

                return App.Current.Resources["Name"] as DataTemplate;
            }

            return App.Current.Resources["Image"] as DataTemplate;
        }
    }

　　实际使用的XAML有点类似于ListView本身的ItemTemplateSelector：

    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <Grid.ColumnDefinitions>
            <ColumnDefinition></ColumnDefinition>
            <ColumnDefinition></ColumnDefinition>
        </Grid.ColumnDefinitions>
        <ListView x:Name="listViewAvatar" Grid.Column="0" ItemsSource="{Binding Rooms}">
            <ListView.ItemTemplate>
                <DataTemplate>
                    <Grid>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition ></ColumnDefinition>
                            <ColumnDefinition></ColumnDefinition>

                        </Grid.ColumnDefinitions>
                        <ContentControl Grid.Column="0" ContentTemplateSelector="{StaticResource CustomTemplateSelector}"
                                        Content="{Binding}" Width="50" Height="50" HorizontalContentAlignment="Stretch" VerticalContentAlignment="Stretch"></ContentControl>
                        <StackPanel Grid.Column="1" >
                            <TextBlock  Text="{Binding Name}"></TextBlock>
                            <TextBlock  Text="{Binding ImageUri}"></TextBlock>
                        </StackPanel>
                    </Grid>
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>

        <ContentControl Grid.Column="1" ContentTemplateSelector="{StaticResource CustomTemplateSelector}"
                        Content="{Binding SelectedItem,ElementName=listViewAvatar}" Width="150" Height="150"
                        HorizontalContentAlignment="Stretch" VerticalContentAlignment="Stretch">
        </ContentControl>
    </Grid>

　　XAML看上去和之前似乎没什么不同，但即使是这种简单的模板，在ListView中元素数量达到1000个时（因为虚拟化的缘故，实际远远不到1000个），可视化树上已经有了不小的数量差距。1300 VS 850，实际更复杂的DataTemplate将会有更大的数量差。

　　另外需要指出的是，以上代码是在VS2015 Update3下完成的。如果是旧的VS2015 Update1，在列表快速滑动时，虚拟化会导致列表中ContentControl错位的显示，需要额外的Binding一个DataContext：

            <ContentControl Grid.Column="0" ContentTemplateSelector="{StaticResource CustomTemplateSelector}" DataContext="{Binding}"
                            Content="{Binding}" Width="50" Height="50" HorizontalContentAlignment="Stretch" VerticalContentAlignment="Stretch"></ContentControl>
            <StackPanel Grid.Column="1" >

　　以上就是今天的内容了，希望能给各位一点帮助。谢谢能看到这里的各位！

　　顺便吐槽一下UWP不好做啊，除了明面上强大的竞争对手iOS和安卓，其实身后还有传统的Win32程序，毕竟UWP可以在PC上跑就等于想分别的人蛋糕啊，遭到打压是必然的，实在太惨了……

　　本篇的完整代码依旧放在GitHub上，欢迎取用：

　　https://github.com/manupstairs/UWPSamples/tree/master/UWPSamples/ContentControlWithTemplateSelector