WPF ListBox

参考:

https://www.cnblogs.com/callyblog/p/8044963.html

https://www.cnblogs.com/zhoujg/archive/2009/12/04/1616713.html

    <Window.Resources>
        <!-- 启用虚拟化 -->
        <Style TargetType="{x:Type ListBox}">
            <Setter Property="VirtualizingPanel.IsVirtualizing" Value="True"/>
            <Setter Property="VirtualizingPanel.VirtualizationMode" Value="Recycling"/>
        </Style>
    </Window.Resources>

 

启用虚拟化

WPF ListBox中滑轮滚动步数调整,参考:https://www.cnblogs.com/wzwyc/p/16254317.html

WPF 列表自动换行

参考:https://www.codercto.com/a/58801.html

<ListBox Name="antennaListBox">
    <ListBox.ItemTemplate>
        <DataTemplate>
             <StackPanel>
                  <TextBlock Text="{Binding Path=Name}" />
             </StackPanel>
        </DataTemplate>
   </ListBox.ItemTemplate>
</ListBox>

 

1、ListBox默认模板

 

 

 

 

 

 

 

2、ListBox自定义模板

 

 

 

 


 

 

 

 

3、ListBox默认列表模板


 

 

 

 

 

 

 

 

 

 

4、ListBox自定义列表模板

 

 

 

 


 

 

 

 


 

 

XAML 示例代码

<Style TargetType="ListBox" x:Key="ListBox">
    <Setter Property="BorderBrush" Value="Red"/>
    <Setter Property="BorderThickness" Value="1"/>
    <Setter Property="Width" Value="280"/>
    <Setter Property="Height" Value="180"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="ListBox">
                <Border BorderBrush="Green" BorderThickness="1">
                    <ItemsPresenter />
                </Border>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
    <Setter Property="ItemsPanel">
        <Setter.Value>
            <ItemsPanelTemplate>
                <StackPanel/>
            </ItemsPanelTemplate>
        </Setter.Value>
    </Setter>
    <Setter Property="ItemContainerStyle">
        <Setter.Value>
            <Style TargetType="ListBoxItem">
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="ListBoxItem">
                            <Border x:Name="PART_Border" BorderBrush="Blue" BorderThickness="1" Height="40">
                                <ContentPresenter/>
                            </Border>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>
        </Setter.Value>
    </Setter>
    <Setter Property="ItemTemplate">
        <Setter.Value>
            <DataTemplate>
                <TextBlock Text="{Binding title}"/>
            </DataTemplate>
        </Setter.Value>
    </Setter>
</Style>

  

在控件中设置样式

 

 XAML 代码

<Window ...>
    <Grid>
        <ListBox>
            <ListBox.ItemContainerStyle>
                <Style TargetType="{x:Type ListBoxItem}">
                    <Setter Property="OverridesDefaultStyle" Value="True" />
                    <Setter Property="SnapsToDevicePixels" Value="True" />
                    <Setter Property="Foreground" Value="Black" />
                    <Setter Property="Height" Value="40" />
                    <Setter Property="FontSize" Value="16" />
                    <Setter Property="VerticalContentAlignment" Value="Center" />
                    <Setter Property="Template">
                        <Setter.Value>
                            <ControlTemplate TargetType="{x:Type ListBoxItem}">
                                <Border x:Name="border" CornerRadius="0" Margin="2" BorderBrush="Black"
                                        BorderThickness="0,0,0,0.2">
                                    <ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                            VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                                            Margin="10,0,0,0" />
                                </Border>
                                <ControlTemplate.Triggers>
                                    <Trigger Property="IsSelected" Value="True">
                                        <Setter Property="Foreground" Value="#FF46679A" />
                                        <Setter TargetName="border" Property="Background" Value="white" />
                                        <Setter TargetName="border" Property="BorderBrush" Value="#FF46679A" />
                                        <Setter TargetName="border" Property="BorderThickness" Value="4,0,0,0.5" />
                                    </Trigger>
                                    <MultiTrigger>
                                        <MultiTrigger.Conditions>
                                            <Condition Property="IsMouseOver" Value="True" />
                                            <Condition Property="IsSelected" Value="False" />
                                        </MultiTrigger.Conditions>
                                        <MultiTrigger.Setters>
                                            <Setter Property="Foreground" Value="#FF46679A" />
                                            <Setter TargetName="border" Property="Background" Value="white" />
                                            <Setter TargetName="border" Property="BorderBrush" Value="#FF46679A" />
                                            <Setter TargetName="border" Property="BorderThickness" Value="0,0,0,0.5" />
                                        </MultiTrigger.Setters>
                                    </MultiTrigger>
                                </ControlTemplate.Triggers>
                            </ControlTemplate>
                        </Setter.Value>
                    </Setter>
                </Style>
            </ListBox.ItemContainerStyle>
            <ListBoxItem>简单学习网</ListBoxItem>
            <ListBoxItem>腾讯游戏</ListBoxItem>
            <ListBoxItem>网易游戏</ListBoxItem>
            <ListBoxItem>哔哩哔哩</ListBoxItem>
            <ListBoxItem>敦刻尔克</ListBoxItem>
            <ListBoxItem>必应搜索</ListBoxItem>
            <ListBoxItem>京东商城</ListBoxItem>
        </ListBox>
    </Grid>
</Window>

  

ListBox横向排列

<ListBox.Template>
    <ControlTemplate TargetType="{x:Type ListBox}">
        <Border BorderBrush="#e4e4e4" BorderThickness="1">
            <ScrollViewer HorizontalScrollBarVisibility="Disabled" VerticalScrollBarVisibility="Auto">
                <WrapPanel Orientation="Horizontal" IsItemsHost="True" ScrollViewer.CanContentScroll="True"/>
            </ScrollViewer>
        </Border>
    </ControlTemplate>
</ListBox.Template>

  

 ListBox ListBoxItem 命令

<Button Content="邀请" Height="28">
    <i:Interaction.Triggers>
        <i:EventTrigger EventName="Click">
            <i:InvokeCommandAction Command="{Binding Path=DataContext.CommandSendPK,RelativeSource={RelativeSource Mode=FindAncestor,AncestorType=ListBox}}" CommandParameter="{Binding Content, RelativeSource ={RelativeSource AncestorType={x:Type ListBoxItem}}}" />
        </i:EventTrigger>
    </i:Interaction.Triggers>
</Button>

  

posted @ 2021-05-28 16:30  microsoft-zhcn  阅读(253)  评论(0编辑  收藏  举报