GridView mit 2 Spalten füllen Breite

Den Ergebnissen, die ich erreichen möchte, ist es ziemlich einfach, eine Liste mit 2 Spalten, die beide die gleiche Breite. In Windows Phone 7/8 dies kann leicht erreicht werden durch ein ListBox mit einem WrapPanel als ItemsPanel und Einstellung der ItemWidth 240 (als der Bildschirm breit war 480).

Jetzt Schreibe ich eine Universal-App, aber hier ist das problem, dass der Bildschirm ist nicht eine Garantie auf eine Breite von 480 (auch nicht für das Telefon, es scheint), so kann ich nicht die ItemWidth wie ich will, es füllt die gesamte Breite des Bildschirms. Ich habe in der Lage zu erreichen, fast den gewünschten Effekt mit der folgenden XAML:

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

Gibt das folgende Ergebnis:
GridView mit 2 Spalten füllen Breite

Gesehen ist es erfolgreich gibt 2 Spalten die gleiche Breite, ABER die Grid im GridView.ItemTemlate füllt nicht die ganze Breite der einzelnen Spalte. Ich habe versucht Einstellung HorizontalAlignment="Stretch" auf, dass sowohl Grid und auf die GridView selbst ohne Erfolg. Wer hat eine Idee dieses zu tun?

InformationsquelleAutor Johan Falk | 2014-04-17

Könnten Sie versuchen, diese:

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

Die andere Sache, die Sie könnten versuchen, ist manuell eingestellt ItemWidth/ItemHeight wenn man die SizeChanged Veranstaltung auf der GridView.

Wenn aus irgendeinem Grund der oben nicht funktioniert - Sie könnte auch tun, was ich Tue, unten und aktualisieren Sie die Value sowohl DoubleViewModel Ressourcen auf SizeChanged Veranstaltungen:

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

Wo DoubleViewModel ist:

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
}

Danke. Leider ist der erste Vorschlag hat nicht funktioniert. Aber der zweite war möglich, wenn das ItemsPanel wurde geändert von WrapGrid zu ItemsWrapGrid.
Hallo, können Sie erklären, ein wenig mehr bitte ich bekomme es nicht
Welchen Teil würden Sie wollen, mich zu erweitern?
Versucht ähnliche Technik für das ListView-Steuerelement basierend auf ListViewItem, die Einstellung, die HorizontalAlignment-Eigenschaft auf Dehnen und das hat nicht funktioniert. Dies funktionierte in Silverlight!
Versuchen Sie, Eigenschaften "horizontalcontentalignment" zu?

InformationsquelleAutor Filip Skakun

Meine Lösung ist :

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

Code Hinter :

private void GridView_SizeChanged(object sender, SizeChangedEventArgs e)
    {
        var panel = (ItemsWrapGrid)MyGridView.ItemsPanelRoot;
        panel.ItemWidth =panel.ItemHeight= e.NewSize.Width /2;
    }

Es funktioniert! Wunderbar! Hilft viel! DANKE!!!

InformationsquelleAutor Ganesh Cauda

Die Lösung, die ich verwendet wurde, mit Sitz in Filip Skakuns Vorschlag, aber eine leicht unterschiedliche Umsetzung durch eine wiederverwendbare User-Control mit diesem Verhalten. Der Benutzer hat die Kontrolle (unter anderem) Columns und ItemsSource Eigenschaften. Ich ändere die ItemWidth des ItemsWrapGrid statt der Breite der ItemTemplate - und dies direkt in der SizeChanged event-handler.

Ich auch brauchte, um ein ItemsWrapGrid statt einer WrapGrid für diese zu arbeiten. Der XAML-Code für die final-Benutzer-Steuerung:

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

Und für die 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;
            }
        }
    }
}

Dies ist schöne Lösung, aber es funktioniert nicht gut spielen in der design-time-Modus aus irgendeinem Grund, leider.

InformationsquelleAutor Johan Falk

Konnte ich lösen, etwas sehr ähnlich, nur die Bindung des Elements-Breite des übergeordneten ActualWidth, wie diese:

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

Dies scheint zu funktionieren, wenn man definiert die ListVewItems manuell im XAML. Allerdings, wenn Elemente erstellt werden, basierend auf der Bindung von ItemSource, funktioniert dies nicht. In der Tat, ich sehe gar nichts.
Das ist nicht wahr. Dies ist ein Stück code arbeiten, in denen wir Elemente entsteht durch die Bindung von "ItemsSource" (genau hinsehen, ist das ListView-Steuerelement gebunden an den Geräten beobachten Sammlung). Vielleicht, wenn Sie binden Sie es an eine observable-collection und dann Elemente hinzufügen, um diese Sammlung, anstatt zu definieren, die ItemsSource-Bindung direkt per code?
Aus irgendeinem Grund bekam ich das gleiche Ergebnis, die Breite&height Bindungen nicht funktionieren. Und ich bin mit einer ObservableCollection für itemsource.

InformationsquelleAutor Vinicius

Alternativ könnte man das Loaded-Ereignis aus Ihrer WrapGrid zumindestens die 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;
    }

XAML

Codebehind

Beispiel