grouped item page group header button click event not working.

Question

i have the following group header.

<GroupStyle.HeaderTemplate>
                                <DataTemplate>
                                    <Grid Margin="0,0,0,2">
                                        <Button Foreground="{ThemeResource ApplicationHeaderForegroundThemeBrush}" Click="Button_Click"
                                    AutomationProperties.Name="Group Title"
                                    Style="{StaticResource TextBlockButtonStyle}" >
                                            <StackPanel Orientation="Horizontal">
                                                <TextBlock Text="{Binding Title}" Margin="0,-11,10,10" Style="{StaticResource SubheaderTextBlockStyle}" TextWrapping="NoWrap" />
                                                <TextBlock Text="{StaticResource ChevronGlyph}" FontFamily="Segoe UI Symbol" Margin="0,-11,0,10" Style="{StaticResource SubheaderTextBlockStyle}" TextWrapping="NoWrap" />
                                            </StackPanel>
                                        </Button>
                                    </Grid>
                                </DataTemplate>
</GroupStyle.HeaderTemplate>

and in the click event i am using the following event which should work as a semantic zoom zoomed out view equivalent

 private void Button_Click(object sender, RoutedEventArgs e)
        {
            var collectiongroups = groupedItemsViewSource.View.CollectionGroups;
            ((ListViewBase)this.zoom.ZoomedOutView).ItemsSource = collectiongroups;
        }

the problem is this particular code in the click event of the button as shown above is not working

problem is not with the click event but i think it is not populating the zoomed out view as it should.

i tried it many times but i am not arriving anywhere.

Answer 1

i want to create a grid view in which items are grouped by a category i have grouped my elements by alphabetical order and displaying my data in grouped item page .

but i want to create another view in which only category is shown and i can go to details of a particular category when i click on a category.

so i used the semantic zoom and it is working well but the problem is i want to have a functionality like we have in windows 8.1 in the app list. what i mean is that for zooming out i don't want to use a small '-' sign showing in the bottom of the screen but instead i want that in my grouped item page when i click on the group header i get zoomed out view

to do so in data temp[late of group header style i did this.

  <GroupStyle>
                            <GroupStyle.HeaderTemplate>
                                <DataTemplate>
                                    <Grid Margin="0,0,0,2">
                                        <Button Content="{Binding Title}" Style="{ThemeResource TextBlockButtonStyle}" Click="Button_Click"/>
                                    </Grid>
                                </DataTemplate>
                            </GroupStyle.HeaderTemplate>
  </GroupStyle>

and in click event of button i did this.

 private void Button_Click(object sender, RoutedEventArgs e)
        {
            var collectiongroup = groupedItemsViewSource.View.CollectionGroups;
            ((ListViewBase)this.zoom.ZoomedOutView).ItemsSource = collectiongroup;
        }

but still the button is not becoming functional.

so i just want to be sure what i want to achieve it can be achieved by semantic zoom or for this there is some other way.

in windows 8.1 app list it  happens

Answer 2

I think you may refer to this website

http://www.dotnetcurry.com/showarticle.aspx?ID=864

or refer to blogs

cheahengsoon.weebly.com/blog

Answer 3

i know all that stuff already see here this is what i want to do

this is part of xaml showing my grouped item page header

<GroupStyle.HeaderTemplate>
                                <DataTemplate>
                                    <Grid Margin="0,0,0,2">
                                        <Button Foreground="{ThemeResource ApplicationHeaderForegroundThemeBrush}" Click="Button_Click"
                                    AutomationProperties.Name="Group Title"
                                    Style="{StaticResource TextBlockButtonStyle}" >
                                            <StackPanel Orientation="Horizontal">
                                                <TextBlock Text="{Binding Title}" Margin="0,-11,10,10" Style="{StaticResource SubheaderTextBlockStyle}" TextWrapping="NoWrap" />
                                                <TextBlock Text="{StaticResource ChevronGlyph}" FontFamily="Segoe UI Symbol" Margin="0,-11,0,10" Style="{StaticResource SubheaderTextBlockStyle}" TextWrapping="NoWrap" />
                                            </StackPanel>
                                        </Button>
                                    </Grid>
                                </DataTemplate>
</GroupStyle.HeaderTemplate>

here on the click event of button that is my group header other normal events like navigating to some other page is working but the following event is not working.

 private void Button_Click(object sender, RoutedEventArgs e)
        {
            var collectiongroups = groupedItemsViewSource.View.CollectionGroups;
            ((ListViewBase)this.zoom.ZoomedOutView).ItemsSource = collectiongroups;
        }

this event that is zooming out is not working as shown above while the below event is working fine

 protected override void OnNavigatedTo(NavigationEventArgs e)
        {
            navigationHelper.OnNavigatedTo(e);
            var collectiongroups = groupedItemsViewSource.View.CollectionGroups;
            ((ListViewBase)this.zoom.ZoomedOutView).ItemsSource = collectiongroups;
            
            
        }

so just tell me why the same thing of zooming out is not working on the click event of a button

Answer 4

Hi Samul,

According to your code, I assume you want to enable semantic zoom in GridView control. But there is less information for me to reproduce your problem, can you send me a repro project? I will look into it. Use your OneDrive and share a link here.

I would recommend you to see a code example about semantic zoom using GridView control. Please refer to the following link. https://code.msdn.microsoft.com/windowsapps/groupedgridview-77c59e8e.

Regards,

---

We are trying to better understand customer views on social support experience, so your participation in this interview project would be greatly appreciated if you have time. Thanks for helping make community forums a great place. Click HERE to participate the survey.

Answer 5

Hi,

sorry for late reply yes i want to enable semantic zoom and it is working also it is working on my desktop pc on click of a small "-" sign button provided by default on bottom right side of my screen this button is also called ZoomOutButton. Unto here all is good

but i don't want to use the by default provided so called ZoomOutViewButton which i have described just above instead of that i have created the header having category name that group my data this header is a button with the click event. now i want that every time i click on the category name i get zoomed out and in front of me i have zoomed out view. I hope you have understood it is very simple language that i am using.

and i don't know how to send repro project.

Answer 6

Use your OneDrive, upload a repro project, right click on the project, make a share link and then post it here.

Regards,

---

We are trying to better understand customer views on social support experience, so your participation in this interview project would be greatly appreciated if you have time. Thanks for helping make community forums a great place. Click HERE to participate the survey.

Answer 7

samul，

Do you mean you want to set the SemanticZoom control to ZoomOut View active in Button Click event instead of using mouse and keyboard?

I think you can use SemanticZoom.ToggleActiveView() when SemanticZoom.IsZoomedInViewActive is true.

http://msdn.microsoft.com/en-US/library/windows/apps/windows.ui.xaml.controls.semanticzoom.toggleactiveview.aspx

I don't think to set the ItemsSource of ZoomedOutView can active the ZoomedOutView.

Rosa.