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);
}
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 have a problem. I want to load a TabbedPage when I click on a button in a different page, so I created this code:
protected void imgAdd_Clicked(object sender, EventArgs args)
{
var tabbedPage = new TabbedPage();
tabbedPage.Children.Add(new Page1());
tabbedPage.Children.Add(new Page2());
App.Current.MainPage = tabbedPage;
}
But the result is as follows:
As you can see the Image leaves a trail of the image when you swipe between the pages.
However, when I load the Tabbed Page using the App.xaml.cs it loads correctly without the flickering, so it seems to only occur when I call the tabbed page from another page...
Any ideas?
I make the sample to test. You could check the sample TabbedPageDemo on my github.
https://github.com/WendyZang/Test.git
Create two pages.
Page1.xaml:
<StackLayout >
<Image Source="pig.jpg"></Image>
</StackLayout>
Page2.xaml:
<StackLayout>
<Image Source="world.jpg"></Image>
</StackLayout>
With the code you provided.
var tabbedPage = new TabbedPage();
tabbedPage.Children.Add(new Page1());
tabbedPage.Children.Add(new Page2());
App.Current.MainPage = tabbedPage;
Result:
Need more explanation about the issue,
The tabs in the Tabbedpage are dynamically created?
Suggestion: Use https://help.syncfusion.com/xamarin/tabbed-view/getting-started
it will save your time.
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 developing windows universal app(XAML,C#) on phone, and am enabling accessibility for Narrator. Does anybody know how to get narrator automatically to read page title when a page is opened?
I tried setting automationproperties.name in page but didn't work:
<Page
x:Class="xxxxxx"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
AutomationProperties.Name="Page title to be read"
Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
The features of the Narrator for UWP are applied when you select a control in a list, or editing a textbox. If you want to read content when the app is opened you should use the SpeechSynthesizer API, which is really easy to implement:
1.- In XAML add a Media Element
<MediaElement x:Name="MediaElement"/>
2.-Then in the code behind of the page:
public MainPage()
{
this.InitializeComponent();
this.Loaded += MainPage_Loaded;
}
private void MainPage_Loaded(object sender, RoutedEventArgs e)
{
ReadTitle();
}
private async void ReadTitle()
{
var voice = SpeechSynthesizer.AllVoices.First();
SpeechSynthesizer reader = new SpeechSynthesizer() { Voice = voice };
var text= this.GetValue(AutomationProperties.NameProperty) as String;
await reader.SynthesizeTextToStreamAsync(text);
MediaElement.SetSource(stream, stream.ContentType);
MediaElement.Play();
}
You can read everything you want passing the string to the reader.
You need to make view-able by narrator. I don't believe you can declare the Name property within the Page Class. Try something like this within the content of your Page:
<HyperlinkButton
NavigateUri="www.bing.com"
AutomationProperties.AutomationID="bing url" //Not Required to work
AutomationProperties.Name="Go to the Bing Homepage"//Narrator will read this
<StackPanel>
<TextBlock Text="Bing Dot Com" />
<TextBlock Text="www.bing.com" />
<StackPanel>
</HyperlinkButton>
https://msdn.microsoft.com/en-us/library/windows/apps/windows.ui.xaml.automation.peers.accessibilityview
EDIT: You may also need to programmatically set focus on the item for this to work
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>