Open the AppBar after a click

Question

Hey..

I have an ItemsList and want to handle with my define AppBar

1.) If I come in this page of my App and there is a list, the AppBar is closed (default - this is correct - ANSWERED :) )

2.) If there is still no entry in this list, the AppBar should start automatically.

3.) If I click on one of the listed items the AppBar should open.

What do I have to implement - and where!? In *.cs or *.xaml ...

Thanks again for some help..

Andi

Answer 1

Hi

You can use the appBar property "IsOpen".

U can bind it in Xaml or set it in code behind.

Answer 2

The Bar should not be opened every time - I have problemes with case 2.) and 3.)

How could I implement a IF-Loop like: IF (no entry OR click on item) {open AppBar}

Answer 3

Hi

I don't know if you are using MVVM pattern.

At first sight i'd say that you should bind the IsOpen property of your appBar with a property of your viewmodel.

Something like in Xaml :

<AppBar  IsOpen="{Binding MyViewModel.IsAppBarOpened, Mode=TwoWay}">

And in the ViewModel :

private bool _isAppBarOpened;

public bool IsAppBarOpened { get { return _isAppBarOpened;} set {  _isAppBarOpened = value; RaisePropertyChanged("IsAppBarOpened ");}}

//method called while u set the items source for the list
public void SomeMethod()
{
...
...
IsAppBarOpened = MyList.count == 0;
}

//method called while u click on an item 
public void SomeOtherMethod()
{
...
...
IsAppBarOpened = true;
}

Don't forget to implement INotifyPropertyChanged to make the binding correct.

Answer 4

Okay - thanks. I'll try..

Is this correct? What I have to write for "MyList"  :/

protected override void Object navigationParameter, Dictionary<String, Object> pageState)

{

var sampleDataGroups = SampleDataSource.GetGroups((String)navigationParameter);

this.DefaultViewModel["Items"] = sampleDataGroups;

IsAppBarOpened = MyList.count == 0;

}

Answer 5

-------------- My ClickEvent:

void ItemView_ItemClick(object sender, ItemClickEventArgs e)

{

var groupId = ((SampleDataGroup)e.ClickedItem).UniqueId;

this.Frame.Navigate(typeof(SplitPage), groupId);

IsAppBarOpened =

true;

}

Answer 6

I also defined the boolean.. but what I' have to do with RaisePropertyChanged ?

What I have to do with INotifyPropertyChanged ?

Answer 7

Is this also correct!? Visual Studio underlines my complete "AppBar" in blue colour :o

<Page.BottomAppBar>

<AppBar x:Name="AppBarBestellungen" Padding="10,0,10,0" IsOpen="{Binding GridView.IsAppBarOpened, Mode=TwoWay}" >

<Grid>

<Grid.ColumnDefinitions>...

Answer 8

Well, point by point :

1) MyList is meant to be the list (or whatever collection u use) to populate your listview/gridview. You only have to check the number of items.

2) I don't really understand? U are on a page, u click on an item and that navigates to another page. The appBar is in the page u navigate to?

3) Your binding have to be notofied if there is a change in your property. Your class containing the property IsAppBarOpened should implement INotifyPropertyChanged and implement this method :

public event PropertyChangedEventHandler PropertyChanged;

        protected void RaisePropertyChanged(string name)
        {
            if (PropertyChanged != null)
            {
                PropertyChanged(this, new PropertyChangedEventArgs(name));
            }
        } 

4) I don't know what your "GridView" is in the binding. What it should be like :

this.DefaultViewModel["MyViewModel"] = new MyViewModel() /* this is your view model class, where u have the property IsAppBarOpened */;

and your binding should be like

 IsOpen="{Binding MyViewModel.IsAppBarOpened, Mode=TwoWay}"

If u want to understand more in depth, you should search about MVVM pattern.

If you don't understand with this, tell me, i'll try to give you a more complete example

Answer 9

Ok, let's try !

As u are not programming with mvvm we will set the code in the .cs file.

As i understand, you need to check if the list is empty or if there are items in it. So assuming the source of your list is :

this.DefaultViewModel["Items"] = group.Items;

If your appBar has "appBar" as name, just put after the line i quoted :

appBar.IsOpen = group.Items.count == 0;

