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.
Unfortunately, activation email could not send to your email. Please try again.

How to change properties of controls on SfAccordionItem

Thread ID:

Created:

Updated:

Platform:

Replies:

119871 Aug 9,2015 03:37 PM Aug 13,2015 05:17 AM WinRT 7
loading
Tags: SfAccordion
Ric Silva
Asked On August 9, 2015 03:37 PM

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

Sugapriya Mariappan [Syncfusion]
Replied On August 11, 2015 07:29 AM

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
Replied On August 11, 2015 08:31 AM

Thanks  for the help 

Ric Silva
Replied On August 11, 2015 10:24 AM

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 [Syncfusion]
Replied On August 12, 2015 07:26 AM

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
Replied On August 12, 2015 10:52 AM

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
Replied On August 12, 2015 10:55 AM

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

Thanks for the help

Sugapriya Mariappan [Syncfusion]
Replied On August 13, 2015 05:17 AM

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

CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.

;