WP7 Bing map in popup - silverlight

I'm working on a WP7 demo app and have gotten my popup working with static resources wich I earlier had problems with. Now when this is out of the way i got a new bug wich regards my use of Bing Maps.
When using bing maps in my default WP7 Silverlight pages (panorama or regual) the maps show up fine, but when using a bing map in my static resource layout the map itself is just showing up black.
Controls around the map such as the navigation pane with zoom and map modes display fine and the bing map logo and distance reference line also show up fine but the map images is just plain black (transparent since the background of my popup is black).
Anyone who encountered this before?
I came up on post where this problem occured in the default silverlight pages (some signed assemblies bug) so I tried their fix with unsigned assemblies but then my WP7 app did not start.
*Edit
My popup resource XAML code looks like this.
<ResourceDictionary xmlns:my="clr-namespace:Microsoft.Maps.MapControl;assembly=Microsoft.Maps.MapControl"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:Skanetrafiken.Controls;assembly=Skanetrafiken.Controls"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
>
<Style TargetType="local:MapRouteDialog">
<Setter Property="Background" Value="{StaticResource PhoneChromeBrush}"/>
<Setter Property="Width" Value="480"/>
<Setter Property="Height" Value="800"/>
<Setter Property="Margin" Value="0"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="local:MapRouteDialog">
<Grid x:Name="LayoutRoot" Background="{StaticResource PhoneChromeBrush}" Margin="0, 0, 0, 0">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<!--TitlePanel contains the name of the application and page title-->
<StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,30,0,40">
<TextBlock x:Name="DialogTitle" Text="MY DIALOG TITLE" Style="{StaticResource PhoneTextNormalStyle}"/>
</StackPanel>
<my:Map x:Name="RouteMap" Grid.Row="1" Margin="0" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" NavigationVisibility="Visible">
<Button x:Name="ButtonZoomIn" HorizontalAlignment="Left" VerticalAlignment="Top" Height="56" Width="56" Margin="8,180,0,0" BorderBrush="{x:Null}" Foreground="{x:Null}">
<Button.Background>
<ImageBrush ImageSource="/Skanetrafiken.Controls;component/images/Zoom_In.png" />
</Button.Background>
</Button>
<Button x:Name="ButtonZoomOut" HorizontalAlignment="Left" VerticalAlignment="Top" Height="56" Width="56" Margin="8,260,0,0" BorderBrush="{x:Null}" Foreground="{x:Null}">
<Button.Background>
<ImageBrush ImageSource="/Skanetrafiken.Controls;component/images/Zoom_Out.png" />
</Button.Background>
</Button>
<my:MapLayer Name="RouteLines"></my:MapLayer>
<my:MapItemsControl Name="PushPins"/>
</my:Map>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ResourceDictionary>
no code needed for displaying a map, this xaml works in a standard silverlight WP7 page but not when used in resources like this. When used like this the map image/content will be missing and transparent.

Sorry to be a party pooper, but you might be affected by this nugget of truth:
http://blogs.claritycon.com/blogs/kevin_marshall/
Content in a popup is not hardware
accelerated. If you try to animate
stuff in a popup, it will be slow. If
you need to mimic popup like
functionality, consider re-templating
the PhoneApplicationFrame to wrap the
contentpresenter in a grid and place a
contentpresenter below it to act as a
placeholder for a fake popup. You can
then write a popup manager to insert
whatever child you previously had in a
popup into the content presenter/fake
popup. This allows you to have better
perf on the content in the popup and
you can have smoother animations for
sliding / flipping the popup into
place.

Adding the popup to the Visual Tree (any child control of your page) should solve the problem.

Related

Strange border still resding on button; even after modifying the control template

