How to change properties of controls on SfAccordionItem

[Ric Silva]

I have this SfAccordion:

<Layout:SfAccordion Grid.Row="1" SelectedIndex="0" AccentBrush="{StaticResource BrandBrush}"
                                     SelectionMode="ZeroOrOne" Width="395" SelectionChanged="SfAccordion_SelectionChanged" >
                    <Layout:SfAccordion.HeaderTemplate>
                        <DataTemplate>
                            <Grid >
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="90" />
                                    <ColumnDefinition />
                                    <ColumnDefinition Width="50"/>
                                </Grid.ColumnDefinitions>
                                <StackPanel Background="#b3d6ef" Grid.Column="0" Width="40"  Height="40"  Orientation="Vertical" Margin="0,10,0,0">
                                    <TextBlock HorizontalAlignment="Center" VerticalAlignment="Center" Text="2" FontFamily="Segoe UI Semilight" FontSize="30" FontWeight="SemiLight" TextAlignment="Center"></TextBlock>
                                </StackPanel>
                                <StackPanel   Grid.Column="1">
                                    <TextBlock Margin="0,10,0,0" Text="{Binding}"  FontFamily="Segoe UI Semilight" FontSize="24" FontWeight="SemiLight" Foreground="#ffffff" VerticalAlignment="Center" HorizontalAlignment="Left"/>
                                </StackPanel>
                                <Grid Grid.Column="2" HorizontalAlignment="Right" VerticalAlignment="Center">
                                    <Rectangle x:Name="AcItemRectangle" Width="28" Height="28" Fill="#aa6861" Stroke="#aa6861" Visibility="Visible"></Rectangle>
                                    <Polygon   x:Name="AcItemTriangle" Points="0,0 28,0, 14,35" Stroke="#aa6861" Fill="#aa6861" Visibility="Collapsed"  />
                                    <TextBlock Text="1" Foreground="White" FontFamily="Segoe UI Semilight" FontSize="24" FontWeight="SemiLight" HorizontalAlignment="Center" Margin="-2,0,0,0" />
                                </Grid>
                            </Grid>
                        </DataTemplate>
                    </Layout:SfAccordion.HeaderTemplate>
                    <Layout:SfAccordionItem Width="420" LostFocus="SfAccordionItem_LostFocus"  BorderBrush="Transparent" Margin="0,10,0,0" Header="Meeting introduction" FontFamily="Segoe UI Semilight" FontSize="24" FontWeight="SemiLight" Foreground="#ffffff">
                        <Grid Height="212" Background="{StaticResource BrandBrush}">
                        </Grid>
                        
                    </Layout:SfAccordionItem>
                    <Layout:SfAccordionItem  Width="420" BorderBrush="Transparent" Margin="0,0" Header="Meeting introduction" FontFamily="Segoe UI Semilight" FontSize="24" FontWeight="SemiLight" Foreground="#ffffff" Selected="SfAccordionItem_Selected" LostFocus="SfAccordionItem_LostFocus">
                        <Grid Height="212" Background="{StaticResource BrandBrush}">
                        </Grid>
                        
                    </Layout:SfAccordionItem>
                    <Layout:SfAccordionItem Width="420" LostFocus="SfAccordionItem_LostFocus" BorderBrush="Transparent" Margin="0" Header="Meeting introduction" FontFamily="Segoe UI Semilight" FontSize="24" FontWeight="SemiLight" Foreground="#ffffff">
                        <Grid Height="212" Background="{StaticResource BrandBrush}">
                        </Grid>
                        
                    </Layout:SfAccordionItem>
</Layout:SfAccordion>

Im trying to change the visibility property of the Rectangle and Polygon in the DataTemplate

I tried with something like this but when the selection changes, the last item keeps the properties of the Polygon and Rectangle, only when i select another they change

        private void SfAccordion_SelectionChanged(object sender, SelectionChangedEventArgs e)
        {
            var accord = sender as SfAccordion;

            foreach (SfAccordionItem data in accord.Items)
            {
                var x = FindChildControl<Rectangle>(data, "AcItemRectangle") as Rectangle;
                x.Visibility = Visibility.Visible;
                var x2 = FindChildControl<Polygon>(data, "AcItemTriangle") as Polygon;
                x2.Visibility = Visibility.Collapsed;
                
            }
            foreach (SfAccordionItem data in accord.Items)
            {
                if(data.IsSelected)
                {
                    var x = FindChildControl<Rectangle>(data, "AcItemRectangle") as Rectangle;
                    x.Visibility = Visibility.Collapsed;
                    var x2 = FindChildControl<Polygon>(data, "AcItemTriangle") as Polygon;
                    x2.Visibility = Visibility.Visible;
                }
                
            } 
        }

the objective is something like this 

[Sugapriya Mariappan]

Hi Ric,

Sorry for the inconvenience caused

We have prepared a sample with the code snippet which you have provided in your last update. In this sample we have changed the Visibility properties of the Polygon and Rectangle in the SelectedItemsChanged event instead of the Selection Changed event and its visibility gets updated as expected.

Please find the modified sample from the below link
Sample link:SfAccordionWinrtSample

Please let us know if you need any other assistance

