Question

我想要实现的结果非常简单，列表包含2列，宽度相等。在Windows Phone 7/8中，使用ListBox WrapPanel作为ItemsPanel并将ItemWidth设置为240（屏幕宽度为480）可以轻松实现这一点。

现在我正在编写一个通用应用程序，但问题是屏幕不能保证宽度为480（看起来甚至不适用于手机）所以我无法设置{ {1}}因为我希望它填满屏幕的宽度。使用以下ItemWidth：

，我已经能够达到几乎所需的效果

XAML

其中给出以下结果： enter image description here

如图所示，它成功地为2列提供了相同的宽度，但<GridView ItemsSource="{Binding Results}" Margin="12"> <GridView.ItemTemplate> <DataTemplate> <Grid> <Image Source="{Binding SampleImage}" /> </Grid> </DataTemplate> </GridView.ItemTemplate> <GridView.ItemsPanel> <ItemsPanelTemplate> <WrapGrid MaximumRowsOrColumns="2" Orientation="Horizontal" HorizontalChildrenAlignment="Stretch" VerticalChildrenAlignment="Stretch"> </WrapGrid> </ItemsPanelTemplate> </GridView.ItemsPanel> </GridView>中的Grid并未填充每列的整个宽度。我尝试在GridView.ItemTemlate和HorizontalAlignment="Stretch"本身设置Grid，但没有成功。任何人都知道这样做吗？

Answer 1

我的解决方案是：

Fragment1

代码背后：

<GridView ItemsSource="{Binding Results}" Margin="12"
                       SizeChanged="GridView_SizeChanged"
                       x:Name="MyGridView">
<GridView.ItemTemplate>
    <DataTemplate>
        <Grid>
            <Image Source="{Binding SampleImage}" />
        </Grid>
    </DataTemplate>
</GridView.ItemTemplate>

<GridView.ItemContainerStyle>
            <Style TargetType="GridViewItem">
                <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
                <Setter Property="HorizontalAlignment" Value="Stretch"/>
                <Setter Property="VerticalContentAlignment" Value="Stretch"/>
                <Setter Property="VerticalAlignment" Value="Stretch"/>
            </Style>
</GridView.ItemContainerStyle>
</GridView>

Answer 2

你可以试试这个：

<GridView.ItemContainerStyle>
    <Style
        TargetType="GridViewItem">
        <Setter
            Property="HorizontalAlignment"
            Value="Stretch" />
        <Setter
            Property="VerticalAlignment"
            Value="Stretch" />
    </Style>
 </GridView.ItemContainerStyle>

您可以尝试的另一件事是，只要您在ItemWidth上收到ItemHeight事件，就可以手动设置SizeChanged / GridView。

如果由于某种原因上述情况不起作用 - 您也可以执行以下操作并更新Value个DoubleViewModel个SizeChanged个资源的<UserControl.Resources> <viewModels:DoubleViewModel x:Key="ItemWidth" Value="120" /> <viewModels:DoubleViewModel x:Key="ItemHeight" Value="120" /> </UserControl.Resources> ... <ItemsControl.ItemTemplate> <DataTemplate> <local:YourItemTemplateControl Width="{Binding Value, Source={StaticResource ItemWidth}}" Height="{Binding Value, Source={StaticResource ItemHeight}}" /> </DataTemplate> </ItemsControl.ItemTemplate>：

DoubleViewModel

public class DoubleViewModel : BindableBase { #region Value /// <summary> /// Backing field for the Value property. /// </summary> private double value; /// <summary> /// Gets or sets a value indicating the value. /// </summary> public double Value { get { return this.value; } set { this.SetProperty(ref this.value, value); } } #endregion }的位置：

{{1}}

Answer 3

我使用的解决方案基于Filip Skakuns的建议，但通过使用此行为进行可重用的用户控制，实现了略微不同的实现。用户控件具有（以及其他）Columns和ItemsSource属性。我更改ItemWidth的{{1}}而不是ItemsWrapGrid的宽度，并直接在ItemTemplate事件处理程序中执行此操作。

我还需要使用SizeChanged代替ItemsWrapGrid来实现此功能。最终用户控件的XAML：

WrapGrid

代码隐藏：

<UserControl
    x:Class="MyProject.CustomControls.ColumnGridView"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    x:Name="ControlRoot">