I have a 'feedback' button which has this strange border:
So I searched online for some solutions and modified the control template, and I got this:
Control Template code:
<Button.Template>
<ControlTemplate TargetType="Button">
<ContentPresenter Content="{TemplateBinding Content}" />
</ControlTemplate>
</Button.Template>
So even after modifying the control template - I am getting a strange brown border. Help would be appreciated regarding this.
Button code:
<Button Grid.Row="3"
Grid.Column="2"
Grid.RowSpan="2"
Style="{StaticResource IconStyleBase}"
Name="Feedback_Button">
<Button.Template>
<ControlTemplate TargetType="Button">
<ContentPresenter Content="{TemplateBinding Content}" />
</ControlTemplate>
</Button.Template>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="218*" />
<RowDefinition Height="68*" />
</Grid.RowDefinitions>
<!--Icon-->
<Button Background="#3767B0"
Style="{StaticResource IconStyleContent}">
<!--Content-->
<Button.ContentTemplate>
<DataTemplate>
<Viewbox>
<TextBlock Padding="55"></TextBlock>
</Viewbox>
</DataTemplate>
</Button.ContentTemplate>
</Button>
<!--Icon Text-->
<Button Background="#FF2D5BA0"
Style="{StaticResource IconStyleSubBase}">
<!--Content-->
<Button.ContentTemplate>
<DataTemplate>
<Viewbox>
<TextBlock Padding="15">Feedback</TextBlock>
</Viewbox>
</DataTemplate>
</Button.ContentTemplate>
</Button>
</Grid>
</Button>
A DataTemplate defines the appearance of the the items that you set as Content of a button, but the button itself as a container has a default style and control template that defines how it looks like, along with its different states like mouse-over or pressed. That is where the border comes from.
You can try to create a style that sets the BorderThickness to 0 and apply it on each of your buttons. This approach works for control templates that bind the border thickness from their templated parent.
<Style x:Key="BorderlessButtonStyle" TargetType="{x:Type Button}" BasedOn="{StaticResource {x:Type Button}}">
<Setter Property="BorderThickness" Value="0"/>
</Style>
If this does not work or you want adapt the appearance of your buttons in detail, you have to extract and adapt the button style and control template.
Your custom control template does not work, because you did not apply it to the inner buttons and you should remove Content="{TemplateBinding Content}". Nevertheless, your button control template does not define any control states, so it will not be responsive at all.
You should copy the control template for Button from here, or extract it manually via Blend or Visual Studio. Then you can remove or the Border within it, change its thickness or color, so it will disappear. Moreover, you can adapt its various states to fit your desired style.
A notice on your design. It do not think that it is a good idea to nest buttons. Your control should either be a single button or a panel with two buttons in it, but that also only makes sense if they execute different actions in a related context, like split buttons do.

How to fit TextBlock size to text size

