WPF下Itemscontrol分组 样式

Posted 2020-11-06 lonelyxmas

原文 WPF下Itemscontrol分组 样式

   

 <ItemsControl   Grid.Row="1" DataContext="{Binding Layouts}" ItemsSource="{Binding }">
            <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 >
                    <Button  Command="{Binding SelectedStyleCommand}" CommandParameter="{Binding Tag}" Background="{Binding Img}"
                                 Width="120" Height="80" Margin="10,10,0,10">
                            <Button.Template >
                                <ControlTemplate TargetType="{x:Type Button}">
                                <Border Name="bd001" CornerRadius="8" Background="{TemplateBinding Background}"  BorderBrush="LightGray" BorderThickness="2">
                                        <ContentPresenter Content="{TemplateBinding Content}" HorizontalAlignment="Center" VerticalAlignment="Center" />
                                    </Border>
                                    <ControlTemplate.Triggers >
                                        <Trigger Property="IsMouseOver" Value="True">
                                            <Setter Property="Opacity" Value="0.85" TargetName="bd001"/>
                                            <Setter Property="BorderBrush" Value="Red" TargetName="bd001"/>
                                        </Trigger>
                                    </ControlTemplate.Triggers>
                                </ControlTemplate>
                            </Button.Template>
                        </Button>
                </DataTemplate>
            </ItemsControl.ItemTemplate>
            <ItemsControl.ItemsPanel >
                <ItemsPanelTemplate >
                    <UniformGrid Rows="2" Columns="4"/>
                </ItemsPanelTemplate>
            </ItemsControl.ItemsPanel>
            <!--<ItemsControl.ItemContainerStyle >
                <Style TargetType="{x:Type ListBoxItem}">
                    <Setter Property="HorizontalContentAlignment" Value="Stretch" />
                    <Setter Property="IsSelected" Value="{Binding Path=IsSelected, Mode=TwoWay}" />
                    <Style.Triggers>
                        <MultiTrigger>
                            <MultiTrigger.Conditions>
                                <Condition Property="IsSelected" Value="True" />
                                <Condition Property="IsMouseOver" Value="True" />
                            </MultiTrigger.Conditions>
                            <Setter Property="Background" Value="Red"   />
                        </MultiTrigger>
                        <Trigger Property="IsFocused" Value="True">
                            <Setter Property="Background" Value="Green"  />
                        </Trigger>
                    </Style.Triggers>
                </Style>
            </ItemsControl.ItemContainerStyle>-->
        </ItemsControl>