我正在开发一个位置感知应用,我希望自定义图钉具有图像,当您点击图像时,会添加一个标签。我尝试了几种解决方案......
我从这篇文章开始:http://igrali.wordpress.com/2011/12/06/making-a-custom-windows-phone-bing-pushpin-from-an-image/
<ControlTemplate
x:Key="PushpinMe"
TargetType="maps:Pushpin">
<Grid
Name="PushpinMeGrid"
Height="50"
Width="50"
HorizontalAlignment="Center"
VerticalAlignment="Center">
<Image
x:Name="PushpinMeImage"
Height="50"
Width="50"
Source="Pushpins/pushpinSeaplane.png" />
<TextBlock Text="{Binding Source=}"
</Grid>
</ControlTemplate>
然后我尝试将图像包裹在一个按钮中,但这只是使图钉基本上不可见。然后我尝试使用我之前的一个应用程序中的控件模板,然后修改它,并提出了这个:
<Button
Name="PushpinButton"
Click="Button_Click">
<Button.Style>
<Style
TargetType="Button">
<Setter
Property="Template">
<Setter.Value>
<ControlTemplate
TargetType="Button">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition
Width="*" />
<ColumnDefinition
Width="*" />
</Grid.ColumnDefinitions>
<Image
Grid.Column="0"
Grid.Row="0"
Grid.RowSpan="2"
Height="50"
Width="50"
Source="Pushpins/pushpinSeaplane.png" />
<Grid
Grid.Column="1">
<Grid.RowDefinitions>
<RowDefinition
Height="39" />
<RowDefinition
Height="*" />
</Grid.RowDefinitions>
<Grid
Grid.Row="0"
Background="Black">
<TextBlock
Grid.Row="0"
Foreground="White"
Text="{Binding ElementName=me,
Path=Content}"
TextWrapping="Wrap"
Margin="5" />
</Grid>
</Grid>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Button.Style>
</Button>
</ControlTemplate>
仍然不是赢家 - 我无法绑定按钮的内容,因此也无法绑定文本块。
会有一系列图钉,不同的图像和不同的标签,所以理想情况下,我想提出一个我可以使用的模板,并从代码中绑定图像和标签。按钮的单击事件的代码就像使文本块可见或折叠一样简单。
我知道我的第二个例子非常丑陋,但我试图使视觉效果正确 - 我将根据视觉效果的需要对其进行修改,但目前,我需要弄清楚如何绑定图像和代码中的文本。按钮单击事件现在仅适用于消息框(以显示它已注册click事件)。
感谢您的协助。
答案 0 :(得分:0)
听起来像一个有趣的项目!在使用类似于以下的声明之前,我已经在按钮内的嵌套内容控件上实现了数据绑定。因此,在您的情况下,推针集合将绑定到项目控件,每个推针对象提供其相应按钮的数据(包括按钮的嵌套图像和文本块)。
让我们来看一个简单的例子,我希望能够指导你朝着正确的方向前进。
从这里开始,您可以在您选择的资源字典中定义按钮模板的示例。请注意图像上的可见性绑定和文本块上的文本绑定,这些属性将位于我们稍后定义的Pushpin_ViewModel上:
<Style x:Name="PushpinButtonStyle" TargetType="Button">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="FocusStates">
<VisualState x:Name="Focused"/>
<VisualState x:Name="Unfocused"/>
</VisualStateGroup>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal" />
<VisualState x:Name="MouseOver" />
<VisualState x:Name="Pressed"/>
<VisualState x:Name="Disabled"/>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Image Grid.Column="0" Grid.Row="0" Grid.RowSpan="2" Height="50" Width="50" Source="Pushpins/pushpinSeaplane.png" Visibility="{Binding PushpinImageVisibility}" />
<Grid Grid.Column="1">
<Grid.RowDefinitions>
<RowDefinition Height="39" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid Grid.Row="0" Background="Black">
<TextBlock Grid.Row="0" Foreground="White" Text="{Binding PushpinLabelText}" TextWrapping="Wrap" Margin="5" />
</Grid>
</Grid>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
在显示图钉的主视图中,您可能有某种项目控件负责显示图钉。以下是此类项目控件的示例,其中数据模板是具有两个重要功能的按钮:1)我们在上面定义的按钮样式,以及2)将在相应的图钉视图模型上调用切换方法的单击事件:
<ItemsControl ItemsSource="{Binding Pushpins}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<Button Name="PushpinButton" Click="pushpinButton_Click" DataContext="{Binding}" Style="{StaticResource PushpinButtonStyle}" />
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
private void pushpinButton_Click(object sender, RoutedEventArgs e)
{
Pushpin_ViewModel pushpin_ViewModel = ((Button)sender).DataContext as Pushpin_ViewModel;
pushpin_ViewModel.TogglePushpinVisibility();
}
以下视图模型类将表示主视图的数据上下文(包含我们在上面定义的项控件的数据上下文)。这里我们有一些用于填充项目控件的图钉集合:
public class PrimaryPushpinView_ViewModel : INotifyPropertyChanged
{
public PushpinView_ViewModel()
{
this.Pushpins.Add(new Pushpin_ViewModel() { PushpinLabelText="First Pushpin" });
}
public List<Pushpin_ViewModel> Pushpins
{
get { return pushpins; }
set
{
if (value != pushpins)
{
pushpins = value;
OnPropertyChanged("Pushpins");
}
}
}
private List<Pushpin_ViewModel> pushpins = new List<Pushpin_ViewModel>();
}
最后这里是图钉视图模型的表示。每个图钉在您的图钉集合中会有一个此类的实例:
public class Pushpin_ViewModel : INotifyPropertyChanged
{
public Visibility PushpinVisibility
{
get { return pushpinVisibility; }
set
{
if (value != pushpinVisibility)
{
pushpinVisibility= value;
OnPropertyChanged("PushpinVisibility");
}
}
}
private Visibility pushpinVisibility;
public String PushpinLabelText
{
get { return pushpinLabelText; }
set
{
if (value != pushpinLabelText)
{
pushpinLabelText= value;
OnPropertyChanged("PushpinLabelText");
}
}
}
private String pushpinLabelText;
public void TogglePushpinVisibility()
{
this.PushpinVisibility = this.PushpinVisibility.Equals(Visibility.Visible) ? Visibility.Collapsed : Visibility.Visible;
}
}
抱歉,今天疯狂的一天回到你身边需要一段时间,希望这会有所帮助。