i am working in silverlight for embedded windows and i want to fit text to the TextBlock as seen on picture, i want textBlock to fit text ( i want to remove yelow space in attached picture )
Can someone help me with this?
Best regards,
Luka
Here is the XAML i am currently using:
<UserControl
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"
mc:Ignorable="d"
x:Class="FullTest.PUIsocUI"
d:DesignWidth="480" d:DesignHeight="272">
<Grid x:Name="LayoutRoot" Background="White">
<StackPanel Orientation="Horizontal" VerticalAlignment="Bottom" Height="64" Grid.Row="1">
<RadioButton x:Name="PowerMeasurement" GroupName="PowerTabControls" IsChecked="True" Checked="PowerMeasurement_Checked" Unchecked="PowerMeasurement_Unchecked" Content="POWER" BorderThickness="0"/>
<RadioButton x:Name="PowerMode" GroupName="PowerTabControls" Checked="PowerMode_Checked" Unchecked="PowerMode_Unchecked"/>
<RadioButton x:Name="PowerLimit" GroupName="PowerTabControls" IsChecked="False" Click="PowerLimit_Click" Checked="PowerLimit_Checked" Unchecked="PowerLimit_Unchecked"/>
</StackPanel>
<Grid>
<Grid x:Name="PowerMeasurementPage" Margin="0,0,0,64" >
<!-- tab page za meritev-->
<TextBlock Text="POWER" Style="{StaticResource FunctionNameTextBlockStyle}" HorizontalAlignment="Left" VerticalAlignment="Top"/>
<TextBlock Text="11.555" Style="{StaticResource ResultNameTextBlockStyle}" />
</Grid>
<Grid x:Name="PowerModePage" Margin="0,0,0,64">
<!-- tab page za Mode-->
</Grid>
<Grid x:Name="PowerLimitPage" Margin="0,0,0,64">
<!-- tab page za Limita-->
</Grid>
</Grid>
</Grid>
<Style TargetType="TextBlock" x:Key="FunctionNameTextBlockStyle">
<Setter Property="FontFamily" Value="ALTERNATE_GOTHIC#AlternateGothic2 BT"/>
<Setter Property="FontSize" Value="44"/>
<Setter Property="Margin" Value="57,27,0,0"/>
</Style>
this is what i want to get ->
<TextBlock Text="POWER" FontSize="44" FontWeight="SemiBold" RenderTransformOrigin="0.5,0.5">
<TextBlock.RenderTransform>
<CompositeTransform ScaleY="2"/>
</TextBlock.RenderTransform>
</TextBlock>
In the example I've provided see the ScaleY declaration? Adjust that value to meet your needs. That's one way to accomplish that effect without using ViewBox. Another might be to convert that TextBlock in to a Path and adjust as necessary also, but it would have to be a static label for that to be useful.
Hope this helps! :)
The other way is even much simpler. You just have to let TextBlock to resize itself, it will arrange itself based on text. You should look into its container probably (probably paste some code?). Try setting TextBlock like this:
<TextBlock Text="POWER" HorizontalAlignment="Center" VerticalAlignment="Center" />
UPDATE look into VS, to me it seems that it is just a font reserved space. Not sure how you can avoid that.
In VS2015 you can do this easily with TextLineBounds property (set it to Tight in your case). I use it in UAP, not sure it's available in Silverlight. However it gets truncated for lowercase letters like g, q, etc as posted here: TextLineBounds snipping bottom of letters

WP7 Bing Maps Pushpin template with image doesn't show up

My ultimate goal is to have pushpins with custom images on a Bing Map in a WP7 app. I have created a control template and a map with a pushpin. Right now, I can get the default pushpins to show up, but nothing shows when I try to template it. Here's what I have right now:
<phone:PhoneApplicationPage.Resources>
<ControlTemplate x:Key="PushpinControlTemplate" TargetType="my:Pushpin">
<Image Source="/Images/Pins/pin.png" />
</ControlTemplate>
</phone:PhoneApplicationPage.Resources>
<my:Map Name="mapMain" CredentialsProvider="CredKey">
<my:Pushpin/>
</my:Map>
If I apply the PushpinControl template nothing shows up:
<my:Pushpin Template="{StaticResource BoaPushpinControlTemplate}" />
If I remove the template, it shows the default black shape.
I must be doing my template incorrectly, but I don't know what the problem is. Can I not have an image in the ControlTemplate?
If you arent using ItemSource binding on the Map then use simple content control approach
<maps:Pushpin Location="{Binding Location}">
<Image Source="/Images/Pins/pin.png" />
</maps:Pushpin>
Or if you dynamically populating the push-pins use the below approach
<maps:Map x:Name="map" >
<maps:MapItemsControl ItemsSource="{Binding Collection}">
<maps:MapItemsControl.ItemTemplate>
<DataTemplate>
<maps:Pushpin Location="{Binding Location}">
<Image Source="/Images/Pins/pin.png" />
</maps:Pushpin>
</DataTemplate>
</maps:MapItemsControl.ItemTemplate>
</maps:MapItemsControl>
</maps:Map>
Even though this thread is a little bit old I'm going to post my suggestion:
Try out this link Working with Pushpins, it is working for me (create a new style and use it in pushpin declaration)
(App.xaml, do not forget the namespace!)
xmlns:m="clr-namespace:Microsoft.Phone.Controls.Maps;assembly=Microsoft.Phone.Controls.Maps" >
<Application.Resources>
<Style TargetType="m:Pushpin" x:Key="PushpinStyle">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="m:Pushpin">
<Image Width="24" Height="24" Source="path_to_pic" />
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
(in the xaml there the map is)
<Grid x:Name="LayoutRoot" Background="Transparent">
<m:Map x:Name="Map" Mode="Aerial"
CredentialsProvider="CredKey">
<m:MapItemsControl x:Name="Content">
<m:MapItemsControl.ItemTemplate>
<DataTemplate>
<m:Pushpin Location="{Binding Location}" Style="{StaticResource PushpinStyle}" />
</DataTemplate>
</m:MapItemsControl.ItemTemplate>
</m:MapItemsControl>
</m:Map>
</Grid>
If this isn't working check if the Build Action of your picture is set to content.
Took me a while to figure this out, so i hope i could help someone, despite the fact that this thread is old. ;)

