So you are creating your latest windows phone app and would like to add some fancy designed icons or images… But instead of just showing these, they’ll need to react as a button! By the way, we normally use vector data, but that is not always to our disposal. It could be we have a nicely designed icon in several resolutions.
Well that’s easy you think, we’ll just add a button and put that image inside it – here is the code
1 |
<span id="lnum1" style="color: #606060"> 1:</span> <Button> |
1 |
<span id="lnum2" style="color: #606060"> 2:</span> <Image Source=<span style="color: #006080">"../Assets/May_The_4th_logo_BLK_BG.jpg"</span>></Image> |
1 |
<span id="lnum3" style="color: #606060"> 3:</span> </Button> |
But when you just use it like this, the image won’t look good! It will have the default button border around it and that’s not something you want.
Than you think a little bit about it, maybe search the internet and yes, behold Jeff Wilcox used something back in the wp7 days that could be usefull! An EmptyButtonStyle, it’s a button style stripped to the bare minimum! So you add that and use it – here is the code
1 |
<span id="lnum1" style="color: #606060"> 1:</span> <Button Style=<span style="color: #006080">"{StaticResource EmptyButtonStyle}"</span>> |
1 |
<span id="lnum2" style="color: #606060"> 2:</span> <Image Source=<span style="color: #006080">"../Assets/May_The_4th_logo_BLK_BG.jpg"</span>></Image> |
1 |
<span id="lnum3" style="color: #606060"> 3:</span> </Button> |
1 |
<span id="lnum1" style="color: #606060"> 1:</span> <Style x:Key=<span style="color: #006080">"EmptyButtonStyle"</span> TargetType=<span style="color: #006080">"ButtonBase"</span>> |
1 |
<span id="lnum2" style="color: #606060"> 2:</span> <Setter Property=<span style="color: #006080">"Background"</span> Value=<span style="color: #006080">"Transparent"</span> /> |
1 |
<span id="lnum3" style="color: #606060"> 3:</span> <Setter Property=<span style="color: #006080">"Padding"</span> Value=<span style="color: #006080">"0"</span> /> |
1 |
<span id="lnum4" style="color: #606060"> 4:</span> <Setter Property=<span style="color: #006080">"Template"</span>> |
1 |
<span id="lnum5" style="color: #606060"> 5:</span> <Setter.Value> |
1 |
<span id="lnum6" style="color: #606060"> 6:</span> <ControlTemplate TargetType=<span style="color: #006080">"ButtonBase"</span>> |
1 |
<span id="lnum7" style="color: #606060"> 7:</span> <Border Background=<span style="color: #006080">"{TemplateBinding Background}"</span> |
1 |
<span id="lnum8" style="color: #606060"> 8:</span> Padding=<span style="color: #006080">"{TemplateBinding Padding}"</span>> |
1 |
<span id="lnum9" style="color: #606060"> 9:</span> <ContentPresenter |
1 |
<span id="lnum10" style="color: #606060"> 10:</span> HorizontalAlignment=<span style="color: #006080">"{TemplateBinding HorizontalContentAlignment}"</span> |
1 |
<span id="lnum11" style="color: #606060"> 11:</span> VerticalAlignment=<span style="color: #006080">"{TemplateBinding VerticalContentAlignment}"</span> |
1 |
<span id="lnum12" style="color: #606060"> 12:</span> Content=<span style="color: #006080">"{TemplateBinding Content}"</span> |
1 |
<span id="lnum13" style="color: #606060"> 13:</span> ContentTemplate=<span style="color: #006080">"{TemplateBinding ContentTemplate}"</span>/> |
1 |
<span id="lnum14" style="color: #606060"> 14:</span> </Border> |
1 |
<span id="lnum15" style="color: #606060"> 15:</span> </ControlTemplate> |
1 |
<span id="lnum16" style="color: #606060"> 16:</span> </Setter.Value> |
1 |
<span id="lnum17" style="color: #606060"> 17:</span> </Setter> |
1 |
<span id="lnum18" style="color: #606060"> 18:</span> </Style> |
But again you’ll notice it’s not perfect… ok it has no visual references anymore to a button, but pressing the image will now also no longer give a visual indication!
On wp8, pressing a button, the content will slightly grey out to tell the user he’s pressing that button! So we need to check the state of the button to play with the opacity and enable this visual effect again! Behold the ImageButtonStyle
1 |
<span id="lnum1" style="color: #606060"> 1:</span> <Button Style=<span style="color: #006080">"{StaticResource ImageButtonStyle}"</span>> |
1 |
<span id="lnum2" style="color: #606060"> 2:</span> <Image Source=<span style="color: #006080">"../Assets/May_The_4th_logo_BLK_BG.jpg"</span>></Image> |
1 |
<span id="lnum3" style="color: #606060"> 3:</span> </Button> |
1 |
<span id="lnum1" style="color: #606060"> 1:</span> <Style x:Key=<span style="color: #006080">"ImageButtonStyle"</span> TargetType=<span style="color: #006080">"ButtonBase"</span>> |
1 |
<span id="lnum2" style="color: #606060"> 2:</span> <Setter Property=<span style="color: #006080">"Background"</span> Value=<span style="color: #006080">"Transparent"</span>/> |
1 |
<span id="lnum3" style="color: #606060"> 3:</span> <Setter Property=<span style="color: #006080">"Padding"</span> Value=<span style="color: #006080">"0,0,0,0"</span>/> |
1 |
<span id="lnum4" style="color: #606060"> 4:</span> <Setter Property=<span style="color: #006080">"Template"</span>> |
1 |
<span id="lnum5" style="color: #606060"> 5:</span> <Setter.Value> |
1 |
<span id="lnum6" style="color: #606060"> 6:</span> <ControlTemplate TargetType=<span style="color: #006080">"Button"</span>> |
1 |
<span id="lnum7" style="color: #606060"> 7:</span> <Grid x:Name=<span style="color: #006080">"grid"</span> Background=<span style="color: #006080">"Transparent"</span>> |
1 |
<span id="lnum8" style="color: #606060"> 8:</span> <Grid.Projection> |
1 |
<span id="lnum9" style="color: #606060"> 9:</span> <PlaneProjection/> |
1 |
<span id="lnum10" style="color: #606060"> 10:</span> </Grid.Projection> |
1 |
<span id="lnum11" style="color: #606060"> 11:</span> <VisualStateManager.VisualStateGroups> |
1 |
<span id="lnum12" style="color: #606060"> 12:</span> <VisualStateGroup x:Name=<span style="color: #006080">"CommonStates"</span>> |
1 |
<span id="lnum13" style="color: #606060"> 13:</span> <VisualStateGroup.Transitions> |
1 |
<span id="lnum14" style="color: #606060"> 14:</span> <VisualTransition GeneratedDuration=<span style="color: #006080">"0"</span> To=<span style="color: #006080">"Pressed"</span>> |
1 |
<span id="lnum15" style="color: #606060"> 15:</span> <Storyboard> |
1 |
<span id="lnum16" style="color: #606060"> 16:</span> <DoubleAnimation Duration=<span style="color: #006080">"0"</span> To=<span style="color: #006080">"0.75"</span> Storyboard.TargetProperty=<span style="color: #006080">"(UIElement.Opacity)"</span> Storyboard.TargetName=<span style="color: #006080">"ContentContainer"</span> /> |
1 |
<span id="lnum17" style="color: #606060"> 17:</span> </Storyboard> |
1 |
<span id="lnum18" style="color: #606060"> 18:</span> </VisualTransition> |
1 |
<span id="lnum19" style="color: #606060"> 19:</span> </VisualStateGroup.Transitions> |
1 |
<span id="lnum20" style="color: #606060"> 20:</span> <VisualState x:Name=<span style="color: #006080">"Normal"</span>/> |
1 |
<span id="lnum21" style="color: #606060"> 21:</span> <VisualState x:Name=<span style="color: #006080">"MouseOver"</span>/> |
1 |
<span id="lnum22" style="color: #606060"> 22:</span> <VisualState x:Name=<span style="color: #006080">"Pressed"</span>> |
1 |
<span id="lnum23" style="color: #606060"> 23:</span> <Storyboard> |
1 |
<span id="lnum24" style="color: #606060"> 24:</span> <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty=<span style="color: #006080">"Foreground"</span> Storyboard.TargetName=<span style="color: #006080">"ContentContainer"</span>> |
1 |
<span id="lnum25" style="color: #606060"> 25:</span> <DiscreteObjectKeyFrame KeyTime=<span style="color: #006080">"0"</span> Value=<span style="color: #006080">"{StaticResource PhoneBackgroundBrush}"</span>/> |
1 |
<span id="lnum26" style="color: #606060"> 26:</span> </ObjectAnimationUsingKeyFrames> |
1 |
<span id="lnum27" style="color: #606060"> 27:</span> </Storyboard> |
1 |
<span id="lnum28" style="color: #606060"> 28:</span> </VisualState> |
1 |
<span id="lnum29" style="color: #606060"> 29:</span> <VisualState x:Name=<span style="color: #006080">"Disabled"</span>> |
1 |
<span id="lnum30" style="color: #606060"> 30:</span> <Storyboard> |
1 |
<span id="lnum31" style="color: #606060"> 31:</span> <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty=<span style="color: #006080">"Foreground"</span> Storyboard.TargetName=<span style="color: #006080">"ContentContainer"</span>> |
1 |
<span id="lnum32" style="color: #606060"> 32:</span> <DiscreteObjectKeyFrame KeyTime=<span style="color: #006080">"0"</span> Value=<span style="color: #006080">"{StaticResource PhoneDisabledBrush}"</span>/> |
1 |
<span id="lnum33" style="color: #606060"> 33:</span> </ObjectAnimationUsingKeyFrames> |
1 |
<span id="lnum34" style="color: #606060"> 34:</span> </Storyboard> |
1 |
<span id="lnum35" style="color: #606060"> 35:</span> </VisualState> |
1 |
<span id="lnum36" style="color: #606060"> 36:</span> </VisualStateGroup> |
1 |
<span id="lnum37" style="color: #606060"> 37:</span> </VisualStateManager.VisualStateGroups> |
1 |
<span id="lnum38" style="color: #606060"> 38:</span> <ContentControl x:Name=<span style="color: #006080">"ContentContainer"</span> ContentTemplate=<span style="color: #006080">"{TemplateBinding ContentTemplate}"</span> Content=<span style="color: #006080">"{TemplateBinding Content}"</span> Foreground=<span style="color: #006080">"{TemplateBinding Foreground}"</span> HorizontalContentAlignment=<span style="color: #006080">"{TemplateBinding HorizontalContentAlignment}"</span> Padding=<span style="color: #006080">"{TemplateBinding Padding}"</span> VerticalContentAlignment=<span style="color: #006080">"{TemplateBinding VerticalContentAlignment}"</span> Margin=<span style="color: #006080">"0"</span> HorizontalAlignment=<span style="color: #006080">"Center"</span> VerticalAlignment=<span style="color: #006080">"Center"</span>/> |
1 |
<span id="lnum39" style="color: #606060"> 39:</span> </Grid> |
1 |
<span id="lnum40" style="color: #606060"> 40:</span> </ControlTemplate> |
1 |
<span id="lnum41" style="color: #606060"> 41:</span> </Setter.Value> |
1 |
<span id="lnum42" style="color: #606060"> 42:</span> </Setter> |
1 |
<span id="lnum43" style="color: #606060"> 43:</span> </Style> |
So when running the app you’ll notice no difference with the empty button style, until you press it! It will now grey out the content a little bit.
As always a test project can be found on github here: ImageButton project