列表控件

 

1、 ListBox

   <ListBox Grid.Column="1" ItemsSource="{Binding NavigateMenuService.Items}"  Name="lst">
                    <!--设置水平方式，默认垂直排列 设置格式-->
                    <ListBox.ItemsPanel>
                        <ItemsPanelTemplate>
                            <StackPanel  Orientation="Horizontal"/>
                        </ItemsPanelTemplate>
                    </ListBox.ItemsPanel>

                    <!--设置对应的样式-->
                    <ListBox.ItemContainerStyle>
                        <Style TargetType="ListBoxItem">
                            <Setter Property="FocusVisualStyle" Value="{x:Null}" />
                            <Setter Property="Template">
                                <Setter.Value>
                                    <ControlTemplate TargetType="ListBoxItem">
                                        <Grid>
                                            <!--白线-->
                                            <Border x:Name="border" />
                                            <!--阴影-->
                                            <Border x:Name="borderHeader"  Background="{TemplateBinding Background}" />

                                            <ContentPresenter 
                                                HorizontalAlignment="{TemplateBinding HorizontalAlignment}"
                                                VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                                                TextBlock.Foreground="{TemplateBinding Foreground}"/>
                                        </Grid>


                                        <ControlTemplate.Triggers>

                                            <!--选中样式-->
                                            <Trigger Property="IsSelected" Value="True">

                                                <!--设置底下那个白线-->
                                                <Setter   TargetName="border"  Property="BorderBrush" Value="#ffffff"/>
                                                <Setter   TargetName="border"  Property="BorderThickness" Value="0,0,0,3"/>

                                                <!--设置阴影-->
                                                <Setter TargetName="borderHeader" Property="Background" Value="#ffffff" />
                                                <Setter  TargetName="borderHeader" Property="Opacity" Value="0.1" />
                                            </Trigger>

                                            <Trigger Property="IsMouseOver" Value="True">
                                                <!--设置底下那个白线-->
                                                <Setter   TargetName="border"  Property="BorderBrush" Value="#ffffff"/>
                                                <Setter   TargetName="border"  Property="BorderThickness" Value="0,0,0,3"/>

                                                <!--设置阴影-->
                                                <Setter TargetName="borderHeader" Property="Background" Value="#ffffff" />
                                                <Setter  TargetName="borderHeader" Property="Opacity" Value="0.1" />
                                            </Trigger>
                                        </ControlTemplate.Triggers>
                                    </ControlTemplate>
                                </Setter.Value>
                            </Setter>
                        </Style>
                    </ListBox.ItemContainerStyle>
                    
                    <!--设置数据展示-->
                    <ListBox.ItemTemplate>
                        <DataTemplate>
                            <TextBlock Text="{Binding Name}" Margin="20,5" FontSize="16" />
                        </DataTemplate>
                    </ListBox.ItemTemplate>
                    
                    <!--点击事件 事件转命令-->
                    <i:Interaction.Triggers>
                        <i:EventTrigger  EventName="SelectionChanged">
                            <i:InvokeCommandAction  Command="{Binding NavigateCommand}" CommandParameter="{Binding ElementName=lst,Path=SelectedItem}" />
                        </i:EventTrigger>
                    </i:Interaction.Triggers>
                </ListBox>

　　

2 、 ItemsCotrol

 <ItemsControl ItemsSource="{Binding NavigateMenuService.Items[0].Items}">
                        <!--设置水平佈局-->
                        <ItemsControl.ItemsPanel>
                            <ItemsPanelTemplate>
                                <WrapPanel />
                            </ItemsPanelTemplate>
                        </ItemsControl.ItemsPanel>
                        <!--设置数据项-->
                        <ItemsControl.ItemTemplate>
                            <DataTemplate>
                                <Grid>
                                    <Grid.RowDefinitions>
                                        <RowDefinition Height="auto" />
                                        <RowDefinition />
                                    </Grid.RowDefinitions>

                                    <TextBlock Text="{Binding Name}"  FontSize="18" Margin="15,10" FontWeight="Bold" />

                                    <ItemsControl Grid.Row="1" Margin="10" ItemsSource="{Binding Items}">
                                        <!--设置-->
                                        <ItemsControl.ItemsPanel>
                                            <ItemsPanelTemplate>
                                                <UniformGrid Columns="2" />
                                            </ItemsPanelTemplate>
                                        </ItemsControl.ItemsPanel>

                                        <!--设置数据-->
                                        <ItemsControl.ItemTemplate>
                                            <DataTemplate>
                                                <Button  Margin="5" Content="{Binding Name}"  />
                                            </DataTemplate>
                                        </ItemsControl.ItemTemplate>

                                    </ItemsControl>

                                </Grid>
                            </DataTemplate>
                        </ItemsControl.ItemTemplate>
                    </ItemsControl>