How to determine if a custom control is in a Toolbar?

i have created a UserControl to make an ImageButton:
<Button x:Class="myimagebutton"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:imagebutton">
<Grid x:Name="grdButton">
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Image Grid.Column="0"
x:Name="btnImage"
HorizontalAlignment="Left"
VerticalAlignment="Center">
</Image>
<TextBlock Grid.Column="1"
TextWrapping="Wrap"
Text="{Binding Text}"
VerticalAlignment="Center"
Margin="2 0 2 0" />
</Grid>
</Button>
now i want to apply the default Toolbar Button Style to my Button if this Button is in a Toolbar. I have read this article link text and put this
If Me.Style Is Nothing AndAlso TypeOf Me.Parent Is ToolBar Then
Me.Style = DirectCast(FindResource(ToolBar.ButtonStyleKey), Style)
End If
in my Code behind.
After that as a test I put my Button both in a Toolbar and another out of the Toolbar to test it. But the Button always get the default style, not the style I am trying to set.
After debugging i find out that Me.Parent is always Nothing. So now is my question: how i get the information that my button is in a toolbar or not?
I'm having some difficulty understanding exactly what you are describing but after reading it through a few times I think I understand.
Am I right so far?
If so, you are wondering then why your button has an image
A few pointers about your description that threw me off and is probably the reason why you haven't seen anybody else post an answer for your question thus far.
i replaced the the UserControl Item with a Button
Essentially what you have done is created new control that likely inherits from Button. You might have started off with a UserControl but in order to replace the root item in XAML you would also have to make sure your type myimagebutton inherits from Button as well. This is just how XAML works and learning how to explain it this way will help people understand what you are doing.
Normally inheriting from Button is not how developers override the visual style of a button in WPF mainly because WPF doesn't support the concept of what is sometimes referred to as visual inheritance and also there are other suitable methods that can be used to solve the problem in a different way. Instead inheritance is mainly reserved for when behavioral modifications or additions need to be made to an existing control class. This being said there are ways to simulate visual inheritance through the use of content controls that work similar to content pages and master pages in ASP.NET but I think this is a bit outside of the scope of your example. Also if you are to pursue the inheritance model you will need to make sure that in your code behind that you are setting the correct default style in the static constructor so posting your code behind for your button would help too.
I believe the reason why your example isn't working is because the ToolBar specifically looks at the types of controls irrespective inheritance in order to to apply it's custom toolbar styles. In your case your control is of type myimagebutton and not Button so the style is not set by the ToolBar which normally directly sets the Style property based on the type of the control using the two potential types of calls.
element.SetResourceReference(FrameworkElement.StyleProperty, styleKey);
element.DefaultStyleKey = styleKey;
BTW, in your case I believe only the second line is performed by the ToolBar control and styleKey at that point is defined as null.
Now instead of inheriting from Button in the first place you would probably be better off just to create a new ControlTemplate or a DataTemplate for your button and assigning into the Template or ContentTemplate property respectively through the use of a style. This way you are still always dealing with a button and the style is what changes the visual properties.
<Window x:Class="HeaderedContentControlTest.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow"
Height="252"
Width="372">
<Window.Resources>
<Style TargetType="{x:Type Label}">
<Setter Property="Background"
Value="Orange" />
</Style>
<DataTemplate x:Key="ImageButtonDataTemplate">
<Grid x:Name="grdButton">
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Image Grid.Column="0"
HorizontalAlignment="Left"
VerticalAlignment="Center">
</Image>
<TextBlock Grid.Column="1"
TextWrapping="Wrap"
Text="{Binding}"
VerticalAlignment="Center"
Margin="2 0 2 0"
Background="Pink" />
</Grid>
</DataTemplate>
<Style x:Key="ImageButtonStyle"
TargetType="{x:Type Button}">
<Setter Property="ContentTemplate"
Value="{StaticResource ImageButtonDataTemplate}" />
</Style>
</Window.Resources>
<Grid Margin="11">
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<ToolBar>
<Button Style="{StaticResource ImageButtonStyle}"
Content="Some Text" />
</ToolBar>
<Button Grid.Row="1"
Style="{StaticResource ImageButtonStyle}"
VerticalAlignment="Center"
HorizontalAlignment="Center"
Content="Some Text" />
</Grid>
</Window>
Using the ContentTemplate allows you to redefine the inner contents of the Button without loosing all of the special button state transitions and other niceties you would normally like to keep.
See this related post on MSDN Forums that also explains similar behavior when adding a StackPanel containing buttons to a ToolBar.