Regards,
M.Sugapriya

[Ric Silva]

Thanks  for the help 

[Ric Silva]

Im the time you guys took to awnswer, i had my some changes to my Accordion
i now bind some data into it and now it looks something like this

<Layout:SfAccordion x:Name="accordion" Grid.Row="1" SelectedIndex="0" AccentBrush="{StaticResource BrandBrush}"
                                     SelectionMode="ZeroOrOne" Width="395" SelectedItemsChanged="accordion_SelectedItemsChanged" ItemContainerStyle="{StaticResource accordContent}">
                    <Layout:SfAccordion.ContentTemplate>
                        <DataTemplate>
                            <Grid Height="212" Background="{StaticResource BrandBrush}" Margin="0,0,0,5">
                            </Grid>
                        </DataTemplate>
                    </Layout:SfAccordion.ContentTemplate>
                    <Layout:SfAccordion.HeaderTemplate>
                        <DataTemplate>
                            <Grid Width="420"  Margin="0,5,0,0">
                                <Grid.RowDefinitions>
                                    <RowDefinition Height="11"/>
                                    <RowDefinition Height="*"/>
                                </Grid.RowDefinitions>
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="90" />
                                    <ColumnDefinition Width="240" />
                                    <ColumnDefinition Width="50"/>
                                </Grid.ColumnDefinitions>
                                <StackPanel Background="#b3d6ef" Grid.Row="1" Grid.Column="0" Width="40"  Height="40"  Orientation="Vertical" Margin="0,10,0,0">
                                    <TextBlock HorizontalAlignment="Center" VerticalAlignment="Center" Text="{Binding Position}" FontFamily="Segoe UI Semilight" FontSize="30" FontWeight="SemiLight" TextAlignment="Center"></TextBlock>
                                </StackPanel>
                                <StackPanel Grid.Row="1" Grid.Column="1">
                                    <TextBlock Margin="0,10,0,0" Text="{Binding Name}"  FontFamily="Segoe UI Semilight" FontSize="24" FontWeight="SemiLight" Foreground="#ffffff" VerticalAlignment="Center" HorizontalAlignment="Left"/>
                                </StackPanel>
                                <Grid Grid.Row="1" Grid.Column="2" HorizontalAlignment="Right" VerticalAlignment="Center">
                                    <Rectangle x:Name="AcItemRectangle" Width="28" Height="28" Fill="#aa6861" Stroke="#aa6861" Visibility="Visible"></Rectangle>
                                    <Polygon   x:Name="AcItemTriangle" Points="0,0 28,0, 14,35" Stroke="#aa6861" Fill="#aa6861" Visibility="Collapsed"  />
                                    <TextBlock Text="1" Foreground="White" FontFamily="Segoe UI Semilight" FontSize="24" FontWeight="SemiLight" HorizontalAlignment="Center" Margin="-2,0,0,0" />
                                </Grid>
                            </Grid>
                        </DataTemplate>
                    </Layout:SfAccordion.HeaderTemplate>
</Layout:SfAccordion>

its the same but without the AccordionItems

when i tried your code on my project i get a exception here

 private void accordion_SelectedItemsChanged(object sender, System.Collections.Specialized.NotifyCollectionChangedEventArgs e)

        {

            var accord = sender as SfAccordion;

            foreach (SfAccordionItem data in accord.Items)

            {

                var x = FindChildControl<Rectangle>(data, "AcItemRectangle") as Rectangle;

my accord.Items is now of type Meeting ( i bind a List<MeetingPoints> to the accordion like this accordion.ItemsSource = meet.Item.MeetingPoints;)

and this is the exception

An exception of type 'System.InvalidCastException' occurred in Gapp_metro_Base.exe but was not handled in user code

Additional information: Unable to cast object of type 'Gapp_metro.Models.MeetingPoint' to type 'Syncfusion.UI.Xaml.Controls.Layout.SfAccordionItem'.

sorry for the extra bother

[Sugapriya Mariappan]

Hi Ric,

We have modified our last updated sample which tries to meet your requirement. In the sample we have used ItemContainerGenerator to get SfAccordionItem from the data bound SfAccordion.

Please find the modified sample from the below link
Sample link:SfAccordionWinrtSample

Please let us know if you need any other assistance

Regards,
M.Sugapriya

[Ric Silva]

i belive there is a bug on your sample

if i open a AccordionItem and then click on it again to collapse the Accordion disapears.

Also if it was possible to remove the arrow on the right of each item it would be great

[Ric Silva]

I tried your code anyway on my project and it seems to work, the Accordion doesn't disapear.

Thanks for the help

[Sugapriya Mariappan]

Hi Ric,

Sorry for the inconvenience caused

In the last updated sample the DataContext is not referred correctly and also the width doesn't set for the items. So, the items doesn't get visible. Now, we have modified the sample. In this sample, we have set the width for the SfAccordionItem more than SfAccordion control to disappear the arrow at the last and also we have set the DataContext to View Model in order to avoid the disappearance of the SfAccordionItem

Please find the modified sample from the below link
Sample link:SfAccordionWinrtSample

Please let us know if you need any other assistance

Regards,
M.Sugapriya