[UWP] [XAML] ListView子项未使用全角 [英] [UWP][XAML] ListView child item not using full width

问题描述

我正在尝试显示绑定项目的列表.我已经将datatemplate定制为网格，并且我希望右边的列(具有固定的宽度)粘贴到屏幕的右侧，并且我想在第一列中填充剩余的空间.通常，这可以正常工作，但是当我将此网格放在ListView内时，行为似乎发生了变化.下面是我的ListView代码:

I'm trying to display a list of bound items. I've customized the datatemplate to be a grid and I want the right column (that has a fixed width) to stick to the right side of the screen, and the 1st column I want to fill the remaining space. Normally this works fine, but when I put this grid inside a ListView, the behavior seems to change. Below is my ListView code:

<ListView x:Name="LView" Background="Green" Width="{Binding ElementName=ExtPropPage, Path=Width}" ItemsSource="{Binding CurrentSensor.ExtendedProperties, Mode=TwoWay}" Margin="5" HorizontalAlignment="Stretch" VerticalAlignment="Center">
            <ListView.ItemTemplate>
                <DataTemplate >
                    <Grid Background="BlueViolet" Width="{Binding ElementName=LView, Path=Width}" HorizontalAlignment="Center" >
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="*"/>
                            <ColumnDefinition Width="100"/>
                        </Grid.ColumnDefinitions>
                        <Grid Grid.Column="0" Background="Blue" HorizontalAlignment="Stretch">
                            <Grid.RowDefinitions>
                                <RowDefinition Height="*"/>
                                <RowDefinition Height="*"/>
                            </Grid.RowDefinitions>
                            <TextBlock Grid.Row="0" FontWeight="Bold" FontSize="12" Text="{Binding KeyId, Mode=TwoWay, Converter={StaticResource ExtPropConverter}}" HorizontalAlignment="Center" VerticalAlignment="Center"/>
                            <TextBlock Grid.Row="1" FontWeight="Normal" FontSize="10" Text="{Binding JsonValue, Mode=TwoWay}" TextWrapping="Wrap" HorizontalAlignment="Center" VerticalAlignment="Center"/>
                        </Grid>
                        <StackPanel Grid.Column="1" Orientation="Horizontal" VerticalAlignment="Center" HorizontalAlignment="Right" BorderBrush="{x:Null}" Background="Red">
                            <Button DataContext="{Binding}" ToolTipService.ToolTip="Edit" Click="ButtonHandler" BorderBrush="DarkGray" FontFamily="Segoe MDL2 Assets" Content="&#xE70F;" Style="{StaticResource CircleButtonStyle}">

                            </Button>
                            <Button x:Name="DeviceCancelButton" ToolTipService.ToolTip="Delete" view:EventHandlers.Attach="Click" Click="DeleteExtProp" BorderBrush="DarkGray" FontFamily="Segoe MDL2 Assets" Content="&#xE74D;" Style="{StaticResource CircleButtonStyle}">

                            </Button>
                        </StackPanel>


                    </Grid>
                </DataTemplate>
            </ListView.ItemTemplate>

        </ListView>

我在一些元素的背景上加了颜色，以更好地了解一个控件的边界与另一个控件的边界在哪里.到目前为止，我所看到的是ListView扩展为填充整个屏幕宽度，这很棒，但是当涉及到列表视图中的项目(网格)时，第1列中的项目的长度是变化的(当大于填充了1个项目)，似乎网格对空间的使用取决于其中对象的宽度，而不是依靠我已经使用过的Width="*"来告诉列扩展和填充可用的事实空间，而不管列本身是什么.

I've put colors on the background of several of the elements to get a better idea of where one control's bounds are versus another's. What I can see so far is that the ListView expands to fill the whole screen width, which is great, but when it comes to the items in the list view (grids), the items in column 1 are varying in length (when more than 1 item is populated), and it seems the grid's use of space is depending on the width of the objects within them, rather than relying on the fact that I've used Width="*" which should be telling the column to expand and fill available space, regardless of what is in the column itself.

我做了很多搜索，找到了与HorizontalAlignment="Stretch"用法相关的答案，或者我在错误的地方使用它，或者我一起错过了其他东西.

I've done lots of searching and found answer after answer pertaining to the use of HorizontalAlignment="Stretch" and either I'm using it in the wrong places or I'm missing something else all together.

注意:上面的代码不一定表示我尝试过的唯一解决方案，调整宽度和对齐方式的各种尝试会使这篇文章很大，所以希望有人得到的答案不是我尝试过的没有成功.

Note: The code above is not necessarily indicative of being the only solution I've tried, the varying attempts at adjusting widths and alignments would make this post huge, so hopefully someone has an answer that is not something I've tried that results in no success.

感谢您的帮助.

P.S.作为对任何答案的补充，我想覆盖"OnMouseOver"属性，以将鼠标悬停在listviewitem上时停止更改背景.当我将鼠标悬停在上面时，不需要任何特别的事情.

P.S. As an additional bonus to any answer, I'd like to override the "OnMouseOver" property to stop the changing of the background when I hover over the listviewitem. I don't need anything special to happen when I'm hovering over these.

推荐答案

一个朋友帮我找到了这个，这意味着该问题现在是重复的，因为它是同一件事:

A friend helped me find this which means this question is now a duplicate since it's the same thing:

ListViewItem不会扩展到ListView的宽度

不过，为了清楚起见，以下是解决我的问题的外卖代码:

Just for clarity though, here was the takeaway code that solved my problem:

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

这篇关于[UWP] [XAML] ListView子项未使用全角的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！