TemplateBinding + SIlverlight 4 + Default Style - silverlight-4.0

I have written a content control with an Int Dependency Property in the content Control.
The Control has a default style which contains the Template for the control.
Now the problem i face is, No matter what the dependency property's value is , when rendered it always shows me a zero
Here's the sample Code snippet:
<ControlTemplate x:Key="ControlTemplate2" TargetType="My:Control">
<Grid x:Name="grid" Width ="128" Height="128>
<StackPanel HorizontalAlignment="Center" VerticalAlignment="Center" Orientation="Horizontal" Grid.Row="1">
<TextBlock x:Name="tbxTileCount" DataContext="{TemplateBinding TileCount}"
Text="{Binding}" Margin="10,0,0,0"
Foreground="White" VerticalAlignment="Center" FontSize="48" FontFamily="Segoe WP">
<TextBlock.RenderTransform>
<CompositeTransform/>
</TextBlock.RenderTransform>
</TextBlock>
</StackPanel>
</Grid></Grid></ControlTemplate>
/// <summary>
/// Count to be displayed
/// </summary>
public int Count
{
get { return (int)GetValue(CountProperty); }
set { SetValue(CountProperty, value); }
}
public static readonly DependencyProperty CountProperty =
DependencyProperty.Register("Count",
typeof(int),
typeof(Control),
null);
Eventhough the dependency property is set to default value, the DataContext of the textblock is set to 0
What have i missed here?

I could get this to work.
Here's how I got it to work :
Apparently For Silverlight 4, This is the way you associate control properties to the default Template.
<ControlTemplate x:Key="ControlTemplate2" TargetType="My:Control">
<Grid x:Name="grid" Width ="128" Height="128>
<StackPanel HorizontalAlignment="Center" VerticalAlignment="Center" Orientation="Horizontal" Grid.Row="1">
<TextBlock x:Name="tbxTileCount" Text="{Binding RelativeSource={RelativeSource TemplatedParent},Path=Count}"
Margin="10,0,0,0" Foreground="White" VerticalAlignment="Center" FontSize="48" FontFamily="Segoe WP">
<TextBlock.RenderTransform>
<CompositeTransform/>
</TextBlock.RenderTransform>
</TextBlock>
</StackPanel>
</Grid>
</ControlTemplate>

Related

Binding IsSelected on ListViewItem not working for me in UWP application

