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

原文:WPF让ListView的ItemTemplate占有100%的宽度

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


WPF让ListView的ItemTemplate占有100%的宽度
图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,可以看到每根灰线都占满了整行:


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

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

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

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

达叔傻乐(darwin.zuo@163.com)

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

上一篇:WPF中使用TextBlock显示长字符串的处理方法


下一篇:让你从此不拍出模糊相片的摄影技巧图文详解