none
Grid View avec Item de hauteur variable Windows Store RRS feed

  • Question

  • Bonjour à tous,

    Je souhaite créer un gridView avec des items de hauteur variable selon la hauteur d'un "User control" (mon item) chargé dynamiquement.

    Je souhaite que la hauteur de l'item est variable selon la hauteur de l'"user Control"  et dans ce cas l'espacement entre 2 items doit être la même

    <UserControl
        x:Class="RESIZE_GRIDVIEW.ItemControl"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="using:RESIZE_GRIDVIEW"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        mc:Ignorable="d" Height="auto" Background="Aquamarine"
        d:DesignWidth="200">
        <Grid Height="auto" Width="200" Background="{Binding Color}">
            <TextBlock
                Height="auto"
                VerticalAlignment="Top"
                HorizontalAlignment="Stretch"
                TextWrapping="Wrap"
                Text="{Binding Text}"
                Foreground="Black"
                TextAlignment="Justify" >
            </TextBlock>
        </Grid>
    </UserControl>

    mainPage :

    <Page
        x:Class="RESIZE_GRIDVIEW.MainPage"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="using:RESIZE_GRIDVIEW"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        mc:Ignorable="d">

        <Grid Background="#FFD5D5D6" Margin="42,44,46,70">
            <GridView HorizontalAlignment="Left"
                      x:Name="mygrid"
                      Background="Gray"
                      Margin="61,83,0,0"
                      VerticalAlignment="Stretch"
                      SelectionMode="None"
                      IsSwipeEnabled="false"
                      ScrollViewer.VerticalScrollBarVisibility="Visible"
                      ScrollViewer.VerticalScrollMode="Enabled"
                      ScrollViewer.HorizontalScrollBarVisibility="Hidden"
                      IsItemClickEnabled="True"
                      Width="300">
            <GridView.ItemsPanel>
                <ItemsPanelTemplate>
                        <VariableSizedWrapGrid />
                </ItemsPanelTemplate>
            </GridView.ItemsPanel>
            <GridView.ItemTemplate>
                <DataTemplate>
                    <!--User Control à charger dynaéàmiquement-->
                        <local:ItemControl />
                </DataTemplate>
            </GridView.ItemTemplate>
            <GridView.GroupStyle>
                <GroupStyle>
                    <GroupStyle.Panel>
                        <ItemsPanelTemplate>
                            <VariableSizedWrapGrid Orientation="Vertical" />
                        </ItemsPanelTemplate>
                    </GroupStyle.Panel>
                </GroupStyle>
            </GridView.GroupStyle>
            <GridView.ItemContainerStyle>
                <Style TargetType="GridViewItem">
                    <Setter Property="Background" Value="White"/>
                    <Setter Property="Height" Value="auto"/>
                    <Setter Property="BorderBrush" Value="Red"/>
                        <Setter Property="BorderThickness" Value="2"/>
                        <Setter Property="VerticalContentAlignment" Value="Top"/>
                </Style>
            </GridView.ItemContainerStyle>
            </GridView>
        </Grid>
    </Page>



    J'ai tellement besoin de votre aide.

    merci beaucoup et bonne continuation a tous.











    lundi 24 août 2015 07:47

Réponses

  • Bonjour,

    Merci beaucoup pour votre aide.

    je suis en c#.

    En fin du compte j'ai résolu le problème en utilisant le itemTemplate comme ci-dessous :

     <ListView.ItemsPanel>
                            <ItemsPanelTemplate>
                                <WrapGrid Orientation="Vertical"  VerticalAlignment="Top" />
                            </ItemsPanelTemplate>
     </ListView.ItemsPanel>

    merci

    :)

    vendredi 28 août 2015 06:01

