WPF 自定义ListBox MaterialDesign

最新推荐文章于 2024-09-01 23:27:46 发布

呼呼突突

最新推荐文章于 2024-09-01 23:27:46 发布

阅读量533

点赞数

分类专栏： WPF C# Material Design 文章标签： wpf c# xaml

本文链接：https://blog.csdn.net/u010197227/article/details/117257965

版权

C# 同时被 3 个专栏收录

38 篇文章 3 订阅

订阅专栏

WPF

9 篇文章 0 订阅

订阅专栏

Material Design

2 篇文章 0 订阅

订阅专栏

这篇博客介绍了如何利用WPF的ListBox组件创建一个包含图像和文本的横向滚动列表。通过设置ItemsPanelTemplate为StackPanel实现水平布局，并通过ItemContainerStyle定制ListBoxItem的模板，实现鼠标悬停和选中时的背景颜色变化，增强了用户体验。

摘要由CSDN通过智能技术生成

        <ListBox>
            <ListBoxItem >
                <StackPanel Height="60" Orientation="Horizontal" Margin="20 0 40 0">
                    <Image Source="/Images/图片.png" Stretch="None" />
                    <TextBlock Text="文本" VerticalAlignment="Center" Foreground="White" FontSize="14"/>
                </StackPanel>
            </ListBoxItem>


            <ListBox.ItemsPanel>
                <ItemsPanelTemplate>
                    <StackPanel Orientation="Horizontal"/>
                </ItemsPanelTemplate>
            </ListBox.ItemsPanel>

            <ListBox.ItemContainerStyle>
                <Style TargetType="{x:Type ListBoxItem}">
                    <Setter Property="Template">
                        <Setter.Value>
                            <ControlTemplate TargetType="ListBoxItem">
                                <Grid x:Name="panel">
                                    <wpf:Ripple Focusable="False" Content="{TemplateBinding Content}" ContentTemplate="{TemplateBinding ContentTemplate}" ContentTemplateSelector="{TemplateBinding ContentTemplateSelector}" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}" RecognizesAccessKey="False" Feedback="{TemplateBinding Foreground , Converter={StaticResource BrushRoundConverter}}" />
                                </Grid>

                                <ControlTemplate.Triggers>
                                    <Trigger Property="IsMouseOver" Value="True">
                                        <Setter Property="Cursor" Value="Hand"/>
                                        <Setter TargetName="panel" Property="Background" Value="#3792FD"/>
                                    </Trigger>

                                    <Trigger Property="IsSelected" Value="True">
                                        <Setter TargetName="panel" Property="Background" Value="#1E69C6"/>
                                    </Trigger>
                                </ControlTemplate.Triggers>
                            </ControlTemplate>
                        </Setter.Value>
                    </Setter>
                </Style>
            </ListBox.ItemContainerStyle>
        </ListBox>