i have read a lot about this argument but i can't find a solution by myself about my specific problem.
I have create a custom button style in xaml (a circle with a letter inside) for a personal keyboard integrated into my app; the problem in that: the click event is lanched only when pressed the letter but i want make all button area sensible.
Here is my code:
<Style x:Key="ButtonStyle" TargetType="Button">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Grid>
<Border CornerRadius="100"
BorderThickness="3"
BorderBrush="Black"
Margin="1"
Padding="0">
<Grid x:Name="ContentContainer">
<TextBlock Text="{TemplateBinding Content}" HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Grid>
</Border>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
<Button HorizontalAlignment="Left" VerticalAlignment="Top" Click="KeyboardButton_Click" Style="{StaticResource ButtonStyle}" Content="Q" MinWidth="40" MinHeight="40" />
private void KeyboardButton_Click(object sender, RoutedEventArgs e)
{
....
}
I think that you have no background set, so the button area is invisible for touch. Try to set "Background"="Transparent" in outside Border
Related
It's a simple app. It show dynamic multiple pushpins based on data binding.
When user tap pushpin, the info box will show above as show in the picture.
When user tap the pushpin again. The infobox will collapsed.
And if user tap any area in the map which is not pushpin. All pushpins's infoboxes will collapsed.
The other thing is; when infobox is tapped, it will navigate into the detail page of that location.
This is my resource section.
<phone:PhoneApplicationPage.Resources>
<ControlTemplate x:Key="currentPushPin" TargetType="my:Pushpin">
<Grid x:Name="ContentGrid"
Width="58"
Height="76"
Margin="0">
<Image Source="images/currentPin.png" Stretch="Fill"/>
</Grid>
</ControlTemplate>
<ControlTemplate x:Key="normalPushPin" TargetType="my:Pushpin">
<StackPanel>
<ContentPresenter x:Name="content" HorizontalAlignment="Center"/>
<Path Data="M0,0 L0,1 L1,0"
Fill="Black" Stretch="Fill" Margin="15,0" Height="12"
Width="18" Visibility="{Binding RelativeSource={RelativeSource TemplatedParent},
Path=Content.Visibility, Mode=TwoWay}" HorizontalAlignment="Left" />
<Image Source="images/Pin.png" Stretch="None" HorizontalAlignment="Left"/>
</StackPanel>
</ControlTemplate>
<DataTemplate x:Key="LogoTemplate">
<my:Pushpin Background="#FFB6DE2E" Location="{Binding location}" Tap="Pushpin_Tap">
<my:Pushpin.Content>
<Border Background="Black" Width="130" Visibility="Collapsed" x:Name="border" HorizontalAlignment="Center" >
<StackPanel>
<TextBlock TextAlignment="Center" Text="{Binding title}"/>
</StackPanel>
</Border>
</my:Pushpin.Content>
</my:Pushpin>
</DataTemplate>
</phone:PhoneApplicationPage.Resources>
This is my Map and MapItemControl.
<my:Map ZoomLevel="10" Margin="0,-21,0,0" Name="myMap" CredentialsProvider="AsbJ8nhHrawCJNpgYLyPRSunojuLOKcZtMj_ZUEgEGW5dSsczqrQHDZwbi0i2bFY" Tap="map_Tap">
<my:Pushpin Name="currentPin" Template="{StaticResource currentPushPin}" Margin="0,-22,0,0">
</my:Pushpin>
<my:MapItemsControl ItemTemplate="{StaticResource LogoTemplate}" ItemsSource="{Binding PushpinCollection}" >
</my:MapItemsControl>
</my:Map>
The question is what code I should write in these event handlers?
Another question is how can I make infoboxes navigate to other page if it is tapped.
//Event Handler for pushpins
private void Pushpin_Tap(object sender, System.Windows.Input.GestureEventArgs e)
{
//What I should write here?
}
private void map_Tap(object sender, System.Windows.Input.GestureEventArgs e)
{
//What I should write here?
}
Thanks !!!
I know this ia rather late, but to save some pain for people who have similar issues -
Take a look at http://igrali.com/2012/01/07/show-a-tooltip-for-tapped-pushpin-on-windows-phone/
It may give you some guidance on how to proceed.
How to Navigate to another page when click on arrow in the pushpin layout?
App.xaml page code:
<Application.Resources>
<Style x:Key="MenuItemsStyle" TargetType="sltkit:MenuItem">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="sltkit:MenuItem">
<StackPanel>
<TextBlock Text="{Binding Name}"
TextWrapping="Wrap"
Margin="24,0"
FontSize="26"/>
<TextBlock Text="{Binding Description}"
TextTrimming="WordEllipsis"
Margin="24,0"
FontSize="22"/>
<TextBlock Text="{Binding DatetimeAdded}"
TextTrimming="WordEllipsis"
Margin="24,0"
FontSize="22"/>
<Image Source="/MyBuddies;component/Images/decline.png" Height="20" Width="20" Margin="200,0" Stretch="Fill" Name="imgDecline" >
</Image>
</StackPanel>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="MenuStyle" TargetType="sltkit:ContextMenu">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate>
<Border CornerRadius="8" Margin="24"
BorderBrush="Green" BorderThickness="2">
<Border.Background>
<LinearGradientBrush
StartPoint="0.5,0" EndPoint="0.5,1">
<GradientStop Color="White"
Offset="0.0"/>
<GradientStop Color="LightBlue"
Offset="0.5"/>
</LinearGradientBrush>
</Border.Background>
<ItemsPresenter />
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Application.Resources>
in mainpage.xaml
<my:MapItemsControl.ItemTemplate>
<DataTemplate>
<my:Pushpin
Background="Blue"
Location="{Binding Location}" Tap="Pushpin_Tap">
<sltkit:ContextMenuService.ContextMenu>
<sltkit:ContextMenu IsZoomEnabled="False">
<sltkit:MenuItem Style="{StaticResource MenuItemsStyle}"/>
</sltkit:ContextMenu>
</sltkit:ContextMenuService.ContextMenu>
</my:Pushpin>
</DataTemplate>
</my:MapItemsControl.ItemTemplate>
</my:MapItemsControl>
tap on pushpin displaying description .Need to place one arrow in that layout when click on that pass some values to another page.how to acheive this?please tell me...
It is not a good practice to write some UI code in App.xaml. App.xaml and App.xaml.cs are intended for handling the app lifetime events like Launching, Closing, Activated and Deactivated events and for sharing some global data.
If you still want to use, then in the code behind you can use the following code to Navigate to another page from App.xaml
(Application.Current.RootVisual as PhoneApplicationFrame).Navigate(new Uri("/AnotherPage.xaml", UriKind.RelativeOrAbsolute));
The following is the layout design when click on pushpin showing the follwing layout.in that image was not visible ?please tell me
<Style x:Key="MenuItemsStyle" TargetType="sltkit:MenuItem">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="sltkit:MenuItem">
<StackPanel>
<TextBlock Text="{Binding Name}"
TextWrapping="Wrap"
Margin="24,0"
FontSize="26"/>
<TextBlock Text="{Binding Description}"
TextTrimming="WordEllipsis"
Margin="24,0"
FontSize="22"/>
<TextBlock Text="{Binding DatetimeAdded}"
TextTrimming="WordEllipsis"
Margin="24,0"
FontSize="22"/>
<Image Source="/MyBuddies;component/Images/decline.png" Height="20" Width="20" Margin="200,0" Stretch="Fill" Name="imgDecline" >
</Image>
</StackPanel>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
all textblock values are binding but image was not appearing in the layout.please tell me.
You need to have the image set as a Resource in the project for it to display.
I think they are typically added as content items.
HTH
Rupert
If your image's Build Action is "Resource" then you can access it in the way you specified.
check this link to know more about build types and their usage.
I created a user control which applied the Style. After I applied the Style, the design view shows the error message "System.Reflection.TargetInvocationException". However, the application can run. Will it be a problem if I let this error on the page? How can I solve it?
There is the code on my user control:
<Button x: Name=btnDescription1" Click="btnDescription1_Click" Grid.Row="0"
Grid.Column="1" Style="{StaticResource btnDescription }" />
The code on myApp.xmal:
<Style x:Key="btnDescription" TargetType="Button">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate>
<StackPanel>
<TextBlock Text="{TemplateBinding Content}" TextAlignment="Left" TextWrapping="Wrap"/>
</StackPanel>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Try setting the target type of your control template:
<ControlTemplate TargetType="Button">
I have a list box that uses a canvas in the ItemsPanel to lay out the items using binding on the Margin, this all works great. However clicking on the list box only fires once and always returns the last item in the listbox.
The Code:
<Grid>
<ListBox Name="lstItems" ItemsSource="{Binding Itemss}" Width="Auto" Height="497" Margin="0,40,0,10" SelectionChanged="ListBox_SelectionChanged">
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<Canvas Name="cnvItems">
</Canvas>
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
<ListBox.ItemTemplate>
<DataTemplate>
<Grid Margin="{Binding XYMargin}">
<Border BorderBrush="Silver" BorderThickness="5" Height="{Binding XYWidth}" Width="{Binding XYWidth}" HorizontalAlignment="Left" Margin="0,0,0,0" Name="border5" VerticalAlignment="Top" Background="#81FFFFFF" CornerRadius="10" />
<StackPanel Margin="5,5,0,0" HorizontalAlignment="Center" Orientation="Horizontal">
<TextBlock Margin="0,0,0,0" Width="{Binding XYWidth}" Text="{Binding Label1}" TextAlignment="Left" FontSize="30" />
</StackPanel>
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</Grid>
Any ideas why I only get the last item in the list?
If you're using the Canvas to do layout, it is laying out the items in an ItemContainerStyle one on top of another, so the last item to be put in the canvas will be the only one visible. Think of laying a set of glass panes on top of one another and your items are simply drawing lower and lower on each new glass. You can still only touch the top glass, even though the item is drawn at the bottom.
Solution:
Try moving the
Margin="{Binding XYMargin}"
out of your data template and putting into your ItemContainerStyle.
Example: (simplified for clarity):
<ListBox.ItemContainerStyle>
<Style TargetType="ListBoxItem">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ListBoxItem">
<Border x:Name="LayoutRoot"
Margin="{Binding XYMargin}">
<ContentControl
x:Name="ContentContainer"
ContentTemplate="{TemplateBinding ContentTemplate}"
Content="{TemplateBinding Content}"
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ListBox.ItemContainerStyle>