wpf中listview内容居中显示

在WPF中使用ListView经常会用到GridView作为视图,但是却碰到GridViewColumn不能居中对齐的问题,

实现方法

给ListViewItem设置Style,让ListViewItem在水平方向拉伸填充:

<Setter Property="HorizontalContentAlignment" Value="Stretch"/>

<ListView ItemContainerStyle="{StaticResource ListViewItemStyle}">

然后再给GridViewColumn的Datatemplate设置居中对齐就可以了。

实例代码

复制代码
<ListView x:Name="_detectionListView"  
                  ItemsSource="{Binding DetectionCheckList}" 
                  Background="White"  
                  BorderThickness="0"  
                  ScrollViewer.HorizontalScrollBarVisibility="Disabled">
                <ListView.ItemContainerStyle>
                    <Style TargetType="ListViewItem">
                        <Setter Property="Background" Value="White" />
                        <Setter Property="Foreground" Value="#464457" />
                        <Setter Property="FontSize" Value="{Binding dataGridTextSize, Source={StaticResource ThemeCore}}" />
                        <Setter Property="FontWeight" Value="Regular" />
                        <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
                        <Style.Triggers>
                            <Trigger Property="IsMouseOver" Value="True">
                                <Setter Property="Background" Value="White" />
                                <Setter Property="BorderBrush" Value="White" />
                            </Trigger>
                            <Trigger Property="IsSelected" Value="True">
                                <Setter Property="Background" Value="White" />
                                <Setter Property="BorderBrush" Value="White" />
                            </Trigger>
                        </Style.Triggers>
                    </Style>
                </ListView.ItemContainerStyle>
                <ListView.View>
                    <GridView AllowsColumnReorder="False">
                        <GridView.ColumnHeaderContainerStyle>
                            <Style TargetType="GridViewColumnHeader">
                                <Setter Property="HorizontalContentAlignment" Value="Center"/>
                                <Setter Property="VerticalAlignment" Value="Center"/>
                                <Setter Property="SnapsToDevicePixels" Value="True" />
                                <Setter Property="Height" Value="48" />
                                <Setter Property="Background" Value="#F8F8F8"/>
                                <Setter Property="Opacity" Value="0.82"/>
                                <Setter Property="FontWeight" Value="Semibold"/>
                                <Setter Property="Foreground" Value="#464457"/>
                                <Setter Property="FontSize" Value="{Binding dataGridTextSize, Source={StaticResource ThemeCore}}"/>

                            </Style>
                        </GridView.ColumnHeaderContainerStyle>
                        <GridViewColumn Header="设备名称" Width="{Binding ElementName=col1,Path=ActualWidth}" >
                            <GridViewColumn.CellTemplate>
                                <DataTemplate>
                                    <Grid>
                                        <TextBlock Text="{Binding deviceName}" HorizontalAlignment="Center" TextAlignment="Center"/>
                                    </Grid>
                                </DataTemplate>
                            </GridViewColumn.CellTemplate>
                        </GridViewColumn>
   
                        <GridViewColumn Header="序列号" Width="{Binding ElementName=col2,Path=ActualWidth}">
                            <GridViewColumn.CellTemplate>
                                <DataTemplate>
                                    <TextBlock Text="{Binding serialNumber}" HorizontalAlignment="Center"/>
                                </DataTemplate>
                            </GridViewColumn.CellTemplate>
                        </GridViewColumn>
                        <GridViewColumn Header="IMEI" Width="{Binding ElementName=col3,Path=ActualWidth}">
                            <GridViewColumn.CellTemplate>
                                <DataTemplate>
                                    <TextBlock Text="{Binding deviceIMEI}" HorizontalAlignment="Center"/>
                                </DataTemplate>
                            </GridViewColumn.CellTemplate>
                        </GridViewColumn>
                        <GridViewColumn Header="设备型号" Width="{Binding ElementName=col4,Path=ActualWidth}">
                            <GridViewColumn.CellTemplate>
                                <DataTemplate>
                                    <TextBlock Text="{Binding deviceModel}"   HorizontalAlignment="Center"/>
                                </DataTemplate>
                            </GridViewColumn.CellTemplate>
                        </GridViewColumn>
                        <GridViewColumn Header="检测时间" Width="{Binding ElementName=col5,Path=ActualWidth}">
                            <GridViewColumn.CellTemplate>
                                <DataTemplate>
                                    <TextBlock Text="{Binding operateTime}"   HorizontalAlignment="Center"/>
                                </DataTemplate>
                            </GridViewColumn.CellTemplate>
                        </GridViewColumn>
                        <GridViewColumn Header="耗时" Width="{Binding ElementName=col6,Path=ActualWidth}">
                            <GridViewColumn.CellTemplate>
                                <DataTemplate>
                                    <TextBlock Text="{Binding checkTimeCost}" HorizontalAlignment="Center"/>
                                </DataTemplate>
                            </GridViewColumn.CellTemplate>
                        </GridViewColumn>
                        <GridViewColumn Header="次数" Width="{Binding ElementName=col7,Path=ActualWidth}">
                            <GridViewColumn.CellTemplate>
                                <DataTemplate>
                                    <TextBlock Text="{Binding Violation_Count}"   HorizontalAlignment="Center"/>
                                </DataTemplate>
                            </GridViewColumn.CellTemplate>
                        </GridViewColumn>
                        <GridViewColumn Header="检测状态" Width="{Binding ElementName=col8,Path=ActualWidth}">
                            <GridViewColumn.CellTemplate>
                                <DataTemplate>
                                    <TextBlock Text="{Binding DetectionStatus}" HorizontalAlignment="Center"/>
                                </DataTemplate>
                            </GridViewColumn.CellTemplate>
                        </GridViewColumn>
                        <GridViewColumn Header="USB位置" Width="{Binding ElementName=col9,Path=ActualWidth}">
                            <GridViewColumn.CellTemplate>
                                <DataTemplate>
                                    <TextBlock Text="{Binding UsbPostionInfo}"  HorizontalAlignment="Center"/>
                                </DataTemplate>
                            </GridViewColumn.CellTemplate>
                        </GridViewColumn>
                        <GridViewColumn Header="进度" Width="{Binding ElementName=col10,Path=ActualWidth}">
                            <GridViewColumn.CellTemplate>
                                <DataTemplate>
                                    <TextBlock Text="{Binding DetectStep}"  HorizontalAlignment="Center"/>
                                </DataTemplate>
                            </GridViewColumn.CellTemplate>
                        </GridViewColumn>
                    </GridView>
                </ListView.View>
            </ListView>