I'm working with a list of objects that have a Selected property and I'm trying to bind it to the IsSelected property on ListViewItem within a multi-select ListView control in UWP.
I just can't seem to get the binding to work. The checkboxes in the ListView do not render checked if Selected = True and the Set on Selected never gets triggered when checking an item.
SettingsPage.xaml
<Page.Resources>
<DataTemplate x:Key="PreviewColumnTemplate" x:DataType="models:Column">
<TextBlock>
<Run Text="{x:Bind name}"/>
<Run Text=" ("/>
<Run Text="{x:Bind ColumnValidation.column_label}"/>
<Run Text=") "/>
</TextBlock>
</DataTemplate>
<Style x:Key="previewColumnListViewItem" TargetType="ListViewItem">
</Style>
</Page.Resources>
<ListView
x:Name="previewColumnListView"
ItemsSource="{x:Bind ViewModel.CurrentDrillHole.Collar.Columns, Mode=TwoWay}"
ItemTemplate="{StaticResource PreviewColumnTemplate}"
Height="400"
SelectionMode="Multiple"
SelectionChanged="previewColumnListView_SelectionChanged">
<ListView.Resources>
<Style TargetType="ListViewItem" BasedOn="{StaticResource previewColumnListViewItem}">
<Setter Property="IsSelected" Value="{Binding Selected, Mode=TwoWay}"/>
</Style>
</ListView.Resources>
</ListView>
The ViewModel.CurrentDrillHole.Collar object is of type Table and looks like so:
public class Table : BindableBase
{
public string Name { get; set; }
public TableValidation TableValidation { get; set; }
public List<Column> Columns { get; set; }
public List<Row> Rows { get; set; } = new List<Row>();
}
And the Column object looks like so. It is here I want to bind to the Selected property.
public class Column : BindableBase, INotifyPropertyChanged
{
public string name { get; set; }
public ColumnValidation ColumnValidation { get; set; }
public List<RefEntryValue> LookupValues { get; set; } = null;
private bool _selected = false;
public bool Selected {
get => _selected;
set
{
_selected = value;
OnPropertyChanged();
}
}
}
Any ideas of things I can try would be greatly appreciated. Thanks for the help!
When you set SelectionMode="Multiple", ListViewItem uses the default ListViewItemTemplate whose key is "ListViewItemExpanded".
Its style is as follows:
<Style TargetType="ListViewItem" x:Key="ListViewItemExpanded">
......
<ControlTemplate TargetType="ListViewItem">
<Grid x:Name="ContentBorder"
Control.IsTemplateFocusTarget="True"
FocusVisualMargin="{TemplateBinding FocusVisualMargin}"
Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
CornerRadius="{TemplateBinding CornerRadius}"
RenderTransformOrigin="0.5,0.5">
……
<Border x:Name="MultiSelectSquare"
BorderBrush="{ThemeResource SystemControlForegroundBaseMediumHighBrush}"
BorderThickness="2"
Width="20"
Height="20"
Margin="12,0,0,0"
VerticalAlignment="Center"
HorizontalAlignment="Left"
Visibility="Collapsed">
<Border.Clip>
<RectangleGeometry Rect="0,0,20,20">
<RectangleGeometry.Transform>
<TranslateTransform x:Name="MultiSelectClipTransform" />
</RectangleGeometry.Transform>
</RectangleGeometry>
</Border.Clip>
<Border.RenderTransform>
<TranslateTransform x:Name="MultiSelectCheckBoxTransform" />
</Border.RenderTransform>
<FontIcon x:Name="MultiSelectCheck"
FontFamily="{ThemeResource SymbolThemeFontFamily}"
Glyph=""
FontSize="16"
Foreground="{ThemeResource SystemControlForegroundBaseMediumHighBrush}"
Visibility="Collapsed"
Opacity="0" />
</Border>
<Border x:Name="MultiArrangeOverlayTextBorder"
Opacity="0"
IsHitTestVisible="False"
Margin="12,0,0,0"
MinWidth="20"
Height="20"
VerticalAlignment="Center"
HorizontalAlignment="Left"
Background="{ThemeResource SystemControlBackgroundAccentBrush}"
BorderThickness="2"
BorderBrush="{ThemeResource SystemControlBackgroundChromeWhiteBrush}">
<TextBlock x:Name="MultiArrangeOverlayText"
Text="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.DragItemsCount}"
Style="{ThemeResource CaptionTextBlockStyle}"
IsHitTestVisible="False"
Opacity="0"
VerticalAlignment="Center"
HorizontalAlignment="Center"
AutomationProperties.AccessibilityView="Raw" />
</Border>
</Grid>
</ControlTemplate>
</Setter.Value>
</Style>
As you can see, there is no CheckBox in its style, it is composed by Border and FontIcon.
If you want to solve this problem, I suggest that you could add CheckBox to DataTemplate. By doing this, we can bind “Selected’ to the “IsChecked” property of the CheckBox.
Please refer to the following code.
<ListView
x:Name="previewColumnListView"
ItemsSource="{x:Bind ViewModel.CurrentDrillHole.Collar.Columns, Mode=TwoWay}"
Height="400"
SelectionChanged="previewColumnListView_SelectionChanged">
<ListView.ItemTemplate>
<DataTemplate x:Key="PreviewColumnTemplate" x:DataType="models:Column">
<StackPanel Orientation="Horizontal">
<CheckBox IsChecked="{Binding Selected, Mode=TwoWay}"/>
<TextBlock>
<Run Text="{x:Bind name}"/>
<Run Text=" ("/>
<Run Text="{x:Bind ColumnValidation.column_label}"/>
<Run Text=") "/>
</TextBlock>
</StackPanel>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
This is how it ended up looking in the end. Does this seem clunky to anyone else? It would be nice if the ListView control made it easier to deal with collections and SelectionMode="Multiple".
SettingsPage.xaml
<ListView
x:Name="previewColumnListView"
ItemsSource="{x:Bind ViewModel.CurrentDrillHole.Collar.Columns, Mode=TwoWay}"
Height="400"
SelectionChanged="previewColumnListView_SelectionChanged"
IsItemClickEnabled="True"
ItemClick="previewColumnListView_ItemClick">
<ListView.ItemTemplate>
<DataTemplate x:DataType="models:Column">
<StackPanel Orientation="Horizontal">
<CheckBox Click="previewColumnListView_CheckBox_Click" IsChecked="{Binding Selected, Mode=TwoWay}"/>
<TextBlock>
<Run Text="{x:Bind name}"/>
<Run Text=" ("/>
<Run Text="{x:Bind ColumnValidation.column_label}"/>
<Run Text=") "/>
</TextBlock>
</StackPanel>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
SettingsPage.xaml.cs
private async void previewColumnListView_CheckBox_Click(object sender, RoutedEventArgs e)
{
// update the list of selected columns
Settings.CollarPreviewFields = ViewModel.CurrentDrillHole.Collar.Columns.Where(x => x.Selected).Select(x => x.name).ToList();
await App.SaveSettings();
}
private void previewColumnListView_ItemClick(object sender, ItemClickEventArgs e)
{
Column selectedColumn = (Column)e.ClickedItem;
selectedColumn.Selected = !selectedColumn.Selected;
// trigger checkbox click event. will update the list and save.
previewColumnListView_CheckBox_Click(null, null);
}

