locked
ListView中嵌套Grid,Grid如何水平填充? RRS feed

  • 问题

  • 我在ListView里嵌套了Grid,在Grid里有2个文本框,其中一个是RightToLeft,想实现一个文本框在左一个在右的效果。

    但是运行发现Grid的宽度是和Grid中内容宽度一致的,HorizontalAlign是Stretch也不行。

    ListView在设计窗口下查看是水平填充,因此大概不是ListView宽度的问题?

    请问我要如何将这个Grid实现水平填充呢?

    <ListView x:Name="listView" >
        <ListView.ItemTemplate>
            <DataTemplate>
                <Grid>
                    <Grid.RowDefinitions>
                        <RowDefinition />
                        <RowDefinition />
                    </Grid.RowDefinitions>
                    <TextBlock Text="{Binding txt1}" FontSize="14" FontWeight="Bold" VerticalAlignment="Top" Margin="0" />
                    <TextBlock Text="{Binding txt2}" FlowDirection="RightToLeft" FontSize="14" FontWeight="Bold" Margin="0" Right" VerticalAlignment="Top" />
                </Grid>
            </DataTemplate>
         </ListView.ItemTemplate>
    </ListView>


    protected override void OnNavigatedTo(NavigationEventArgs e)
    {
                var listViewItemsSource= new List<string>();
                for (int i = 0; i < 30; i++ )
                {
                    listViewItemsSource.Add("这是第" + i.ToString() + "项");
                }
                listView.ItemsSource = listViewItemsSource;
    }

    2014年12月15日 11:42

答案

  • 你好 Jerson,

    >>但是运行发现Grid的宽度是和Grid中内容宽度一致的,HorizontalAlign是Stretch也不行

    原因是每个ListViewItem的宽度都是根据内容动态计算的,这样是不会有空余的空间去实现你的布局效果。

    解决方法就是对DataTemplate中的Grid容器宽度进行限定,比如绑定到ListView的ActualWidth属性:

    <ListView x:Name="listView" >
                <ListView.ItemTemplate>
                    <DataTemplate>
                        <Grid Width="{Binding ActualWidth, ElementName=listView}">
                            <Grid.RowDefinitions>
                                <RowDefinition />
                                <RowDefinition />
                            </Grid.RowDefinitions>
                            <TextBlock Text="{Binding txt1}" FontSize="14" FontWeight="Bold" VerticalAlignment="Top" Margin="0" />
    
                            <TextBlock Grid.Row="1" Text="{Binding txt2}" FlowDirection="RightToLeft" FontSize="14" FontWeight="Bold" VerticalAlignment="Top" HorizontalAlignment="Right" />
                        </Grid>
                    </DataTemplate>
                </ListView.ItemTemplate>
            </ListView>

    效果:


    We are trying to better understand customer views on social support experience, so your participation in this interview project would be greatly appreciated if you have time. Thanks for helping make community forums a great place.
    Click HERE to participate the survey.

    • 已标记为答案 Jerson Ma 2014年12月17日 12:17
    2014年12月16日 9:42
    版主

全部回复

  • 你好 Jerson,

    >>但是运行发现Grid的宽度是和Grid中内容宽度一致的,HorizontalAlign是Stretch也不行

    原因是每个ListViewItem的宽度都是根据内容动态计算的,这样是不会有空余的空间去实现你的布局效果。

    解决方法就是对DataTemplate中的Grid容器宽度进行限定,比如绑定到ListView的ActualWidth属性:

    <ListView x:Name="listView" >
                <ListView.ItemTemplate>
                    <DataTemplate>
                        <Grid Width="{Binding ActualWidth, ElementName=listView}">
                            <Grid.RowDefinitions>
                                <RowDefinition />
                                <RowDefinition />
                            </Grid.RowDefinitions>
                            <TextBlock Text="{Binding txt1}" FontSize="14" FontWeight="Bold" VerticalAlignment="Top" Margin="0" />
    
                            <TextBlock Grid.Row="1" Text="{Binding txt2}" FlowDirection="RightToLeft" FontSize="14" FontWeight="Bold" VerticalAlignment="Top" HorizontalAlignment="Right" />
                        </Grid>
                    </DataTemplate>
                </ListView.ItemTemplate>
            </ListView>

    效果:


    We are trying to better understand customer views on social support experience, so your participation in this interview project would be greatly appreciated if you have time. Thanks for helping make community forums a great place.
    Click HERE to participate the survey.

    • 已标记为答案 Jerson Ma 2014年12月17日 12:17
    2014年12月16日 9:42
    版主
  • 十分感谢Franklin Chen的回答,彻底解决了我的问题
    2014年12月17日 12:19