相关推荐
寅时码2 小时前
React 之死·终章:一个 useRef,把闭包陷阱、依赖数组、漫天 rerender 全送走
前端·react.js·ai编程
不好听6132 小时前
HTML 事件监听机制:从 DOM Level 0 到 React 合成事件
前端·react.js·html
wordbaby2 小时前
为什么刷新页面就 404?聊聊 SPA 路由与 Nginx 的那点事
前端
daols882 小时前
vxe-table 渲染器教程一:实现金额输入控件
javascript·vue.js·vxe-table
不好听6132 小时前
React 核心概念:JSX、组件与数据驱动
前端·react.js
触底反弹2 小时前
🔥 React 零基础入门(中):500 行屎山代码到组件化的蜕变
前端·javascript·react.js
不好听6132 小时前
React vs Vue:两大前端框架技术选型深度对比
前端·vue.js·react.js
GuWenyue2 小时前
Cursor黑盒拆解!1套LangChain.js手写Mini编程Agent,自动生成React项目,效率提升60%
前端·数据库·人工智能
GuWenyue2 小时前
传统Agent工具两大痛点!300行代码落地MCP跨语言工具,彻底解耦LLM与工具
前端·人工智能·算法
小林ixn3 小时前
从 onclick 到 React 合成事件,再到完整应用逻辑:一次前端架构的深度剖析
前端·react.js·前端框架