Search code examples
uno-platform

Uno Platform BottomNavBar uncheck selected item


I have an app that uses a bottomnavbar from uno-material. The bar is working fine. I also have a settings button up towards top. When the user selects the button- it changes color. What I am trying to do is to "unselect" the item that is currently selected on the bottomnavbar- so the user will know they are using the settings button. I know the bottomnavbar from uno-material uses togglebuttons- so that is why I tried that path. Here is what I have tried so far:

XAML:

 <StackPanel>
            <Button x:Name="settingsButton" HorizontalAlignment="Right" Background="{StaticResource NavigationViewItemBackground}" Click="settingsButton_Click">
                <SymbolIcon x:Name="settingIcon" Symbol="Setting" Foreground="{StaticResource NavigationViewItemForeground}" >
                   
                </SymbolIcon>
            </Button>
         
        </StackPanel>



        <controls:BottomNavigationBar 
            x:Name="BottomNavBar" 
            Loaded="bottomNavView_Loaded">
            <controls:BottomNavigationBar.Items >
                <controls:BottomNavigationBarItem Label="Home" tag="HomeView" Click="OnClick" Padding.right="2" >
                    <controls:BottomNavigationBarItem.Icon>
                        <PathIcon  
                            Data=""/>
                    </controls:BottomNavigationBarItem.Icon>

                </controls:BottomNavigationBarItem>

                <controls:BottomNavigationBarItem Label="Event" tag="event" Click="OnClick" Padding.Left="2" Padding.right="2">
                    <controls:BottomNavigationBarItem.Icon>
                        <PathIcon
                            Data=""/>
                    </controls:BottomNavigationBarItem.Icon>

                </controls:BottomNavigationBarItem>

        
            </controls:BottomNavigationBar.Items>
            
        </controls:BottomNavigationBar>
        

Code Behind:

private void settingsButton_Click(object sender, RoutedEventArgs e)
        {
            
            this.settingIcon.Foreground = Application.Current.Resources["NavigationViewSelectionIndicatorForeground"] as SolidColorBrush;
            this.BottomNavBar.SelectedItem.isChecked = false;
            this.BottomNavView_Navigate("settings");
            
        }

Solution

  • Your original approach does not work, as the code prevents unselecting the selected item. The proper solution will look like this:

    private void settingsButton_Click(object sender, RoutedEventArgs e)
    {
        SettingIcon.Foreground = Application.Current.Resources["NavigationViewSelectionIndicatorForeground"] as SolidColorBrush;
        BottomNavBar.SelectedItem = null;       
    }
    

    Which is in line with other "list" controls. Unfortunately setting SelectedItem to null is currently not possible in BottomNavigationBar so I have created a PR to fix this here. It should be merged soon 🙃