Tip for WPF Metro Square Buttons

zune icon

In order to use the icons created by yankoa at deviantart, they have the circle around, it is great for the round buttons but not for the square/rectangle so, here is a tip to magically hide the circle.

Create a resizable ellipse clipped and with a fill using the imagebrush of the icon (that you can reuse with/out the circle).

And the source code for the tip:

<Grid Background="#FF4eb3b9" Width="152" Height="152">
        <Ellipse Margin="0,-10,0,0" Width="152" Height="152" VerticalAlignment="Top" HorizontalAlignment="Left">
            <Ellipse.Fill>
                <ImageBrush ImageSource="/IconTest;component/MB_0019_zune1.png" Stretch="Fill"  />
            </Ellipse.Fill>
            <Ellipse.Clip>
                <EllipseGeometry RadiusX="63" RadiusY="63" Center="76,76"/>
            </Ellipse.Clip>
        </Ellipse>
        <TextBlock VerticalAlignment="Bottom" Margin="11,0,0,11" HorizontalAlignment="Left" Text="Microsoft Zune" Foreground="White" FontFamily="Segoe WP" FontSize="14" />
    </Grid>

If you want optimize it, convert the Grid into a Canvas (I usually do it on WP7 apps).

Another thing I have to do is (awful), get the average color of the original icon and then choose the nearest in the Metro palette.

Advertisements

2 thoughts on “Tip for WPF Metro Square Buttons

    1. Set this:
      [Button] ‘copy the grid xaml code’ [/Button] and then use as a Button, with the Tap,Click or Command events. (Replace [] vith greater and lower character).

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s