gistfile1.xml

<UserControl x:Class="Whitepad.Views.ColorButtons"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
             xmlns:ViewModels="clr-namespace:Whitepad.ViewModels" 
             mc:Ignorable="d" d:DataContext="{d:DesignInstance IsDesignTimeCreatable=true, Type={x:Type ViewModels:ColorButtonsViewModel}}" d:DesignHeight="32" d:DesignWidth="128">
    <UserControl.Resources>
        <Style x:Key="MyFocusVisual">
            <Setter Property="Control.Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type Control}">
                        <Grid Margin="8">
                            <Ellipse
                    Name="r1"
                    Stroke="Black"
                    StrokeDashArray="2 2"
                    StrokeThickness="1"/>
                            <Border
                    Name="border"
                    Width="{TemplateBinding ActualWidth}"
                    Height="{TemplateBinding ActualHeight}"
                    BorderThickness="1"
                    CornerRadius="2"/>
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
        <Style x:Key="CircleButton" TargetType="RadioButton">
            <Setter Property="OverridesDefaultStyle" Value="True"/>
            <Setter Property="Margin" Value="0"/>
            <Setter Property="FocusVisualStyle" Value="{StaticResource MyFocusVisual}"/>
            <Setter Property="Background" Value="#FF6DB4EF"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="RadioButton">
                        <Grid>
                            <Ellipse Fill="{TemplateBinding Background}"/>
                            <Ellipse>
                                <Ellipse.Fill>
                                    <RadialGradientBrush>
                                        <GradientStop Offset="0" Color="#00000000"/>
                                        <GradientStop Offset="0.88" Color="#00000000"/>
                                        <GradientStop Offset="1" Color="#80000000"/>
                                    </RadialGradientBrush>
                                </Ellipse.Fill>
                            </Ellipse>
                            <Ellipse Margin="11" x:Name="highlightCircle" >
                                <Ellipse.Fill >
                                    <LinearGradientBrush >
                                        <GradientStop Offset="0" Color="#50FFFFFF"/>
                                        <GradientStop Offset="0.5" Color="#00FFFFFF"/>
                                        <GradientStop Offset="1" Color="#50FFFFFF"/>
                                    </LinearGradientBrush>
                                </Ellipse.Fill>
                            </Ellipse>
                            <ContentPresenter x:Name="content" HorizontalAlignment="Center" VerticalAlignment="Center"/>
                        </Grid>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsPressed" Value="True">
                                <Setter TargetName="highlightCircle" Property="Fill">
                                    <Setter.Value>
                                        <LinearGradientBrush StartPoint="0.3,0" EndPoint="0.7,1">
                                            <GradientStop Offset="0" Color="#50FFFFFF"/>
                                            <GradientStop Offset="0.5" Color="#00FFFFFF"/>
                                            <GradientStop Offset="1" Color="#50FFFFFF"/>
                                        </LinearGradientBrush>
                                    </Setter.Value>
                                </Setter>
                                <Setter TargetName="content" Property="RenderTransform">
                                    <Setter.Value>
                                        <TranslateTransform Y="0.5" X="0.5"/>
                                    </Setter.Value>
                                </Setter>
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </UserControl.Resources>
    <ListBox ItemsSource="{Binding Path=Colors}" IsSynchronizedWithCurrentItem="True" SelectedValue="{Binding Path=CurrentColor}" Background="{x:Null}" Foreground="{x:Null}" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" IsHitTestVisible="False" IsTextSearchEnabled="False" BorderBrush="{x:Null}">
        <ListBox.ItemsPanel>
            <ItemsPanelTemplate>
                <WrapPanel IsItemsHost="True" IsHitTestVisible="False" />
            </ItemsPanelTemplate>
        </ListBox.ItemsPanel>
        <ListBox.ItemTemplate>
            <DataTemplate>
                <RadioButton GroupName="colors"  Style="{StaticResource CircleButton}" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Margin="0" VerticalContentAlignment="Stretch" HorizontalContentAlignment="Stretch" Background="{Binding}"></RadioButton>
            </DataTemplate>
        </ListBox.ItemTemplate>
    </ListBox>
</UserControl>