UWP Changing gridview element size programmatically

I'm trying to use XAML binding to affect the gridview datatemplate element size from a slider on my screen.
I have a gridview made of thumbnails images where the elements are defined as following:
<GridView.ItemTemplate >
<DataTemplate >
<StackPanel Orientation="Vertical"
HorizontalAlignment="Center"
VerticalAlignment="Center"
KeyDown="IsitenterThumb"
BorderBrush="LightSeaGreen"
BorderThickness="1"
PointerWheelChanged="ctlThumbnails_PointerWheelChanged">
<Image Source="{Binding thumb}"
x:Name="thumbimg"
Visibility="Visible"
Height="{Binding ItemSize}" Width="{Binding ItemSize, ElementName=page}" Stretch="Uniform"
Tapped="ThumbnailSelected"
DoubleTapped="CloseThumbnails"
/>
<TextBlock Text="{Binding name}" Margin="5,5"
Foreground="White"
Width="{Binding ItemSize}"
/>
</StackPanel>
</DataTemplate>
And I have the following variable defined as follow:
public double ItemSize
{
get => _itemSize;
set
{
if (_itemSize != value)
{
_itemSize = value;
PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(nameof(ItemSize)));
}
}
}
private double _itemSize;
public event PropertyChangedEventHandler PropertyChanged;
I would have thought that changing the value of ItemSize would have affected the gridview datatemplate. This is taken litterally from the PhotoLab sample.
Instead I get a single huge "thumbimg" per page... Any help would be greatly appreciated!
Ok... I got it finally. I'm not quite sure what I was doing wrong above, but the code below works.
I have put the DataTemplate as part of a Page.Resource, I'm not sure if this is what was causing the binding issue. However the Xaml code looks like this:
<Page.Resources>
<DataTemplate x:Key="ThumbnailsTemplate">
<StackPanel Orientation="Vertical"
HorizontalAlignment="Center"
VerticalAlignment="Center"
KeyDown="IsitenterThumb"
BorderBrush="LightSeaGreen"
BorderThickness="1"
<Image Source="{Binding thumb}"
x:Name="thumbimg"
Visibility="Visible"
Height="{Binding ItemSize, ElementName=page}" Width="{Binding ItemSize, ElementName=page}"
Stretch="Uniform"
Tapped="ThumbnailSelected"
DoubleTapped="CloseThumbnails"
/>
<TextBlock Text="{Binding name}" Margin="5,5"
Foreground="White" Width="{Binding ItemSize}"
/>
</StackPanel>
</DataTemplate>
</Page.Resources>
<GridView x:Name = "ctlThumbnails" Grid.Column="0"
BorderBrush="White" BorderThickness="2"
Grid.RowSpan="4" Grid.Row="0" Grid.ColumnSpan="3" Height ="auto" Width="auto" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"
Margin="30,30,30,30" KeyDown="IsitenterThumb"
DoubleTapped="CloseThumbnails"
ItemTemplate="{StaticResource ThumbnailsTemplate}">
</GridView>
And here is the C# code to affect the bound variable ItemSize
public event PropertyChangedEventHandler PropertyChanged;
public double ItemSize
{
get => _itemSize;
set
{
if (_itemSize != value)
{
_itemSize = value;
topcmdbarcontent.Text = "Thumb Size:" + _itemSize.ToString();
PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(nameof(ItemSize)));
}
}
}
private double _itemSize;
From this, when you change the value of ItemSize, through a ValueChanged event, for example, it does change the grid element size dynamically.

