TiMeJuMp
TiMeJuMp

Reputation: 433

UWP WrapPanel / VariableSizedGrid

i'm currently on some design issues. I need a WrapPanel which contains multiple Expander which should fit corretly as i the image shown. enter image description here

So if the user opens one, some commands should appear. (can be 3 up to 10 commands.) i think a scrollview starting with 5 items should fit best)

Currently i didn't get it to work. If i toggle the first box, each box is toggled. And if i toggle another box, it takes also the complete height.

First Box ppen

And here the Image, if the first box is closed. enter image description here

I think i need multiple Controls for this. First is the Expander-Menu and second the VariableSizedWrapGrid. But both together doesn't work, as expected. here my current code.

<controls:DockPanel Grid.Row="1" Grid.Column="1" Background="#efefef" >
            <GridView x:Name="CommandList" controls:DockPanel.Dock="Top"  Margin="15" SelectionMode="None" VerticalContentAlignment="Top"  >
                <GridView.ItemTemplate>
                <DataTemplate>
                    <controls:WrapPanel Name="VerticalWrapPanel" Margin="2"
                             VerticalSpacing="10" HorizontalSpacing="10" Orientation="Vertical">

                    <controls:Expander  Style="{StaticResource ExpanderStyleCheckBox}" VerticalAlignment="Top" Margin="20,20,0,20" VerticalContentAlignment="Top"                                                
                               IsExpanded="True" Width="500"
                               ExpandDirection="Down" Background="White" Tapped="Expander1_Tapped" VariableSizedWrapGrid.RowSpan="{Binding RowSpan}" >
                        <controls:Expander.Content>
                            <ListView ItemsSource="{Binding Phrases}" Margin="30,0,0,0" Background="#efefef" SelectionMode="None">
                                <DataTemplate>
                                    <TextBlock  TextWrapping="WrapWholeWords" VerticalAlignment="Center" />
                                </DataTemplate>
                                </ListView>
                        </controls:Expander.Content>
                            <controls:Expander.Header>
                            <TextBlock Margin="10"  HorizontalAlignment="Left" FontSize="18" TextWrapping="WrapWholeWords" VerticalAlignment="Center">
                                                <Run Text="{Binding Heading}" />
                                    </TextBlock>
                            </controls:Expander.Header>
                           
                        </controls:Expander>
                    </controls:WrapPanel>
                </DataTemplate>
            </GridView.ItemTemplate>
            <GridView.ItemsPanel>
                <ItemsPanelTemplate>
                        <VariableSizedWrapGrid Margin="20" ItemWidth="530" VerticalAlignment="Top" VerticalChildrenAlignment="Top"
                            Orientation="Horizontal" MaximumRowsOrColumns="5" >
                        </VariableSizedWrapGrid>
                    </ItemsPanelTemplate>
            </GridView.ItemsPanel>
            </GridView>
    </controls:DockPanel>

If someone could help me, this would be great.

Thanks and have a nice weekend. Christian

Upvotes: 1

Views: 592

Answers (0)

Related Questions