I am creating Windows Phone 8 silverlight application and i am using map control with toolkit MapExtensions to bind the pins on the map. But when I navigate away from map screen or come back to this screen it takes normally 2 to 3 sec to load this page. Where as when application is navigating between other non map pages it is fast. How can i improve application performance regarding map load and unload time while navigation. Here is the map control code I am using:
<maps:Map x:Name="map"
Center="{Binding CenterLocation,
Mode=TwoWay}"
CacheMode="BitmapCache"
ColorMode="Light"
Background="White"
>
<i:Interaction.Triggers>
<i:EventTrigger EventName="ResolveCompleted">
<i:InvokeCommandAction Command="{Binding MapResolveCommand}" />
</i:EventTrigger>
</i:Interaction.Triggers>
<tool:MapExtensions.Children>
<tool:UserLocationMarker GeoCoordinate="{Binding CurrentLocation,Mode=TwoWay}"
Width="50"
Height="50"
Style="{StaticResource LocationMapMarker}">
</tool:UserLocationMarker>
<tool:MapItemsControl Name="mapItems">
<tool:MapItemsControl.ItemTemplate>
<DataTemplate>
<tool:MapChildControl GeoCoordinate="{Binding ItemLocation, Converter={StaticResource LocationToGeoCoordinateConverter}}">
<tool:MapChildControl.Content>
<Image
Source="{Binding ItemId,
Converter={StaticResource ImageConverter}}" />
</tool:MapChildControl.Content>
</tool:MapChildControl>
</DataTemplate>
</tool:MapItemsControl.ItemTemplate>
</tool:MapItemsControl>
</tool:MapExtensions.Children>
</maps:Map>
This is to be expected. The map control is a pretty heavy control as there is a lot of moving parts to it. In addition to that, by putting it on a page, every time you move to the page the Map is recreated. What you can do is create a single map and reuse it across all the pages. I wrote a blog post on how to do this for Windows Store apps here: https://rbrundritt.wordpress.com/2014/10/24/be-smooth-optimize-bing-maps-in-multipage-windows-store-apps-javascript/
This was for a JavaScript application so this only shows the concept and would take a decent amount of work to port over.
Related
I am using this code example from live charts
https://lvcharts.net/App/examples/v1/wpf/Constant%20Changes%20II
It's in my application and working however I want to be able to access the "ReadCommand" from outside the user control, implement my own buttons and later send over the values I am reading from the serial port. How can i access the user control from my main application?
I have tried this after looking on various other posts but am struggling to get my head around this.
<Button x:Name="btn_StartTest" Command="{Binding ReadCommand, RelativeSource={RelativeSource AncestorType={x:Type local:GraphData}}}" Grid.ColumnSpan="2" Content="START" Grid.Column="18" Grid.Row="17" VerticalAlignment="Top" Height="43" FontFamily="Arial" Margin="5,0" Click="btn_StartTest_Click"/>
I would like to know if there's a way to implement a responsive Master/Detail page using only one. What I want is something exactly like the Project here:
https://github.com/Microsoft/Windows-universal-samples/tree/master/Samples/XamlMasterDetail
Except for the detail that instead of using two pages and navigating from one to another I would only use one page.
Is there a way to do it? If so, could you link me a working example?
Except for the detail that instead of using two pages and navigating from one to another I would only use one page.
After going through the project, I found it implemented a responsive master/detail experience based on the size of the screen. When the app view is sufficiently wide, the master list and detail view should appear side by side in the same app page. However, on smaller screen sizes, the two pieces of UI should appear on different pages, allowing the user to navigate between them. From my point of view, I think this is a good solution for implementing a responsive master/detail experience.
Is there a way to do it? If so, could you link me a working example?
The project already shows how to implement responsive Master/Detail in UWP using only one page, but it implements more and that makes it a little complex to understand. So I make a simple example which directly shows how to implement responsive Master/Detail in UWP using only one page.
Following is the main steps:
First, create a ListView to show master information in xaml page:
<!--Master VIEW-->
<ListView x:Name="ItemListView" Margin="0,0,0,8">
<ListView.ItemTemplate>
<DataTemplate>
<StackPanel HorizontalAlignment="Left" Margin="10,8,0,0">
<TextBlock Text="{Binding Title}" FontSize="25" Width="400" />
</StackPanel>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
Second, specify the details view that shows the details item related to the selection on the master list in the same xaml page:
<!--DETAILS VIEW-->
<StackPanel Grid.Column="1" x:Name="ContentPanelDetail" Margin="10,0,0,0" DataContext="{Binding SelectedItem, ElementName=ItemListView}">
<TextBlock Text="{Binding Title}" MaxHeight="80" FontSize="30" HorizontalAlignment="Left" Margin="0" />
<TextBlock x:Name="DetailTextBlock" FontSize="35" Text="{Binding Content}" HorizontalAlignment="Left" Margin="0,18,40,0" Width="500" Height="Auto" TextWrapping="Wrap" />
</StackPanel>
Then, set the ItemsSource for the ListView in code behind:
public MainPage()
{
this.InitializeComponent();
//set the ItemsSource for the ListView
ItemDetails messageData = new ItemDetails();
ItemListView.ItemsSource = messageData.Collection;
ItemListView.SelectedIndex = 0;
}
Last but not least, put Master View and Details View into a SplitView and use VisualStateManager to make it more responsive.
Here is the simple example and the output for your reference.
To implement Master/Detail pattern on your page, you don't have to do it yourself. Instead you can use MasterDetailsView control from UWP Community Toolkit, it does a lot work for you + it is well documented.
Note: For details section of the control, do not set background to null (NoSelectionContent will be visible).
Im trying to print visual (or anything related) with pagination from a WPF element. I'm using a MVVM Pattern development.
This is my visual layout. Where the user can scroll to view the pages.
<ScrollViewer>
<StackPanel x:Name="Wrapper">
<StackPanel x:Name="PageOne" />
<StackPanel x:Name="PageTwo" />
</StackPanel>
</ScrollViewer>
The visual is passed via a Command Binding on a button.
<Button Command="{Binding PrintCommand}" CommandParameter="{BindingElementName=Wrapper}"
The visual is passed to the print Method.
PrintDialog newDialog = new PrintDialog();
newDialog.PrintVisual(MyVisualName, "Printing is Fun!");
I would like to paginate the two pages (and more), and also scale the visual to the paper, Whilst holding true to MVVM style.
Thanks.
In the end i used Flow Inline Flowdocument.
<FlowDocumentScrollViewer>
<FlowDocument x:Name="EntirePage">
<Section>
<BlockUIContainer>
</BlockUIContainer>
</Section>
</FlowDocument>
</FlowDocumentScrollViewer>
Every control within the BlockUIContainer is printed. (A Lot of page size and margin fiddling is required to get pagination working perfectly) Section/ BlockUI does pagination somewhat automatically - so for me page one was one BlockUi and Page two was another - Comment/Ask for more info
<i:Interaction.Triggers>
<i:EventTrigger EventName="MouseLeftButtonDown">
<i:InvokeCommandAction Command="{Binding PrintCommand}" CommandParameter="{Binding ElementName=EntirePage}"/>
</i:EventTrigger>
</i:Interaction.Triggers>
I passed the FlowDocument via a command Parameter.
printCommand = new RelayCommand(p => PreparePrint((FlowDocument)p));
(pageVisual being the flow document passed via the command param)
Then between a few of methods i get to;
IDocumentPaginatorSource idocument = pageVisual as IDocumentPaginatorSource;
printDialog.PrintDocument(idocument.DocumentPaginator, "Printing Machine : " + Machine.Serial);
If you are confused and need help (much like i was) then don't hesitate to comment/ask questions.
I'm trying to make an image gallery from pictures library images. Everything is working fine when I have a reduced number of images, but if I have more than 80 images, the phone runs out of memory. I've tried using data virtualization by defining a class which implements the ISupportIncrementalLoading interface. Then I used that class to populate my GridView, but with absolutely no luck: it still is throwing an OutOfMemoryException.
The possibility I'm thinking about is to use random access virtualization, but I haven't found any code template about it.
So,
Could you please explain me how to apply random access virtualization to my list of images?
Or
Could you please explain me how to effectively make an image gallery which retrieves its elements from the Phone's photo gallery?
My XAML code is as follows:
<GridView x:Name="photosGrid" Height="392" Width="400" ItemsSource="{Binding}" Margin="0,0,-0.333,0" SelectionMode="Multiple" Background="Black">
<GridView.ItemTemplate>
<DataTemplate>
<Image Width="90" Height="90" Margin="5" Source="{Binding}" Stretch="UniformToFill"/>
</DataTemplate>
</GridView.ItemTemplate>
</GridView>
Below is the XAML code i have for a Bing Maps Silverlight weather related implementation.
Here is what i am trying to do:
Have a bing maps with several (over 100) pushpins- on mouseover - show a contentpopup (canvas=myPopup) below. Simple enough.
Everything works fine - however, when mypopup displays on mouseover, it is not on the foreground (the other pins appear on top of the contentpopup) - hence making it not very readable.
Question:
How do i specifiy the myPopup canvas specified in XAML below to always appear in the foreground, i.e. top most of the Bing Maps silverlight control when a user views it on mouseover.
Thanks!
<Grid x:Name="LayoutRoot" Background="White">
<m:Map x:Name="GlobalMap" Mode="Road" Center="15,7" ZoomLevel="2" CredentialsProvider="{StaticResource MyCredentials}" Margin="-70,-40,-100,-72">
<m:MapLayer x:Name="myLayer">
<Canvas x:Name="myPopup" Visibility="Collapsed" Opacity="1">
<Rectangle x:Name="myPopupRectangle" Fill="White" Canvas.Left="0" Canvas.Top="0" Height="100"
Width="100" RadiusX="15" RadiusY="15"/>
<StackPanel Canvas.Left="8" Canvas.Top="8">
<TextBlock x:Name="myPopupTexts" FontSize="5" Width="100">
</TextBlock>
</StackPanel>
</Canvas>
</m:MapLayer>
</m:Map>
</Grid>
Try adding Canvas.ZIndex to the MapLayer element, give it a large value like 200 or add your push pins to another MapLayer (rather than adding the pins directly to the map) that appears ahead of this popup layer in document order.
I did something similar to this, but took a different approach. What I did was create a custom pushpin template and create a PopUp within the template.
When the user hovers over the pushpin, the popup is displayed. Using the PopUp will solve your problem, since the control will automatically position it on top of everything. Try wrapping the Canvas in a PopPup and see if that works.
hth