How can apply the templateBinding on image button in silverlight - windows-phone-7

I am new on using Sliverlight. Hope someone can help me. I need the image buttons to show the order is on the complete or process status. The click event functions of these two are same to navigate the same page. Currently I created two customer Image Button on App.xaml because the Source of this image cannot do “TemplateBinding” ; the button doesn’t has this property. Is it a better way to do it? If so, would you provide the code or link, so I can learn from it? Thanks.
There is my code:
<Style x:Key="btnComplete" TargetType="Button" >
<Setter Property="Template">
<Setter.Value>
<ControlTemplate>
<StackPanel>
<Image Height="50" Width="120" Stretch="none" Source="../images/btnComplete.png"/>
</StackPanel>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>

The simplest way to achive this is to create a transparent controltemplate for the button and add image as content to the button anywhere you want.
The button code in your page will be like below.
<Button Height="100" Width="100" Style="{StaticResource TransparentButtonStyle}" Click="TwitterBtn_Click">
<Image Height="100" Source="YourIcon.png" Width="100"/>
</Button>
And the TransparentButtonStyle can be declared in App.xaml . Thats all!
<Style x:Key="TransparentButtonStyle" TargetType="Button">
<Setter Property="Background" Value="Transparent" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<ContentControl x:Name="ContentContainer" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}"
Foreground="{TemplateBinding Foreground}" HorizontalContentAlignment="Stretch" VerticalContentAlignment="Stretch" />
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>

Here's an implementation of ImageButton for wp7. I've used this example and modified it for various things:
http://silvergeek.net/2011/01/14/imagebutton-control-for-win-phone-7/
Also you can check out the Codeing4Fun controls & source, specifically the buttons.
http://coding4fun.codeplex.com/
update: Telerik has an ImageButton control for wp7 now as well.

Related

Windows Phone custom button click "area"

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

How to Navigate to another page when click on layout in app.xaml.cs page?

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));

Get System.Reflection.TargetInvocationException when I apply the Style on my User Control

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">

How can i set the background of a grid?

Im playing around with styles, and want to set the background of the Grid, something like this:
<Style TargetType="Grid">
<Setter Property="Background" Value="Background.png" />
</Style>
But this does not work, what is the correct way... and how could I do it like I do it with classes in css as I want it to affect every Grid, the one the wraps the page?
You can set the background property directly like so.
<Grid x:Name="ContentPanel" Style="{StaticResource GridStyle1}">
<Grid.Background>
<ImageBrush Stretch="Fill" ImageSource="/BackgroundImage.png"/>
</Grid.Background>
</Grid>
If you want to create a style resource, you can set the value like so
<phone:PhoneApplicationPage.Resources>
<Style x:Key="GridStyle1" TargetType="Grid">
<Setter Property="Background">
<Setter.Value>
<ImageBrush ImageSource="/BackgroundImage.png" Stretch="Fill"/>
</Setter.Value>
</Setter>
</Style>
</phone:PhoneApplicationPage.Resources>
<Grid Style="{StaticResource GridStyle1}"/>
I recommend using Expression Blend to help you to discover how to work with styles. It will generate control templates for you so you can see how they are structured.
you can do it like this
<Grid x:Name="myGrid">
<Grid.Background>
<ImageBrush Stretch="Fill" ImageSource="Assets/myimage.png"/>
</Grid.Background>
</Grid>

How can I make something like this? (Tiles inside the app) Windows phone

I'm sorry if the question title wasnt clear, but I'm trying to make something like this. I don't know if they are tiles or images inside a WrapControl:
I was thinking of making such thing with a wrap panel and each one of those blocks as a stackpanel. but I'm not sure if thats the right approach.
is there a control to do such thing?
You are on the right track. WrapPanel is the way to go :)
To make each block more interesting, you can take a look at the HubTile control from the latest windows phone toolkit. Whatever controls/panels you are using, just remember the size should be 173*173.
Use a ListBox
In one of my projects I created a ListBox that does all this. The reason that I use a ListBox is because ListBox has a SelectedItem propery which tells me which tile is tapped by the user. Also another reason is ListBoxItems can receive the nice tilt effect.
Baiscally you just need to create a tile-like ListBoxItem style and apply it to the ListBox's ItemContainerStyle, also you need to set the ListBox's ItemsPanel to be a WrapPanel.
How it looks
The ListBoxItem Style
<Style x:Key="TileListBoxItemStyle" TargetType="ListBoxItem">
<Setter Property="HorizontalContentAlignment" Value="Stretch"/>
<Setter Property="VerticalContentAlignment" Value="Stretch"/>
<Setter Property="Padding" Value="0"/>
<Setter Property="FontSize" Value="64"/>
<Setter Property="Margin" Value="12,12,0,0"/>
<Setter Property="Background" Value="{StaticResource PhoneAccentBrush}"/>
<Setter Property="Foreground" Value="White"/>
<Setter Property="Width" Value="173"/>
<Setter Property="Height" Value="173"/>
<Setter Property="HorizontalAlignment" Value="Left"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ListBoxItem">
<Grid>
<Rectangle Fill="{TemplateBinding Background}"/>
<ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
The ListBox
<!-- set its ItemContainerStyle which is the style for each ListBoxItem -->
<ListBox ItemContainerStyle="{StaticResource TileListBoxItemStyle}">
<!-- set its ItemsPanel to be a WrapPanel -->
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<toolkit:WrapPanel />
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
<ListBoxItem>
<Grid>
<TextBlock Text="Messages" />
<StackPanel Orientation="Horizontal" HorizontalAlignment="Center" VerticalAlignment="Center">
<Path Data="M1.4901163E-05,9.8579922 L50.000015,46.316994 L100.00002,9.8579922 L100.00002,62.499992 L1.4901163E-05,62.499992 z M0,0 L100,0 L50,36.458 z" Fill="White" Height="38.125" Stretch="Fill" UseLayoutRounding="False" Width="61" d:IsLocked="True" />
<TextBlock Text="12" Margin="4,0,0,8" />
</StackPanel>
</Grid>
</ListBoxItem>
<ListBoxItem/>
<ListBoxItem/>
<ListBoxItem/>
<toolkit:HubTile Title="Me ☺" Message="..." Notification="new messages!" Source="xxx.jpg" Margin="12,12,0,0" />
</ListBox>
You can see the last item is actually a HubTile.
Hope ths helps! :)

Resources