WPF让ListView的ItemTemplate占有100%的宽度

在使用ListView的时候，默认情况下ItemTemplate的格式占用的宽度并没有占满整个一行，如下图1：

图1

可见图中红色箭头指示的灰色的线的宽度是变化的，它由ItemTemplate中定义的最宽的控件的宽度决定。
要解决这个问题，如下面代码所示设定模板里容器的式样即可：

       <ListView>
            <ListView.ItemContainerStyle>
                <Style TargetType="ListViewItem">
                    <Setter Property="HorizontalContentAlignment" Value="Stretch" />
                </Style>
            </ListView.ItemContainerStyle>
            <ListView.ItemTemplate>
                <DataTemplate>
                    <Grid x:Name="panelDesign" ToolTip="{Binding Path=Name}"  >
                        <Grid.RowDefinitions >
                            <RowDefinition Height="2*"/>
                            <RowDefinition Height="*"/>
                            <RowDefinition Height="*"/>
                            <RowDefinition Height="5"/>
                        </Grid.RowDefinitions>
                        <TextBlock Grid.Row="0" FontWeight="Bold" Text="{Binding Path=Name, StringFormat=系列：{0}}"/>
                        <TextBlock Grid.Row="1" Text="{Binding Path=Description, StringFormat=描述：{0}}" TextTrimming="CharacterEllipsis" />
                        <CheckBox Grid.Row="2" HorizontalAlignment="Left" Content="有效的" IsChecked="{Binding Path=IsValid}" />
                        <Grid Background="Gray" Grid.Row="3" Height="2" VerticalAlignment="Center"/>
                    </Grid>
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>

效果如下图2，可以看到每根灰线都占满了整行：

图2

关键的部分是上面代码中第2到第6行的代码决定的：

            <ListView.ItemContainerStyle>
                <Style TargetType="ListViewItem">
                    <Setter Property="HorizontalContentAlignment" Value="Stretch" />
                </Style>
            </ListView.ItemContainerStyle>

如果中间有某些控件的内容你不希望它占满整个一行的宽度，单独指定它的HorizontalAlignment为Left或Right即可，缺省是Stretch，就例如上面代码中的CheckBox。

达叔傻乐([email protected])

WPF让ListView的ItemTemplate占有100%的宽度

猜你喜欢