How can I stretch my custom ListBox?

I have this ListBox with custom elements and I want them to stretch to take all the available area. This is my code; currently the items only take the space that they need and I have some unused space on the left and the right side of the screen. Why?
<ListBox x:Name="listBox" Margin="0,6,0,0">
<ListBox.ItemContainerStyle>
<Style TargetType="ListBoxItem">
<Setter Property="HorizontalContentAlignment" Value="Stretch"/>
</Style>
</ListBox.ItemContainerStyle>
<ListBox.ItemTemplate>
<DataTemplate>
<local:ListTemplateSelector Content="{Binding}">
<local:ListTemplateSelector.bloccato>
<DataTemplate>
<StackPanel Grid.Row="1">
<Grid Background="Beige">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="80" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Image Grid.Column="0" Source="/Assets/Images/locked.png" Width="40" Height="40" HorizontalAlignment="Left"/>
<TextBlock Grid.Column="1" Text="{Binding nomePacchetto}" FontFamily="./Assets/neo-normal.ttf#NEOTERIC" FontSize="48" VerticalAlignment="Bottom" Foreground="#FF373737"/>
</Grid>
<Line Stroke="DarkGray" X2="400" HorizontalAlignment="Center" VerticalAlignment="Top" Margin="0,6,0,6"/>
</StackPanel>
</DataTemplate>
</local:ListTemplateSelector.bloccato>
<local:ListTemplateSelector.sbloccato>
<DataTemplate>
<StackPanel Grid.Row="1">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="80" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<TextBlock Grid.Column="0" VerticalAlignment="Center" HorizontalAlignment="left" Foreground="#FF5B5B5B"><Run FontSize="32" Text="1/"/> <Run FontSize="20" Text="40"/></TextBlock>
<TextBlock Grid.Column="1" Text="{Binding nomePacchetto}" FontFamily="./Assets/neo-normal.ttf#NEOTERIC" FontSize="48" VerticalAlignment="Bottom" Foreground="#FF373737"/>
</Grid>
<Line Stroke="DarkGray" X2="400" HorizontalAlignment="Center" VerticalAlignment="Top" Margin="0,6,0,6"/>
</StackPanel>
</DataTemplate>
</local:ListTemplateSelector.sbloccato>
</local:ListTemplateSelector>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
There are two ways to solve this problem:
(1)
The easiest way is giving fixed width to your root grid in datatemplate. Though you'll provide fixed width, it will be resolution responsive.
Check this example:
// XAML page
<ListBox x:Name="lbxTest" Margin="12">
<ListBox.ItemTemplate>
<DataTemplate>
<Grid Background="Blue" Width="370" >
<TextBlock Text="{Binding}" />
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
If you write your code behind like this:
List<string> lstString = new List<string>() { "string 1", "string 2", "string 3" };
lbxTest.ItemsSource = lstString;
Then in every resolution (480x800, 720x1280, 768x1280, 1080x1920), the size obtained by ListBox will be same.
check the screenshots for refference.
screenshot in 480x800
screenshot in 768x1280
(2)
The other way to solve this problem is adding one parameter in the ItemSource we'll be assigning to the ListBox.
<ListBox x:Name="lbxTest" Margin="12">
<ListBox.ItemTemplate>
<DataTemplate>
<Grid Background="Blue" Width="{Binding width}" >
<!--Width="370"-->
<TextBlock Text="{Binding text}" />
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
// code behind
public class Model
{
public double width { get; set; }
public string text { get; set; }
}
void MainPage_Loaded(object sender, RoutedEventArgs e)
{
Model m1 = new Model()
{
text = "string 1",
width = lbxTest.ActualWidth
};
Model m2 = new Model()
{
text = "string 2",
width = lbxTest.ActualWidth
};
List<Model> lstModel = new List<Model>();
lstModel.Add(m1);
lstModel.Add(m2);
lbxTest.ItemsSource = lstModel;
}
Hope this will help..!!
There are two properties that should work but they do not (HorizontalContentAlignment="Stretch" VerticalContentAlignment="Stretch")
To solve that this example will help you with the witdh:
<ListBox x:Name="ListBoxInstance" HorizontalAlignment="Stretch" >
<ListBox.ItemTemplate>
<DataTemplate>
<Grid Background="Green" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Width="{Binding ActualWidth, ElementName=ListBoxInstance, Mode=OneWay}" >
<Border Background="Red" >
<TextBlock Text="{Binding}"/>
</Border>
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
<ListBox.Items>
<x:String>This is a test</x:String>
<x:String>This is the second</x:String>
<x:String>This is the thidr</x:String>
<x:String>s</x:String>
</ListBox.Items>
</ListBox>
As you see with
Width="{Binding ActualWidth, ElementName=ListBoxInstance}"
You have the content to the full width.
In some others cases (depending on the platform)
<ListBox.ItemContainerStyle>
<Style TargetType="ListBoxItem">
<Setter Property="HorizontalContentAlignment" Value="Stretch"/>
</Style>
</ListBox.ItemContainerStyle>

