Howdy,
I want to generate several location of pushpins on a seperate layer over a map. Those PushPins shall represent places at this very coordinate. Thus they should show some additional information which should be visible once the user taps/touches the Pushpin.
This whole solution is solely code based ( adding of the pushpins ).
I already here on sa that I should put an invisible button behind the pushpins - but I'm not quite sure how I should do that.
It would be great if somebody has a hint which'll bring me forward!
Thanks
<DataTemplate x:Key="PushpinControlTemplate2">
<Grid x:Name="ContentGrid">
<StackPanel Orientation="Vertical">
<Grid Background="{TemplateBinding Background}"
HorizontalAlignment="Left"
MinHeight="10"
MinWidth="29">
<Hyperlinkbutton HorizontalAlignment="Center" Content="{binding}" Click="clicker" Margin="0"/>
</Grid>
<Polygon Fill="{TemplateBinding Background}"
Points="0,0 29,0 0,29"
Width="29"
Height="29"
HorizontalAlignment="Left"/>
</StackPanel>
</Grid>
</DataTemplate>
This is my code which I use so far, the function clicker is defined, however I always the error 'AG_E_PARSER_BAD_PROPERTY_VALUE [Line: 5 Position: 98]'
This Pushpin-Styles in Bing Maps for the Windows Phone post should tell you everything you need to know about styling pushpins.
Related
i have used wrappanel to arrange images within a listbox but in my picture collection some images have different sizes. Some are horizontal and some are vertical. Due to different orientation, there is some spaces between the images which is not so good in vision. Can any body suggest me any way to remove these spaces?
thanks
i am using following code but still the problem is same...
<ListBox Name="lstBoxMyRecentPhotos"
MaxHeight="650"
Margin="0,8,0,0"
SelectionChanged="lstImageList_SelectionChanged">
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<toolkit1:VariableSizedWrapGrid ItemHeight="200" ItemWidth="230" />
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
<ListBox.ItemTemplate>
<DataTemplate>
<Border Name="brdr"
Margin="5"
BorderBrush="White"
BorderThickness="3">
<Border.Background>
<ImageBrush ImageSource="Images/capsule_image_holder.png" Stretch="Uniform" />
</Border.Background>
<Image Width="{Binding width}"
Height="{Binding height}"
Hold="imgRecent_Hold"
Source="{Binding photoUrl}"
Stretch="UniformToFill">
</Image>
</Border>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
Two ways
Make the image always stretch UniformToFill and use hardcoded size - that way it will uniformly fill the space that it's been given and all the photos will use the given space nicely
Use VariableSizedWrapGrid.
Provides a grid-style layout panel where each tile/cell can be
variable size based on content. Similar to the WinRT
VariableSizedWrapGrid.
I don't know which toolkit you are using for the VariableSizedWrapGrid, but are you sure that you need to set its ItemHeight? What happens if you don't?
I'm personally using Telerik's controls to give me a WrapGrid. If you have access to their controls, I can share an example.
Here's what my implementation looks like:
I am using a Grid view and have defined two elements, WebBrowser and an Image, to be contained inside that Grid.
<Grid x:Name="ContentPanel" Background="Black">
<phone:WebBrowser Name="WebView"
IsScriptEnabled="True"
Grid.Row="0"
IsGeolocationEnabled="True"
ScriptNotify="webView_ScriptNotify"
NavigationFailed="webView_NavigationFailed"
Navigated="webView_Navigated"
Navigating="webView_Navigating"
VerticalAlignment="Top"
LoadCompleted="WebView_LoadCompleted"
Canvas.Top="0"
Canvas.Left="0"
Height="{Binding ActualHeight, ElementName=LayoutRoot}"
Width="{Binding ActualWidth, ElementName=LayoutRoot}">
</phone:WebBrowser>
<Image Name="StartLogo" Source="/Assets/StartScreen3.png" Stretch="None" VerticalAlignment="Bottom" HorizontalAlignment="Center"></Image>
</Grid>
I want the image to come over WebBrowser view at bottom. But with WebBrowser visible Image is not showing up. Can someone help me to fix it. I don't want to resize the WebBrowser to some smaller height.
And also how does order of defining elements inside a Grid affects the view?
EDIT:
I used Canvas to contain both of these. Works fine now.
the image should be show as apparently nothing is wrong with your code. It might be that image color and opened web page color is same that is why image might not be visible. or some issue with image path or build action of the image.
the last UI element will be on top all other UI elements in the gird. as per your xaml image control will be top of the webbrowser control but at the bottom of the grid.
There is no mistake in your code but still if you are facing this Problem
Try this:
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
<Grid.RowDefinitions>
<RowDefinition></RowDefinition>
<RowDefinition></RowDefinition>
</Grid.RowDefinitions>
<phone:WebBrowser Name="WebView"
IsScriptEnabled="True"
Grid.Row="0"
Grid.RowSpan="2"
IsGeolocationEnabled="True"
ScriptNotify="webView_ScriptNotify"
NavigationFailed="webView_NavigationFailed"
Navigated="webView_Navigated"
Navigating="webView_Navigating"
VerticalAlignment="Top"
LoadCompleted="WebView_LoadCompleted"
Canvas.Top="0"
Canvas.Left="0"
Height="{Binding ActualHeight, ElementName=LayoutRoot}"
Width="{Binding ActualWidth, ElementName=LayoutRoot}">
</phone:WebBrowser>
<Image Name="StartLogo" Source="/Assets/ApplicationIcon.png" Stretch="None" VerticalAlignment="Bottom" HorizontalAlignment="Center" Grid.Row="1"></Image>
</Grid>
The Order of Defining UI Elements Overlaps the Previos Defined Control
If you right click the object in design mode you should be able to order the objects on the application page?
Here piece of code.I can not see the images individually. The scroll goes for inertia
<ListBox x:Name="list" Grid.Row="1" Width="480" ScrollViewer.ManipulationMode="Control" ScrollViewer.HorizontalScrollBarVisibility="Auto">
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal" />
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
<ListBox.ItemTemplate>
<DataTemplate>
<Image Source="{Binding ImagePath}" Stretch="Fill" Width="480"/>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
but not work.
Help me!
If you want the more OS like look and feel ( like how images are shown in the pictures lib ), take a look at the nuget called Windows Phone Media Viewer ( https://www.nuget.org/packages/PhoneMediaViewer/ ).
There is even a sample app where it's been used up on MSDN ( http://code.msdn.microsoft.com/wpapps/Basic-Lens-sample-359fda1b )
you can use pivot control as parent and add images as pivot items, and you can swipe horizontally.
or you can
1) use stack panel as parent
2)and add images inside a stack panel
3)set its orientation as horizontal
4)use a horizontal scroll viewer as parent of stack panel.
hope this helps.
Thank you.
If they are available for use in our client, where can we find them?
They're the same icons returned from foursquare with a bit of XAML magic to remove the borders.
This is how I was able to reproduce the effect (a special nod to Jeff Wilcox for the hint, he did it first with 4th & Mayor):
<Grid Width="150" Height="150">
<Border BorderBrush="#FFFFFFFF" BorderThickness="2">
<Grid Opacity="0.40">
<Image Width="100" Source="https://foursquare.com/img/categories/arts_entertainment/arcade_64.png" HorizontalAlignment="Right" VerticalAlignment="Bottom" />
<!-- create a border with same color as icon background and make borders large enough to cover the border of the icon in the lower right corner -->
<Border BorderBrush="#FFFFFFFF" BorderThickness="60,60,10,10"/>
</Grid>
</Border>
<TextBlock HorizontalAlignment="Left" TextWrapping="Wrap" Text="Microsoft Arcade" VerticalAlignment="Top" Foreground="#FFFFFFFF" FontFamily="Segoe WP Black" Margin="5,0"/>
</Grid>
I have this code:
<ScrollViewer x:Name="textScroller" Grid.Row="2">
<Grid x:Name="ContentPanel" Margin="12,0,12,0" DataContext="{Binding}">
<Image x:Name="ImageUrl" Source="{Binding ImageUrl}" Height="198" Width="150" Margin="10 10 10 10" FlowDirection="RightToLeft" HorizontalAlignment="Left" VerticalAlignment="Top" />
<TextBlock x:Name="Content" Text="{Binding Content}" TextWrapping="Wrap" Style="{StaticResource PhoneTextNormalStyle}" Margin="0,41,24,-41" LineStackingStrategy="BlockLineHeight" MaxWidth="478" />
</Grid>
</ScrollViewer>
Image in this code is background of that textblock but I want that text wrap around the imgae. Is it posible? I found this similar question and there is answer it isn´t posible just with image and textblock. Is it right? I really can´t set some attribute in image that set that text can´t be on image? How should I change my code?
Thanks
Edit: Now this is what my page looks like:
I want that text should be on the right side of the image and the below of the image.
It is a duplicate of WP7 wrap text around image and Silverlight text around an image, though these questions did not come up with accepted answers yet either. There is no such option in Silverlight to do automatic wrapping of text around images. You can use a WebBrowser component or use multiple TextBlocks by measuring the size of the text while adding words to the TextBlocks in memory and checking when to stop and switch to another TextBlock. I recommend reading an article on font metrics for that too - MSDN - UI Frontiers: Font Metrics in Silverlight, Charles Petzold.
EDIT: Hard-coded sample:
You can use the below code to do what you ask in a hard-coded fashion. Perhaps you could write some code that would make it work as a control - automatically splitting the text by detecting the height of the nested TextBlock that is next to the Rectangle (or Image).
<RichTextBox
VerticalAlignment="Top"
>
<Paragraph
TextAlignment="Left">
<InlineUIContainer>
<InlineUIContainer.Child>
<Rectangle
Width="50"
Height="50"
Fill="Red" />
</InlineUIContainer.Child>
</InlineUIContainer>
<InlineUIContainer>
<Border>
<TextBlock
Padding="0"
Width="370"
Margin="0,0,0,-5"
TextWrapping="Wrap"
Text="First part of text that fits to the right of the image before the other part wraps to">
</TextBlock>
</Border>
</InlineUIContainer>
<Run
Text="the next line. This part of the text is already below the image." />
</Paragraph>
</RichTextBox>