I have a popup in Mainpage.xaml click on button popup shows up , but if i navigate to other page and came back to mainpage.xaml and click on same button, 2 popup instance is seen with slight change in UI..Please revert if any solution
<Popup IsOpen="{Binding IsVisible, Mode=TwoWay}" x:Name="AddPu">
<Popup.Child>
<uc:AddPopup x:Name="ucAdd"></uc:AddPopup>
</Popup.Child>
</Popup>
In your MainPage constructor there is a line like this:
button.Click += ShowPopUpMethod;
when you navigetes from main mage run this code:
button.Click -= ShowPopUpMethod;
Ok in figured it out myself :)
<Popup IsOpen="{Binding IsVisible, Mode=TwoWay}" x:Name="AddPu">
<Popup.Child>
<uc:AddPopup x:Name="ucAdd"></uc:AddPopup>
</Popup.Child>
</Popup>
Need to Make IsOpen = always true and before navigating to other page make user control collaps a given below..
<Popup IsOpen="True" x:Name="AddPu">--------------Always true here
<Popup.Child>
<uc:AddPopup visibility={binding whateverData} x:Name="ucAdd"></uc:AddPopup>
</Popup.Child>
</Popup>
Related
I am fairly new and inexperienced. I have two questions. First: what would the xaml code in xamarin look like for such a button? The blue one should be the button. The button should contain a text and a picture. So it should also work that when the image or text is clicked, the button is actually clicked.
enter image description here
Second: my app has two sides. The start page is MainPage and the other page is Page1. I can switch to Page1 using a button on MainPage. I looked at a tutorial and in App.xaml.cs "MainPage = new MainPage ();" was made to "MainPage = new NavigationPage (new MainPage ());". Why was that done? Why does the page change via a button click not work differently?
enter image description here
Since it was coded to "MainPage = new NavigationPage (new MainPage ());" , there is a blue bar at the top of my MainPage. How can I remove this bar or make it white?
enter image description here
For the first question:
There is no such control now, but you can do this by using a Frame and adding an Image and Label to it，then you could add a TapGestureRecognizer to the Frame.
like:
<Frame CornerRadius="20" HorizontalOptions="Start" WidthRequest="100" HeightRequest="120" BackgroundColor="Blue" Padding="40">
<StackLayout Orientation="Vertical" >
<Image Source="heart.png"></Image>
<Label Text="hello world" BackgroundColor="Red" ></Label>
</StackLayout>
<Frame.GestureRecognizers>
<TapGestureRecognizer Tapped="TapGestureRecognizer_Tapped">
</TapGestureRecognizer>
</Frame.GestureRecognizers>
</Frame>
handle the click event in code behind:
private void TapGestureRecognizer_Tapped(object sender, EventArgs e)
{
//do something
}
For the second question:
1)To move from one page to another, an application will push a new page onto the navigation stack.The NavigationPage class provides a hierarchical navigation experience where the user is able to navigate through pages, forwards and backwards, as desired. The class implements navigation as a last-in, first-out (LIFO) stack of Page objects.
2)The top blue bar we call it NavigationBar.If you want display it,you could set NavigationPage.SetHasNavigationBar(this, false); in your MainPage.xaml.cs like:
public MainPage()
{
InitializeComponent();
NavigationPage.SetHasNavigationBar(this, false);
}
or set it in the MainPage.xaml like：
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
NavigationPage.HasNavigationBar="False"
x:Class="YourNamespace.MainPage">
....
</ContentPage >
You could look at https://learn.microsoft.com/en-us/xamarin/xamarin-forms/app-fundamentals/navigation/hierarchical for more details.
I'm trying to run a UI Test on a page (About.xaml).
Below are the steps to get to the page when the application loads.
Launch the Login Screen
User enters username
User enters password
User clicks on the Login Button
User lands on the Home Page in an AppShell.
User clicks on the Hamburger menu
User clicks on the About Menu in the Flyout Menu Items.
My question is, how do I set the Automation Id for the Hamburger Menu (Flyout Menu) of the AppShell?
Here's the UI Test Case.
[Test]
public async Task AboutPage_UITest()
{
//Arange
app.EnterText("UsernameEntryId", "user1");
app.EnterText("PasswordEntryId", "Abc#123");
//Act
app.DismissKeyboard();
app.Tap(x => x.Marked("LoginButtonId"));
app.Tap(x => x.Marked("AppShellId"));
//app.Tap(c => c.Class("OverflowMenuButton")); I tried this as well but no luck.
await Task.Delay(30000);
app.Tap(x => x.Marked("AboutId"));
//Assert
var appResult = app.Query("EmailId").First(result => result.Text == "abc#example.com");
Assert.IsTrue(appResult != null, "Label is not displaying the right result!");
app.Screenshot("About Page");
}
In the AppShell.xaml, here's the top section.
<Shell xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
FlyoutHeaderBehavior="CollapseOnScroll"
Shell.ItemTemplate="{StaticResource FlyoutTemplate}"
Shell.MenuItemTemplate="{StaticResource FlyoutTemplate}"
FlyoutBackgroundColor="WhiteSmoke"
Navigating="OnNavigating"
Navigated="OnNavigated"
AutomationId="AppShellId"
x:Class="DemoApp.AppShell">
Welcome to SO!
After researching that , you can use follow ways to set the AutomationId for the Hamburger Menu.
In AppShell.xaml.cs:
public AppShell()
{
InitializeComponent();
FlyoutIcon.AutomationId = "FlyoutIcon";
//or
FlyoutIcon.SetValue(AutomationProperties.NameProperty, "FlyoutIcon");
}
Note: Also need to set a value for FlyoutIcon(Such as: FlyoutIcon="xxx.png") make it work, otherwise above code will occur error System.NullReferenceException: 'Object reference not set to an instance of an object.'.
In addition, here it the way to go to About Page without tapping the Hamburger menu.
You can add TabBar to AppShell.xaml, and defining the About page and other page inside it.
Such as follow:
<TabBar>
<Tab Title="About"
AutomationId="About"
Icon="tab_about.png">
<ShellContent>
<local:AboutPage />
</ShellContent>
</Tab>
<Tab Title="Browse"
AutomationId="Browse"
Icon="tab_feed.png">
<ShellContent>
<local:ItemsPage />
</ShellContent>
</Tab>
</TabBar>
Then in Test method can navigate to your wanted page as follow:
app.Tap(x => x.Marked("About"));
Or, directly in Xaml, like this:
<Shell.FlyoutIcon>
<FontImageSource AutomationId="THE_ID_YOU_WANT" ... other props />
</Shell.FlyoutIcon>
You can also use FileImageSource or UrlImageSource or whatever kind you need. The important thing is that the AutomationId goes on the ImageSource tag itself.
Annoyingly, you don't seem to be able to set the AutomationId without manually defining an icon. And the Id it gives you is not consistent every run (Sometimes it is "OK" and sometimes "Open navigation drawer" - so this is the best way to get a consistent Id.
I'm using Prism Library for Xamarin.Forms.
And I'm going to create custom navigation bar via Control template. (Reason of creating custom navigation bar - I didn't find solution to make navigation bar transparent for display background image, also I will probably customize my navigation bar and add some controls on it).
<ControlTemplate x:Key="NavigationPageTemplate">
<AbsoluteLayout BackgroundColor="Transparent">
<Image AbsoluteLayout.LayoutBounds="0,0,1,1"
AbsoluteLayout.LayoutFlags="All"
Aspect="AspectFill"
Source="{TemplateBinding BackgroundImageEx}" />
<ContentView Padding="0,50,0,0"
AbsoluteLayout.LayoutBounds="0,0,1,1"
AbsoluteLayout.LayoutFlags="All">
<ContentPresenter />
</ContentView>
<!--Navigation bar started here -->
<ContentView AbsoluteLayout.LayoutBounds="0,0,1,AutoSize"
AbsoluteLayout.LayoutFlags="PositionProportional, WidthProportional"
BackgroundColor="Transparent">
<ContentView.Padding>
<OnPlatform x:TypeArguments="Thickness"
Android="10"
iOS="10, 20, 10, 0" />
</ContentView.Padding>
<controls:ImageButton Command="{TemplateBinding GoBackCommand}"
HeightRequest="30"
HorizontalOptions="StartAndExpand"
Source="ic_back.png"
WidthRequest="30">
</controls:ImageButton>
</ContentView>
</AbsoluteLayout>
</ControlTemplate>
And my problem is to process back button press with Prism Navigation.
I've tried to process click on MyApp.xaml.cs file.
private void Button_OnClicked(object sender, EventArgs e)
{
NavigationService.GoBackAsync();
}
And it seems to have different navigation stack because it shows after press my first page.
I had Navigation this way:
Navigate("FirstPage"); -> Navigate(MasterDetail/NavigationPage/ViewA) -> Navigate("ViewB")
ViewB - uses Control template.
When I click custom back button on ViewB NavigationService back me to FirstPage. It is incorrect for me. I should back to ViewA!
Another question Should first page be saved when we change App.MainPage?
See the discussion of described problem on https://github.com/PrismLibrary/Prism/issues/1262
To navigate back from ViewA to FirstPage you can intercept the back event and go back again if a variable is passed with a specific value from the ViewB page. Code Example:
Sender:
var navigationParams = new NavigationParameters();
navigationParams.Add("yourVariableName", "YourVariableValue");
_navigationService.GoBackAsync(navigationParams);
Receiver:
public void OnNavigatedTo(NavigationParameters parameters)
{
string myVar = null;
if (parameters.ContainsKey("yourVariableName"))
{
myVar = (string)parameters["yourVariableName"];
}
if(myVar=="YourVariableValue"){
NavigationService.GoBackAsync();
}
}
I don't understand your second question.
I'm thing to navigate between pages while keeping the same original page
The Code in MainPage.xaml is
xmlns:views="clr-namespace:MainPage.View"
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
<views:Page1 x:Name="InterfacePage"/>
</Grid>
Page1 in a User Control Page with a button in it. When I press that button I would like to change Page1 to Page2 another User Control Page without changing the MainPage
I've been searching but can't find anything on this
By the way I'm doing this using the windows Phone 8 sdk
Thanks
In the ButtonClick event of the Page1, try this
Button_Click()
{
var contentPanel = (this.Parent as Grid);
Page2 page2 = new Page2() { Name = "AnotherPage" };
contentPanel.Children.Remove(this);
contentPanel.Children.Add(page2);
}
I have a question about Mvvmlight binding Listbox SelectedIndex.
The full source code can be downloaded here.
Here is my precondition:
[TestModel]
string Title;
string Description;
[TestViewModel]
ObservableCollection<TestModel> TestList;
[xaml binding]
<ListBox ItemSource="{Binding TestList}"
SelectedIndex="{Binding SelectedIndex Mode=TwoWay}">
.....
<i:EventTrigger EventName="SelectionChanged">
.....
</i:EventTrigger>.....
Here is my OnSelectionChanged code:
private void OnSelectionChanged(TestModel test)
{
int index = SelectedIndex;
Debug.WriteLine("[SelectionChanged] +++, index={0}", index);
// If selected index is -1 (no selection) do nothing
if (-1 == SelectedIndex)
return;
Debug.WriteLine("[SelectionChanged] selected item={0}", test.Title);
// Reset selected index to -1 (no selection)
SelectedIndex = -1;
Debug.WriteLine("[SelectionChanged] ---, index={0}", index);
}
I have a sample to have MainPage.xaml and TestPage.xaml.
MainPage: This page has a button, click the button will navigate to TestPage
TestPage: This page has a listbox and binding to ViewModel
When I run this sample, tap button to TestPage, and try to tap any item of Listbox, I can see the item has no focused color (because I reset SelectedIndex to -1).
Here comes the question, when I back to MainPage, then again tap button to TestPage, you will see tapping any item of Listbox will cause focused color on every item, it's strange.
Hope anyone can help me to see if any problem on my sample.
Thanks.
I got a workaround from somebody below:
Change:
<i:EventTrigger EventName="SelectionChanged">
To:
<i:EventTrigger EventName="Tap">
It really works as what I expected.
Tap can allow user to tap repeated ListItem, also "reset SelectedIndex = -1" can make selected item without highlight color.