Customized XAML Spinner

I am trying to make a Spinner for a Windows Phone 8.1 App. I want the Spinner to have 2 wheels: A list of numbers on one, and a list of words (not AM/PM) on the other. Something similar to the TimePicker:
I did not see any options that worked this way. (ComboBox is the closest I found, but it does not spin.)
Is there a way to customize the TimePicker? Or create a Spinner like it?
If you look through sources of DatePicker, you'll see them use Microsoft.Phone.Controls.Primitives.LoopingSelector as wheel. It is public class and you can use it from Windows Phone Toolkit.
You also can see example of usage in DatePicker sources.
here's a starting point using a ScrollViewer with VerticalSnapPointsType="Mandatory"
When ScrollViewer.ViewChanged use ScrollViewer.VerticalOffset and the height of your container to calculate the selected item. Sorry Stackpanel does not support itemssource binding so you may have to add the elements in the code behind.
the XAML
<ScrollViewer Width="70"
Loaded="ScrollViewer_OnLoaded"
VerticalContentAlignment="Center"
VerticalSnapPointsType="Mandatory"
VerticalSnapPointsAlignment="Center">
<StackPanel Margin="0,200" x:Name="StackPanel">
<Grid Height="80"
Width="70">
<Border BorderBrush="Aqua"
BorderThickness="1"
Height="74"
Width="70">
<TextBlock HorizontalAlignment="Center"
VerticalAlignment="Center"
FontSize="30"
Text="1"></TextBlock>
</Border>
</Grid>
<Grid Height="80"
Width="70">
<Border BorderBrush="Aqua"
BorderThickness="1"
Height="74"
Width="70">
<TextBlock HorizontalAlignment="Center"
VerticalAlignment="Center"
FontSize="30"
Text="2"></TextBlock>
</Border>
</Grid>
<Grid Height="80"
Width="70">
<Border BorderBrush="Aqua"
BorderThickness="1"
Height="74"
Width="70">
<TextBlock HorizontalAlignment="Center"
VerticalAlignment="Center"
FontSize="30"
Text="3"></TextBlock>
</Border>
</Grid>
<Grid Height="80"
Width="70">
<Border BorderBrush="Aqua"
BorderThickness="1"
Height="74"
Width="70">
<TextBlock HorizontalAlignment="Center"
VerticalAlignment="Center"
FontSize="30"
Text="4"></TextBlock>
</Border>
</Grid>
<Grid Height="80"
Width="70">
<Border BorderBrush="Aqua"
BorderThickness="1"
Height="74"
Width="70">
<TextBlock HorizontalAlignment="Center"
VerticalAlignment="Center"
FontSize="30"
Text="5"></TextBlock>
</Border>
</Grid>
<Grid Height="80"
Width="70">
<Border BorderBrush="Aqua"
BorderThickness="1"
Height="74"
Width="70">
<TextBlock HorizontalAlignment="Center"
VerticalAlignment="Center"
FontSize="30"
Text="6"></TextBlock>
</Border>
</Grid>
</StackPanel>
</ScrollViewer>
The code behind
private void ScrollViewer_OnLoaded(object sender, RoutedEventArgs e)
{
ScrollViewer sv = sender as ScrollViewer;
sv.ChangeView(0, 200, null, true);
sv.ViewChanged += sv_ViewChanged;
}
void sv_ViewChanged(object sender, ScrollViewerViewChangedEventArgs e)
{
if (e.IsIntermediate)
{
return;
}
else
{
ScrollViewer sv = sender as ScrollViewer;
double offset = sv.VerticalOffset;
double stackpanelMargin = 200;
double itemHeight = 80;
int selectedIndex = (int)Math.Round((offset + stackpanelMargin) / itemHeight);
//int selectedIndex = int.Parse(indexOfSelectedItem.ToString());
//get selected item
var StackpanelChildren = StackPanel.Children;
int i = 0;
foreach (var stackpanelChild in StackpanelChildren)
{
if (i == selectedIndex)
{
stackpanelChild.Opacity = 1;
}
else
{
stackpanelChild.Opacity = .5;
}
i++;
}
}
}

