改进的listbox分组样式

 

<UserControl x:Class="SmartTest2.Client.Modules.MiddleModules.MethodModule.MethodConvention_BasiclayoutView"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
             mc:Ignorable="d"
             d:DesignHeight="420" d:DesignWidth="600">
    <Grid Margin="0,0,0,10">
        <Grid.RowDefinitions>
            <RowDefinition Height="*"/>
            <RowDefinition Height="6*"/>
        </Grid.RowDefinitions>
        <Border Grid.Row="0" BorderBrush="Black" BorderThickness="1" Background="#FFEBE8D7"  Margin="5">
         <Grid>
              <Grid.ColumnDefinitions>
               <ColumnDefinition/>
      <ColumnDefinition/>         
     </Grid.ColumnDefinitions>
                <TextBlock Text="基本样式布局" FontSize="16" Foreground="#FF262679" Margin="10,0,0,0" HorizontalAlignment="Left" VerticalAlignment="Center"/>
            <Image HorizontalAlignment="Right" Grid.Column="1" Source="/SmartTest2.Client;component/MethodImage/methodLayout.gif" Stretch="Fill" Width="50"/>   
   </Grid>
        </Border>

        <ListBox    Grid.Row="1"  ItemsSource="{Binding Layouts}" SelectedIndex="{Binding LayoutIndex,Mode=TwoWay}"
                    ScrollViewer.HorizontalScrollBarVisibility="Hidden"
                    ScrollViewer.VerticalScrollBarVisibility="Disabled"  >
            <ItemsControl.GroupStyle>
                <GroupStyle >
                    <GroupStyle.ContainerStyle >
                        <Style TargetType="{x:Type GroupItem}" >
                            <Setter Property="Margin" Value="0,0,0,10"/>
                            <Setter Property="Template" >
                                <Setter.Value >
                                    <ControlTemplate TargetType="{x:Type GroupItem}">
                                        <Border BorderBrush="Gray"  BorderThickness="1" Margin="5,6,5,1">
                                        <StackPanel  >
                                            <ContentPresenter />
                                            <Border >
                                                 <ItemsPresenter />
                                            </Border>
                                        </StackPanel>
                                        </Border>
                                    </ControlTemplate>
                                </Setter.Value>
                            </Setter>
                        </Style>
                    </GroupStyle.ContainerStyle>
                        <GroupStyle.HeaderTemplate >
                        <DataTemplate >
                            <TextBlock Name="txtgroup"  FontSize="13" Foreground="#262679" Text="基本布局"/>
                            <DataTemplate.Triggers >
                                <DataTrigger Binding="{Binding Path=Name}" Value="Increase">
                                    <Setter TargetName="txtgroup" Property="Text" Value="增强布局" />
                                </DataTrigger>
                            </DataTemplate.Triggers>
                        </DataTemplate>
                    </GroupStyle.HeaderTemplate>
                </GroupStyle>
            </ItemsControl.GroupStyle>
            <ItemsControl.ItemTemplate >
                <DataTemplate >
                    <Border Name="bd001" CornerRadius="8" Background="{Binding Img}" Width="110" Height="60"
                             BorderThickness="2" Margin="10">
                        <Border.Style >
                            <Style  TargetType="{x:Type Border}">
                                <Style.Triggers >
                                    <Trigger Property="IsMouseOver" Value="True">
                                        <Setter Property="Opacity" Value="0.65" />
                                        <Setter Property="BorderBrush" Value="Red" />
                                    </Trigger>
                                </Style.Triggers>
                            </Style>
                        </Border.Style>
                    </Border>
                </DataTemplate>
            </ItemsControl.ItemTemplate>
            <ItemsControl.ItemsPanel >
                <ItemsPanelTemplate >
                    <UniformGrid Rows="2" Columns="4"/>
                </ItemsPanelTemplate>
            </ItemsControl.ItemsPanel>
            <ListBox.ItemContainerStyle >
                <Style  TargetType="{x:Type ListBoxItem}">
                <Setter Property="Background" Value="Transparent"/>
                <Setter Property="HorizontalContentAlignment" Value="{Binding HorizontalContentAlignment, RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}"/>
                <Setter Property="VerticalContentAlignment" Value="{Binding VerticalContentAlignment, RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}"/>
                    <Setter Property="Template" >
                        <Setter.Value >
                            <ControlTemplate TargetType="{x:Type ListBoxItem}">
                                <Border x:Name="Bd" BorderBrush="{TemplateBinding BorderBrush}"  Margin="22,22,65,22"
                                        BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="8"
                                        Background="{TemplateBinding Background}" Padding="{TemplateBinding Padding}" SnapsToDevicePixels="true">
                                    <ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                                      SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"
                                                      VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                                </Border>
                                <ControlTemplate.Triggers >
                                    <Trigger Property="IsSelected" Value="True">
                                         <Setter Property="Background" Value="LightCoral" />
                                    </Trigger>
                                </ControlTemplate.Triggers>
                            </ControlTemplate>
                       
                        </Setter.Value>
                    </Setter>
                </Style>
            </ListBox.ItemContainerStyle>
        </ListBox >

    </Grid>
</UserControl>