locked
Develop an accordion in windows store apps c# RRS feed

  • Question

  • Hello everybody !

    I've developped an accordion in XAML and I need to show and hide The StackPanel in the DataTemplate to the ListView.ItemTemplate when the Checkbox "GroupTwoButton" is checked or not.

    Here is my code below...somebody may help me please.

    NB : I used MVVM architecture

    <Page
        x:Class="Mobipost.Views.HeritageView"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="using:Mo.Views"
        xmlns:convert="using:Mo.Converters"
        xmlns:localVm="using:Mob.ViewModels"
        xmlns:cmd="using:Commons.Navigation"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
       
        xmlns:localUserControls="using:Mobipost.UserControls"
        mc:Ignorable="d">
        <Page.DataContext>
            <localVm:HeritageViewModel />
        </Page.DataContext>
        <Page.Resources>
            <convert:NullableBoolToVisibilityConverter x:Key="NullableBoolToVisibilityConverter" />
            <CollectionViewSource x:Name="cvsMenuFilter" IsSourceGrouped="True" Source="{Binding GroupingTPWithChild}" />
            <CollectionViewSource x:Name="cvsEquipements" IsSourceGrouped="True" Source="{Binding CsvEquipment}" />
        </Page.Resources>
        <Grid Style="{StaticResource rteGridBackground}">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="auto" />
                <ColumnDefinition Width="*" />
            </Grid.ColumnDefinitions>
            <Border Style="{StaticResource HeritageBorderGrid}">
            <Grid Grid.Column="0" x:Name="PullDownMainMenu">
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto" />
                    <RowDefinition Height="*" />
                </Grid.RowDefinitions>
                <ListView x:Name="lvPTSupWithoutChild" Width="280" Grid.Row="0" Margin="10,10,0,10" IsItemClickEnabled="True" 
                          cmd:ItemClickCommand.Command="{Binding SelectedEquipmentCommand}" 
                          ItemsSource="{Binding PTSuperieurWithoutChild}">
                    <ListView.ItemTemplate>
                        <DataTemplate>
                            <StackPanel Orientation="Vertical">
                                <TextBlock Text="{Binding Designation}" />
                            </StackPanel>
                        </DataTemplate>
                    </ListView.ItemTemplate>
                </ListView>
                <ScrollViewer VerticalScrollBarVisibility="Auto" VerticalScrollMode="Auto" Grid.Row="1">
                    <ListView ItemsSource="{Binding Source={StaticResource cvsMenuFilter}}" SelectionMode="None" IsItemClickEnabled="True" 
                              cmd:ItemClickCommand.Command="{Binding SelectedEquipmentCommand}" >
                        <ListView.GroupStyle>
                            <GroupStyle HidesIfEmpty="True">
                                <GroupStyle.HeaderTemplate>
                                    <DataTemplate>
                                        <StackPanel x:Name="AccordionPanel" HorizontalAlignment="Left" >
                                            <CheckBox x:Name="GroupTwoButton" Content="{Binding Key}" Style="{StaticResource AccordionButtonStyle}" />
                                        </StackPanel>
                                    </DataTemplate>
                                </GroupStyle.HeaderTemplate>
                                <GroupStyle.ContainerStyle>
                                    <Style TargetType="GroupItem">
                                        <Setter Property="MinWidth" Value="300" />
                                        <Setter Property="BorderThickness" Value="2" />
                                        <Setter Property="Margin" Value="25,0" />
                                    </Style>
                                </GroupStyle.ContainerStyle>
                                <GroupStyle.Panel>
                                    <ItemsPanelTemplate>
                                        <VariableSizedWrapGrid  Orientation="Vertical"  />
                                    </ItemsPanelTemplate>
                                </GroupStyle.Panel>
                            </GroupStyle>
                        </ListView.GroupStyle>
                        
                        <ListView.ItemTemplate>
                            <DataTemplate  >
                                    <StackPanel Orientation="Vertical" Visibility="{Binding  ElementName=GroupTwoButton,Path=IsChecked, Converter={StaticResource NullableBoolToVisibilityConverter}}" >
                                    <Grid >
                                        <Grid.ColumnDefinitions>
                                            <ColumnDefinition Width="260" />
                                            <ColumnDefinition Width="20" />
                                        </Grid.ColumnDefinitions>
                                        <TextBlock Text="{Binding Designation}"
                                                          TextWrapping="Wrap"  />
                                        <TextBlock Text=">" Grid.Column="1" FontWeight="ExtraBold" Foreground="Orange" />
                                    </Grid>
                                </StackPanel>
                            </DataTemplate>
                        </ListView.ItemTemplate>
                        
                    </ListView>
                </ScrollViewer>
            </Grid>
            </Border>
            <Grid Grid.Column="1">
                <Grid.RowDefinitions>
                    <RowDefinition Height="auto" />
                    <RowDefinition Height="auto" />
                    <RowDefinition Height="auto" />
                    <RowDefinition Height="*" />
                    <RowDefinition Height="auto" />
                </Grid.RowDefinitions>
                <Grid Grid.Row="0">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="auto" />
                        <ColumnDefinition Width="auto" />
                        <ColumnDefinition Width="auto" />
                        <ColumnDefinition Width="*" />
                    </Grid.ColumnDefinitions>
                    <!--<Button Style="{StaticResource backButtonDefault}" Command="{Binding GoBackCommand}" />
                    <StackPanel Grid.Column="1" Style="{StaticResource HeritageStackPan}">
                        <TextBlock Style="{StaticResource HeritageTxtBlockGdp}" Text="GDP" />
                        <TextBlock Style="{StaticResource HeritageTxtBlockNameGdp}" Text="BOLLENE" />
                        <TextBlock Style="{StaticResource HeritageTxtBlockNameEquipment}" Text=" &gt;   BOLLENE 1" />
                    </StackPanel>-->
                    <Image Grid.Column="3" Style="{StaticResource rteLogoRight}" />
                </Grid>
                <TextBlock Style="{StaticResource HeritageCelluleLigne}" x:Name="TbckHeritageTitle" />
                <StackPanel Grid.Row="1" Style="{StaticResource HeritageStackPan}">
                    <!--<Image Style="{StaticResource HeritagePreviousImage}" />
                    <TextBlock Text="Equipements" Style="{StaticResource HeritageTxtBlockEquipement}" />
                    <TextBlock Text="BOLL5-P31" Style="{StaticResource HeritageTxtBlockEquipement}" />
                    <Image Style="{StaticResource HeritageNextImage}" />-->
                    <TextBlock x:Name="TxbckEquipement" Style="{StaticResource HeritageTxtBlockEquipment}" Text="{Binding DesignationEquipment}" />
                </StackPanel>
                <GridView Grid.Row="3" ItemsSource="{Binding Source={StaticResource cvsEquipements}}"
                          ItemsPanel="{StaticResource HeritageItemsPanelTemplate}" Margin="0,10,0,40" Grid.RowSpan="2" 
                          IsSynchronizedWithCurrentItem="{x:Null}">
                    <GridView.ItemTemplate>
                        <DataTemplate>
                            <StackPanel Orientation="Horizontal">
                                <Border BorderBrush="#FFCFCF15" BorderThickness="1" Height="150" Width="150"  Background="#DEA936" >
                                    <TextBlock Text="{Binding  Designation}" TextWrapping="Wrap"/>
                                </Border>
                            </StackPanel>
                        </DataTemplate>
                    </GridView.ItemTemplate>
                    <GridView.GroupStyle>
                        <GroupStyle HidesIfEmpty="True">
                            <GroupStyle.HeaderTemplate>
                                <DataTemplate>
                                    <GridView>
                                        <Border Width="310" Height="150" Background="#FFB9961B" BorderBrush="#FF095876">
                                            <TextBlock Text="{Binding Key}"
                                                   Foreground="White" Margin="30" />
                                        </Border>
                                    </GridView>
                                </DataTemplate>
                            </GroupStyle.HeaderTemplate>
                            <GroupStyle.ContainerStyle>
                                <Style TargetType="GroupItem">
                                    <Setter Property="MinWidth" Value="300" />
                                    <Setter Property="BorderThickness" Value="2" />
                                    <Setter Property="Margin" Value="25,0" />
                                </Style>
                            </GroupStyle.ContainerStyle>
                            <GroupStyle.Panel>
                                <ItemsPanelTemplate>
                                    <VariableSizedWrapGrid  Orientation="Vertical" MaximumRowsOrColumns="2" />
                                </ItemsPanelTemplate>
                            </GroupStyle.Panel>
                        </GroupStyle>
                    </GridView.GroupStyle>
                </GridView>
                <StackPanel Grid.Row="4" Style="{StaticResource HeritageStackPan}">
                    <Image x:Name="CollapseImgExpand" Style="{StaticResource HeritageUserControlExpand}"  Tapped="CollapseUserControl"  />
                    <Image x:Name="CollapseImgCollapse" Style="{StaticResource HeritageUserControlCollapse}" Tapped="ExpandUserControl" />
                </StackPanel>
            </Grid>
        </Grid>
    </Page>
    Thanx
    Friday, September 6, 2013 9:23 AM

