WPF Litbox樣式和模板

一、在項目中使用ListBox時，常常會將ItemContainerStyle和ItemTemplate的做用搞混，ItemTemplate能夠搞定一切好似ItemContainerStyle有點多餘。咱們再來看下ItemContainerStyle和ItemTemplate。 ItemContainerStyle用於給每一個Item的容器定義樣式，其類型是Style。包含了操做Item的Triggers。 ItemTemplate是每一個Item的現實樣式，其類型是DataTemplate

在實際應用中，咱們每每須要根據用戶操做不斷的改變ListBox中Items的顯示樣式。這裏 總結一下ListBox中3種應用場景中的最優解決方案。

A.選中Item時改變Item項的背景顏色。

S.在 ItemContainerStyle中寫ControlTemplate的樣式給定背景色，使用Trigger在Selected爲True時改變背景色,代碼以下：

        <Style x:Key="containerstyle1" TargetType="{x:Type ListBoxItem}">

            <Setter Property="Template" >

                <Setter.Value>

                    <ControlTemplate TargetType="{x:Type ListBoxItem}">

                        <Border x:Name="b1" Background="Red">

                            <ContentPresenter></ContentPresenter>

                        </Border>

                        <ControlTemplate.Triggers>

                            <Trigger Property="IsSelected" Value="True">

                                <Setter Property="Background" Value="Green" TargetName="b1"></Setter>

                            </Trigger>

                        </ControlTemplate.Triggers>

                    </ControlTemplate>

                </Setter.Value>

            </Setter>

        </Style> 

B. 選中Item時改變Item項的部分顯示。

S. 使用改變變量的方式，代碼以下：

         <Style x:Key="containerstyle1" TargetType="{x:Type ListBoxItem}">

            <Setter Property="Template" >

                <Setter.Value>

                    <ControlTemplate TargetType="{x:Type ListBoxItem}">

                        <Border x:Name="b1" Background="Red">

                            <Label x:Name="l1" Margin="5" Content="{Binding A1}" FontSize="26" Foreground="DarkBlue"></Label>

                        </Border>

                        <ControlTemplate.Triggers>

                            <Trigger Property="IsSelected" Value="True">

                                <Setter Property="Content" Value="{Binding A2}" TargetName="l1"></Setter>

                            </Trigger>

                        </ControlTemplate.Triggers>

                    </ControlTemplate>

                </Setter.Value>

            </Setter>

        </Style>

C. 選中Item時須要徹底改變Item呈現的樣式，如圓形變成矩形等等。 

S. 改變Item項的DataTemplate，代碼以下：

            <DataTemplate x:Key="ItemTemplate" DataType="{x:Type ListBoxItem}">... </DataTemplate>

            <DataTemplate x:Key="SelectedTemplate" DataType="{x:Type ListBoxItem}">... </DataTemplate> 

            <Style x:Key="SeatListStyle" TargetType="{x:Type ListBoxItem}">

                <Setter Property="Template">

                    <Setter.Value>

                        <ControlTemplate TargetType="{x:Type ListBoxItem}">

                            <ContentPresenter></ContentPresenter>

                            <ControlTemplate.Triggers>

                                <Trigger Property="IsSelected" Value="True">

                                    <Setter Property="ContentTemplate" Value="{StaticResource SelectedTemplate}" />

                                </Trigger>

                            </ControlTemplate.Triggers>

                        </ControlTemplate>

                    </Setter.Value>

                </Setter>

                <Setter Property="ContentTemplate" Value="{StaticResource ItemTemplate}"></Setter>

            </Style> 

二、使用舉例

<ListBox  
                Name="ChangeAdListbox" 
                Grid.Row="0"
                Background="#77000000"                        
                VerticalAlignment="Bottom" 
                HorizontalAlignment="Right"   
                 ItemsSource="{Binding Items,ElementName=flipview}"
                SelectionChanged="ChangeAdListbox_SelectionChanged"
                Margin="0,0,20,5" d:IsHidden="True"                 
                >
                <ListBox.ItemsPanel>
                    <ItemsPanelTemplate>
                        <StackPanel Orientation="Horizontal"/>
                    </ItemsPanelTemplate>
                </ListBox.ItemsPanel>
                <ListBox.ItemContainerStyle>
                    <Style TargetType="ListBoxItem">
                        <Setter Property="Background" Value="White"/>
                        <Setter Property="Width" Value="12"/>
                        <Setter Property="Height" Value="12"/>
                        <Setter Property="Margin" Value="4"/>
                        <Setter Property="Template">
                            <Setter.Value>
                                <ControlTemplate TargetType="ListBoxItem">
                                    <Border x:Name="bd" BorderThickness="1" BorderBrush="White" Background="{TemplateBinding Background}">
                                    </Border>
                                    <ControlTemplate.Triggers>
                                        <Trigger Property="IsSelected" Value="True">
                                            <Setter Property="Background" Value="SkyBlue"/>
                                        </Trigger>
                                    </ControlTemplate.Triggers>
                                </ControlTemplate>
                            </Setter.Value>
                        </Setter>
                    </Style>
                </ListBox.ItemContainerStyle>
            </ListBox>