We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

How to change properties of controls on SfAccordionItem

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 

Accordion

7 Replies

SM Sugapriya Mariappan Syncfusion Team August 11, 2015 11:29 AM UTC

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


RS Ric Silva August 11, 2015 12:31 PM UTC

Thanks  for the help 


RS Ric Silva August 11, 2015 02:24 PM UTC

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


SM Sugapriya Mariappan Syncfusion Team August 12, 2015 11:26 AM UTC

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


RS Ric Silva August 12, 2015 02:52 PM UTC

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


RS Ric Silva August 12, 2015 02:55 PM UTC

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

Thanks for the help


SM Sugapriya Mariappan Syncfusion Team August 13, 2015 09:17 AM UTC

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

Loader.
Up arrow icon