前台的代码就是一堆StackPanel放在一个Scrollviewer里，显示效果如下：
Image

public FaceControl()
{
    InitializeComponent();
}

#region Private functions
/// <summary>
/// 点击表情变色
/// </summary>
private void StackPanel_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
{
    StackPanel sp = sender as StackPanel;
    sp.Background = new SolidColorBrush(Color.FromArgb(255, 142, 142, 142));
}

/// <summary>
/// 恢复表情颜色
/// </summary>
private void StackPanel_ManipulationCompleted(object sender, ManipulationCompletedEventArgs e)
{
    StackPanel sp = sender as StackPanel;
    sp.Background = new SolidColorBrush(Color.FromArgb(255, 74, 73, 74));
}

/// <summary>
/// 选择了表情
/// </summary>
private void StackPanel_Tap(object sender, GestureEventArgs e)
{
    StackPanel sp = sender as StackPanel;
    if (sp.Tag != null)
    {
        Helper.Instance.RaiseNewFace(sp.Tag.ToString());
    }
}
#endregion

代码中处理了一些表情控件中需要的事件，用户自定义控件到此就建立完毕。 接下来我们还要一个帮助类，来在主页面中注册选中后的事件。

#region Singleton
private static readonly Helper instance = new Helper( );
public static Helper Instance { get { return instance; } }
private Helper( ) { }
#endregion

#region 表情选取事件
/// <summary>
/// 选取表情事件
/// </summary>
public event EventHandler<TagEventArgs> OnNewFace;

/// <summary>
/// 主动触发事件 选择了一个表情
/// </summary>
/// <param name="faceString">表情对应字符串</param>
public void RaiseNewFace(string faceString)
{
    if (this.OnNewFace != null)
    {
        this.OnNewFace(this, new TagEventArgs { Tag = faceString });
    }
}
#endregion

好了，现在我们可以在主页面中添加控件了。

<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto" />
        <RowDefinition Height="Auto" />
    </Grid.RowDefinitions>
    <TextBox Name="txtContent" AcceptsReturn="True" Grid.Row="0"  Height="150"  TextWrapping="Wrap" />
    <StackPanel Name="facePanel" Visibility="Collapsed" Background="#212021" Grid.Row="1" Margin="-12,70,-12,0" >
        <control:FaceControl x:Name="faceControl" VerticalAlignment="Top" Height="330"/>
    </StackPanel>
</Grid>

xmlns:control="clr-namespace:iconFace"

最后的效果图:
Image Image