This will handle the case of the empty list.

And now in the handler of your item_click (or selectionChanged idk wich one you use to handle the selection in the list) just put :

appbar.IsOpen = true;

And now that should work.

Let me know if you have other problems.

Answer 10

Soo.. my "LoadState" looks so now:

var group = SampleDataSource.GetGroup((String)navigationParameter);

this.DefaultViewModel["Group"] = group;
this.DefaultViewModel["Items"] = group.Items;

AppBar.IsOpen = group.Items.Count == 0;

if (pageState == null)
{  .............................

My "SelectionChanged":

void ItemListView_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
if (this.UsingLogicalPageNavigation()) this.InvalidateVisualState();

AppBar.IsOpen = true;
            
}

Now every time when I click on a ITEM the AppBar opens [... this function would be okay:) ] But if the GROUP doesn't have a entry (=no ITEM) the AppBar stays closed..

I also have to consider your preceding post or which changes are missing?! Thanks for the detailed help!!

Answer 11

Hi

No, it should work with what you did.

Can u check the value of

group.Items.Count

by using breakpoints in debug?

I don't have time to test myself.

When your list has no entry the value should be equal to 0.

You can also link me the code of your list in the .xaml file, so i can see how the binding is set.

Answer 12

Hm, i could mark a breakpoint, but couldn't see the values :/

Here is the xaml code..

<!-- here are the items listed, if there are some -->
	<ListView
            x:Name="itemListView"
            AutomationProperties.AutomationId="ItemsListView"
            AutomationProperties.Name="Items"
            TabIndex="1"
            Grid.Row="1"
            Margin="0,144,0,0"
            Padding="120,0,0,60"
            ItemsSource="{Binding Source={StaticResource itemsViewSource}}"
            IsSwipeEnabled="False"
            SelectionChanged="ItemListView_SelectionChanged"
            ItemTemplate="{StaticResource Standard130ItemTemplate}" />

<!-- detailed information on the right side of this SplitPage -->
        <ScrollViewer
            x:Name="itemDetail"
            AutomationProperties.AutomationId="ItemDetailScrollViewer"
            Grid.Column="1"
            Padding="30,30,0,0"
            DataContext="{Binding SelectedItem, ElementName=itemListView}"
            d:DataContext="{Binding AllGroups[0].Items[0], Source={d:DesignInstance Type=data:SampleDataSource, IsDesignTimeCreatable=True}}"
            Style="{StaticResource VerticalScrollViewerStyle}"
            Grid.Row="1">

Answer 13

Can u show me the ItemsViewSource wich is in your <Page.Resources> In your .xaml?

In debug mode, when program stopped at the breakpoint, u can see a litle windows with "local variables" or something like that in the left bottom corner of visual. You can check the values there. Or just put your mouse on the

group.Items.Count

and it should show you the value

Answer 14

ahhhhh.. f*** - it works!

I found the old entry you told me yesterday in my AppBar:

 IsOpen="{Binding GridView.IsAppBarOpened, Mode=TwoWay}"

Sorry..

Two other Problems respectively questions:

1.) Every time when user arrives on the page, the first item is selected.. and the AppBar issn't opend. How could I say as default: Don't select one item!? I tried with - SelectedItem="0" - SelectedValue="0" in the ListView-

2.) I select an item --> AppBar opens --> right-click or left-click somewhere and the AppBar Closes, the item is still selected. If I click again on this selected item, the AppBar doesn't open.. It's because we only defined it in "SelectionChange", right!? How could we solve this Problem?

Answer 15

1) Yes it's normal :). First : selectedItem won't work with an index, same thing for selectedValue. Use selectedIndex instead. Second, the index starts at 0, so 0 is the first item. You should use SelectedIndex = -1.

2) Yes, if you click on the same item, the selection is not changing so it won't open the appBar again.

The appBar got a property "IsSticky" you should look at this : http://msdn.microsoft.com/en-us/library/windows/apps/windows.ui.xaml.controls.appbar

If you set it to true, the appBar won't be light dismissed.

Answer 16

to #1.) In the "LoadState" I replaced MoveCurrentToFirst to

this.itemsViewSource.View.MoveCurrentTo("0");

..and there is no selectedItem now. Is this a better oder worse Placement - or same?  :)

