When creating a Windows Phone 7 application I've encountered a need for a round button with an icon , similar to what the native applications on the phone have:
So, I set on the path of creating one by myself. Since we've been armed with the power of Silverlight we should be able to modify the Button control's template to have a round border instead of rectangle one. So I fired up the Blend, created a new Windows Phone 7 application and dropped a Button control on the page. After that I right-clicked on the button, and selected "Edit Template - Edit Copy" option. You will be presented with the dialog asking about the name of the style. I named it RoundButton. And since I am a developer and I like working with the code better I made the Blend to show the XAML, found the Border in template and changed the CornerRadius to have the value of 100 and modified the Content to be:
<Border x:Name="ButtonBackground" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" CornerRadius="33" Margin="{StaticResource PhoneTouchTargetOverhang}">
<ContentControl x:Name="ContentContainer" Content="{TemplateBinding Content}" RenderTransformOrigin="0.5,0.5">
<ContentControl.RenderTransform>
<ScaleTransform x:Name="buttonScale" />
</ContentControl.RenderTransform>
</ContentControl>
</Border>
<ContentControl x:Name="ContentContainer" Content="{TemplateBinding Content}" RenderTransformOrigin="0.5,0.5">
<ContentControl.RenderTransform>
<ScaleTransform x:Name="buttonScale" />
</ContentControl.RenderTransform>
</ContentControl>
</Border>
All what was left to do is to remove the existing Content from the button and add the Image:
<!--ContentPanel - place additional content here-->
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="0,8,0,-8" >
<Button VerticalAlignment="Top" Style="{StaticResource RoundButton}" Height="72" Width="72" >
<Image Source="appbar.next.rest.png" Height="42" Width="42" />
</Button>
</Grid>
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="0,8,0,-8" >
<Button VerticalAlignment="Top" Style="{StaticResource RoundButton}" Height="72" Width="72" >
<Image Source="appbar.next.rest.png" Height="42" Width="42" />
</Button>
</Grid>
And the result is what we wanted:
No comments:
Post a Comment