Well, this one’s kind of out of line. I faced this last night, searched all over I can but I barely found a concise solution on this one.
Before we get into the solution, we need to see the problem we’re talking about. Shouldn’t we?
I was working with the new Windows Phone 8 Map Control provided with the sdk that allows here maps to be used in your app and I needed a bunch of Pushpins to be loaded in the map. So, Windows Phone Toolkit came to the rescue. I hooked up the <MapExtensions.Children> and added by pushpins there binded from my viewmodel.
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0" > <maps:Map x:Name="MyMap" ZoomLevelChanged="MyMap_ZoomLevelChanged" Loaded="MyMap_Loaded" > <MapToolkit:MapExtensions.Children> <MapToolkit:MapItemsControl Name="MapElements"> <MapToolkit:MapItemsControl.ItemTemplate> <DataTemplate> <MapToolkit:Pushpin Name="StopPushPin" Style="{StaticResource MaximizedPushpin}" Background="#B20000FF" Content="{Binding Name}" GeoCoordinate="{Binding Location}" Tap="Pushpin_Tap" > </MapToolkit:Pushpin> </DataTemplate> </MapToolkit:MapItemsControl.ItemTemplate> </MapToolkit:MapItemsControl> <MapToolkit:Pushpin Name="MyPushpin" Content="I'm Here!" Background="#FF3CD303" GeoCoordinate="{Binding MyLocation}" /> </MapToolkit:MapExtensions.Children> </maps:Map> </Grid>
One could easily see here that I used a PushPin object as DataTemplate with a custom style attached. Lets check the style
<Style TargetType="MapToolkit:Pushpin" x:Key="MaximizedPushpin"> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="MapToolkit:Pushpin"> <Grid x:Name="ContentGrid" FlowDirection="LeftToRight"> <toolkit:WrapPanel Orientation="Vertical"> <Grid x:Name="grid" Background="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Background}" HorizontalAlignment="Left" RenderTransformOrigin="0.5,0.5" Height="148" Width="225"> <Grid.RowDefinitions> <RowDefinition Height="0.4*"></RowDefinition> <RowDefinition Height="0.015*"></RowDefinition> <RowDefinition Height="0.25*"></RowDefinition> <RowDefinition Height="0.015*"></RowDefinition> </Grid.RowDefinitions> <TextBlock Margin="8,4,4,4" FlowDirection="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=FlowDirection}" Grid.Row="0" Text="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Content}" TextWrapping="Wrap" FontSize="30"> </TextBlock> <Border Grid.Row="1" Background="#CC474444" Margin="0,0,-6,0" /> <Grid Grid.Row="2" MinHeight="31" Background="#EEF9F9F9" Margin="0,0,-8,0" > <codefun:RoundButton Orientation="Horizontal" Foreground="Black" Background="Transparent" BorderBrush="Black" ImageSource="/Assets/pushpin.get.direction.png" HorizontalAlignment="Left" VerticalAlignment="Center" Margin="0,2,0,0" > </codefun:RoundButton> </Grid> <Grid Grid.Row="3" Background="#99474444" Margin="0,0,-6,0"/> </Grid> <Polygon Fill="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Background}" Points="0,0 29,0 0,29" Width="29" Height="29" HorizontalAlignment="Left"/> </toolkit:WrapPanel> </Grid> </ControlTemplate> </Setter.Value> </Setter> <Setter Property="PositionOrigin" Value="0,1" /> <Setter Property="Background" Value="Black" /> <Setter Property="Foreground" Value="White" /> <Setter Property="FontSize" Value="30" /> </Style>
All I wanted to do is to bind Command Parameter of RoundButton and hook a RelayCommand in my viewmodel. As is an attached property in the Map control I had to use FindAncestor mode when I tried to bind Command parameter in RoundButton. But bad news is it’s not supported in Windows Phone. The only relative binding mode I have here is templatedparent and self.
And I started looking for a solution. Then this came to my eyes and I was really happy. So, I followed as per what was written in there and voila!
I binded the Command with CommandParameters the following way.
<codefun:RoundButton Orientation="Horizontal" Foreground="Black" Background="Transparent" BorderBrush="Black" ImageSource="/Assets/pushpin.get.direction.png" HorizontalAlignment="Left" VerticalAlignment="Center" Margin="0,2,0,0" CommandParameter="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=DataContext}" > <BindHelper:BindingHelper.Binding> <BindHelper:RelativeSourceBinding Path="GetDirectionToPushPinCommand" TargetProperty="Command" RelativeMode="ParentDataContext" /> </BindHelper:BindingHelper.Binding> </codefun:RoundButton>
A handy tool indeed!
Please help me style pushpin and add button event in pushpin. !
I could post a picture of the final result!