to #2.) With the "IsSticky"-Value in the XAML-Code of the AppBar, it is in the front ever.

Answer 17

What u did there works. But in fact u didn't used the MoveCurrentTo properly :p

Here u say "move the view to the item wich is a String cointaining "0" ". Since there is no String in your collection, nothing is selected.

Does the "IsSticky worked for what u need?

If ur problem is solved, don't forget to mark the posts that helped you solve this as "Answer" so other people knows.

Answer 18

Very much thanks!!!!

I said, that I want to see a spezialized AppBar, if the "Group" doesn't have any "Item". I tried to implement this in the "SelectionChange", but I doesn't work..

var items = sender as ListView;
if (items.Items.Count == 0)
{
ButtonDelete.Visibility = Windows.UI.Xaml.Visibility.Collapsed;
ButtonEdit.Visibility = Windows.UI.Xaml.Visibility.Collapsed;
}

Where do I have to write it down, or how?!

..what I'm doing wron again..

Answer 19

Since it seems to be the same logic as when u want to know if there are items to show the appbar or not, put it in the LoadState.

if(group.items.count == 0)
{
ButtonDelete.Visibility = Windows.UI.Xaml.Visibility.Collapsed;
ButtonEdit.Visibility = Windows.UI.Xaml.Visibility.Collapsed;
}

Answer 20

Ahhh.. this works! :)

to #1.) But I tried the Option in the "ListView" with SelectedIndex = "-1", but there ist still a item selected..

to #2.) The "IsSticky" Option is no the intended version, but it's adequate     ;)

Answer 21

Strange, it should work.

Tho, you can still use the solution u found with MoveCurrentTo.

Answer 22

Ahhh.. this works! :)

to #1.) But I tried the Option in the "ListView" with SelectedIndex = "-1", but there ist still a item selected..

to #2.) The "IsSticky" Option is no the intended version, but it's adequate     ;)    

It would be better if the AppBar opens after the first Click on one "item".. If there issn't a item in the Group, the AppBar should open at once ... :/

Answer 23

hm.. Problems again..

# 3.) Where could I implement: If no item is selected --> don't show the "DetailGrid" on the right side of the page..

itemDetailGrid.Visibility = Windows.UI.Xaml.Visibility.Visible;  

Answer 24

 in selectionChanged Handler i think.

Answer 25

I tried it there - but than itemDetailGrid is there at the beginning although there is no item selected..

Answer 26

Maybe is it because of the MoveCurrentTo.

change the visibility after having checked that your list has no items.

Answer 27

I tested it with .MoveCurrentTo and also with .MoveCurrentToFirst and also with SelectedIndex - no changes

If my list has no items, the itemDetailGrid is collapsed! good..

But it also should be collapsed if no item is selected..

Answer 28

ok so, it's in the selection changed handler.

You have to check if an item is selected. I think that

if(listview.selectedIndex == -1)
{
// change visibility
}

Answer 29

--- 1.)

In my oft the itemListView xaml I added "SelectedIndex = -1"

But because of the PageState there is still the first item selected:

            if (pageState == null)
            {
                // When this is a new page, select no item automatically unless logical page
                // navigation is being used (see the logical page navigation #region below.)
                if (!this.UsingLogicalPageNavigation() && this.itemsViewSource.View != null)
                {
                   this.itemsViewSource.View.MoveCurrentToFirst();
                  //  this.itemsViewSource.View.MoveCurrentTo("0");
                }
            }
            else    
            {               
                // Restore the previously saved state associated with this page
                if (pageState.ContainsKey("SelectedItem") && this.itemsViewSource.View != null)
                {
                    var selectedItem = SampleDataSource.GetItem((String)pageState["SelectedItem"]);
                    this.itemsViewSource.View.MoveCurrentTo(selectedItem);
                }
            } 

Could I delete this code or is it necessary?

--- 2.)

I still try to collapse the "itemDetailGrid". With this code the grid issn't shown in groups with NO item - so it's fine!

            if (itemListView.SelectedIndex != -1)
            {
                itemDetailGrid.Visibility = Windows.UI.Xaml.Visibility.Visible;
            }

But if the user is in a group with items, the grid could be also seen when no item is selected :(