Toutes les réponses

  • Bonjour, arlaz,

    Pouvez-vous partager une prise d'écran?
    Je vous remercie par avance de votre retour.

    Cordialement,
    Téodora


    Votez! Appel à la contribution TechNet Community Support. LE CONTENU EST FOURNI "TEL QUEL" SANS GARANTIE D'AUCUNE SORTE, EXPLICITE OU IMPLICITE. S'il vous plaît n'oubliez pas de "Marquer comme réponse" les réponses qui ont résolu votre problème. C'est une voie commune pour reconnaître ceux qui vous ont aidé, et rend plus facile pour les autres visiteurs de trouver plus tard la résolution.


    mardi 25 août 2015 07:47
    Modérateur
  • Salut Teodora,

    Merci beaucoup pour votre réponse,

    En fait j'ai changé un peu le truc.J'ai travaillé avec un ListeView groupé mais plus avec un Grid View.

    Je souhaite avoir quelque chose comme ça:

    HeaderGoup1        HeaderGroup2    HeaderGroup3     .....HeaderGroupx

    item11                     item21                 item31                 ......itemx1

    item12                     item22                 item32                  ......itemx2

    item13                     item23                 item33                  ......itemx3 

    .........                       ...........                 ...........                    ....................


    Alors que actuellement , j'ai :


    HeaderGoup1                            HeaderGroup2                                HeaderGroup3         

    item11                item13              item21                  item23                 item31                  ......


    item12               ............             item22                 .............                item32                 

    Plus précisément , je souhaite que mon groupe se bascule horizontalement et les items verticalement et en une seule colonne + ScrollBar si dépassement de la hauteur de la listeView

    Voici mon code XAML:


            <ListView Background="Gray"
                x:Name="itemGridView"
                AutomationProperties.AutomationId="ItemGridView"
                AutomationProperties.Name="Grouped Items"
                ItemsSource="{Binding Source={StaticResource groupedItemsViewSource}}"
                SelectionMode="None"
                Padding="12,25,12,12"
                      Height="auto"
                ScrollViewer.VerticalScrollMode="Enabled"
                ScrollViewer.HorizontalScrollMode="Enabled"
                ScrollViewer.HorizontalScrollBarVisibility="Visible"
                IsSwipeEnabled="false" Margin="0,10,354,303" Grid.Row="1" IsItemClickEnabled="False">
                <ListView.ItemsPanel>
                    <ItemsPanelTemplate>
                        <ItemsWrapGrid Orientation="Vertical"/>
                    </ItemsPanelTemplate>
                </ListView.ItemsPanel>
                <ListView.ItemTemplate>
                    <DataTemplate>
                        <Grid Width="750" Height="auto" Background="{Binding Color}" VerticalAlignment="Stretch" HorizontalAlignment="Stretch">
                            <TextBlock Width="600" Margin="10,10,10,0" Text="{Binding Model}"
                                    VerticalAlignment="Top"
                                    HorizontalAlignment="Stretch"
                                    FontSize="15"
                                    Height="auto"
                                    TextAlignment="Justify"  
                                    TextWrapping="Wrap"/>
                        </Grid>
                    </DataTemplate>
                </ListView.ItemTemplate>
                <ListView.GroupStyle>
                    <GroupStyle>
                        <GroupStyle.HeaderTemplate>
                            <DataTemplate>
                                <Grid Background="White">
                                    <TextBlock  FontSize="50" Text="{Binding CategoryName}" Foreground="Red"/>
                                </Grid>
                            </DataTemplate>
                        </GroupStyle.HeaderTemplate>
                        <GroupStyle.ContainerStyle>
                            <Style TargetType="GroupItem">
                                <Setter Property="Template">
                                    <Setter.Value>
                                        <ControlTemplate TargetType="GroupItem" >
                                            <Grid>
                                                <ItemsControl x:Name="ItemsControl2" ItemsSource="{Binding GroupItems}">
                                                    <ItemsControl.Template >
                                                        <ControlTemplate>
                                                            <ScrollViewer  x:Name="ScrollViewer" VerticalScrollBarVisibility="Visible"                                                  VerticalScrollMode="Enabled" HorizontalScrollBarVisibility="Disabled"                                                  HorizontalScrollMode="Disabled">
                                                                <ItemsPresenter  />
                                                            </ScrollViewer>
                                                        </ControlTemplate>
                                                    </ItemsControl.Template>
                                                </ItemsControl>
                                            </Grid>
                                        </ControlTemplate>
                                    </Setter.Value>
                                </Setter>
                                 
                            </Style>
                        </GroupStyle.ContainerStyle>
                    </GroupStyle>
                </ListView.GroupStyle>
            </ListView>

    merci beaucoup pour votre aide

                                                                                    
    mardi 25 août 2015 10:02
  • Bonjour, arlaz,

    Je vous conseille de changer HorizontalAlignment="Stretch" à HorizontalAlignment="Auto".
    Pouvez-vous préciser quel est le langage de code utilisé?
    Merci par avance de votre retour.

    Cordialement,
    Téodora


    Votez! Appel à la contribution TechNet Community Support. LE CONTENU EST FOURNI "TEL QUEL" SANS GARANTIE D'AUCUNE SORTE, EXPLICITE OU IMPLICITE. S'il vous plaît n'oubliez pas de "Marquer comme réponse" les réponses qui ont résolu votre problème. C'est une voie commune pour reconnaître ceux qui vous ont aidé, et rend plus facile pour les autres visiteurs de trouver plus tard la résolution.

    mercredi 26 août 2015 15:43
    Modérateur
  • Bonjour,

    Merci beaucoup pour votre aide.

    je suis en c#.

    En fin du compte j'ai résolu le problème en utilisant le itemTemplate comme ci-dessous :

     <ListView.ItemsPanel>
                            <ItemsPanelTemplate>
                                <WrapGrid Orientation="Vertical"  VerticalAlignment="Top" />
                            </ItemsPanelTemplate>
     </ListView.ItemsPanel>

    merci

    :)

    vendredi 28 août 2015 06:01