GridView avec 2 colonnes, remplir la largeur

Vous pouvez essayer ceci:

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

L'autre chose que vous pourriez faire est d'essayer de définir manuellement ItemWidth/ItemHeight chaque fois que vous obtenez le SizeChanged de l'événement sur la GridView.

Si, pour une raison quelconque, le ci-dessus ne fonctionne pas - vous pouvez aussi faire ce que je fais ci-dessous et de mettre à jour le Value de deux DoubleViewModel ressources sur SizeChanged événements:

<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>

Où DoubleViewModel est:

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
}

OriginalL'auteur Filip Skakun

La solution que j'ai utilisé était basé à Filip Skakuns suggestion, mais un léger différent de la mise en œuvre en faisant une réutilisables de Contrôle de l'Utilisateur avec ce comportement. Le Contrôle de l'Utilisateur a (entre autres) Columns et ItemsSource propriétés. - Je changer la ItemWidth de la ItemsWrapGrid au lieu de la Largeur de la ItemTemplate et de le faire directement dans le SizeChanged gestionnaire d'événement.

J'ai également nécessaire d'utiliser un ItemsWrapGrid au lieu d'un WrapGrid pour que cela fonctionne. Le code XAML pour la finale de contrôle de l'utilisateur:

<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>

Et pour le code-behind:

using System;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
namespace MyProject.CustomControls
{
public sealed partial class ColumnGridView : UserControl
{
public static readonly DependencyProperty ItemTemplateProperty =
DependencyProperty.Register("ItemTemplate", typeof(DataTemplate), typeof(ColumnGridView), new PropertyMetadata(null));
public DataTemplate ItemTemplate
{
get { return (DataTemplate)GetValue(ItemTemplateProperty); }
set { SetValue(ItemTemplateProperty, value); }
}
public static readonly DependencyProperty ItemsSourceProperty =
DependencyProperty.Register("ItemsSource", typeof(object), typeof(ColumnGridView), new PropertyMetadata(null));
public object ItemsSource
{
get { return (object)GetValue(ItemsSourceProperty); }
set { SetValue(ItemsSourceProperty, value); }
}
public static readonly DependencyProperty ColumnsProperty =
DependencyProperty.Register("Columns", typeof(int), typeof(ColumnGridView), new PropertyMetadata(1));
public int Columns
{
get { return (int)GetValue(ColumnsProperty); }
set
{
if (value <= 0) throw new ArgumentOutOfRangeException("Columns must be greater than 0");
SetValue(ColumnsProperty, value);
}
}
public ColumnGridView()
{
this.InitializeComponent();
}
private void ItemsWrapGrid_SizeChanged(object sender, SizeChangedEventArgs e)
{
ItemsWrapGrid itemsWrapGrid = sender as ItemsWrapGrid;
if (itemsWrapGrid != null)
{
itemsWrapGrid.ItemWidth = e.NewSize.Width / Columns;
}
}
}
}

OriginalL'auteur Johan Falk

Vous pouvez également utiliser la Chargé-Événement de votre WrapGrid à définir au moins les 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>

Codebehind

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

Exemple

OriginalL'auteur WiiMaxx