ListView - 将标头拉伸到全宽

时间:2013-07-11 15:46:27

标签: c# windows-runtime winrt-xaml

我在网格内部有一个简单的ListView,它占据了整个页面(参见下面的屏幕显示)。我能够使用样式(Horizo​​ntalContentAlignment)将ListView的行拉伸到容器的整个宽度,但我不能对标题执行相同的操作。我无法将Horizo​​ntalContentALignement设置为Stretch for Header(请参见下面的屏幕截图中突出显示)。

知道我怎么能做到这一点吗?

<Page.Resources>
    <Style TargetType="ListViewItem">
        <Setter Property="HorizontalContentAlignment" Value="Stretch" />
    </Style>
</Page.Resources>

<Grid Grid.Row="1">
    <ListView x:Name="itemListView" Margin="120,0,0,60" SelectionMode="None" HorizontalContentAlignment="Stretch" HorizontalAlignment="Stretch">
        <ListView.Header>
            <Grid Margin="6" HorizontalAlignment="Stretch">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*" />
                    <ColumnDefinition Width="*" />
                    <ColumnDefinition Width="*" />
                </Grid.ColumnDefinitions>
                <TextBlock Grid.Column="0" Text="Rank" Style="{StaticResource TitleTextStyle}" TextWrapping="NoWrap" />
                <TextBlock Grid.Column="1" Text="Username" Style="{StaticResource TitleTextStyle}" TextWrapping="NoWrap" />
                <TextBlock Grid.Column="2" Text="Score" Style="{StaticResource TitleTextStyle}" />
            </Grid>
        </ListView.Header>
        <ListView.ItemTemplate>
            <DataTemplate>
                <Grid Margin="6" HorizontalAlignment="Stretch">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="*"/>
                        <ColumnDefinition Width="*"/>
                        <ColumnDefinition Width="*"/>
                    </Grid.ColumnDefinitions>
                    <TextBlock Grid.Column="0" Text="{Binding Rank}" Style="{StaticResource TitleTextStyle}" TextWrapping="NoWrap" />
                    <TextBlock Grid.Column="1" Text="{Binding Username}" Style="{StaticResource CaptionTextStyle}" TextWrapping="NoWrap" />
                    <TextBlock Grid.Column="2" Text="{Binding Score}" Style="{StaticResource BodyTextStyle}" />
                </Grid>
            </DataTemplate>
        </ListView.ItemTemplate>
    </ListView>
</Grid>

enter image description here

1 个答案:

答案 0 :(得分:1)

一种方法是使用转换器:

<ListView ItemsSource="{Binding Players}">
    <ListView.Resources>
        <rxDummy:MultiplyConverter x:Key="MultiplyConverter"/>
    </ListView.Resources>
    <ListView.View>
        <GridView>
            <GridViewColumn x:Name="Rank" Header="Rank" DisplayMemberBinding="{Binding Rank}"
                            Width="{Binding ActualWidth, Mode=OneWay, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type ListView}}, 
                                        Converter={StaticResource MultiplyConverter}, 
                                        ConverterParameter=0.33}"/>
            <GridViewColumn Header="Username" DisplayMemberBinding="{Binding Username}" 
                            Width="{Binding ElementName=Rank, Path=ActualWidth}"/>
            <GridViewColumn Header="Score" DisplayMemberBinding="{Binding Score}" 
                            Width="{Binding ElementName=Rank, Path=ActualWidth}"/>
        </GridView>
    </ListView.View>
</ListView>

public class MultiplyConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
    {
        var d = System.Convert.ToDouble(value);
        double p = System.Convert.ToDouble(parameter,CultureInfo.InvariantCulture);
        return d * p;
    }

    public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
    {
        throw new NotImplementedException();
    }
}