Windows Phone 8 Nokia Maps: How to change the design of a Microsoft.Phone.Maps.Toolkit Pushpin?

Default, they look like this: http://wp.qmatteoq.com/wp-content/uploads/2013/01/map.png. I would like to have them look like on Nokia Maps, like this: http://www.themobileindian.com/images/nnews/2012/11/9225/Nokia-Maps.jpg, so they take less space. And everytime I tap on them, they will toggle between icon and description.
Lets say I have two templates for pushpin in resources:
<ControlTemplate x:Key="1" TargetType="maptk:Pushpin">
<Grid x:Name="ContentGrid" Background="Transparent" Margin="-4,0,0,0">
<StackPanel >
<Grid Background="Black">
<StackPanel Margin="5,5,0,0">
<i:Interaction.Triggers>
<i:EventTrigger EventName="Tap">
<cmd:EventToCommand PassEventArgsToCommand="False"
CommandParameter="{Binding}"
Command="{Binding ElementName=NearbyMap, Path=DataContext.Pushpin_OnTapCommand}"/>
</i:EventTrigger>
</i:Interaction.Triggers>
<TextBlock Text="{Binding Location}" Foreground="White" />
<StackPanel Orientation="Horizontal">
<TextBlock Text="{Binding LocationName}" Foreground="White" />
<TextBlock Text="-" Foreground="White" Padding="3,0"/>
<TextBlock Text="{Binding LocationName}" Foreground="White" />
</StackPanel>
<TextBlock Text="{Binding LocationName}" Foreground="White" />
<TextBlock Text="{Binding LocationName}" Foreground="White" />
</StackPanel>
</Grid>
<Polygon Fill="Black" Points="0,0 29,0 0,29" Width="29" Height="29" HorizontalAlignment="Left" />
<Grid Height="26" Width="26" Margin="-13,-13,0,0" RenderTransformOrigin="0.5,0.5" HorizontalAlignment="Left">
<Grid.RenderTransform>
<CompositeTransform Rotation="-45"/>
</Grid.RenderTransform>
<Rectangle Fill="Black" HorizontalAlignment="Center" Margin="0" Stroke="White" VerticalAlignment="Center" Height="26" Width="26" />
<Ellipse HorizontalAlignment="Center" Height="16" Margin="0" VerticalAlignment="Center" Fill="Green" Width="16" />
</Grid>
</StackPanel>
</Grid>
</ControlTemplate>
<ControlTemplate TargetType="maptk:Pushpin" x:Key="2">
<Grid Height="26" Width="26" Margin="-13,-13,0,0" RenderTransformOrigin="0.5,0.5" >
<Grid.RenderTransform>
<CompositeTransform Rotation="-45"/>
</Grid.RenderTransform>
<Rectangle Fill="Black" HorizontalAlignment="Center" Margin="0" Stroke="White" VerticalAlignment="Center" Height="26" Width="26"/>
<Ellipse HorizontalAlignment="Center" Height="16" Margin="0" VerticalAlignment="Center" Fill="Red" Width="16"/>
</Grid>
</ControlTemplate>
and the pushpin control:
<maptk:Pushpin x:Name="PushPins" GeoCoordinate="{Binding Location}" Visibility="Visible" Content="{Binding LocationName}" Template="{StaticResource 2}"/>
How can I switch between them with some triggers or something?
#Rares found another solution, that works great in my case...
So the general issue here is just, how to switch/change the design when tapping the pushpin.
Well it seems that when you add the pushpins to the map they get their design from the toolkit, but you still are able to change that by setting the Style propery in code!
So if you hook up each pushpin to a pushpin tap event you can just do the following in your code behind of the XAML page:
private void Pushpin_Tap(object sender, System.Windows.Input.GestureEventArgs e)
{
((Pushpin)sender).Style = Application.Current.Resources["PushpinStyle"] as Style;
}
Provided you created a PushpinStyle inside a resourcedictionary that has a Pushpin as TargetType.
To be able to reset the design when pushing on another pushpin, I just keep a reference to the pushpin pressed and reset it's style before changing the style of the newly pressed one!
Works great for me...
You can use a general trick to modify the look of TK components. This can be used for nearly all TK components.
All TK components have styles (defined in XAML), these are not settable via code. But you can override the style in your applicatoin (keep in mind, you override the style in general, so if you modify e.g. pushpin styles, all pushpins inside your app will look like that)
A bit more in detail:
a) Get the TK source from https://phone.codeplex.com/sourcecontrol/latest
b) Have a look into Themes/Generic.xaml
c) Next to the last element, you see the style definition for the pushpin.
Starts with:
<!-- Default Style used for Pushpin -->
<Style TargetType="maptk:Pushpin">
...
d) Copy this style (or you can write it from scratch of course) and modify the style to whatever you like
e) Add this modified code snippet to your Application.Resources (e..g. the Application.Resources section in your App.xaml)
Keep in mind, you also need to reference the right TK namespace.
For pushpin, you need to include:
xmlns:maptk="clr-namespace:Microsoft.Phone.Maps.Toolkit"
Now your app uses the locally overriden style for your pushpin.
Btw: Since TK is Ms-PL licensed, keep in mind that there are probably license restrictions if you take the original source code from MSFT.
I personally found it easier to not use the toolkit for pushpins. Instead I wrote a user control "PushPinUC" that I designed how I wanted it. The UserControl subscribes to the Tap event - so I can expand/retract when it's pressed.
You can add user controls to your Map control using the following code.
private void BindPushpins(IEnumerable<PushpinIVM> pushpins)
{
foreach (var pushpin in pushpins)
{
var pushPinUC = new PushpinUC { Pushpin = pushpin };
var mapOverlay = new MapOverlay { GeoCoordinate = pushpin.Location, Content = pushPinUC };
var mapLayer = new MapLayer { mapOverlay };
Map.Layers.Add(mapLayer);
}
}
I found a solution: add only one control template to the pushpins. The stackpanel is the pushpin with the textbox and the grid before the stackpanel is the pushpin without the textbox. The stackpanel is with visibility collapsed. As you can see there are 2 triggers for the tap event, where i just set the visibility of the pushpin with the textbox to visible or collapsed. You can use any image for the pushpins.
<ctrls:BaseUserControl.Resources>
<ControlTemplate x:Key="PushPinTemplate" TargetType="maptk:Pushpin">
<Grid x:Name="ContentGrid" Background="Transparent" Margin="-4,0,0,0">
<Grid Height="40" Width="30" Margin="-13,-13,0,0" RenderTransformOrigin="0.5,0.5" >
<Image Source="/Assets/Images/push1.png" Width="40" Height="40">
<i:Interaction.Triggers>
<i:EventTrigger EventName="Tap">
<cmd:EventToCommand PassEventArgsToCommand="True"
Command="{Binding ElementName=NearbyMap, Path=DataContext.Rectangle_OnTapCommand}"/>
</i:EventTrigger>
</i:Interaction.Triggers>
</Image>
</Grid>
<StackPanel x:Name="DetailsPanel" Visibility="{Binding Path=Visibility}">
<Grid x:Name="TestGrid" Background="Black">
<StackPanel Margin="5,5,0,0">
<!--TextBlock tap-->
<i:Interaction.Triggers>
<i:EventTrigger EventName="Tap">
<cmd:EventToCommand PassEventArgsToCommand="True"
Command="{Binding ElementName=NearbyMap, Path=DataContext.Pushpin_OnTapCommand}"/>
</i:EventTrigger>
</i:Interaction.Triggers>
<TextBlock Text="{Binding LocationName}" Foreground="White" FontSize="25"/>
<StackPanel Orientation="Horizontal">
<TextBlock Text="{Binding StreetName}" Foreground="White" />
<TextBlock Text="{Binding StreetNumber}" Foreground="White" />
</StackPanel>
<StackPanel Orientation="Horizontal">
<TextBlock Text="{Binding DistanceToDisplay}" Foreground="White" />
</StackPanel>
</StackPanel>
</Grid>
<Polygon Fill="Black" Points="0,0 29,0 0,29" Width="29" Height="29" HorizontalAlignment="Left" Visibility="Visible"/>
<Grid Height="40" Width="30" Margin="-13,-13,0,0" RenderTransformOrigin="0.5,0.5" HorizontalAlignment="Left">
<Image Source="/Assets/Images/push2.png" Width="40" Height="40">
<i:Interaction.Triggers>
<i:EventTrigger EventName="Tap">
<cmd:EventToCommand PassEventArgsToCommand="True"
Command="{Binding ElementName=NearbyMap, Path=DataContext.Rectangle_OnTapCommand}"/>
</i:EventTrigger>
</i:Interaction.Triggers>
</Image>
</Grid>
</StackPanel>
</Grid>
</ControlTemplate>
</ctrls:BaseUserControl.Resources>
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
<maps:Map x:Name="NearbyMap"
Center="{Binding MapCenter, Mode=TwoWay}"
ZoomLevel="15"
dp:MapPushPinDependency.ItemsSource="{Binding Path=Locations, Mode=OneWay}"
>
<i:Interaction.Triggers>
<i:EventTrigger EventName="Tap">
<cmd:EventToCommand PassEventArgsToCommand="True"
Command="{Binding ElementName=NearbyMap, Path=DataContext.Map_OnTapCommand}"/>
</i:EventTrigger>
</i:Interaction.Triggers>
<maptk:MapExtensions.Children>
<maptk:MapItemsControl Name="StoresMapItemsControl">
<maptk:MapItemsControl.ItemTemplate>
<DataTemplate>
<maptk:Pushpin x:Name="PushPins" GeoCoordinate="{Binding Location}" Visibility="Visible" Content="{Binding LocationName}" Template="{StaticResource PushPinTemplate}"/>
</DataTemplate>
</maptk:MapItemsControl.ItemTemplate>
</maptk:MapItemsControl>
<maptk:UserLocationMarker x:Name="UserLocationMarker" Visibility="Visible" GeoCoordinate="{Binding MyLocation}"/>
</maptk:MapExtensions.Children>
</maps:Map>
</Grid>
#Depechie
private void RectangleTapAction(GestureEventArgs e)
{
var pushpinControl = TryFindParent<Pushpin>(e.OriginalSource as UIElement);
var pushpin = (pushpinControl as FrameworkElement).DataContext as PushPinModel;
Locations.Where(t => t.Id != pushpin.Id).ToList().ForEach(t => t.Visibility = Visibility.Collapsed);
pushpin.Visibility = pushpin.Visibility == Visibility.Visible ? Visibility.Collapsed : Visibility.Visible;
e.Handled = true;
}
Locations is an ObservableCollection and there is a Linq where I hide the textbox for other pushpins. PushPinModel has an attribute representing the visibility.