    <Grid DataContext="{Binding ElementName=ControlRoot}">
        <GridView ItemsSource="{Binding ItemsSource}" ItemTemplate="{Binding ItemTemplate}">
            <GridView.ItemsPanel>
                <ItemsPanelTemplate>
                    <ItemsWrapGrid Orientation="Horizontal" SizeChanged="ItemsWrapGrid_SizeChanged" />
                </ItemsPanelTemplate>
            </GridView.ItemsPanel>
        </GridView>
    </Grid>
</UserControl>

Answer 4

我能够解决一些非常相似的事情，只需将Item Width绑定到父ActualWidth，就像这样：

<ListView Name="allDevicesListView" d:DataContext="{d:DesignData /SampleData/VeraServerSampleData.xaml}" ItemsSource="{Binding Devices}">
<ListView.ItemTemplate>
    <DataTemplate>
        <StackPanel Orientation="Horizontal" Width="{Binding ElementName=allDevicesListView, Path=ActualWidth}">
            <Grid Width="{Binding ElementName=allDevicesListView, Path=ActualWidth}">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="2*"/>
                    <ColumnDefinition Width="*"/>
                </Grid.ColumnDefinitions>
                <TextBlock Text="{Binding Name}" FontSize="24" Grid.Column="0" Margin="0,0,14.333,0" />
                <local:VeraDeviceControl VeraDeviceCategory="DimmableLight" Width="auto" Grid.Column="1"/>
            </Grid>
        </StackPanel>
    </DataTemplate>
</ListView.ItemTemplate>

Answer 5

或者，您可以使用WrapGrid中的已加载事件来设置至少ItemWidth

XAML

<Grid Background="LightGreen">

    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="1*" />
        <ColumnDefinition Width="1*" />
    </Grid.ColumnDefinitions>

    <Grid.RowDefinitions>
        <RowDefinition Height="auto" />
        <RowDefinition Height="auto" />
    </Grid.RowDefinitions>

    <Grid Grid.Row="0" Grid.Column="0" Name="MyGrid" Background="Red">

        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="60" />
            <ColumnDefinition Width="60" />
            <ColumnDefinition Width="60" />
        </Grid.ColumnDefinitions>

        <TextBlock Grid.Column="0" />
        <TextBlock Grid.Column="1" Text="I.O" />
        <TextBlock Grid.Column="2" Text="N.V" />
        <TextBlock Grid.Column="3" Text="n.I.O" />
    </Grid>

    <Grid Grid.Row="0" Grid.Column="1" Background="Aqua">

        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="60" />
            <ColumnDefinition Width="60" />
            <ColumnDefinition Width="60" />
        </Grid.ColumnDefinitions>

        <TextBlock Grid.Column="0" />
        <TextBlock Grid.Column="1" Text="I.O" />
        <TextBlock Grid.Column="2" Text="N.V" />
        <TextBlock Grid.Column="3" Text="n.I.O" />
    </Grid>

    <GridView Grid.Row="1"  Grid.ColumnSpan="2"
              Background="LightBlue"
              HorizontalAlignment="Stretch"
              ItemsSource="{Binding Details}"
              ItemContainerStyle="{StaticResource GridViewItemStyleIOhneHover}"
              ItemTemplateSelector="{StaticResource MyProtokollElementDataTemplateSelector}">
        <GridView.ItemsPanel>
            <ItemsPanelTemplate>
                <WrapGrid Orientation="Horizontal"
                          HorizontalAlignment="Stretch"
                          MaximumRowsOrColumns="2"
                          HorizontalChildrenAlignment="Stretch"
                          VerticalChildrenAlignment="Stretch" Loaded="MyWrapGrid_Loaded">
                </WrapGrid>
            </ItemsPanelTemplate>
        </GridView.ItemsPanel>
    </GridView>
</Grid>

代码隐藏

    private void MyWrapGrid_Loaded(object sender, RoutedEventArgs e)
    {
        var wg = sender as WrapGrid;
        wg.ItemWidth = MyGrid.ActualWidth;
    }

实施例

enter image description here

GridView有2列，填充宽度

5 个答案:

XAML

代码隐藏

实施例