WPF ListBox研究笔记

　　学习了下ListBox的Style，开始的时候比较混乱，但理顺了再写个Demo后就能一目了然的看出中间的差别了。下面来一个一个的理解下：

　　1.Template：这个指的是ListBox这个控件的整体外观，这个类名为ControlTemplate，可以定义一些控件的自身外观，如圆角、颜色等。其中可以用<ItemsPresenter/>来替代容器中的子元素，然后在后面的Template中继续设置，或者也直接可以把模板写在中间，但需要加上IsItemsHost="True"在容器中显示这个子元素。我还是把他分开来写，这样能够清楚的分出每一个Template。下面是一个简单的整体设置：

            <!--<ControlTemplate>-->
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="ListBox">
                        <Border CornerRadius="5" BorderThickness="1" Background="LightBlue">
                            <ScrollViewer>
                                <ItemsPresenter/>
                            </ScrollViewer>
                        </Border>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>

　　2.ItemsPanel：这个是指在ListBox控件里面的子元素的布局容器。这个的类名为ItemsPanelTemplate。其中间可以放入Grid、StackPanel、WrapPanel, DockPanel等布局模板。然后设置布局摆放的样式。如可以设置HorizontalAlignment、Orientation等属性。同样写一个简单的设置如下：

<!--<ItemsPanelTemplate>-->
            <Setter Property="ItemsPanel">
                <Setter.Value>
                    <ItemsPanelTemplate>
                        <StackPanel HorizontalAlignment="Stretch"/>
                    </ItemsPanelTemplate>
                </Setter.Value>
            </Setter>

　　这前面的2个Template是针对整体的ListBox的设计<Style TargetType="ListBox"></Style>。而后面的2个Template则是针对<Style TargetType="ListBoxItem"></Style>。

　　3.ItemContainerStyle：这个和第一个差不多都是设置整个样式，但是这个是针对的ListBoxItem。同样可以定义一些自身的外观。这里也就不重复了，但在这个可以直接在中间设置Item-Template的DataTemplate。也可以把这个东西给拖出来单独弄成一个DataTemplate。这样的话就要用 <ContentPresenter />来替代。继续简单设置：

            <!--<ItemContainerStyle>-->
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="ListBoxItem">
                        <Border>
                            <ContentPresenter />
                        </Border>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>

　　4.ItemTemplate：这个设置的是每一个ListBoxItem的单独的样式。这个的类名为DataTemplate。其中不仅可以设置普通的样式，同时还可以设置触发器来弄出你想要的样式。

        <DataTemplate x:Key="datatemplate">
            <!--<ItemTemplate>-->
            <Border BorderBrush="Gray" BorderThickness="1" Margin="1">
                <DockPanel>
                    <Ellipse Width="10" Height="10" DockPanel.Dock="Left" Visibility="Collapsed"
                             Fill="Black" Margin="5" Name="ellipse"/>
                    <Grid>
                        <Border CornerRadius="5" Background="Green" Margin="2" Padding="3">
                            <TextBlock Text="{Binding Message}" TextTrimming="CharacterEllipsis"/>
                        </Border>
                        <Rectangle Name="rect"/>
                    </Grid>
                </DockPanel>
            </Border>
            <DataTemplate.Triggers>
                <DataTrigger Binding="{Binding RelativeSource={RelativeSource Mode=FindAncestor,AncestorType=ListBoxItem},Path=IsSelected}" Value="True">
                    <Setter TargetName="ellipse" Property="Visibility" Value="Visible"/>
                    <Setter TargetName="rect" Property="Fill">
                        <Setter.Value>
                            <LinearGradientBrush StartPoint="0,1" EndPoint="0,0">
                                <GradientStop Offset="0" Color="#11ffffff"/>
                                <GradientStop Offset="1" Color="#eeffffff"/>
                            </LinearGradientBrush>
                        </Setter.Value>
                    </Setter>
                </DataTrigger>
            </DataTemplate.Triggers>

　　这样我们就完成了对ListBox的普通的解析。还有其他的更高级的东西的话。。。容我再研究研究=。=

　　最后附一个Demo：https://files.cnblogs.com/socialdk/ListBox.zip