FlowDocumentScrollViewer won't scroll

I'm trying to find the most expandable way to show a FlowDocument inside a window - just a FlowDocument. I have:
<FlowDocumentScrollViewer x:Name="message" HorizontalScrollBarVisibility="Disabled" VerticalScrollBarVisibility="Visible">
Then in the constructor for the Window, I set the Document of the viewer to one I load from XAML (in code). The XAML contains:
<FlowDocument xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Background="{x:Null}"
FontSize="12" FontFamily="Segoe UI" PagePadding="2">
<BlockUIContainer>
<BlockUIContainer.Resources>
<Style TargetType="{x:Type TextBlock}">
<Setter Property="TextWrapping" Value="Wrap"/>
</Style>
</BlockUIContainer.Resources>
<StackPanel MaxWidth="200">
<TextBlock Text="{Binding DefinedWord}" FontWeight="Bold" />
<ListBox ItemsSource="{Binding Definitions}"
Style="{StaticResource InvisibleListBox}" Margin="0"
ScrollViewer.HorizontalScrollBarVisibility="Disabled"
ScrollViewer.VerticalScrollBarVisibility="Disabled"
ScrollViewer.CanContentScroll="false">
...
No matter what I try, the FlowDocumentScrollViewer does not scroll and I can't see the truncated parts of the document. Does it have anything to do with the BlockUIContainer, or am I missing something else?
I eventually got this working by setting the ListBox inside the document to IsHitTestVisible="false", then binding the Width of a text block inside the ListBoxItem template to the ActualWidth of the ListBoxItem.
Flexible Content Display With Flow Documents
SUMMARY: FlowDocumentScrollViewer -
This control displays documents in a
continuous flow with a scrollbar,
similar to Web pages or the Web Layout
in Microsoft Word.
For me alternate option to FlowDocumentScrollViewer worked,
See the example in,
http://msdn.microsoft.com/en-us/library/system.windows.controls.richtextbox.aspx
The other options may be FlowDocumentPageViewer, FlowDocumentReader.

Resources