All replies

  • Hi, you can create a Property IsGroupTwoButtonChecked at your ViewModel and Bind it to CheckBox  with mode TwoWay and Bind this propety to item at DataTemplate.

    You need change this part

    <Page.DataContext>
            <localVm:HeritageViewModel />
        </Page.DataContext>
        <Page.Resources>
            <convert:NullableBoolToVisibilityConverter x:Key="NullableBoolToVisibilityConverter" />
            <CollectionViewSource x:Name="cvsMenuFilter" IsSourceGrouped="True" Source="{Binding GroupingTPWithChild}" />
            <CollectionViewSource x:Name="cvsEquipements" IsSourceGrouped="True" Source="{Binding CsvEquipment}" />
        </Page.Resources>

    to

         

     <Page.Resources>
    <localVm:HeritageViewModel  x:Key="HeritageViewModel"/>     
       <convert:NullableBoolToVisibilityConverter x:Key="NullableBoolToVisibilityConverter" />
            <CollectionViewSource x:Name="cvsMenuFilter" IsSourceGrouped="True" Source="{Binding GroupingTPWithChild}" />
            <CollectionViewSource x:Name="cvsEquipements" IsSourceGrouped="True" Source="{Binding CsvEquipment}" />
        </Page.Resources>
    <Page.DataContext>
            <Source Binding="{StaticResource HeritageViewModel}" />
        </Page.DataContext> 
      

    And use key "HeritageViewModel" as StaticResource when you bind IsGroupTwoButtonChecked.




    Saturday, September 7, 2013 12:45 AM
  • Hello Eduard,

    Thanx for your answer.

    Unfortunately "Source" in the Page.DataContext is not supported by Windows store app

    Tuesday, September 10, 2013 9:22 AM