I'm developing an application for windows phone using the maps control. The map control binds its center and its zoomlevel property to two properties on a viewmodel.
The map control is on a page seperate from the mainpage of the application. Every time a user moves to the map the page binds to a viewmodel. This viewmodel is a singleton (always the same instance).
the first time I move to the map navigating on the map works fine, but when I go back and navigate to the map again, navigation has some sort of bounce like it is push backed to its initial location.
To see this behaviour do the following:
Navigate to the mapPage bij clicking on the button on the mainpage. At this time the map control works as expected.
Click the back button to return to the mainpage.
Click the button on the mainpage again to navigate to the mappage for the second time. Now when sliding the map the control behaves strange by bouncing back to the original location before sliding.
The mainpage contains just a button to navigate to the map page which looks as follows:
<phone:PhoneApplicationPage
x:Class="MapTester.Map"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:maps="clr-namespace:Microsoft.Phone.Controls.Maps;assembly=Microsoft.Phone.Controls.Maps"
FontFamily="{StaticResource PhoneFontFamilyNormal}"
FontSize="{StaticResource PhoneFontSizeNormal}"
Foreground="{StaticResource PhoneForegroundBrush}"
SupportedOrientations="Portrait" Orientation="Portrait"
mc:Ignorable="d" d:DesignHeight="768" d:DesignWidth="480"
shell:SystemTray.IsVisible="True"
DataContext="{Binding Path=MapViewModel, Source={StaticResource ViewModelLocator}}">
<!--LayoutRoot is the root grid where all page content is placed-->
<Grid x:Name="LayoutRoot" Background="Transparent">
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<maps:Map Center="{Binding Center, Mode=TwoWay}"
ZoomLevel="{Binding ZoomLevel,Mode=TwoWay}"
ZoomBarVisibility="Visible"
CredentialsProvider=""
ScaleVisibility="Visible"></maps:Map>
</Grid>
</phone:PhoneApplicationPage>
The MapViewModel is defined on the ViewModelLocator. I created a solution to demonstrate then problem. You can download it here https://skydrive.live.com/?cid=25374d9051083633&sc=documents&id=25374D9051083633%21344#
Does anybody have an idea how to fix this?
Thanks!
I don't see what's wrong here? Unless you're navigating backwards (and thus not setting the DataContext), Bing Maps will always do a "bounce" animation from global view to the center location. This is how the control work, so nothing you can do about that.
Related
I wrote a Windows Phone 8.1 (WINRT) App. I need to show Calendar in the page. So, I added WinRT XAML Toolkit - Calendar Control from nuget.
PM> Install-Package WinRTXamlToolkit.Controls.Calendar
<Page
x:Class="DrFit.Pages.ActivityTimeTablePage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:DrFit.Pages"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
xmlns:WinRT="using:WinRTXamlToolkit.Controls"
Background="Black">
<Grid x:Name="LayoutRoot">
<WinRT:Calendar Height="500">
</WinRT:Calendar>
</Grid>
</Page>
How to Customise this Calendar control, example FontWeight,Foreground,Background?
If the properties aren't exposed by the control or template-bound to template part properties - you'll probably need to change the template. You can find the default template here and templates for calendar parts are in the same folder:
WinRTXamlToolkit.Controls.Calendar/WinRTXamlToolkit.Controls.Calendar.Shared/Controls/Calendar
You probably have figured out the answer to this but I was facing a similar problem and figured out a solution so I thought I'd post it here for anyone else who faces a similar conundrum. If the calendar control is going out of the page, you can wrap it inside a Viewbox so that it fits the screen. This is how I managed to do it.
<Viewbox Stretch="Uniform">
<Grid Height="600" Width="600">
<toolkit:Calendar HorizontalAlignment="Center" VerticalAlignment="Center" Tapped="Calendar_Tapped"/>
</Grid>
</Viewbox>
I'm in the process of starting a new project, using ReactiveUI and MahApps.Metro. The first hurdle I've hit is a problem of views not showing in their entirety. I have a Window, and in that Window I have a ViewModelViewHost from the RxUI library. It is a simple container for a nested view-model. The ActiveItem binding is properly binded to the view-model of the User Control, and the Button from the user control is visible on screen.
What I expect to see is a Window with a dark gray background and a button in the middle. What I see is the Window with its default background and a Button in the middle. This is not right. If I remove the button, I see nothing on the Window, only the default background.
It seems the ViewModelViewHost is only showing the actual contents of a UserControl and is disregarding what isn't considered a real Control, such as grids etc.
Has anyone come across this behaviour before?
<mah:MetroWindow x:Class="...MainWindow"
xmlns:mah="clr-namespace:MahApps.Metro.Controls;assembly=MahApps.Metro"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:rx="clr-namespace:ReactiveUI;assembly=ReactiveUI"
WindowStartupLocation="CenterScreen"
ShowTitleBar="False"
ShowCloseButton="False"
ShowMaxRestoreButton="False"
ShowMinButton="False"
Height="768"
Width="1024">
<Grid HorizontalAlignment="Center" VerticalAlignment="Center">
<rx:ViewModelViewHost ViewModel="{Binding ActiveItem}" />
</Grid>
</mah:MetroWindow>
<UserControl x:Class="...NestedView"
Name="TheUserControl"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
mc:Ignorable="d"
TextOptions.TextHintingMode="Auto"
TextOptions.TextRenderingMode="Auto"
d:DesignHeight="768" d:DesignWidth="1024">
<Grid Background="DarkGray">
<Button Width="200" Height="100" />
</Grid>
</UserControl>
This won't be a ReactiveUI problem, just a simple WPF one.
The ViewModelViewHost is centered in your window. While your UserControl has a DesignHeight and DesignWidth set, when it's rendered at runtime it will automatically size itself to the height and width of its content - the Button.
Add VerticalContentAlignment="Stretch" HorizontalContentAlignment="Stretch" to your ViewModelViewHost declaration and remove the other two Alignment attributes (they default to Stretch) and it should stretch its contents to the size of the Window while centering any item that has a fixed size.
I'm trying to display a map control in my app targeting Windows Phone 8 but I want to use custom tiles from open street map.
I'm using this line :
mapControl.TileSources.Add(new TileSource("http://a.tile.openstreetmap.org/{zoomLevel}/{x}/{y}.png"));
When I launch the app the custom tiles are properly displayed, but there's still the default map tiles underneath them.
I tried to hide them, but I counld'nt even find where they exist in the map control and what is displaying them exactly.
I would like to know how I can remove those default tiles when loading custom tiles.
I tried to hide them, but I counld'nt even find where they exist in the map control and what is displaying them exactly.
PS : Here's the link to the "old" bing map control if you cannot find it in the latest WP Tools : http://www.microsoft.com/en-us/download/confirmation.aspx?id=2949
I tried this myself with the new WP8 "Nokia HERE maps" map control but was unable to achieve this. I had to resort to falling back to the older "Bing" based map control in Microsoft.Phone.Controls.Maps (marked as obsolete).
Here's how to remove the other layers in the older Microsoft.Phone.Controls.Maps control:
for (var i = Map.Children.Count - 1; i >= 0; i--)
{
MapTileLayer tileLayer = Map.Children[i] as MapTileLayer;
if (tileLayer != null)
{
Map.Children.RemoveAt(i);
}
}
Even though this older map control has been superseded in WP8 the newer control doesn't seem to support the same flexibility with layers and the "obsolete" control still works happily under WP8.1 if used in your app.
Here's my app which still uses the older control which is probably achieving what you're trying to do - NZ Topo Map app for Windows Phone.
Cut down Xaml for using the older map control in your app (you'll probably want to ignore my data bindings and replace them with your own):
<UserControl x:Class="TopoMap.Controls.Map"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:m="clr-namespace:Microsoft.Phone.Controls.Maps;assembly=Microsoft.Phone.Controls.Maps"
mc:Ignorable="d"
FontFamily="{StaticResource PhoneFontFamilyNormal}"
FontSize="{StaticResource PhoneFontSizeNormal}"
Foreground="{StaticResource PhoneForegroundBrush}"
d:DesignHeight="480" d:DesignWidth="480"
DataContext="{Binding Main, Source={StaticResource Locator}}">
<Grid x:Name="LayoutRoot" Background="Transparent">
<m:Map x:Name="MapBase" LogoVisibility="Collapsed" ScaleVisibility="Visible"
Loaded="Map_Loaded"
LayoutUpdated="Map_LayoutUpdated"
ZoomLevel="{Binding ZoomLevel, Mode=TwoWay}"
Center="{Binding Center, Mode=TwoWay}">
</m:Map>
</Grid>
</UserControl>
The important reference that you need it:
xmlns:m="clr-namespace:Microsoft.Phone.Controls.Maps;assembly=Microsoft.Phone.Controls.Maps"
Originally I had my MainWindow(.xaml) that had a stackpanel and a frame. Within the stackpanel were three navigation buttons and the frame had one of the three Pages (based on which navigation button the user clicked). However, it seems that since I'm not doing a web app, that using Frame (and Pages?) is not the right way to go about it. So I changed the stackpanel and frame to a single tabcontrol (with tabs being what were the three buttons before). I also changed the Pages to usercontrols.
However, I'm having trouble finding a way to put the Pages (now UserControls) into the content of the tabitem, without using a Frame. I'm trying to do all of this within the MainWindow xaml.
my MainWindow.xaml:
<Window x:Class="ConstructedLanguageOrganizerTool.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" mc:Ignorable="d" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" Height="454" Width="573">
<Grid>
<TabControl HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Name="tabControl1">
<TabItem Header="Basics" Name="basicsTab">
//What can I use here instead of Frame?
</TabItem>
<TabItem Header="Words" Name="wordsTab">
<Grid>
<Frame Source="WordsPage.xaml"/>
</Grid>
</TabItem>
...
</TabControl>
</Grid>
</Window>
Am I going about this the wrong way? I think that I'm suppose to use some sort of databinding, maybe? Although, the more I look at things on data binging, the more I just get confused on that as well.
edit: here is my BasicsPage.xaml
<UserControl x:Class="ConstructedLanguageOrganizerTool.BasicsPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
mc:Ignorable="d" x:Name="basicsPage" Height="349" Width="334">
<Grid>
// Grid Row and Column defs here
//Number of textboxs and textblocks here.
</Grid>
</UserControl>
You just need to create an instance of UserControl and put it inside TabItem.
Say BasicsPage is your UserControl you want to put inside TabItem. All you have to do this:
<TabItem Header="Basics" Name="basicsTab">
<local:BasicsPage/>
</TabItem>
Define local namespace at root window where BasicsPage is defined in something like:
<Window x:Class="ConstructedLanguageOrganizerTool.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:ConstructedLanguageOrganizerTool"> <-- HERE
I am in the codebehind file for a usercontrol. In this user control I have a grid called GBoard. I create one instance of this user control in my main XAML file and I name it GameBoard. Now I am in the codebehind as I said earlier, and I want to get the X/Y position of GameBoard. If I grab the Margin, all the values are set to 0. If I do Canvas.GetTop(this) it comes back as NaN. How do I grab these coordinates? I don't think it's a bug in my code as everything works, its just I can't seem to grab the coordinates.
Position = new Point(Canvas.GetTop(GameBoard), Canvas.GetLeft(GameBoard));
gets NaN for values.
boardMargin = GameBoard.Margin;
boardMargin is 0,0,0,0 even though its positioned in the center of the screen.
<UserControl x:Class="UserControls.Board"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
mc:Ignorable="d"
xmlns:controls="clr-namespace:UserControls"
d:DesignHeight="300" d:DesignWidth="300">
<Grid Name="GBoard">
<Grid.ColumnDefinitions>
//lots of these
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
//lots of these
</Grid.RowDefinitions>
</Grid>
</UserControl>
that's the user control. I edited out the massive amount of col and row defs for space.
<Page x:Class="GUI.SGUI"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:controls="clr-namespace:UserControls"
Title="SGUI" Height="1000" Width="1000">
<Canvas x:Name="LetterCanvas">
<controls:Board x:Name="GameBoard" Height="Auto" Canvas.Left="120" Canvas.Top="164" Width="Auto"/>
</Canvas>
</Page>
I found out that if I access the location from the main class then I can get the coordinates, if I access them from the user control's codebehind I can't. So if I have to I can make something hacky, but I'd rather get the coordinates inside of the user control.
The code in your usercontrol needs access to the Canvas in order to get the GameBoard's position because the Canvas element in WPF uses absolute positioning.
Assuming that LetterCanvas will be the parent element of the GameBoard - try using this in the code behind for your GameBoard user control:
double xPosition = Canvas.GetLeft(this);
double yPosition = Canvas.GetTop(this);
NOTE: must call from method and not constructor.
using the Grid element somewhere in your design. It provides information about the location of your controls in a very straight-forward kind of way. It works like a smarter version of a dynamicly-sizing HTML table. You can retrive ActualWidth and ActualHeight properties of any row or column - or even of the entire grid itself if you want.